Изменение CSS После изменения размера окна Перерывы CSS

Как обновить:Изменение CSS После изменения размера окна Перерывы CSS

Открывают этот JSFiddle: https://jsfiddle.net/y408c0u9/7/
Есть вкладка открытый 75% вашего монитора и запустить скрипку

Как вам может видеть ваш способ увеличить размер серого окна, наведя на него курсор мыши.

Изменение размера ширины лепестка к наименьшему он будет идти (серая коробка исчезнет)
Resize назад, как это было раньше, и теперь CSS: парить больше не будет работать.

Досадно я могу исправить это купить изменение яваскрипта код:

$(document).ready(function() { 
    $(window).resize(function(){ 

     if ($(window).width() < 640) { 
      $('.content').css({ 
       'width': '100%', 
        'left': '0px' 
      }); 
      $('.menu-button img').attr('src', 'test/lines.png').load(function() { 
       this.width; 
      }); 
     } 
    if ($(window).width() > 640) { 
      $('.content').css({ 
       'width': 'calc(100%-50px)', 
        'left': '50px' 
      }); 
     } 

    });//<-- removing this

Ломать код и имеющий открытый кронштейн, очевидно, не хотел, как исправить и вызывает проблемы с остальной частью моей JavaScript.

Почему это происходит по-разному после того, как сменил css на то, что он использовал с помощью JQuery/Javascript?

источник

2015-06-29 Greg

Я предполагаю, что ваш javascript переопределяет ваше оригинальное правило: hover, потому что оно загружается после вашего css. Я думаю, вам нужно добавить '.on (" hover ")' функцию в ваш код, чтобы сохранить желаемый эффект. –

Это имело бы смысл, и я исправил его раньше, поставив скрипт перед стилем, но он сломал мою кнопку javascript (не в том коде), которая используется для того, чтобы вызвать тот же эффект, что и hover – Greg

Если ваш второй скрипт функционирует правильно, почему бы просто не загрузить его отдельно в свой собственный файл сценария? Просто мысль. –

Вопрос в том, при изменении размера назад, эта строка:

$('.content').css({ 
    'width': 'calc(100%-50px)', 
    'left': '50px' 
});

устанавливает стиль контента класса для:

left: 50px; 
width: 100%;

Слева: 50px является то, что нарушения поведения, и так как это тег стиля, он всегда будет переопределять теги css. Если вы измените это, чтобы удалить левый, когда вы перетащите серый квадрат назад на 640 пикселей, он будет работать. См. Скрипку здесь: https://jsfiddle.net/y408c0u9/8/

Однако я бы рекомендовал использовать медиа-запросы в css для этого. Javascript может быть жестким, чтобы поддерживать отзывчивое поведение, и вы можете сделать это в css.

источник

2015-06-30 00:41:09 Brian

Да, я хорошо осведомлен о запросах в средствах массовой информации. Я просто не мог потрудиться, чтобы попытаться использовать их в то время и, вероятно, сэкономил бы много времени. К сожалению, я не могу проверить ваше предложение в данный момент времени, и вместо этого вам придется вернуться к вам, чтобы отметить, как ответили завтра. – Greg

Я протестировал эту теорию, и она, похоже, не работает, как только вкладка снова вытянута, панель снова не появляется, потому что синий ящик по-прежнему ее закрывает. Просто вы можете использовать 50px в Calc, если я удалю этот «50px», тогда он все равно не работает. Я думаю, что посмотрю на медиа-запросы больше – Greg

Это работает: https://jsfiddle.net/y408c0u9/8/ – Brian

Изменение CSS После изменения размера окна Перерывы CSS

ответ

Смежные вопросы