Problem in javascript
Hi Expert,
I'm rather new to JavaScript. I used some code from the W3school site:
https://www.w3schools.com/
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
I'm rather new to JavaScript. I used some code from the W3school site:
https://www.w3schools.com/
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
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
Did you include the code on the about.html too?
You do not have any status in the script you show
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.
Also, check F12 console log in your browser for errors on that page.
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()">×</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ën bus</a>
<a href="contact.asp">Contact</a>
</div>
<div id="main">
<span class="menubuton" onclick="openNav()">☰ 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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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"> </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>
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.
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.
And I think it is because its status conflicts.
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.
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.
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....
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....
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.
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.
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.
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.
On lines 75-77 you have:
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:
if (status > "") {
openNav()
}
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()">×</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ën bus</a>
<a href="contact.asp">Contact</a>
</div>
<div id="main">
<span class="menubutton" onclick="openNav()">☰ 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>
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.