Question

I have a jquery function that changes an image depending on scroll position. This works fine when I am using my normal stylesheet but when my media queries kick in and the original values change my jquery function instead of getting the media query value it still works on the original value in the stylesheet. Is there a way to define so jquery will carab the actual value that is being used currently?

This is the jquery function:

var scpos = function(){
  $(window).scroll(function(){
    var wwidth = $(window).width();
    var spos1 = wwidth - 371;
    var spos2 = spos1+wwidth;
    var spos3 = spos2 + wwidth;
    var spos4 = spos3 + wwidth + $('.rightporto').width();
    var spos5 = spos4 + wwidth + $('.leftclients').width();

     if(($(window).scrollLeft() >= 0)&& ($(window).scrollLeft() <= spos1)){
                  $(".step").css('background','url(img/naboutus.png) 94% 5% no-repeat fixed');
              } else if(($(window).scrollLeft() > spos1)&& ($(window).scrollLeft() <= spos2)){
                  $(".step").css('background','url(img/nwhatwedo.png) 94% 5% no-repeat fixed');
              } else if(($(window).scrollLeft() > spos2 )&& ($(window).scrollLeft() <= spos3)){
                  $(".step").css('background','url(img/ntheory.png) 94% 5% no-repeat fixed');
              } else if(($(window).scrollLeft() > spos3)&& ($(window).scrollLeft() <= spos4)){
                  $(".step").css('background','url(img/nportfolio.png) 94% 5% no-repeat fixed');
              } else if(($(window).scrollLeft() > spos4)&& ($(window).scrollLeft() <= spos5)){
                  $(".step").css('background','url(img/nclients.png) 94% 5% no-repeat fixed');
              }else {
                  $(".step").css('background','url(img/ncontacts.png) 94% 5% no-repeat fixed');
              }



        });

This is where I call it

$(window).resize(function() {
scpos();
})
.resize();//trigger the resize event on page load

My main stylesheet value for rightporto class:

.rightporto{
     float:left;
 width:2484px;
}

And this is my media query value for rightporto class depending on resolution for example 1366px width:

@media screen and (min-width: 1281px) and (max-width: 1366px) {
          .rightporto{width:2000px;}
     }

So my problem as you can see is that the jquery function only grabs the class rightporto width in my main stylesheet which is width: 2484px . So when I have a resolution of 1366 width instead of getting the class rightporto width:2000px it still gets the main one of 2484px;

Any suggestions?

Answer 1

CSS3 “media queries” are not yet implemented in all major browsers. Is it possible that the #rightporto { width:2000px; } directive is not implemented?