We help IT Professionals succeed at work.

Problem in javascript

Steynsk
Steynsk asked
on
265 Views
Last Modified: 2017-04-27
Hi Expert,

I'm rather new to JavaScript. I used some code from the W3school site:

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_sidenav_push

But a strange thing happens when I use this script. I click the menu button and the menu appears I click a link to a page with the same menu and the new page opens with the menu in the initial closed state. But when I click the open link the menu no longer appears .

I think the status is opennav() and opening it up for the second time does not work.

Can I parse in the link to the second page to open up with its menu open?

All help is welcome.

Kind regards,

Frans
Comment
Watch Question

Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
You mean if you click about and it opens about.html, click the menu there it does not open?
Did you include the code on the about.html too?

You do not have any status in the script you show
CERTIFIED EXPERT
Top Expert 2010

Commented:
Did you include JavaScript on the second page?  Can you show us your script on that second page?
Also, check F12 console log in your browser for errors on that page.

Author

Commented:
Thank you Michael for you very quick response. THis is one of the pages but I have to send a complete set to make it work. That's why I didn't add the page in the first place.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="shortcut icon" href="../favicon.ico">
	  <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
	<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.4.5.min.css">
	<link rel="stylesheet" href="_assets/css/jqm-demos.css">
	<script src="js/jquery/jquery.js"></script>
	<script src="_assets/js/index.js"></script>
	<script src="js/jquery/jquery.mobile-1.4.5.min.js"></script>

<style>
	body {
		font-family: "Lato", sans-serif;
	}

	.sidenav {
		height: 100%;
		display: block;
		width: 0;
		position: fixed;
		z-index: 1;
		top: 0;
		left: 0;
		background-color: #d3d1d1;
		overflow-x: hidden;
		transition: 0.5s;
		padding-top: 60px;
	}

	.sidenav a {
		padding: 8px 8px 8px 32px;
		text-decoration: none;
		font-size: 25px;
		color: #818181;
		display: block;
		transition: 0.3s;
	}

	.sidenav a:hover, .offcanvas a:focus{
		color: #111;
	}

	.sidenav .closebtn {
		position: absolute;
		top: 0;
		right: 25px;
		font-size: 36px;
		margin-left: 50px;
	}

	.blok {
		margin-top: 10px;
		margin-bottom: 10px;
		margin-right: 200px;
		margin-left: 200px;
	}
	.menubuton {
		font-size:30px;
		cursor:pointer;
		color:rgb(0, 16, 149);
	}

	#main {
		transition: margin-left .5s;
		padding: 16px;
	}

	@media screen and (max-height: 450px) {
	  .sidenav {padding-top: 15px;}
	  .sidenav a {font-size: 18px;}
	}
</style>
<SCRIPT LANGUAGE="javascript"> 
function popupCenter(url, title, w, h) {
var left = (screen.width/2)-(w/2);
var top = (screen.height/2)-(h/2);
return window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
} 
</script>
</head>
<body>
<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="index.html">Home</a>
  <a href="vraag.html">Vraag</a>
  <a href="aanbod.html">Aanbod</a>
  <a href="lift.html">De lift</a>
  <a href="idee.html">Idee&euml;n bus</a>
  <a href="contact.asp">Contact</a>
</div>

<div id="main">

		<span class="menubuton" onclick="openNav()">&#9776; menu</span>

  <div class="blok">
    <div id="header">
       <img src="plaatjes/umcg.jpg" width=100% alt="logo"  />
    </div> 
	<h1><font color=rgb(41,90,95)>Binnengekomen (onderwijs) aanvragen</font></h1>
	<a onclick="popupCenter('OnderwijsBehoefteToevoegen.asp','Een (Onderwijs) behoefte toevoegen',1100,800);" href="javascript:void(0);" class="ui-btn ui-btn-inline ui-icon-plus ui-btn-icon-left">Een (onderwijs) behoefte toevoegen</a>
				<ul data-role="listview" data-inset="true">
					<li data-role="list-divider">Vrijdag, 13 april, 2017 <!--<span class="ui-li-count">2</span>--></li>
					<li><a href="progress.html">
						<h2>Tina Test</h2>
						<p><strong>Wil leren typen met 10 vingers</strong></p>
						<p>Hallo nu wij in de verpleging overgaan naar steeds meer digitaal werken lijkt het me handig om met tien vingers te kunnen typen. Vandaar de vraag om misschien iemand mij dit zou kunnen leren?</p>
						<p>
						<a href="progress.html" data-role="button" data-mini="true" data-inline="true" data-icon="check" data-theme="b" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" class="ui-btn ui-shadow ui-btn-corner-all ui-mini ui-btn-inline ui-btn-icon-left ui-btn-up-b"><span class="ui-btn-inner"><span class="ui-btn-text">Dat zou ik ook wel willen</span><span class="ui-icon ui-icon-check ui-icon-shadow">&nbsp;</span></span></a>
						<a href="progress.html" data-role="button" data-mini="true" data-inline="true" data-icon="check" data-theme="b" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" class="ui-btn ui-shadow ui-btn-corner-all ui-mini ui-btn-inline ui-btn-icon-left ui-btn-up-b"><span class="ui-btn-inner"><span class="ui-btn-text">Schrijf een reactie</span><span class="ui-icon ui-icon-check ui-icon-shadow">&nbsp;</span></span></a>
						<a href="progress.html" data-role="button" data-mini="true" data-inline="true" data-icon="check" data-theme="b" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" class="ui-btn ui-shadow ui-btn-corner-all ui-mini ui-btn-inline ui-btn-icon-left ui-btn-up-b"><span class="ui-btn-inner"><span class="ui-btn-text">Deel dit met een collega</span><span class="ui-icon ui-icon-check ui-icon-shadow">&nbsp;</span></span></a>
						</p>
						</a>
						<p class="ui-li-aside"><strong><a href="progress.html">3 collega's willen dit ook!</a><br><a href="progress.html">1 Reactie op dit bericht</a></strong></p>
						</li>
					<li><a href="progress.html">
						<h2>Jan Fictief</h2>
						<p><strong>Kan iemand mij helpen met het opzetten van een slimme CV?</strong></p>
						<p>Ik ben eigenlijk wel toe aan iets nieuws en ben op zoek naar iemand die mij kan helpen bij het bijwerken van mijn CV en het sterker maken van mij LinkedIn profiel.</p>
						<p>
						<a href="progress.html" data-role="button" data-mini="true" data-inline="true" data-icon="check" data-theme="b" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" class="ui-btn ui-shadow ui-btn-corner-all ui-mini ui-btn-inline ui-btn-icon-left ui-btn-up-b"><span class="ui-btn-inner"><span class="ui-btn-text">Dat zou ik ook wel willen</span><span class="ui-icon ui-icon-check ui-icon-shadow">&nbsp;</span></span></a>
						<a href="progress.html" data-role="button" data-mini="true" data-inline="true" data-icon="check" data-theme="b" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" class="ui-btn ui-shadow ui-btn-corner-all ui-mini ui-btn-inline ui-btn-icon-left ui-btn-up-b"><span class="ui-btn-inner"><span class="ui-btn-text">Schrijf een reactie</span><span class="ui-icon ui-icon-check ui-icon-shadow">&nbsp;</span></span></a>
						<a href="progress.html" data-role="button" data-mini="true" data-inline="true" data-icon="check" data-theme="b" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" class="ui-btn ui-shadow ui-btn-corner-all ui-mini ui-btn-inline ui-btn-icon-left ui-btn-up-b"><span class="ui-btn-inner"><span class="ui-btn-text">Deel dit met een collega</span><span class="ui-icon ui-icon-check ui-icon-shadow">&nbsp;</span></span></a>
						</p>
					</a>
					<p class="ui-li-aside"><strong><a href="progress.html">2 Reactie op dit bericht</a></strong></p>
					</li>
					<li data-role="list-divider">Maandag, 27 maart, 2017 <!--<span class="ui-li-count">1</span>--></li>
					<li><a href="progress.html">
						<h2>Karin Proef</h2>
						<p><strong>Zoekt een coach en klankbord voor nieuwe functie.</strong></p>
						<p>Ik heb een nieuwe aanstelling en ben nog wat onzeker over het P&O deel van deze functie daarom ben ik op zoek naar iemand die mij voor drie maanden kan begeleiden/coachen zodat ik een klankbord heb.</p>
						<!--<p class="ui-li-aside"><strong>4:48</strong>PM</p>-->
												<p>
						<a href="progress" data-role="button" data-mini="true" data-inline="true" data-icon="check" data-theme="b" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" class="ui-btn ui-shadow ui-btn-corner-all ui-mini ui-btn-inline ui-btn-icon-left ui-btn-up-b"><span class="ui-btn-inner"><span class="ui-btn-text">Dat zou ik ook wel willen</span><span class="ui-icon ui-icon-check ui-icon-shadow">&nbsp;</span></span></a>
						<a href="progress" data-role="button" data-mini="true" data-inline="true" data-icon="check" data-theme="b" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" class="ui-btn ui-shadow ui-btn-corner-all ui-mini ui-btn-inline ui-btn-icon-left ui-btn-up-b"><span class="ui-btn-inner"><span class="ui-btn-text">Schrijf een reactie</span><span class="ui-icon ui-icon-check ui-icon-shadow">&nbsp;</span></span></a>
						<a href="progress" data-role="button" data-mini="true" data-inline="true" data-icon="check" data-theme="b" data-corners="true" data-shadow="true" data-iconshadow="true" data-wrapperels="span" class="ui-btn ui-shadow ui-btn-corner-all ui-mini ui-btn-inline ui-btn-icon-left ui-btn-up-b"><span class="ui-btn-inner"><span class="ui-btn-text">Deel dit met een collega</span><span class="ui-icon ui-icon-check ui-icon-shadow">&nbsp;</span></span></a>
						</p>
					</a>
					<p class="ui-li-aside"><strong><a href="progress.html">1 collega willen dit ook!</a><br><a href="progress.html">3 Reacties op dit bericht</a></strong></p>
					</li>
				</ul>
	</div>
</div>
<script>
function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft= "0";
}
</script>
</body>
</html> 

Open in new window

CERTIFIED EXPERT
Top Expert 2010

Commented:
I have to send a complete set to make it work

can you explain this a little more?  I'm not sure what you mean by this.

Author

Commented:
All pages have the same structure. And there are no error to show. clicking the open/menu button in the second page does not result into opening up the menu.

And I think it is because its status conflicts.

Author

Commented:
When I open up the menu the first time I use opennav() and it opens. Then in the menu I click a menu item and it opens with its menu closed so again I send opennav() but then it does not open.  

All navigation on all pages are the same. Only the content is different.

So that why I ask would it be possible to send parameters that cause the second page to open with opened menu? I think this will solve my problem and it adds more logic to my page.
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
Thanks for all your support.

I've transported the pages to a test location:

http://www.idiezijn.nl/vodo

You enter in the index.html then go to the menu choose menu item "Vraag" in that page (vraag.html) you open the menu again and you choose "Home"  and the menu does no longer open....
CERTIFIED EXPERT
Top Expert 2010

Commented:
You should check F12 console log, like I mentioned earlier.  There are errors.

Also, the reason why it's not working is because of the way you're calling the page.  You're using a GET call instead of a page redirect.  GET does not load the JavaScript.  Use page redirect instead.  You can test this by refreshing the page after you click Home.
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
Weirdest thing. The font of the menu is not even the same when I return from vraag to index.

At this time I was not able to figure it out

Megan - I believe what you say about GET is incorrect. GET will run JS without any problems.
AJAX is another thing, then the clicks needs to be deferred. Additionally the errors are not JS errors.
CERTIFIED EXPERT
Expert of the Year 2008
Top Expert 2008

Commented:
On lines 75-77 you have:
if (status > "") {
    openNav()
}

Open in new window


but at that point, openNav() has not been defined so it throws an error.  Whenever there is an error, javascript execution is halted.  Simply move the definitions of the functions to the top, before you call them:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Cache-Control" content="no-store" />
<meta charset="utf-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />
<style type="text/css">
	body {
		font-family: "Lato", sans-serif;
	}

	.sidenav {
		height: 100%;
		display: block;
		width: 0;
		position: fixed;
		z-index: 1;
		top: 0;
		left: 0;
		background-color: #d3d1d1;
		overflow-x: hidden;
		transition: 0.5s;
		padding-top: 60px;
	}

	.sidenav a {
		padding: 8px 8px 8px 32px;
		text-decoration: none;
		font-size: 25px;
		color: #818181;
		display: block;
		transition: 0.3s;
	}

	.sidenav a:hover, .offcanvas a:focus{
		color: #111;
	}

	.sidenav .closebtn {
		position: absolute;
		top: 0;
		right: 25px;
		font-size: 36px;
		margin-left: 50px;
	}

	.blok {
		margin-top: 10px;
		margin-bottom: 10px;
		margin-right: 200px;
		margin-left: 200px;
	}
	.menubutton {
		font-size:30px;
		cursor:pointer;
		color:rgb(0, 16, 149);
	}

	#main {
		transition: margin-left .5s;
		padding: 16px;
	}

	@media screen and (max-height: 450px) {
	  .sidenav {padding-top: 15px;}
	  .sidenav a {font-size: 18px;}
	}
</style>

<script type="text/javascript">
function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft= "0";
}

function getUrlParam(name) {
    var results = new RegExp('[\\?&]' + name + '=([^&#]*)').exec(window.location.href);
    return (results && results[1]) || undefined;
}

var status = getUrlParam('status');
if (status > "") {
    openNav()
}

function popupCenter(url, title, w, h) {
    var left = (screen.width/2)-(w/2);
    var top = (screen.height/2)-(h/2);
  return window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left);
} 
</script>
</head>
<body>
<div id="mySidenav" class="sidenav">
  <!--<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>-->
  <a href="index.html">Home</a>
  <a href="vraag.html">Vraag</a>
  <a href="aanbod.html">Aanbod</a>
  <a href="lift.html">De lift</a>
  <a href="idee.html">Idee&euml;n bus</a>
  <a href="contact.asp">Contact</a>
</div>

<div id="main">

		<span class="menubutton" onclick="openNav()">&#9776; menu</span>

  <div class="blok">
    <div id="header">
       <img src="plaatjes/umcg.jpg" width=100% alt="logo"  />
    </div> 
	<h1><font color=rgb(41,90,95)>Welkom op VoDo</font></h1>
	<center>
<p>VODO staat voor "Voor ons & door ons" een initiatief door medewerkers en voor medewerkers.<br>Met dit pioniers initiatief proberen we de in de organisatie aanwezige kennis en opleidingsbehoefte<br>bij elkaar te brengen en bij te dragen aan de "netwerk organisatie" van het UMCG.</p>
<p>Hier kun je opgeven wat je van een colllega zou willen leren of opgeven waarin<br>je zelf een les zou willen verzorgen. </p><p>Tevens verzamelen we in onderdeel "in de lift" de succes verhalen van medewerkers die anderen zouden kunnen inspireren.</p> 
</center>
	</div>
</div>
</body>
</html> 

Open in new window

CERTIFIED EXPERT
Top Expert 2010
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
CERTIFIED EXPERT
Top Expert 2010

Commented:
@hielo  : that error doesn't actually occur until you refresh the page.  I think that's a different issue?
IT Expert
CERTIFIED EXPERT
Top Expert 2009
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
CERTIFIED EXPERT
Most Valuable Expert 2017
Distinguished Expert 2019
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
Just remove the script - it is not used

Author

Commented:
Thanks for your help
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.