Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   динамическое изменение CSS свойства (https://javascript.ru/forum/jquery/43422-dinamicheskoe-izmenenie-css-svojjstva.html)

dikucher 04.12.2013 18:02

динамическое изменение CSS свойства
 
Нужно менять свойство в зависимости от размеров экрана
Вот, что написал, я вычисляю нужную мне велечину, и хочу вставить её значение в метод .css, ну и конечно это не работает :help:

$(window).resize(function(){
        var widthGl = $('#global-wrap').width();
        var valueLeft = ((widthGl - 1240)/2-224) + "px";
        $('.main-nav').css('left', 'valueLeft');
    });

danik.js 04.12.2013 18:10

Убери кавычки. А вобще, ты занимаешься ерундой. Про css не слышал, не?
Кинь ссылку на проблемный сайт. Или накидай схему расположения блоков.

dikucher 04.12.2013 18:24

сайт
Интересно будет посмотреть решение на чистом CSS
задача заключается в том, что у меня есть блок с position: fixed; ( левая плавающая навигация )
и при изменение размеров окна, мне нужно чтобы он был на одиноковом расстоянии от правого блока

Что за кавычки ? "px" - эти ? убрал, но это выдает ошибку

danik.js 04.12.2013 19:02

Так убери просто свойство left у плавающего блока.

А кавычки я говорил про те что вокрук переменной.

dikucher 04.12.2013 19:05

$(document).ready(function(){

    $(function(){
        var widthGl = $('#global-wrap').width();
        var valueLeft = (((widthGl - 1240)/2) + "px");
        $('.main-nav').css('left', valueLeft);
    });

    
    $(window).resize(function(){
        var widthGl = $('#global-wrap').width();
        var valueLeft = (((widthGl - 1240)/2) + "px");
        $('.main-nav').css('left', valueLeft);
    });

});


теперь понял, что скорее всего вы имели ввиду кавычки у значения valueLeft
У меня следующий вопрос
Я продублировал функции, чтобы рассчет производился когда мы открыли страницу или когда мы изменили размер экран. Но можно ли это сделать красивее, так как явное дублирование кода. ( уж такой я неграмотный в JS :blink: )

danik.js 04.12.2013 19:11

Цитата:

Сообщение от dikucher
 $(function(){ .. })

Это краткая запись $(document).ready(funciton(){ .. }). Че это получается, document.ready внутри document.ready? Безупречная логика ))


Просто после навешивания обработчика resize вызови этот обработчик так:

$(window).resize();


Кстати, вариант с удалением left не подошел? Почему?

dikucher 05.12.2013 14:11

на счет left, мой фэил, вы правы
но данный код пригодиться для правого блока ( ценник ) который при скроле становиться потом плавающим, и вот ему нужно будет вычислять right
а вот как сократить код, я так и не понял ( вы уж извините, но с JS очень туго )
вот так не арбайтен, а именно при ресайсе
$(document).ready(function(){


        var widthGl = $('#global-wrap').width();
        var valueRight = (((widthGl - 1240)/2) + "px");
        $('.price-floating').css('right', valueRight);

        $(window).resize();

});

danik.js 05.12.2013 15:11

Нет, код оставь как есть (как в первом посте), и плюс добавь ниже еще $(window).resize().
То есть если до сих пор не доперло: навешиваешь обработчик события resize, затем тут же генерируешь это событие, чтоб обработчик тут же отработал.

Насчет правого блока - можешь убрать right, и добавить margin-left: 718px

кстати при сужении окна (меньше 1100px) возникают проблемы с этими блоками

dikucher 05.12.2013 17:47

воспользовался твоим советом, спозиционировал marginami
А вот как решить проблему с ними при <1100 даже не знаю

danik.js 05.12.2013 20:21

css media queries


Часовой пояс GMT +3, время: 05:29.