Unable to set left with CSS + jQuery

Question

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?

Is there any padding, margin, or border on the element you're trying to update? — Purag
– Purag, Commented Dec 29, 2011 at 10:44
try $('#calendarContainer ul').css('left', (currentIndent - moveWidth) + 'px'); — Dutchie432
– Dutchie432, Commented Dec 29, 2011 at 10:44
can run your localhost url here. share some html over here.. or create a jsfiddle to show your problem. — Niranjan Singh
– Niranjan Singh, Commented Dec 29, 2011 at 10:45
I created a fiddle here jsfiddle.net/cHgHg/7 unfortunately(?) the problem does not occur here — Gluip
– Gluip, Commented Dec 29, 2011 at 11:02

Purag · Accepted Answer · 2011-12-29 10:51:58Z

4

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.

answered Dec 29, 2011 at 10:51

Purag

17.1k4 gold badges57 silver badges78 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Dutchie432 Over a year ago

how would this yield a different result than what was posted?

Gluip Over a year ago

i tried this (replace my css line with this) and now by li does not move at all. I probably don't understand this...

Dutchie432 · Accepted Answer · 2011-12-29 10:55:01Z

0

CSS likes to have units for measurements. Try specifying px

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

answered Dec 29, 2011 at 10:55

Dutchie432

29.3k20 gold badges94 silver badges110 bronze badges

1 Comment

Gluip Over a year ago

adding px does not seem to help

Collectives™ on Stack Overflow

Unable to set left with CSS + jQuery

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related