Solved

Page Reload

Posted on 2003-12-11
3
398 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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Article by: Matthew
I am a very big proponent of technology compliance standards and strive to meet such criteria in all of my work. That includes my site, which is 100% XHTML 1.0 compliant as determined by the World Wide Web Consortium. https://www.matthewstevenkel…
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
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…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

896 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now