динамическое изменение CSS свойства
Нужно менять свойство в зависимости от размеров экрана
Вот, что написал, я вычисляю нужную мне велечину, и хочу вставить её значение в метод .css, ну и конечно это не работает :help: $(window).resize(function(){ var widthGl = $('#global-wrap').width(); var valueLeft = ((widthGl - 1240)/2-224) + "px"; $('.main-nav').css('left', 'valueLeft'); }); |
Убери кавычки. А вобще, ты занимаешься ерундой. Про css не слышал, не?
Кинь ссылку на проблемный сайт. Или накидай схему расположения блоков. |
сайт
Интересно будет посмотреть решение на чистом CSS задача заключается в том, что у меня есть блок с position: fixed; ( левая плавающая навигация ) и при изменение размеров окна, мне нужно чтобы он был на одиноковом расстоянии от правого блока Что за кавычки ? "px" - эти ? убрал, но это выдает ошибку |
Так убери просто свойство left у плавающего блока.
А кавычки я говорил про те что вокрук переменной. |
$(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: ) |
Цитата:
Просто после навешивания обработчика resize вызови этот обработчик так: $(window).resize(); Кстати, вариант с удалением left не подошел? Почему? |
на счет left, мой фэил, вы правы
но данный код пригодиться для правого блока ( ценник ) который при скроле становиться потом плавающим, и вот ему нужно будет вычислять right а вот как сократить код, я так и не понял ( вы уж извините, но с JS очень туго ) вот так не арбайтен, а именно при ресайсе $(document).ready(function(){ var widthGl = $('#global-wrap').width(); var valueRight = (((widthGl - 1240)/2) + "px"); $('.price-floating').css('right', valueRight); $(window).resize(); }); |
Нет, код оставь как есть (как в первом посте), и плюс добавь ниже еще $(window).resize().
То есть если до сих пор не доперло: навешиваешь обработчик события resize, затем тут же генерируешь это событие, чтоб обработчик тут же отработал. Насчет правого блока - можешь убрать right, и добавить margin-left: 718px кстати при сужении окна (меньше 1100px) возникают проблемы с этими блоками |
воспользовался твоим советом, спозиционировал marginami
А вот как решить проблему с ними при <1100 даже не знаю |
css media queries
|
Часовой пояс GMT +3, время: 05:29. |