The Main objective here is to make an instant "jump" to the right. I don't want to use .animate(), because it makes a little "flashing" effect - because it is not instant. I think .css() will make an instant "jump" to the right, without flashing effect.

I don't know why this will not work.. Instead of using .css() I actually have to workaround this issue with .animate:

$("#gallery ul").animate({right: posVar},0);

Here is my actual code:

setTimeout(function(){
   var posVar = 2838;        
   $('#gallery ul').css("right", posVar);
}, 300);

What's wrong with that?

CSS:

#gallery ul {
  display:block;
  position:relative;
  width:14000px; /*auto calculated from javascript */
}

The Main objective here is to make an instant "jump" to the right. I don't want to use .animate(), because it makes a little "flashing" effect - because it is not instant. I think .css() will make an instant "jump" to the right, without flashing effect.

I don't know why this will not work.. Instead of using .css() I actually have to workaround this issue with .animate:

$("#gallery ul").animate({right: posVar},0);

Here is my actual code:

setTimeout(function(){
   var posVar = 2838;        
   $('#gallery ul').css("right", posVar);
}, 300);

What's wrong with that?

CSS:

#gallery ul {
  display:block;
  position:relative;
  width:14000px; /*auto calculated from javascript */
}

• javascript
• jquery
• css
• jquery-animate

• What code are you using with animate to make it work? What CSS rules do you have applied? What position are you using? – Matt Commented Jan 6, 2011 at 9:29
• Your using #gallerie in CSS, but #gallery in JS? – Matt Commented Jan 6, 2011 at 9:32
• @Matt: Sorry - just a typo from my side, fixed. Problem still actual. – Tomkay Commented Jan 6, 2011 at 9:34
• 1 "this will not work", what happens exactly? Are you sure the DOM is built? When does the code run? – MatTheCat Commented Jan 6, 2011 at 9:48
• 3 Please provide us with a full code, maybe even wrapped in <script /> tags. I just tried both of your provided examples and they do work. Maybe it's your markup what's wrong. – tomsseisums Commented Jan 6, 2011 at 9:49

4 Answers 4

Css attributes:left, right, top, down will not work with display:block try display:absolute or display:fixed

I dont know what was on my mind when I wrote that answer. I mean to say.... you need position:absolute or position:fixed or position:relative

And I think the problem with your code is there is not "px" at the end...

I have fiddeled it, and here it is http://jsfiddle/Starx/8w6cS/

YOUR CODE IS WORKING HERE IS A PROOF

http://jsfiddle/Starx/8w6cS/1/

AND IF YOU TRYING TO MOVE YOUR ul to 2838px to the right Here is your solution

http://jsfiddle/Starx/8w6cS/2/

You mean position: absolute or position: fixed. It'll work with display block though.

I tried the following code, and it works:

setTimeout(function(){
    var posVar = 100;        
    $('#gallery ul').css({ right: posVar + 'px' });
},300);

It should work. Here’s a jsFiddle with your example code, working fine: http://jsfiddle/mathias/PjQBe/

Please provide us with more code.

Change the CSS as follows:

#gallery ul {
    display:block;
    position:relative;
    right:0px; /*THIS WILL DO THE TRICK FOR JQUERY */
    width:14000px; /*auto calculated from javascript */
}

now your jQuery code will work!