Solved

Dynamically hiding/unhiding a frame

Posted on 2002-06-17
12
340 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
  • 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
 
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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
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

Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

Join & Write a Comment

Suggested Solutions

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…
Have you ever needed to get an ASP script to wait for a while? I have, just to let something else happen. Or in my case, to allow other stuff to happen while I was murdering my MySQL database with an update. The Original Issue This was written…
Access reports are powerful and flexible. Learn how to create a query and then a grouped report using the wizard. Modify the report design after the wizard is done to make it look better. There will be another video to explain how to put the final p…
Here's a very brief overview of the methods PRTG Network Monitor (https://www.paessler.com/prtg) offers for monitoring bandwidth, to help you decide which methods you´d like to investigate in more detail.  The methods are covered in more detail in o…

760 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

18 Experts available now in Live!

Get 1:1 Help Now