jquery для получения значения ширины медиазапроса div (а не моего нормального значения css) и использования его в функции - PullRequest
Новая
       4

jquery для получения значения ширины медиазапроса div (а не моего нормального значения css) и использования его в функции

0 голосов
/ 19 февраля 2012

У меня есть функция jquery, которая меняет изображение в зависимости от положения прокрутки.Это прекрасно работает, когда я использую свою обычную таблицу стилей, но когда мои медиазапросы включаются и исходные значения меняют мою функцию jquery вместо получения значения медиазапроса, он все равно работает с исходным значением в таблице стилей.Есть ли способ определить, чтобы jquery обрабатывал фактическое значение, которое используется в настоящее время?

Это функция jquery: 

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');
              }



        });

Здесь я ее называю 

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

Мое основное значение таблицы стилей для класса rightporto: 

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

И это мое значение медиазапроса для класса rightporto в зависимости от разрешения, например, ширина 1366 пикселей: 

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

ИтакМоя проблема, как вы можете видеть, состоит в том, что функция jquery захватывает только ширину rightporto класса в моей основной таблице стилей, которая является width: 2484px.Поэтому, когда я получаю разрешение шириной 1366 вместо получения ширины rightporto класса: 2000px, оно по-прежнему получает основное значение 2484px;

Есть предложения?

1 Ответ

0 голосов
/ 20 февраля 2012

CSS3 «медиазапросы» еще не реализованы во всех основных браузерах. Возможно ли, что директива #rightporto { width:2000px; } не реализована?

...