Как заставить мою кнопку идти под моей формой при достижении ширины мобильного телефона с помощью JS?

Question

У меня есть большая кнопка слева (пунктирная рамка) и форма справа. Когда вы меняете ширину экрана/видовых экранов на 550 пикселей или менее, кнопка выходит за форму и меняет ее высоту/ширину.

Я хотел бы, чтобы кнопка заходила под форму (prependTo) при 550 пикселей или меньше. Использование JS

У меня есть JS fiddle установить с моим препендом Javascript кода, но он не работает, и им не совсем уверен, что я сделал неправильно.

Посмотрите?

$(function() { 
    $(window).resize(function() { 
     var w = $(window).width(); 
     if (w > 550 && $('.addnewflavorimg').children().length > 1) { 
      $('.addnewflavorimg').prependTo($('.formy')); 
     } else if (w < 550 && $('.formy').children().length > 1) { 
      $('.addnewflavorimg').prependTo($('.formy')); 
     } 
    }); 
}); 

JS fiddle

Спасибо за ваше время!

Answer 1

Первый - включить jQuery в свою скрипку через внешние ресурсы.

Я попытался внести минимальные изменения в существующую скрипту, чтобы заставить ее работать (чтобы вы могли ее понять), поэтому это определенно не идеальный способ сделать это. Тем более, что вы используете children().length, который может измениться при изменении вашего HTML-кода. Поэтому вы можете подумать о том, как это сделать. Следуйте за нотами в конце.

Замените JS-часть следующим образом, и она будет работать.

$(function() { 
    $(window).resize(function() { 
     var w = $(window).width(); 
     if (w > 550 && $('.addnewflavorimg').children().length > 1) { 
      $('.addnewflavorimg').prependTo($('.formy')); 
     } else if (w < 550) { 
      $('.addnewflavorimg').appendTo($('.formy')); 
     } 
    }); 
}); 

P.S.

• Убедитесь, что вы называете ту же функцию в обработчике изменения размера в начинающуюся (если ширина уже ниже 550, окно изменения размера может не огня)
• Вы можете использовать bootstrap для кросс-платформенной мир.