SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Dec 2011
    Location
    Montreal, Canada
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question re-attaching div... please help!

    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. #2
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jack3000 View Post
    I have detached a div and want to re-attach it by clicking on a button.
    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:

    Code javascript:
    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:
    Code javascript:
    $("#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.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  3. #3
    SitePoint Member
    Join Date
    Dec 2011
    Location
    Montreal, Canada
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you AussieJohn!

    I will take a look at it...

    Regards,

    jack3000

  4. #4
    SitePoint Member
    Join Date
    Dec 2011
    Location
    Montreal, Canada
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy

    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. #5
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jack3000 View Post
    But when I click the button for the second time, the menu won't close... it won't go back to margin-left: 0...
    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:

    Code:
    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.

    Code javascript:
    $("#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');
    });
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  6. #6
    SitePoint Member
    Join Date
    Dec 2011
    Location
    Montreal, Canada
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks again! I love the Internet!

  7. #7
    SitePoint Member
    Join Date
    Dec 2011
    Location
    Montreal, Canada
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

    Thank you !

    I could post the css file if you want...

    jack3000

  8. #8
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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.

    HTML Code:
    <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
    Code javascript:
    $(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.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  9. #9
    SitePoint Member
    Join Date
    Dec 2011
    Location
    Montreal, Canada
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks alot! I will take a look at your code.

    Regards,

    jack3000


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •