jquery issue (bug?) in IE with .css() manipulation

Question

I have a block of jquery / javascript code that sets the left margin of an image depending on the browser width.

I do some sums to calculate the required left margin and it goes in var $diff.

This code works fine:

$('#background-wrapper>img').attr('alt',$diff);

which demonstrates that the sums are all working fine as the image ends up with the correct value for $diff inserted in its alt attribute. This works on IE, FF, Chrome.

But if I change the code to:

    $('#background-wrapper>img').css('margin-left',$diff);

then firefox and chrome work fine, using $diff as a value for the images left-margin as I intended, but IE throws a run time error and stops running the script, citing an Invalid Argument in jquery file. I'm using jquery 1.3.2.min.

Any ideas?

Heres the code for the full function.

function imageResizeCenter() {
  var $windowh = jQuery(window).height();
  var $windoww = jQuery(window).width();

  var imagesrc = $('#background-wrapper2>img').attr('src');

  var myimage = new Image();

  myimage.src = imagesrc;
  var $width = myimage.width;
  var $height = myimage.height;

  var $ratio = parseInt($width,10)/parseInt($height,10);

  var $newwidth = parseInt($windowh,10)*$ratio;

  var $diff = (parseInt($windoww,10)-parseInt($newwidth,10))/2;
  if($diff<0) $diff=0;
  $('#background-wrapper2>img').attr('height',$windowh).css('margin-left',$diff);

}

Is there anything special about the image or the background-wrapper? I tried this exact script in IE6, IE7, IE8, and FF3, and I didn't get any errors. — attack
– attack, Commented Jan 26, 2010 at 3:33
i dont think theres anything odd... the background div is just a 100% width and height div, absolutely positioned to sit behind the rest of the site. The image is one of a number of images, all but one set to display:none. The end result is a slideshow of full screen (or large centered) images in the background of the site. I used images in a background div, rather than actual background-image css, so that I could make the images preload before transitioning to them with the slideshow. — petesiss
– petesiss, Commented Jan 27, 2010 at 11:06

Harmen · Accepted Answer · 2010-01-25 16:17:04Z

1

Maybe

$('#background-wrapper>img').css('margin-left',$diff + 'px');

answered Jan 25, 2010 at 16:17

Harmen

22.5k4 gold badges57 silver badges77 bronze badges

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

5 Comments

KP. Over a year ago

+1. I would guess the lack of unit is an issue in some browsers.

petesiss Over a year ago

Thanks for the response guys. I've just tried all of those suggestions, and chrome / ff both seem happy with all of those vaients, but IE is still giving the same error- even if I just change the property to marginLeft.

KP. Over a year ago

Can you post your javascript code and markup, or a snippet of it?

KP. Over a year ago

If you set the margin-left to a static value, does the error go away? Such as: $('#background-wrapper>img').css('margin-left','5px');

petesiss Over a year ago

is it because ive used parseInt in the previous code but the .css function needs a string?

Josh Stodola · Accepted Answer · 2010-01-25 16:18:23Z

0

Using Javascript to set CSS properties has a little caveat: Instead of using dashes to separate multi-word properties, you use camelCasing. So margin-left should be marginLeft...

$('#background-wrapper > img').css('marginLeft', $diff);

answered Jan 25, 2010 at 16:18

Josh Stodola

82.8k48 gold badges187 silver badges229 bronze badges

1 Comment

KP. Over a year ago

Both dashed and camelCase version will work: "Also, jQuery can equally interpret the CSS and DOM formatting of multiple-word properties. For example, jQuery understands and returns the correct value for both .css('background-color') and .css('backgroundColor')." api.jquery.com/css

Collectives™ on Stack Overflow

jquery issue (bug?) in IE with .css() manipulation

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related