www.webdeveloper.com
Results 1 to 4 of 4

Thread: Multi page function with links on drop-down

  1. #1
    Join Date
    Nov 2012
    Posts
    5

    Multi page function with links on drop-down

    I have put together a multi page function, so there are multiple pages within the same webpage, and I would like the links to the multiple pages to be accessible via a drop-down rather than normal links. I have found a code for this, however it doesn't seem to be working for some reason.

    HTML Code:
    <div style='width:400px; height:400px; background-color:white; border-style:solid; border-color:#000000; border-width:1px; overflow:hidden;'>
    <script>
     function goToPage(url)
     {
     if (url != "")
     {
     .open(url);
     }
     }
    </script>
    <form>
     <label>Select a page:</label>
     <select accesskey="S" onchange="goToPage(this.options(this.selectedIndex).value)">
     <option selected>Please select one</option>
     <option value="#page1">Page 1</option>
     <option value="#page2">Page 2</option>
     <option value="#page3">Page 3</option>
     <option value="#page4">Page4</option>
     </select>
    </form>
    	
    	<a name='page1'></a>
    	<div style='width:400px; height:400px; overflow:auto;'>
    	this is page 1
    	</div>
    	
    	<a name='page2'></a>
    	<div style='width:400px; height:400px; overflow:auto;'>
    	this is page 2
    	</div>
    	
    	<a name='page3'></a>
    	<div style='width:400px; height:400px; overflow:auto;'>
    	this is page 3
    	</div>
    	
    	<a name='page4'></a>
    	<div style='width:400px; height:400px; overflow:auto;'>
    	this is page 4
    	</div>
    </div>
    Any help is greatly appreciated.
    Thanks.

  2. #2
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,016
    The problem would have to be with the line containing ".open(url);" since this isn't a valid function. My guess is there is something else that should be included with this code you found that declares that method.

    In any case you can simply replace it with something like this to get it working:
    Code:
    window.location = String(window.location).replace(/\#.*$/, "") + url;

  3. #3
    Join Date
    Nov 2012
    Posts
    5
    Quote Originally Posted by Sup3rkirby View Post
    The problem would have to be with the line containing ".open(url);" since this isn't a valid function. My guess is there is something else that should be included with this code you found that declares that method.

    In any case you can simply replace it with something like this to get it working:
    Code:
    window.location = String(window.location).replace(/\#.*$/, "") + url;
    I tried it, but it didn't work.

  4. #4
    Join Date
    Mar 2005
    Location
    Behind you...
    Posts
    1,016
    I just ran the code myself and there were two things I needed to mention. Firstly, the reason that code doesn't seem to work is due to the <select> fields onchange value. It should be onchange="goToPage(this.value)"

    This will allow everything to function properly, however this is one more 'issue'. After more closely looking at your entire code I noticed each of your pages are contained within a <div> that has a fixed width/height and hidden overflow. Your little page-switching form is also contained within this <div>. For this reason, moving from one page to another in that <div> will end up hiding your page switching form (due to it being pushed outside of the visible box limits). I'm not sure if it's necessary to have it inside of that main <div> or not, but placing it just above would easily fix this issue.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles