CODEWITHSUNDEEP
jquerycss
Gluip
Gluip

Reputation: 2987

Unable to set left with CSS + jQuery

I am trying to implement a carousel with JQuery based on http://www.queness.com/post/923/create-a-simple-infinite-carousel-with-jquery. It allmost works OK. Only when i swipe left and right i dont get back to my initial position. By debugging i found out that the left set is not set in my ul element. The code:

Javascript

var container = $('#calendarContainer ul');
var moveWidth = container[0].clientWidth / 3;
var currentIndent = container.position().left;


if (event.type == "swipeleft") {
   $('#calendarContainer ul').css('left', currentIndent - moveWidth);
}
if (event.type == "swiperight") {
   $('#calendarContainer ul').css('left', currentIndent + moveWidth);
}

Html 

<div id="calendarContainer" >
    <ul>
        <li id ="calendarDivLeft">
            <fieldset id="calendarWeekGridLeft" class="ui-grid-a"></fieldset>
        </li>
        <li id ="calendarDiv" >
            <fieldset id="calendarWeekGrid" class="ui-grid-a"></fieldset>
        </li>
        <li id="calendarDivRight">              
            <fieldset id="calendarWeekGridRight" class="ui-grid-a"></fieldset>
        </li>
    </ul>
</div>

CSS

#calendarContainer ul 
{
     width : 300%;
     list-style: none;
     padding:0px;
     left : 0%;
     position:relative;
     margin: 0px;
     padding: 0px;
 }

 #calendarContainer ul li
 { 
     width: 33.333%; 
     float:left;   
     position:relative;
     margin: 0px;
     padding: 0px;
 }

For example if the current left is 5 and I move left by 594px, I would expect to have a left of -589. Instead I get a get a left of 585! If I move right by 595 the left becomes 605 instead of 600.

How is this possible?

Upvotes: 4

Views: 11354

Answers (2)

Dutchie432
Dutchie432

Reputation: 29160

CSS likes to have units for measurements. Try specifying px

$('#calendarContainer ul').css('left', (currentIndent - moveWidth) + 'px');

Upvotes: 0

Purag
Purag

Reputation: 17061

Try this:

$('#calendarContainer ul').css('left', function(index, oldValue){
    var newValue = oldValue - moveWidth;
    return newValue;
});

The css() function can take a function whose argument are the index of the element in the set and the current value of the property that was referenced. It's just a matter of doing the math in this function and returning the new value.

Upvotes: 4

Related Questions