MLS wants two Indian football stars

Major League Soccer(MLS) has expressed interest in two Indian football stars.

 

 

 

 

 

 

 

According to reports,Two of Indian football’s biggest stars — Sunil Chhetri and Steven Dias — were last night handed contracts by US-based FIFA registered agent Eddie Rock and told to sign up at the earliest.Steven Dias has signed the contract,while Sunil is still waiting as he is also expectinga call from Europe.

Advertisements

Carousel using Dojo

For a project i had to make a carousel and i was using Dojo throughout my project. After about two weeks, i hav made one.

UPDATE:
Sorry folks! The site is down for maintenance so i cant post the url here.

The URL that I gave below in one of my comments is now broken. It seems dojo has updated their dojo 1.4.0 to 1.4.3.

Go to this link : http://download.dojotoolkit.org

Choose the the latest release

Then go to  dojox/widget/ and find pager widget.

Final Output :

carousel using dojo

Here is da code :

html code :

<div id="carouselwrap">
<div id="carouselprev" class="traversecontrol"><img src="/img/blank.gif"/></div>
<!--image of the previous arrow-->
<div id="carousel"><!--start of the carousel-->
<div id="carouselscroll" ><!--start of the carouselscroll-->
   <em>
<div class="carouselscrollbox"><!--start of the carouselscrollbox block-->
<div class="carouselscrollerimg">
           <img src="Your image here" /><!--this div contains the image path --></div>
<div class="soundsettitle bmrm_text">
            Lorem Ipsum</div>
<div class="artisttitle bmrm_text">
            Lorem Ipsum</div>
<div class="soundsetdesc bmrm_text">
           - Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
</div>
</em><em><em><!--end of the carouselscrollbox block--></em></em></div>
<div id="carouselnext" class="traversecontrol"><img src="/img/blank.gif"/></div>
<!--image of the next arrow--></div>
<!--repeat the div block wid class 'carouselscrollbox'(in a for loop) as many times to get as many records in da carousel.-->

Javascript code: First step : dojo.require("dojo.fx");

var animationMethod = "chain";
var animG, offsetW, offsetH = null;
var newLeft = 0;
var boxMixin = {duration: 1000};
var carouselscroller ;

//attach events on load
dojo.addOnLoad(function() {
       var prev = dojo.byId('carouselprev');
       var next = dojo.byId('carouselnext');
       carouselscroller = dojo.byId('carouselscroll');
       dojo.connect(prev,"onclick",null,"slideLeft");
       dojo.connect(next,"onclick",null,"slideRight");
});

//sliding to the right
function slideRight() {
       var difference = dojo.byId('carousel').offsetWidth-dojo.byId('carouselscroll').offsetWidth;
       if(newLeft>difference){
           newLeft = newLeft - 200;
           var style = carouselscroller.style;
	   var anim1 = dojo.animateProperty({
	   node: carouselscroller,
	   duration: boxMixin.duration/2,
	   properties: {
		left: { end: newLeft, unit:"px" }
		}
	});

	animG = dojo.fx[animationMethod]([anim1]).play();
         }

}

//sliding to the left
function slideLeft() {
        if(newLeft<0)
        {
   	    newLeft = newLeft + 200;
	    var style = carouselscroller.style;
	    var anim1 = dojo.animateProperty({
	    node: carouselscroller,
	    duration: boxMixin.duration/2,
	    properties: {
		//width: { /* start: boxMixin.startWidth, */ end: boxMixin.endWidth, unit:"px" },
		left: { end: newLeft, unit:"px" }
	     }
	});

   animG = dojo.fx[animationMethod]([anim1]).play();
   }
}
<pre>

CSS Code:


/*soundsets traversal [carousel]*/
#carouselwrap{width:700px;margin:35px 0px}
#carousel{
width: 600px;
height: 230px;
overflow: hidden;
float:left;
position:relative;
}
#carouselscroll{
float:left;
width:2000px !important;
position:absolute;
left:0px;
}
#carouselprev{background:url('/*image left arrow*/') no-repeat;}
#carouselnext{background:url('/*image right arrow*/') no-repeat;}
.traversecontrol{float:left;width:40px;height:45px;margin:70px 0px}
#carouselprev:hover,#carouselnext:hover{cursor:pointer}
.carouselscrollbox{
	float:left;
	border:1px solid #eee;
	margin:9px;
        background:#f6f5f5;
	width:180px;
        text-align:left;
        padding-bottom:10px;
	}

.carouselscrollerimg img{width:140px;height:80px;margin:3px 1px }
<pre>
<pre>

U can change the css accordingly.This is just my way of doing it.