Re-attaching div... please help!

JavaScript
1

Hello all,

I have detached a div and want to re-attach it by clicking on a button.
Here’s the code…

$(‘#wrapper’).detach();

$(“#open_menu”).click(function(){
/* Add something here to re-attach #wrapper */
});

Any help will be appreciated.

Regards,

Jack3000

2

Hey there,

When you .detach() something, you can assign the detached item in to a variable that you can use later on.

For example, in your case to make this work it would be relatively simple:


var wrapper = $('#wrapper').detach();

$("#open_menu").click(function(){
  $("#container").append( wrapper );
});

(This is assuming that you want to append #wrapper to #container, substitute as necessary.)

Side note: it looks like you are creating some kind of menu toggle button, rather than detaching an item from the DOM and then re-inserting it later, which is very performance heavy compared to other methods, perhaps you could consider simply hiding/showing the div. (For example something like this: http://jsfiddle.net/GeekyJohn/YkFff/)

If you wanted to keep it really simple, you could try something like this:


$("#wrapper").hide();
$("#open_menu").click(function(){ 
    $("#wrapper").show();
});

It has the same net effect, the #wrapper will only be shown after #open_menu is clicked, but you won’t have to remove/add it.

3

Thank you AussieJohn!

I will take a look at it…

Regards,

jack3000

4

I have tried an other solution…

$(“#open_menu”).click(function(){
if($(‘#nav_sub’).is(‘marginLeft’) == ‘0’) {
$(‘#nav_sub’).animate({‘marginLeft’:‘250px’}, 500, ‘swing’);
} else {
$(‘#nav_sub’).animate({‘marginLeft’:‘0’}, 500, ‘swing’);
}
});

But when I click the button for the second time, the menu won’t close… it won’t go back to margin-left: 0…

Any ideas why ?

Regards,

jack3000

5

You’re trying to use the .is() method with a CSS property, the .is() method takes a CSS selector as an argument. What’s happening here is that #nav_sub element is checked for being the CSS selector “marginLeft”, of course this returns false. Interestingly in JavaScript, the string “0” is equal to false. This means that your if-statement is always evaluating to true:


if ( $("#nav_sub").is("marginLeft") == "0" )

// is equal to:

if ( false == false )

To fix this we can simply add a toggleClass() in there to set the state of the menu.


$("#open_menu").click(function(){
    var isActive = $('#nav_sub').hasClass("active");
        offset = isActive ? 0 : 250; //set the offset based on the current state

    $('#nav_sub').toggleClass("active").animate({'marginLeft': offset + "px"}, 500, 'swing');
});
6

Thanks again! I love the Internet! :slight_smile:

7

Hello again,

This works well ! But ! I have an other menu button
that opens an other sub-menu and a close button that closes
both sub-menus if one of them is open. Now, if I click on
the close button, I need to click twice on the menu button
to open the sub-menu… Hummm… Is that making any sens???

Here’s my final code (without the last modifications):

$(document).ready(function() {

$(‘#bouton_off’).hide();
$(‘#bouton_off2’).hide();

$(“#open_menu”).click(function(){
$(this).addClass(‘active’);
$(‘#open_menu2’).removeClass(‘active’);
$(‘#nav_sub’).animate({‘marginLeft’:‘250px’}, 400, ‘swing’);
$(‘#bouton_off’).show(‘slow’);
$(‘#nav_sub2’).animate({‘marginLeft’:‘20px’}, 400, ‘swing’);
$(‘#bouton_off2’).hide(‘slow’); });

$(“#open_menu2”).click(function(){
$(this).addClass(‘active’);
$(‘#open_menu’).removeClass(‘active’);
$(‘#nav_sub’).animate({‘marginLeft’:‘20px’}, 400, ‘swing’);
$(‘#bouton_off’).hide(‘slow’);
$(‘#nav_sub2’).animate({‘marginLeft’:‘250px’}, 400, ‘swing’);
$(‘#bouton_off2’).show(‘slow’); });

$(“#close_menu”).click(function(){
$(‘#open_menu,#open_menu2’).removeClass(‘active’);
$(‘#nav_sub’).animate({‘marginLeft’:‘20px’}, 400, ‘swing’);
$(‘#bouton_off’).hide(‘slow’); });

$(“#close_menu2”).click(function(){
$(‘#open_menu,#open_menu2’).removeClass(‘active’);
$(‘#nav_sub2’).animate({‘marginLeft’:‘20px’}, 400, ‘swing’);
$(‘#bouton_off2’).hide(‘slow’); });

});

Is there a way that when I click on the close button I don’t
need to click twice on the menu button to mak the sub-menu
appear. :eek:

Thank you !

I could post the css file if you want…

jack3000

8

Hey Jack3000,

I think what you’re kind of after is a more abstracted solution.

I put up a JS Fiddle with an example of a simple menu toggler: http://jsfiddle.net/GeekyJohn/YkFff/

The markup is simple, you have a #menu div that contains links that toggle respective sub menus.


<div id="content">
<div id="menu">
    <a href="#" class="toggler">Toggle Menu</a>
    <div class="menu">
        <p><a href="#">Link 1</a></p>
        <p><a href="#">Link 1</a></p>
        <p><a href="#">Link 1</a></p>
    </div>
    <a href="#" class="toggler">Toggle Menu2</a>
    <div class="menu">
        <p><a href="#">Link 1</a></p>
        <p><a href="#">Link 1</a></p>
        <p><a href="#">Link 1</a></p>
    </div>    
</div>

</div>

The JavaScript to then toggle these menus is incredibly simple


$(document).ready(function(){
    $("#menu").on("click", ".toggler", function(e) { //when a toggler link is clicked
        e.preventDefault();
        $(this).toggleClass("active").next(".menu").slideToggle(); //slideToggle the menu it belongs to.
    });

    $(".menu").hide(); //hide all menus to start out with
});

It’s of course trivial to swap out the effect for something else.

Take a look at the JS Fiddle for a working example.

9

Thanks alot! I will take a look at your code. :smiley:

Regards,

jack3000

10