PDA

View Full Version : Installed "Responsive Side Toggle Menu " Browser Screen Completely Blank



Monica D
11-25-2015, 11:01 PM
1) Script Title: Responsive Side Toggle Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/sidetogglemenu.htm

3) Describe problem: When I open my test.html file with IE 9 Browser or Opera, the screen is completely blank. Initially, I added the side toggle menu to the home page I am working on and it did not work so I then set up simple index.html file to see how the DD side menu would work alone. I have both sidetogglemenu.css and sidetogglemenu.js in the root directory. I also ran a quick test in another .html file and javascript is running. I am a newbie and don't know what else to look for. Any help would be greatly appreciated. I really want to simply run the a toggle menu with one layer, not two.

This is the .html file:


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="sidetogglemenu.css">
<title>Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

<script src="sidetogglemenu.js"></script>

<script>
jQuery(function(){ // on DOM load
menu1 = new sidetogglemenu({ // initialize first menu example
id: 'togglemenu1',
marginoffset: 10,

})

menu2 = new sidetogglemenu({ // initialize second menu example
id: 'togglemenu2',
position: 'right',
revealamt: -5
})
})
</script>
<script>
jQuery(function(){ // on DOM load
menu1 = new sidetogglemenu({ // initialize first menu example
id: 'togglemenu1',
pushcontent: true // <- No comma after last option!
})
})
< /script>
</head>


<body>

<button onClick="menu1.toggle();" class="sideviewtoggle">Toggle Menu 1</button>
<div id="togglemenu1" class="sidetogglemenu">
<ul class="mainnav">
<li><a href="http://www.dynamicdrive.com/"><i class="fa fa-bolt"></i> Dynamic Drive</a></li>
<li><a href="http://www.dynamicdrive.com/style/"><i class="fa fa-css3"></i> CSS Library</a>
</ul></div>
<p style="padding:10px">
This menu's markup is defined inline on the page. With the setting <code>pushcontent: true</code>, the menu shifts the rest of the page's content to make room for itself when revealed.
</p>

</body>

</html>

Beverleyh
11-26-2015, 06:13 AM
For starters you have 2 initialisation instances for menu 1 - that may be conflicting. Plus there is no markup for menu 2 that you are also trying to initialise so that will likely cause issues too.

Try removing the first script block with the unused menu 1 and menu 2 initialisation. If that doesn't work, we need to see the actual live page to troubleshoot in a browser so post your link and we can take a look.

molendijk
11-26-2015, 01:28 PM
Did you test your test.html on the Internet or locally (on your hard drive)? Certain browsers don't allow (certain pieces of) javascript to be executed on the hard disk.