Solved

Page Reload

Posted on 2003-12-11
3
394 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
Comment Utility
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
Comment Utility
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
Comment Utility
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

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

When you work with shopping cart / ecommerce relates web sites, you need to pass the certain form post details to the payment gateway process page with required details for the products items you give to order. Also you may need to track the ordered…
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
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…

763 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

8 Experts available now in Live!

Get 1:1 Help Now