Back To Programming / Scripting / Coding Forum

Collapsible Frame scripting... need help!

  • SigmaSquared
  • Novice
  • Novice
  • No Avatar
  • Joined: 24 Jul 2004
  • Posts: 23
  • Status: Offline

Post 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:

Image

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
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post August 25th, 2004, 10:06 am

  • SigmaSquared
  • Novice
  • Novice
  • No Avatar
  • Joined: 24 Jul 2004
  • Posts: 23
  • Status: Offline

Post 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:

Line number On/Off
Code: Select all
<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>


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

1.
Line number On/Off
Code: Select all
<a href="javascript:parent.resizeFrame('5,*')">Contact/Expand Top Frame</a>


2.
Line number On/Off
Code: Select all
<form>
<input type="button" onClick="parent.resizeFrame('*,0')" value="Click here">
</form>


3.
Line number On/Off
Code: Select all
<script>
document.ondblclick=function(){
parent.resizeFrame('1%, 50%, 49%')
}
</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
  • SigmaSquared
  • Novice
  • Novice
  • No Avatar
  • Joined: 24 Jul 2004
  • Posts: 23
  • Status: Offline

Post August 26th, 2004, 6:15 pm

no one?? :roll:
  • joebert
  • Super Moderator
  • Genius
  • User avatar
  • Joined: 10 Feb 2004
  • Posts: 9358
  • Loc: Clearwater, FL
  • Status: Offline

Post 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 :oops:

Basically give the middle row of a frameset a name & set the cols of the named row.
Line number On/Off
Code: Select all
<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>

in menu.html,
Line number On/Off
Code: Select all
<html>
<head>
<style>body{background:#123456}</style>
</head>
<body>
<a href="javascript:parent.resizeFrames('20%,80%');">test</a>
</body>
</html>


As for getting it to work with dubbleclick I've never seen that before :scratchhead: 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 :wink:
  • mrpolyglot
  • Born
  • Born
  • No Avatar
  • Joined: 17 Sep 2006
  • Posts: 2
  • Loc: Albuquerque
  • Status: Offline

Post 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 == 8) {
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.

Page 1 of 1

Post Information

  • Total Posts in this topic: 5 posts
  • Moderator: Moderator Team
  • Users browsing this forum: No registered users and 198 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© Unmelted Enterprises 1998-2008. Driven by phpBB © 2001-2008 phpBB Group.

 
 
 

Need a pre-made web design for your website?

Check out our templates here: Ozzu Templates

Perfect Money : Swiss approach to work with e-finance