Tim Marshall Tim Marshall - 6 months ago 18
Javascript Question

JQuery add listening event to .resizable() then append DIV's

On my admin panel I am building I have a quick access side panel to the right which is resizeable using the JQuery resizeable function, see below;

$('.Quick-Sidebar').resizable({
handles: 'w',
minWidth: 300,
maxWidth: 650
});


It has a menu at the top which on page load looks like the below snippet;

<ul class="nav nav-tabs">
<li class="active">
<a href="javascript:;" data-target="#quick_sidebar_tab_1" data-toggle="tab" aria-expanded="false">
Staff
</a>
</li>
<li>
<a href="javascript:;" data-target="#quick_sidebar_tab_2" data-toggle="tab" aria-expanded="false">
Messages
<span class="badge badge-success">7</span>
</a>
</li>

// APPEND LI TO/FROM HERE

<li class="dropdown">
<a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
More
<i class="fa fa-angle-down"></i>
</a>
<ul class="dropdown-menu" style="display:none">

// APPEND TO/FROM FIRST LI FROM BELOW

<li>
<a href="javascript:;" data-target="#quick_sidebar_tab_3" data-toggle="tab">
<i class="fa fa-bell-o"> </i> Alerts </a>
</li>
<li>
<a href="javascript:;" data-target="#quick_sidebar_tab_3" data-toggle="tab">
<i class="fa fa-info-circle"> </i> Notifications </a>
</li>
<li class="divider"></li>
<li>
<a href="javascript:;" data-target="#quick_sidebar_tab_3" data-toggle="tab" aria-expanded="true">
<i class="fa fa-cog"></i> Settings </a>
</li>
</ul>
</li>
</ul>


QUESTIONS



How do I add a listening event for when the DIV is being resized.

Upon knowing the above, I believe I would simply add a check to see what the width is and upon it reaching a certain width, append one of the
<li>
elsewhere.

How can I append my
<li>
to and from the commented areas of the above list?

UPDATE



After Korgrue help, I have part of the code I will be needing and have updated the live version;

$('.Quick-Sidebar').bind('resize', function(e) {
if ($(this).width() >= 400) {
alert('Append the menu item');
}
});


UPDATE II



Ball is now rolling...

$('.Quick-Sidebar').bind('resize', function(e) {
if ($(this).width() >= 400) {
$('.Testing1234').insertBefore('li.dropdown');
$('.Testing1234 i').hide();
}
});

Answer

1). Listening For The Div To Be Resized

Upon the administrator expanding their quick access sidebar greater than or equal to 400px, there is enough room for the 'Alerts' tab to be shown on the first tier so we need to first listen;

$('.Quick-Sidebar').bind('resize', function(e) {
    if ($(this).width() >= 400) {
        // What to do IF the width is greater than or equal to 400px?
    }
});

2). Moving The 'Alerts' <li>

I gave each <li> a class name as I just found it easier this way although you could count how many <li> there are, minus one and call that. So I move it upon the width reaching 400 and then reversing visa-versa;

$('.Quick-Sidebar').bind('resize', function(e) {
    if ($(this).width() >= 400) {
        $('.QSB-NM-Alerts').insertBefore('li.dropdown');
        $('.QSB-NM-Alerts i').hide();
    }
    if ($(this).width() <= 399) {
        $('.QSB-NM-Alerts').insertBefore('ul.dropdown-menu li:first');
        $('.QSB-NM-Alerts i').show();
    }
});

3). Repeat For All Tab Options

You could do so via set intervals, setting a var, checking if width is var +/- 100px or so, however I've gone for adding one upon enough room being available straight away;

$('.Quick-Sidebar').bind('resize', function(e) {
    if ($(this).width() >= 400) {
        $('.QSB-NM-Alerts').insertBefore('li.dropdown');
        $('.QSB-NM-Alerts i').hide();
    }
    if ($(this).width() <= 399) {
        $('.QSB-NM-Alerts').insertBefore('ul.dropdown-menu li:first');
        $('.QSB-NM-Alerts i').show();
    }

    if ($(this).width() >= 575) {
        $('.QSB-NM-Notify').insertBefore('li.dropdown');
        $('.QSB-NM-Notify i').hide();
        $('.QSB-NM-Divider').hide();
    }
    if ($(this).width() <= 574) {
        $('.QSB-NM-Notify').insertBefore('ul.dropdown-menu .QSB-NM-Divider');
        $('.QSB-NM-Notify i').show();
        $('.QSB-NM-Divider').show();
    }
});

4). Removing the 'More' drop down tab

I'm not sure if I'll need this however upon there only being one additional tab left, you would need to repeat the above and simply hide/show 'More' tab.

Comments