Tip: Click here to scan for System Errors and Optimize PC performance

August 25th, 2004, 10:06 am

Hi guys,

I'm having a really tough time trying to make my menu frame collapse. I plan on using the following frame sets for my page as my retarded drawing shows:



I am using this free java script to make it happen. And i know i'm doing something really silly with the code. I think the script assumes you're only using one frame on your page that you intend to collapse - unlike mine where i'm using 4 separate frames. My question is, in which frame(s) do i paste in the secondary code (step 2), and what parameters do i change? What does * mean, as in "javascript:parent.resizeFrame('*,5')"? Any help will be greatly appreciated! Thank you.

Sigma

August 25th, 2004, 12:46 pm

Update: I tested this code out using only 1 frame on the top and it works perfectly. So the problem is when I attempt using it in a multiple frame page. I'm guessing i need to add something on the other frames to keep them static, or remove something from the main code (that appears on the "master" frame page). Anyway, here's the code they ask you to paste on the "master" frame page:

Code: [ Download ] [ Select ]

<script type="text/javascript">

/***********************************************
* Collapsible Frames script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

var columntype=""
var defaultsetting=""

function getCurrentSetting(){
if (document.body)
return (document.body.cols)? document.body.cols : document.body.rows
}

function setframevalue(coltype, settingvalue){
if (coltype=="rows")
document.body.rows=settingvalue
else if (coltype=="cols")
document.body.cols=settingvalue
}

function resizeFrame(contractsetting){
if (getCurrentSetting()!=defaultsetting)
setframevalue(columntype, defaultsetting)
else
setframevalue(columntype, contractsetting)
}

function init(){
if (!document.all && !document.getElementById) return
if (document.body!=null){
columntype=(document.body.cols)? "cols" : "rows"
defaultsetting=(document.body.cols)? document.body.cols : document.body.rows
}
else
setTimeout("init()",100)
}

setTimeout("init()",100)

</script>

1. <script type="text/javascript">
3. /***********************************************
4. * Collapsible Frames script- © Dynamic Drive (www.dynamicdrive.com)
5. * This notice must stay intact for use
6. * Visit http://www.dynamicdrive.com/ for full source code
7. ***********************************************/
9. var columntype=""
10. var defaultsetting=""
12. function getCurrentSetting(){
13. if (document.body)
14. return (document.body.cols)? document.body.cols : document.body.rows
15. }
17. function setframevalue(coltype, settingvalue){
18. if (coltype=="rows")
19. document.body.rows=settingvalue
20. else if (coltype=="cols")
21. document.body.cols=settingvalue
22. }
24. function resizeFrame(contractsetting){
25. if (getCurrentSetting()!=defaultsetting)
26. setframevalue(columntype, defaultsetting)
27. else
28. setframevalue(columntype, contractsetting)
29. }
31. function init(){
32. if (!document.all && !document.getElementById) return
33. if (document.body!=null){
34. columntype=(document.body.cols)? "cols" : "rows"
35. defaultsetting=(document.body.cols)? document.body.cols : document.body.rows
36. }
37. else
38. setTimeout("init()",100)
39. }
41. setTimeout("init()",100)
43. </script>

And here are 3 options you can use depending on what you want:

1.

Code: [ Download ] [ Select ]

<a href="javascript:parent.resizeFrame('5,*')">Contact/Expand Top Frame</a>

2.

Code: [ Download ] [ Select ]

<form>
<input type="button" onClick="parent.resizeFrame('*,0')" value="Click here">
</form>

1. <form>
2. <input type="button" onClick="parent.resizeFrame('*,0')" value="Click here">
3. </form>

3.

Code: [ Download ] [ Select ]

<script>
document.ondblclick=function(){
parent.resizeFrame('1%, 50%, 49%')
}
</script>

1. <script>
2. document.ondblclick=function(){
3. parent.resizeFrame('1%, 50%, 49%')
4. }
5. </script>

Personally, i'd like to use option 3 in which you double click anywhere inside the frame you want to collapes. In my case, this would be my menu frame only on the left.

Again, here is the free javascript i'm using.

Thanks again for your help in advance!

Sigma

August 26th, 2004, 6:15 pm

no one??

[joebert]

August 26th, 2004, 8:26 pm

I'm not going into detail with this because it doesn't work in Mozilla browsers & I never can get anything about frames to work in Mozilla browsers

Basically give the middle row of a frameset a name & set the cols of the named row.

Code: [ Download ] [ Select ]

<html>
<head><title>Frame Test</title>
<script language="javascript">

function resizeFrames(sets){
    window.menu.cols = sets;
}

</script>
</head>

<frameset rows="20%,60%,20%" border="0px">

    <frame src="http://www.google.com"></frame>
    
    <frameset name="menu" cols="50%,50%">
        <frame src="menu.html"></frame>
        <frame src="http://www.google.com"></frame>
    </frameset>

    <frame src="http://www.google.com"></frame>

</frameset>

</html>

1. <html>
2. <head><title>Frame Test</title>
3. <script language="javascript">
5. function resizeFrames(sets){
6.     window.menu.cols = sets;
7. }
9. </script>
10. </head>
12. <frameset rows="20%,60%,20%" border="0px">
14.     <frame src="http://www.google.com"></frame>
15.     
16.     <frameset name="menu" cols="50%,50%">
17.         <frame src="menu.html"></frame>
18.         <frame src="http://www.google.com"></frame>
19.     </frameset>
21.     <frame src="http://www.google.com"></frame>
23. </frameset>
25. </html>

in menu.html,

Code: [ Download ] [ Select ]

<html>
<head>
<style>body{background:#123456}</style>
</head>
<body>
<a href="javascript:parent.resizeFrames('20%,80%');">test</a>
</body>
</html>

1. <html>
2. <head>
3. <style>body{background:#123456}</style>
4. </head>
5. <body>
6. <a href="javascript:parent.resizeFrames('20%,80%');">test</a>
7. </body>
8. </html>

As for getting it to work with dubbleclick I've never seen that before So I don't know what to tell you.

I hate to give such a vague answer here but I don't think anyone else wants to touch the frame subject

September 18th, 2006, 2:02 pm

Here is my solution. I think this is what you were looking for.

Here is the master frames page:

========================================
<html>
<head>
<title>Collapsible Frames Script</title>

<!--
This script may be used or modified without restriction
as long as this notice is kept in the script.
Author: Michael Silva of Albuquerque, New Mexico
Email: michael_silva@yahoo.com
-->

<script language="javascript">
function resizeFrames(preference){
if (preference == 1) {
window.topandbottom.rows = '0,*,0';
}
if (preference == 2) {
window.topandbottom.rows = '150,*,150';
}
if (preference == 3) {
window.leftandmain.cols = '0,*';
}
if (preference == 4) {
window.leftandmain.cols = '300,*';
}
if (preference == 5) {
window.topandbottom.rows = '150,*,0';
}
if (preference == 6) {
window.topandbottom.rows = '150,*,150';
}
if (preference == 7) {
window.topandbottom.rows = '0,*,150';
}
if (preference == {
window.topandbottom.rows = '150,*,150';
}
}
</script>

</head>

<frameset rows="150,*,150" name="topandbottom" framespacing="7" frameborder="0">
<frame src="top.htm" name="top">
<frameset cols="300,*" name="leftandmain">
<frame src="left.htm" name="left">
<frame src="main.htm" name="main">
</frameset>
<frame src="bottom.htm" name="bottom">
</frameset>

</html>
==========================================

Here are the other pages:

Left Page for left pane:

<html>
<head>
<title>Left Pane</title>

<!--
This script may be used or modified without restriction
as long as this notice is kept in the script.
Author: Michael Silva of Albuquerque, New Mexico
Email: michael_silva@yahoo.com
-->

</head>

<body bgcolor="yellow">

<a href="javascript:parent.resizeFrames(1);">Collapse Top and Bottom Panes</a><br>
<a href="javascript:parent.resizeFrames(2);">Expand Top and Bottom Panes</a>

</body>
</html>

===========================================

Top page for top frame:

<html>
<head>
<title>Top Pane</title>

<!--
This script may be used or modified without restriction
as long as this notice is kept in the script.
Author: Michael Silva of Albuquerque, New Mexico
Email: michael_silva@yahoo.com
-->

</head>

<body bgcolor="orange">

<a href="javascript:parent.resizeFrames(5);">Collapse Bottom Pane</a><br>
<a href="javascript:parent.resizeFrames(6);">Expand Bottom Pane</a>

</body>
</html>

=========================================

Bottom page for bottom pane:

<html>
<head>
<title>Bottom Pane</title>

<!--
This script may be used or modified without restriction
as long as this notice is kept in the script.
Author: Michael Silva of Albuquerque, New Mexico
Email: michael_silva@yahoo.com
-->

</head>

<body bgcolor="red">

<a href="javascript:parent.resizeFrames(7);">Collapse Top Pane</a><br>
<a href="javascript:parent.resizeFrames(8);">Expand Top Pane</a>

</body>
</html>

=======================================

Main page for main pane:

<html>
<head>
<title>Main Pane</title>

<!--
This script may be used or modified without restriction
as long as this notice is kept in the script.
Author: Michael Silva of Albuquerque, New Mexico
Email: michael_silva@yahoo.com
-->

</head>

<body bgcolor="white">

<a href="javascript:parent.resizeFrames(3);">Collapse Left Pane</a><br>
<a href="javascript:parent.resizeFrames(4);">Expand Left Pane</a>

</body>
</html>

=====================================

Have a nice day. Let me know if this helps.