Отсоединение и добавление при изменении размера окна

Итак, я пытаюсь отсоединить и добавить к div в зависимости от размера окна. Ниже приведено то, что у меня есть на данный момент.

Я создаю функцию с переменной SOCIALBAR, присваивая ей значение #SOCIALMEDIA и отсоединяя ее. Затем, в зависимости от размера окна для (document).ready и (window).resize, я вызываю функцию SOCIALBARPlACEMENT, а #SOCIALMEDIA добавляется к разделам #TOP или #LEFT.

Это прекрасно работает на (document).ready, но не работает на (window).resize.

На самом деле, если я удалю document.ready и оставлю window.resize, функция по-прежнему будет работать при загрузке страницы, но не будет работать при изменении размера страницы.

Любые мысли будут оценены. Благодарить!

function socialbarplacement() {
    var socialbar;
    socialbar = $("#socialmedia").detach();
    if (jQuery(window).width() < 1384) {
        socialbar.appendTo("#top");
    } else {
        socialbar.appendTo("#left");
    }
};
$(document).ready(socialbarplacement());
$(window).resize(socialbarplacement());

javascript jquery document-ready window-resize
person Nicholas Dynan    schedule 24.07.2012    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Вы вызываете функции немедленно, а не передаете их как обработчики событий, попробуйте:

$(document).ready(socialbarplacement);
$(window).resize(socialbarplacement);
/*
someFunction() <-- invokes the function and resolves to the returned value
someFunction <-- resolves to the function reference
*/
person Esailija    schedule 24.07.2012

arrow_upward
0
arrow_downward

Я бы, вероятно, сделал что-то в этой строке (непроверенный код):

$(window).resize( function(){
    var wnd = $(window), soc = $('#socialmedia');
    return function(){
        // might add a check to make sure you are not appending to the current parent.
        soc.appendTo( $(window).width() > 1384 ? '#left' : '#top');
    }
});

Изменение размера будет запущено при загрузке страницы, поэтому вам не нужно иметь как готовые, так и изменять размер. Также глядя на это, вы выполняете метод, когда вы действительно должны передавать его по имени.

person SciSpear    schedule 24.07.2012

arrow_upward
0
arrow_downward

Я пробовал вот так... Наслаждайтесь!

$(function () {

   if (matchMedia) {
	  var mq = window.matchMedia('(max-width: 1384px)');
	  var socialmedia = $("#socialmedia");
	  mq.addListener(WidthChange);
	  WidthChange(mq);
	}

	function WidthChange(mq) {
	  if (mq.matches && socialmedia) {
		socialmedia.appendTo("#top");
		socialmedia = null;	
	  } else {
		socialmedia = $("#socialmedia").detach();	
        socialmedia.appendTo("#left");
	  }
	};

});
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  
</head>

<body>
  
  <div id="top">
    <div id="socialmedia">SOCIALMEDIA</div> <br>
    **TOP**
  </div>
  
  <div id="left">
    <br>
    **LEFT** 
  </div>
  
</body>
  
</html>

person Ferdy Saptawira S    schedule 09.01.2016