Results 1 to 2 of 2

Thread: Create Multiple Instances On Single Page.

  1. #1
    Join Date
    May 2014
    Posts
    31
    Thanks
    16
    Thanked 0 Times in 0 Posts

    Default Create Multiple Instances On Single Page.

    1) Script Title: Side Push Menu

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

    3) Describe problem:

    I am currently using this script for my navigation. I have removed the fa-fa-bars thingy at the side and am using an image to toggle the menu.
    Code:
    <nav id="pushmenu1" class="pushmenu">
    
    [CONTENT OF NAVIGATION PANEL HERE]
    
    </nav>
    
    
    <a href="#"><img src="img/navnew.png"  onClick="menu1.toggle(); return false" class="toggleitem"   id="navlink"</img></a>
    However each page is going to be a tour of various parts of town, incorporating a list of things to see/visit, to keep the page reasonably sized I was hoping to have a list of venues with each one also toggling a separate side push menu on which I could add map / photo / address / etc.
    Code:
    <ul>
    
    <li><a href="#" onClick="menu2.toggle(); return false" class="toggleitem"><strong>Venue 1</strong></a></li>
    
    <li><a href="#" onClick="menu3.toggle(); return false" class="toggleitem"><strong>Venue 2</strong></a></li>
    
    <li><a href="#" onClick="menu4.toggle(); return false" class="toggleitem"><strong>Venue 3</strong></a></li>
    
    <li><a href="#" onClick="menu5.toggle(); return false" class="toggleitem"><strong>Venue 4</strong></a></li>
    
    <li><a href="#" onClick="menu6.toggle(); return false" class="toggleitem"><strong>Venue 5</strong></a></li>
    
    </ul>
    For each one I have added a new <nav id> EG:
    Code:
    <nav id="pushmenu2" class="pushmenu">
    
    [CONTENT OF NAVIGATION PANEL HERE]
    
    </nav>
    And added to the javascript:
    Code:
    jQuery(function(){ // on DOM load
    
    	menu1 = new pushmenu({  // initialize menu example
    		menuid: 'pushmenu1',
    		position: 'left',
    		marginoffset: 0,
    		revealamt: -8,
    		onopenclose:function(state){
    			//console.log(state) //"open" or "closed"
    		}
    	})
    
    
    })
    
    
    jQuery(function(){ // on DOM load
    
    	menu2 = new pushmenu({  // initialize menu example
    		menuid: 'pushmenu2',
    		position: 'left',
    		marginoffset: 0,
    		revealamt: -8,
    		onopenclose:function(state){
    			//console.log(state) //"open" or "closed"
    		}
    	})
    
    
    })
    But all that happens is the original navigation toggle link (The one open the navigation panel) works the same, however of the subsequent venue ones the top one jumps me top of the page and the others do nothing at all.

    I realise in the posting guidelines it says you don't cover trying to use a script multiple times so if it is a complex issue please just let me know and I'll come up with another way of acheiving it, if however anybody spots something simple I am just being silly and missing that'd be great

  2. #2
    Join Date
    Aug 2004
    Posts
    10,143
    Thanks
    3
    Thanked 1,008 Times in 993 Posts
    Blog Entries
    16

    Default

    The script does support multiple instances of itself on the page. I just tried it out using a skeleton page with 3 push menus on it, and all of them seem to work. Here is the full HTML:

    Code:
    <meta name="viewport" content="width=device-width" />
    
    <link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Rosario:400,700' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" type="text/css" href="pushmenu.css" />
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
    
    
    <script src="pushmenu.js">
    
    /***********************************************
    * Side Push Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
    ***********************************************/
    
    </script>
    
    <script>
    
    jQuery(function(){ // on DOM load
    
    	menu1 = new pushmenu({  // initialize menu example
    		menuid: 'pushmenu1',
    		position: 'left',
    		marginoffset: 0,
    		revealamt: -8,
    		onopenclose:function(state){
    			//console.log(state) //"open" or "closed"
    		}
    	})
    
    	menu2 = new pushmenu({  // initialize menu example
    		menuid: 'pushmenu2',
    		position: 'left',
    		marginoffset: 0,
    		revealamt: -8,
    		onopenclose:function(state){
    			//console.log(state) //"open" or "closed"
    		}
    	})
    
    	menu3 = new pushmenu({  // initialize menu example
    		menuid: 'pushmenu3',
    		position: 'left',
    		marginoffset: 0,
    		revealamt: -8,
    		onopenclose:function(state){
    			//console.log(state) //"open" or "closed"
    		}
    	})
    
    
    })
    
    </script>
    
    <div id="contentwrapper">
    
     Your page contents here...
     Your page contents here...
     Your page contents here...
    <br />
    <a href="#" onClick="menu1.toggle(); return false" class="toggleitem">Toggle Menu</a>
    
    <br />
    <a href="#" onClick="menu2.toggle(); return false" class="toggleitem">Toggle Menu</a>
    
    <br />
    <a href="#" onClick="menu3.toggle(); return false" class="toggleitem">Toggle Menu</a>
    
    </div>
    
    <nav id="pushmenu1" class="pushmenu">
    
    	<h2>Navigation</h2>
    
    	<div class="closebutton fa fa-plus-circle" title="Close Menu"></div>
    
    	<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></li>
    	<li><a href="http://www.dynamicdrive.com/forums/"><i class="fa fa-comment-o"></i> Help Forums</a></li>
    	<li><a href="http://tools.dynamicdrive.com/button/"><i class="fa fa-search"></i> Search</a></li>
    	<li><a href="http://tools.dynamicdrive.com/imageoptimizer/"><i class="fa fa-gears"></i> Gif Optimizer</a></li>
    	<li><a href="http://tools.dynamicdrive.com/favicon/"><i class="fa fa-gears"></i> Favicon Creator</a></li>
    	<li><a href="http://tools.dynamicdrive.com/button/"><i class="fa fa-gears"></i> Button Maker</a></li>
    	</ul>
    
    	<h2>Share It</h2>
    
    	<p style="padding: 10px">Follow us on <a href="http://twitter.com/ddrivegeorge">Twitter</a> or via <a href="http://pipes.yahoo.com/pipes/pipe.run?_id=a5e67ec6024feb24f1f5a78ee33fe991&_render=rss">RSS feed!</a></p>
    	
    </nav>
    
    
    <nav id="pushmenu2" class="pushmenu">
    
    	<h2>Navigation</h2>
    
    	<div class="closebutton fa fa-plus-circle" title="Close Menu"></div>
    
    	<ul class="mainnav">
    	<li><a href="http://www.dynamicdrive.com/"><i class="fa fa-bolt"></i> Dynamic Drive 2</a></li>
    	<li><a href="http://www.dynamicdrive.com/style/"><i class="fa fa-css3"></i> CSS Library</a></li>
    	<li><a href="http://www.dynamicdrive.com/forums/"><i class="fa fa-comment-o"></i> Help Forums</a></li>
    	<li><a href="http://tools.dynamicdrive.com/button/"><i class="fa fa-search"></i> Search</a></li>
    	<li><a href="http://tools.dynamicdrive.com/imageoptimizer/"><i class="fa fa-gears"></i> Gif Optimizer</a></li>
    	<li><a href="http://tools.dynamicdrive.com/favicon/"><i class="fa fa-gears"></i> Favicon Creator</a></li>
    	<li><a href="http://tools.dynamicdrive.com/button/"><i class="fa fa-gears"></i> Button Maker</a></li>
    	</ul>
    
    	<h2>Share It</h2>
    
    	<p style="padding: 10px">Follow us on <a href="http://twitter.com/ddrivegeorge">Twitter</a> or via <a href="http://pipes.yahoo.com/pipes/pipe.run?_id=a5e67ec6024feb24f1f5a78ee33fe991&_render=rss">RSS feed!</a></p>
    	
    </nav>
    
    
    <nav id="pushmenu3" class="pushmenu">
    
    	<h2>Navigation</h2>
    
    	<div class="closebutton fa fa-plus-circle" title="Close Menu"></div>
    
    	<ul class="mainnav">
    	<li><a href="http://www.dynamicdrive.com/"><i class="fa fa-bolt"></i> Dynamic Drive 3</a></li>
    	<li><a href="http://www.dynamicdrive.com/style/"><i class="fa fa-css3"></i> CSS Library</a></li>
    	<li><a href="http://www.dynamicdrive.com/forums/"><i class="fa fa-comment-o"></i> Help Forums</a></li>
    	<li><a href="http://tools.dynamicdrive.com/button/"><i class="fa fa-search"></i> Search</a></li>
    	<li><a href="http://tools.dynamicdrive.com/imageoptimizer/"><i class="fa fa-gears"></i> Gif Optimizer</a></li>
    	<li><a href="http://tools.dynamicdrive.com/favicon/"><i class="fa fa-gears"></i> Favicon Creator</a></li>
    	<li><a href="http://tools.dynamicdrive.com/button/"><i class="fa fa-gears"></i> Button Maker</a></li>
    	</ul>
    
    	<h2>Share It</h2>
    
    	<p style="padding: 10px">Follow us on <a href="http://twitter.com/ddrivegeorge">Twitter</a> or via <a href="http://pipes.yahoo.com/pipes/pipe.run?_id=a5e67ec6024feb24f1f5a78ee33fe991&_render=rss">RSS feed!</a></p>
    	
    </nav>
    DD Admin

Similar Threads

  1. how to initialize multiple instances on one page?
    By p2ds in forum Dynamic Drive scripts help
    Replies: 3
    Last Post: 08-04-2011, 05:21 PM
  2. Replies: 0
    Last Post: 07-12-2011, 05:03 PM
  3. Up down slideshow Script - multiple instances on page
    By MultifariousP in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 04-09-2009, 02:36 AM
  4. side scrolling horizontal image gallery (multiple instances on a page) wanted
    By mpiedlourde in forum Looking for such a script or service
    Replies: 1
    Last Post: 03-12-2008, 03:29 PM
  5. Please help with multiple scripting on single page
    By Audee2 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 09-24-2004, 07:26 PM

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
  •