keep javascript menu open on new page load

Question

I have created a menu that slides in from outside of the page. The problem is that when you click on an item in the menu and load a new page, the new page loads with the menu closed. Is there a way to tell the browser to keep the menu open after a new page load?

this is the code that opens up the menu

<script>    
$(document).ready(function(){
         $("#closeIcon").hide()
         $(".left").width('0%');
         $(".right").width('100%');
      });

    $(document).ready(function(){
      $("#menuIcon").click(function(){
        $(".left").animate({width:'10%'}, "500");
        $(".right").animate({width:'90%'}, "500");
        $("#nav").animate({
                    left: '30%',
                  }, "500" );
        $("#menuIcon").fadeOut(500)
        $("#closeIcon").fadeIn(500)
      });
    });

    $(document).ready(function(){
      $("#closeIcon").click(function(){
        $(".left").animate({width:'0%'}, "500");
        $(".right").animate({width:'100%'}, "500");
        $("#nav").animate({
                    left: '0',
                }, "500" );
        $("#menuIcon").fadeIn(500)
        $("#closeIcon").fadeOut(500)
      });
    });
    </script>

this is the html:

<html>
<div id="menu" >
            <div id="menuIcon">             
                    <a href="javascript: void(0)">
                        <img src="images/menuIcon.png">
                    </a>
            </div>
            <div id="closeIcon">
                    <a href="javascript: void(0)"> 
                        <img src="images/closeIcon.png">
                    </a>
            </div>
        </div>
</html>


<div class="left">
   <div id="nav">                       
  <div id="accordion">          
      </div> <!--ends accordion-->
   </div>
</div>          

<div class="right">
<div id="content"> 
</div><!--ends content-->
</div><!--ends right-->

You have to use a form of persistent to retain info beyond navigation -- [Cookies](https://developer.mozilla.org/en-US/docs/Web/API/document.cookie), [DOM Storage](http://mdn.beonex.com/en/DOM/Storage.html), etc. — Jonathan Lonowski, Sep 24 '13 at 22:21

score 0 · Answer 1 · answered Sep 24 '13 at 22:19

0

You can't keep jQuery event when you leave the page. If you leave the page, add class on element to have your menu open.

You can pass parameters in the link of your to know what action you must to make

Moreover, you can use only one $(document).ready();

answered Sep 24 '13 at 22:19

Donovan Charpin

3,567
22
30

This is why I say "can". It's just an help if he don't know. – Donovan Charpin Sep 24 '13 at 22:32
Sorry for my english. Sometimes I haven't the good words. Thank's. – Donovan Charpin Sep 24 '13 at 22:38
Hi thanks for the response, I am still very much a beginner with javascript and function mostly by trial and error. The javascript in the menu works fine at the moment, if I try to remove the other document.ready it stops working. How should I write it? – fred Sep 24 '13 at 22:46
When I say remove other $(document).ready, I want to say move all .ready content in the same one. But even if you make that, it's no the problem here. You can't load page and keep your js event. You can pass a parameter on the link to know the state of your menu when you load the other page. – Donovan Charpin Sep 24 '13 at 22:52
@DonovanCharpin Sorry my previous comments. Finally caught up to what you meant. I was just reading it wrong. :) – Jonathan Lonowski Sep 24 '13 at 22:56
If you want keep your menu in the same state, you must have a dynamic website and refresh your content with ajax. – Donovan Charpin Sep 24 '13 at 23:02

score 0 · Answer 2 · edited May 23 '17 at 12:00

0

I think you should add a GET parameter to your new page so you can know when you need to show the menu.

Check this page to know more about how to get URL parameters with jQuery : Get escaped URL parameter

Also, I think you forgot to add some html to your example. What are those elements? .left .right #nav

edited May 23 '17 at 12:00

Community

1
1

answered Sep 24 '13 at 22:24

lefoy

1,158
2
13
25

I've added the html to for the .left .right... essentially left and right resize and nav slides in when you click on menuIcon – fred Sep 24 '13 at 22:44

score 0 · Answer 3 · answered Sep 24 '13 at 22:42

0

Instead of loading a new page on the window, why not load the page using AJAX and replace the content of your page with the new content?

Something like:

<html>
<div id="menu" >
            <div id="menuIcon">             
                    <a href="javascript: void(0)">
                        <img src="images/menuIcon.png">
                    </a>
            </div>
            <div id="closeIcon">
                    <a href="javascript: void(0)"> 
                        <img src="images/closeIcon.png">
                    </a>
            </div>
</div>
<div id="body">
<!--Body here-->
</div>
</html>

JS:

$("a").click(function(e){e.preventDefault();loadNew(this.href);});
function loadNew(href){
    $.ajax({
      url: href,
      cache: false
    }).done(function( html ) {
        $( "#body" ).replaceWith( $(html).find("#body") );
      });
}

This will make the transition look smother also.

answered Sep 24 '13 at 22:42

dajavax

3,060
1
14
14

I just noticed you updated your HTML code. But I think you get my point with mine. – dajavax Sep 24 '13 at 22:44
I've never used ajax before, I will have to read up on it, but before I delve into that, I must add that my website is using django cms and the pages are django template files. So can this technic still work in this case? – fred Sep 30 '13 at 01:36
I'm not familiar with django, but it should. What ajax basically does is load a webpage in the background and then do something with the information it has. For instance, in my example, I'm loading whichever url I sent as the href parameter. Then after it's done loading, I extract the element with `id="body"` of that document (with `$(html).find("#body")`), and replace it in the current document's element with `id="body"`. Everything else (including the menu and javascript variables) are left untouched. – dajavax Sep 30 '13 at 16:29

score 0 · Answer 4 · answered Sep 24 '13 at 22:47

You should only have one $(document).ready() function because it will only be called once.

Try breaking your code apart and have your $(document).ready() call these parts, then repost if you are still having trouble.

ie

$(document).ready(function(){
         closeIcon();
         menuIcon();
      });

function closeIcon(){
//dostuff
}

function menuIcon(){
//dostuff
}

keep javascript menu open on new page load

4 Answers4