Форум: Форум PHPФорум ApacheФорум Регулярные ВыраженияФорум MySQLHTML+CSS+JavaScriptФорум FlashРазное
Новые темы: 0000000
C++. Мастер-класс в задачах и примерах. Авторы: Кузнецов М.В., Симдянов И.В. Объектно-ориентированное программирование на PHP. Авторы: Кузнецов М.В., Симдянов И.В. PHP на примерах (2 издание). Авторы: Кузнецов М.В., Симдянов И.В. MySQL 5. В подлиннике. Авторы: Кузнецов М.В., Симдянов И.В. Самоучитель PHP 5 / 6 (3 издание). Авторы: Кузнецов М.В., Симдянов И.В.
ВСЕ НАШИ КНИГИ
Консультационный центр SoftTime

HTML+CSS+JavaScript

Выбрать другой форум

 

Здравствуйте, Посетитель!

вид форума:
Линейный форум Структурный форум

тема: Jquery без перезагрузки страницы
 
 автор: Boris   (09.03.2015 в 06:43)   письмо автору
 
 

Здравствуйте.

Может кто-то уже решал подобную задачу?

Хочу в зависимости от размера окна браузера корректировать css стили.

Суть. Делаю адаптивный дизайн.
4 блока по горизонтали. Каждый имеет margin-right: 12px.
Если экран широкий (>800px), то у последнего блока убираем отступ справа.
Если ширина экрана уменьшается (<800px), по горизонтали влезает только по два блока, поэтому убираем отступ справа у каждого второго блока.

Вот такой скрипт:

<script>
$(window).load(function() {
  if($(window).width() < 800) {
    $('.items div:odd')
  .css({ 'margin-right':'0' });
  }  
  else if($(window).width() > 800){
    $('.items div:last-child')
  .css({ 'margin-right':'0' });
  }
});
</script>


Но данный скрипт требует перезагрузки страницы. Можно ли как-нибудь заставить его работать в реальном времени?
Может есть какое-нибудь более элегантное решение?
Заранее спасибо!

  Ответить  
 
 автор: Mookapek   (09.03.2015 в 19:25)   письмо автору
 
   для: Boris   (09.03.2015 в 06:43)
 

Воспользуйтесь медиа запросами.


@media (max-width: 800px) {

 // Стили для экранов шириной 800px и меньше
 
}

@media (min-width: 801px) {
 
 // Стили для экранов шириной более 800px

}


Но если хочется все-таки через jQuery, то можно сделать так:
$(function() {
 $(window).resize(function() {
  if($(window).width() < 800) {
    $('.items div:odd')
  .css({ 'margin-right':'0' });
  }  
  else if($(window).width() > 800){
    $('.items div:last-child')
  .css({ 'margin-right':'0' });
  }
 }).resize();
}); 

  Ответить  
 
 автор: Boris   (13.03.2015 в 13:33)   письмо автору
 
   для: Mookapek   (09.03.2015 в 19:25)
 

Спасибо большое. Я вышел из ситуации так. Но ваш способ тоже проверю.

$(document).ready(function() {
    marginToggle();
    $(window).resize(marginToggle);
});

function marginToggle() {
    if ($('body').width() > 800) {
        $('.items ul li.item:odd') .css({ 'margin-right':'1%' }),
        $('.items ul li.item:last-child') .css({ 'margin-right':'0' });
    } else if ($('body').width() < 800) {
        $('.items ul li.item:odd') .css({ 'margin-right':'0' });
    }
}

  Ответить  
Rambler's Top100
вверх

Rambler's Top100 Яндекс.Метрика Яндекс цитирования