jQuery menu - appending a div to another div on resize

Question

I have a problem with the following menu:

http://jsfiddle.net/H4hxA/1/

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.

$(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 > 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'))
    {
        $('<div id="pDropdown" class="dropdown active">DROP</div>').appendTo("#profileMenuHolder");
    }
    else
    {
        $('<div id="pDropdown" class="dropdown">DROP</div>').appendTo("#profileMenuHolder");
    }
    //clear floats for both div containers
    $('<div class="clear"></div>').appendTo("#profileMenuHolder");
    $('<div class="clear"></div>').appendTo("#hiddenIcons");
    $('<div class="clear"></div>').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');
    });
}
});

The HTML:

<div id="profileMenuContainer">
        <div id="profileMenuHolder">
            <div class="profile-sublink">1</div>
            <div class="profile-sublink">2</div>
            <div class="profile-sublink">3</div>
            <div class="profile-sublink">4</div>
            <div class="profile-sublink">5</div>
            <div class="profile-sublink">6</div>
            <div class="profile-sublink">7</div>
            <div class="profile-sublink">8</div>
            <div class="profile-sublink">9</div>
            <div class="profile-sublink">10</div>
            <div class="profile-sublink">11</div>        
            <div id="pDropdown" class="dropdown">DROP</div>
        </div>

        <div id="hiddenIcons">
        </div>
    </div>

The CSS:

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;}

Problem:

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.

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.

Answer 1

Change this line $(domEle).prependTo("#hiddenIcons"); to $(domEle).append("#hiddenIcons"); then it will work fine as you want.For egs test fiddle

Answer 2

It looses position, because elements that are appended to #hiddenIcons stay at the same position and other items prepend to the top. You can try something like this: http://jsfiddle.net/H4hxA/2/