Databases
StackOverflow2013
Postsdbo
POjQuery menu - appending a div to another div on resize
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery menu - appending a div to another div on resize
    text
    copied!<p>I have a problem with the following menu:</p> <p><a href="http://jsfiddle.net/H4hxA/1/" rel="nofollow">http://jsfiddle.net/H4hxA/1/</a></p> <p>So, what the script is doing is that when you resize the div, it's putting the main menu item (box) into the hidden container when there isn't enough space(as you can see from the colours). A dropdown div is appended at the last point of the div, so that when clicked, the hidden div is displayed.</p> <pre><code>$(document).ready(function(){ //call the method on load methodToFixLayout(); $(window).bind("resize", methodToFixLayout); function methodToFixLayout( e ) { var tLengthHiddenIcons = 0; var tSublinksMain = 0; var sublinkWidth = 0; var totalIconWidth = 0; var winWidth = 0; var totalIconsWidth = 24; //icon width of the dropdown var memberContainerWidth = 0; var totalMemberIconsWidth = 0; //remove element to position it at the bottom $("#pDropdown").remove(); $("#profileMenuHolder div.clear").remove(); $("#hiddenIcons div.clear").remove(); $(".block_listing div.clear").remove(); $("#profileMenuContainer div.profile-sublink").each(function (index, domEle) { // domEle == this totalIconsWidth += $(domEle).width(); winWidth = $('#profileMenuHolder').width(); if (winWidth - totalIconsWidth &gt; 104) { if($('#hiddenIcons').find(domEle).length == 1) { $(domEle).css('background-color','#999') $('#profileMenuHolder').append(domEle); } } else { if($('#profileMenuHolder').find(domEle).length == 1){ $(domEle).css('background-color','#FF0') $(domEle).prependTo("#hiddenIcons"); } } }); //if the hidden container is visible, enable the css for the dropdown on resize if($("#hiddenIcons").is(':visible')) { $('&lt;div id="pDropdown" class="dropdown active"&gt;DROP&lt;/div&gt;').appendTo("#profileMenuHolder"); } else { $('&lt;div id="pDropdown" class="dropdown"&gt;DROP&lt;/div&gt;').appendTo("#profileMenuHolder"); } //clear floats for both div containers $('&lt;div class="clear"&gt;&lt;/div&gt;').appendTo("#profileMenuHolder"); $('&lt;div class="clear"&gt;&lt;/div&gt;').appendTo("#hiddenIcons"); $('&lt;div class="clear"&gt;&lt;/div&gt;').appendTo(".block_listing"); tLengthHiddenIcons = $('#hiddenIcons .profile-sublink').length; //only show the dropdown if the container width doesn't satisfy the icons if(tLengthHiddenIcons == 0) { $('#pDropdown').css("display", "none"); $('#hiddenIcons').css("display", "none"); //$('#profileMenuHolder').css("max-width", "1100px"); } else { $('#pDropdown').css("display", "block"); //$('#profileMenuHolder').css("max-width", "1150px"); } //on click of the dropdown $("#pDropdown").click(function(){ jQuery('#hiddenIcons').toggle(); jQuery('.arwdwn-icon').toggleClass('arwdwn-icon_active'); jQuery('#pDropdown').toggleClass('active'); }); } }); </code></pre> <p>The HTML:</p> <pre><code>&lt;div id="profileMenuContainer"&gt; &lt;div id="profileMenuHolder"&gt; &lt;div class="profile-sublink"&gt;1&lt;/div&gt; &lt;div class="profile-sublink"&gt;2&lt;/div&gt; &lt;div class="profile-sublink"&gt;3&lt;/div&gt; &lt;div class="profile-sublink"&gt;4&lt;/div&gt; &lt;div class="profile-sublink"&gt;5&lt;/div&gt; &lt;div class="profile-sublink"&gt;6&lt;/div&gt; &lt;div class="profile-sublink"&gt;7&lt;/div&gt; &lt;div class="profile-sublink"&gt;8&lt;/div&gt; &lt;div class="profile-sublink"&gt;9&lt;/div&gt; &lt;div class="profile-sublink"&gt;10&lt;/div&gt; &lt;div class="profile-sublink"&gt;11&lt;/div&gt; &lt;div id="pDropdown" class="dropdown"&gt;DROP&lt;/div&gt; &lt;/div&gt; &lt;div id="hiddenIcons"&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>The CSS:</p> <pre><code>body{ padding:0; margin:0; } #profileMenuHolder{background-color:#CFC; width:auto; display:block;} #hiddenIcons{background-color:#C09; max-width:400px; display:none; position:absolute;} .profile-sublink{background-color:#999; width:100px; height:100px; display:block; float:left; margin:0; padding:0;} .clear{clear:both;} .dropdown{display:none;float:left;background-color:#444; width:50px; height:50px;} #pDropdown.active{background-color:#111FFF;} #container{margin: 20px 300px 10px 200px;border:1px solid #111;} #profileMenuContainer{overflow: hidden;min-width:100px;} .image{float:left; width:155px; height:155px; border:1px solid #111;} .details{float: left;background-color:red;max-width:500px;} </code></pre> <p>Problem:</p> <p>The script is working perfectly, but unfortunately it's not keeping the order of the items. I have tried to solve the problem by specifying in the loop that if the item inside the loop is the one selected, do not append the div. I have also tried to appendTo and prependTo the div, but it still looses position.</p> <p>I have searched for 3 days now and still can't find a solution. I have thought of using sortable in this situation but this it work the same in this way? Hope I made myself clear and if you can't understand something in the script I will explain better.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload