.css bug when supplying parameters...

.css bug when supplying parameters...

Hi,

This could be considered a tough bug, needing some sort of super expert help.

I have multiple $(document).ready() blocks.

One of them looks like this:

  1. $(document).ready(function () {
  2.             var pos = $('.NavigationItemSelected').position();
  3.             var width = $('.NavigationItemSelected').width();
  4.             var lastpos = $('.NavigationItem').last().position();
  5.             $('#selected-nav').css({
  6.                 'left': (pos.left + "px"),
  7.                 'display': 'block'
  8.             });
  9.             if (pos.left - 5 > 0) {
  10.                 $("#unselected-left").css({
  11.                     "left": "0px",
  12.                     "width": (pos.left - 5) + "px",
  13.                     "display": "block"
  14.                 });
  15.             }
  16.             if ((lastpos.left - pos.left) - 6 > 0) {
  17.                 $("#unselected-right").css({
  18.                     "left": (pos.left + width + 10),
  19.                     "width": ((lastpos.left - pos.left) - 6),
  20.                     "display": "block"
  21.                 });
  22.             }
  23.         });
What happens is that this code runs absolutely fine, however subsequent blocks don't run at all - no errors either.

I drilled it down and found that

  1.             $('#selected-nav').css({
  2.                 'left': '30px',
  3.                 'display': 'block'
  4.             });
Works just fine, but

  1. $('#selected-nav').css({
  2.                 'left': (pos.left + "px"),
  3.                 'display': 'block'
  4.             });
fails, even if the + "px" is removed.

So is this a bug with JQuery or am I some kind of massive idiot?

Ryan.