Solved

Page Reload

Posted on 2003-12-11
3
399 Views
Last Modified: 2010-04-06
I'm not sure where this question is appropriate, hopefully someone here can help.

I'm putting together a site, located at

http://www.jp-creations.net/gft/pages/pft_index.asp?curPage=pft_index&specPage=default

The left menu is currently in an IFRAME, and works in a method that clicking one of the main links reloads the page, checks the querystring, and displays the appropriate sub-links.  Clicking another main menu item (or the same one again) collapses the current menu and opens another.  My question is is there any way I can do this without having to reload the page?  The first version reloaded the entire site, with the new menu open - I managed to contain it in an IFRAME and now only the left side reloads, but if there is any way, I'd still like to remove that slight sequence where it flashes white when the page reloads.

I'd like for the page to remain constant, but have the menu's change when needed.  Is there anyway to accomplish this without using image pre-loads?  (There are too many images to pre-load).  I'd like to accomplish something like can be seen at www.cabair.com

Any help would be appreciated.
0
Comment
Question by:jpve
  • 2
3 Comments
 
LVL 15

Accepted Solution

by:
Timbo87 earned 250 total points
ID: 9924124
Here is an expand/collapse menu script I wrote:

<html>
<head>
<script language="JavaScript" type="text/javascript">
// Expand/Collapse Menu by Tim Pinkawa

function expand(loc)
{
      if(document.getElementById(loc).style.display=="block")
            document.getElementById(loc).style.display = "none"
      else
            document.getElementById(loc).style.display = "block"
}
</script>
</head>
<body>
<a href="#" onClick="expand('menu1');return false;"><img src="pic1.gif" border=0></a>
<br>
<div id="menu1" style="display:none">
<img src="pic2.gif" border=0>
<br>
<img src="pic3.gif" border=0>
</div>
<a href="#" onClick="expand('menu2');return false;"><img src="pic4.gif" border=0></a>
<br>
<div id="menu2" style="display:none">
<img src="pic5.gif" border=0>
<br>
<img src="pic6.gif" border=0>
</div>
</body>
</html>

Anything between the <div>'s gets displayed when you click the image/button/link. In this example, pic1.gif is the first menu and pic4.gif is the second menu. When you click pic1.gif it displays pic2.gif and pic3.gif. When you click pic4.gif it displays pic5.gif and pic6.gif. This script is Internet Explorer/Netscape/Mozilla compatible.

Hope this helps. If you have any questions or need any more customization please ask.
0
 

Author Comment

by:jpve
ID: 9926715
I have not tested this yet, as I didn't get the chance to check this until late.  I have no doubts that it will work, but will an open menu collapse if I click another main menu item?  For example, if I click pic1, and pic2 and 3 are both shown, if I click pic4 to open the next menu, will the first menu's items, pic2 and 3, collapse automatically?
0
 

Author Comment

by:jpve
ID: 9931034
Your technique works thanks, but is there anyway I can make it so the images don't have to preload?  Is it possible to have them dynamically appear, much the same as the secondary image of an image rollover which isn't set to preload?
0

Featured Post

Problems using Powershell and Active Directory?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

It's sometimes a bit tricky to use date functions in Oracle BPEL. I'll explain quickly how you can add N days to the current date. In a BPEL process this can be useful, and you can adapt it to fit your needs. First of all, let's see how to add 1 …
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question