Solved

Dynamically hiding/unhiding a frame

Posted on 2002-06-17
12
347 Views
Last Modified: 2012-06-22
Now I have a frame for the side menu which slide from/to the left. It looks ugly when the menu is not expanded because there is nothing on that frame.
Is there anyway to dynamically hide/unhide the frame as the user interacts with the side menu?
0
Comment
Question by:neural
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
  • +3
12 Comments
 
LVL 5

Expert Comment

by:Christian_Wenz
ID: 7083248
the only way to hide a frame is to load a new document that contains no frame :-(
0
 
LVL 30

Expert Comment

by:third
ID: 7083262
suggestion is, u put the side menu on a layer just like any ordinary dynamic menu otherwise you will need to keep your menu expanded on the first level.
0
 
LVL 30

Expert Comment

by:third
ID: 7083264
my first suggestion looks like what the link below show. try moving your mouse on the mid-left part of the browser.

http://www.dynamicdrive.com/dynamicindex1/slideinmenu.htm
0
Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

 
LVL 8

Accepted Solution

by:
drittich earned 200 total points
ID: 7083508
Here is how to hide a frame.  Save these 3 files to test, and then load f.htm:

f.htm
=====
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
</head>
<frameset cols="40%, 60%" >
<frame src="f1.htm">
<frame src="f2.htm">
</frameset>
</html>

f1.htm
======
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>menu</title>
</head>
<body>
this is menu frame
</body>
</html>

f2.htm
======
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<script language="javascript">
     function HideMenu() {
          parent.document.body.cols = '*, 100%';
     }
     function ShowMenu() {
          parent.document.body.cols = '20%, 80%';
     }
</script>
<title></title>
</head>
<body>
<input type="button" value="Hide Menu" onClick="HideMenu()"><br>
<input type="button" value="Show Menu" onClick="ShowMenu()">
</body>
</html>

You can get rid of the frame border by changing f.htm to:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title></title>
</head>
<frameset cols="40%, 60%" >
<frame src="f1.htm" frameborder="0">
<frame src="f2.htm" frameborder="0">
</frameset>
</html>
0
 
LVL 4

Expert Comment

by:Zvika
ID: 7083520
Well, you can easily use Javascript.
give your frameset an id, and then change the columns to be (0,*) to hide your left frame.
The folowing code will work in IE 5.0+ both Mac& Win:
---------- your frameset file ---------------
<html>
<head>
<title>FrameSet</title>
</head>
<frameset cols="20%,80%" id="myFrameSet" name="myFrameSet">
  <frame src="LeftCol.asp" name="SideMenu" id="SideMenu">
  <frame src="RightCol.asp" name="RightFrame" id="RightFrame">
</frameset>
<noframes>
<body bgcolor="#FFFFFF" text="#000000">
</body>
</noframes>
</html>
-------------------------------------------------
Now in one of your files (LeftCol.asp or RightCol.asp), you put the following code on any event you'd like (OnClick, onMouseOut etc.)
onAnyEvent='parent.document.getElementById("myFrameSet").cols = "0,*"'
then to the frame visible again you can do:
onAnyEvent='parent.document.getElementById("myFrameSet").cols = "20%,80%"'
------------------------------------------------------

I hope that's what you meant.
If you need any more help, add a comment.

Good Luck
Zvika
0
 
LVL 18

Expert Comment

by:bruno
ID: 7083675
neural,

this question has nothing to do with ASP, why did you post in this TA?
0
 
LVL 5

Expert Comment

by:Christian_Wenz
ID: 7083694
changing the "cols" property will not work in Netscape 4.x, and since this browser still is widely used, the presented approaches IMHO are not usable. I stay with my opinion - only possible with reload.
0
 
LVL 8

Expert Comment

by:drittich
ID: 7083740
Yes, if Netscape must be supported, you can reload the frameset definition by

<input type="button" onClick="top.location.href='alternative_frameset.html'" value="Resize Frames">
0
 

Author Comment

by:neural
ID: 7084061
Answer to brunober:
I was thinking about posing this on JavaScript TA. Yet,
I do not have enough knowledge to tell whether this can be achieved through other approaches and I am writting ASP pages...
0
 
LVL 18

Expert Comment

by:bruno
ID: 7084249
neural,

Ok...just wondered why.  :-)

how about some feedback for all those experts trying to help you?  

also, DO you need to support netscape or no?
0
 

Author Comment

by:neural
ID: 7084403
Thank you everyone, the sliding menu now is working like charm. Special thanks to drittich and Zvika.
To Third, the example was applied sliding menu within the same frame.
I am assingning anothe 200 ponits to Zvika for I have accepted drittich's answer for this question.
0
 

Author Comment

by:neural
ID: 7084416
And yes, I do like to learn how to support netscape on this.
0

Featured Post

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

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

I recently decide that I needed a way to make my pages scream on the net.   While searching around how I can accomplish this I stumbled across a great article that stated "minimize the server requests." I got to thinking, hey, I use more than one…
I would like to start this tip/trick by saying Thank You, to all who said that this could not be done, as it forced me to make sure that it could be accomplished. :) To start, I want to make sure everyone understands the importance of utilizing p…
In this video we outline the Physical Segments view of NetCrunch network monitor. By following this brief how-to video, you will be able to learn how NetCrunch visualizes your network, how granular is the information collected, as well as where to f…
If you’ve ever visited a web page and noticed a cool font that you really liked the look of, but couldn’t figure out which font it was so that you could use it for your own work, then this video is for you! In this Micro Tutorial, you'll learn yo…

724 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