Collapsible Frame Script ...HOW ?

**ctzulu** · 03-31-2012, 03:12 PM

1) Script Title: Collapsible Frame Script

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...llapsemain.htm

3) Describe problem: ok in the decription it says insert this code in the head

i did that !

then add this code

Code:

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

ok done ... but how do i get it working like in the example

in example i see a yahoo page on the top in my page nothing happens

can somebody rewrite the instructions please .. i want yahoo page exchanged with domain.com/page2.html how do i insert it into my index.html

**jscheuer1** · 03-31-2012, 05:09 PM

You need a frameset page as the top (parent in this case) page, here's the demo page (scroll the code block to the bottom to see the frameset):

Code:

<html>
<head>
<title>Dynamic Drive DHTML Scripts- Collapsible (aka Contractible) Frame Script</title>
<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>
</head>

<frameset rows="140,*">
<frame src="http://search.yahoo.com" scrolling=yes border=1>
<frame src="collapseframe.htm" name="mainwin">
</frameset>
</html>

Then on your collaseframe.htm page, which is a separate page you may have that link:

Code:

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

**ctzulu** · 03-31-2012, 06:45 PM

ahhh now i undertand the logic
thank you

i noticed that ie works but chrome has problems
in ie the frame is open while loading the page the first time
but i can close the frame after i click the link

in chrome it is open and cannot be closed !!!

is there also other dynamicdrive scripts that collapses content from the top ??
i guess my project where i want to add this to tumblr,com is simply to difficult

the strange part with the frameset is this :

..........

Code:

</head>
my story 
<frameset rows="140,*">
<frame src="http://search.yahoo.com" scrolling=yes border=1>
<frame src="collapseframe.html" name="mainwin">
the rest of the story 
</frameset>
another text
</html>

when i start writing before or after the frameset the whole construction wont work anymore
so the whole content of the mainpage must me in the collapsable.html ??
that is why i ask for other techniques to put content on a top frame

**jscheuer1** · 03-31-2012, 08:11 PM

Yes (all your content goes on collapseframe.html). And this is an older script. Framesets aren't used all that much anymore.

The demo page works in Chrome though. Chrome is finicky about frames and often requires that all the pages be live in order to perform as expected.

You might want to look into:

http://www.dynamicdrive.com/dynamici...pdownpanel.htm

It uses content right on the page. If you want or need a different page in there, you can use an iframe.

**ctzulu** · 04-02-2012, 01:24 PM

thank you for the tip i will study the new code just today !

so this is an old script .. do you think it makes sense to wait for an update
without framesets

**jscheuer1** · 04-02-2012, 02:10 PM

The script I linked you to is essentially that update. The older script is kept around because Dynamic Drive rarely retires scripts, and because some folks do still use framesets, and/or would want to for some specific situations.

Framesets are still valid. But because they're a bit unwieldy (more than one page is contained within yet another page and that page has different rules than an ordinary page), most folks prefer to avoid them.

**ctzulu** · 04-02-2012, 07:08 PM

done !

i learned the new script & installed .. working !
also looks fantastic !!!!

i dont want to create a new thread for this but...
when the content inside the toggle shows a link
you said i can handle these links (loading) like an iframe ?

so far it always LOADS the whole site new

in the example we have the milkyway wiki link
:question : can this link be loaded inside the toggle with scrolling=true ?

**jscheuer1** · 04-03-2012, 02:16 PM

You have two basic choices. Either have an iframe in the toggler div that shows another page on your site. That iframe page can have links to other pages on it. They will open in it. Or have an iframe there but not populated and hidden. When a link is clicked, have its target be that iframe and reveal the iframe.

The first method is easier and involves no additional javascript. But you would probably want to make the page on your site fit in the iframe so that there would be no scrolling to begin with. This can be done by setting the iframe's scrolling to auto and it's css style to overflow: auto, as well as the page you put in it, though that page's css overflow might be better as hidden. Once other pages are loaded into it, if scrollbars are required, they will appear.

Regardless of what method you use, even if you were to use the old script with its frameset, when you load an external page - one from another site into a frame or an iframe, there's always a chance that it won't cooperate as many sites have 'break out of frames' code or sometimes 'do not render in frames' code on their pages. If they have either of those, they won't display in a frame or iframe. 'Break out' pages will take over the tab or window, 'don't render' pages will show blank or some advisory message.

To setup the first method, make a page - call it content.htm:

HTML Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
html, body {
	color: #fff;
	background-color: #000;
}
</style>
</head>
<body>
<p style="padding:10px">
<img src="http://i36.tinypic.com/kak1t0.jpg" class="closepanel" style="float:left; width:200px; height:172px; margin:0 10px 10px 0" />The Milky Way is a barred spiral galaxy that is part of the Local Group of galaxies. Although the Milky Way is one of billions of galaxies in the observable universe,[4] its special significance to humanity is that it is the home galaxy of our Solar System. The plane of the Milky Way galaxy is visible from Earth as a band of light in the night sky, and it is the appearance of this band of light which has inspired the name for our galaxy. It is extremely difficult to define the age at which the Milky Way formed, but the age of the oldest star in the Galaxy yet discovered, HE 1523-0901, is estimated to be about 13.2 billion years, nearly as old as the Universe itself. -Source: <a href="http://en.wikipedia.org/wiki/Milky_way" style="color:white">Wikipedia</a>.
</p>
<br style="clear: left" />
<p>Note: Click on any link or the Milky Way Image auto closes the panel.</p>
</body>
</html>

And for Step 2 on the demo page, substitute this code:

HTML Code:

<div id="mypanel" class="ddpanel">
<div id="mypanelcontent" class="ddpanelcontent">
<iframe src="content.htm" width="100%" height="260" scrolling="auto" frameborder="0"></iframe>
</div>
<div id="mypaneltab" class="ddpaneltab">
<a href="#"><span>Toggle</span></a>
</div>

</div>

**ctzulu** · 04-05-2012, 06:02 PM

fantastic explaination!!!!

i think i can really work with it .. last thing i cant figure out alone is

how can i make the toggle load collapsed ?
what i mean is site loads and toggle is expanded directly .. with of course the option to close it when clicked

**jscheuer1** · 04-05-2012, 06:34 PM

After Step 2 on the demo page there's a section titled:

Set up Information

It shows the code from inside the dddropdownpanel.js file. Using a text only editor like NotePad, open the file and go to the bottom, that's where this set up information is located. It probably already has an initial of 5px with persistence true:

Code:

//initialize instance of DD Drop Down Panel:

var defaultpanel=new ddpanel({
	ids: ["mypanel", "mypanelcontent", "mypaneltab"], // id of main panel DIV, content DIV, and tab DIV
	stateconfig: {initial: "5px", persiststate: true}, // initial: initial reveal amount in pixels (ie: 5px)
	animate: {enabled: true, steps: 5}, //steps: number of animation steps. Int between 1-20. Smaller=faster.
	pointerimage: {enabled: true, src: ["arrow-down.gif", "arrow-up.gif"]},
	closepanelonclick: {enabled: false} // close panel when links or elements with CSS class="closepanel" within container is clicked on?
})

That means if you close the panel, refresh the page, or leave and come back, it will still be closed. It also means that the first time you go to the page, it should be closed. But it also means if you leave it open and come back later or refresh, it will still be open.

If you want it to always be closed on page load, set the persiststate to false:

Code:

//initialize instance of DD Drop Down Panel:

var defaultpanel=new ddpanel({
	ids: ["mypanel", "mypanelcontent", "mypaneltab"], // id of main panel DIV, content DIV, and tab DIV
	stateconfig: {initial: "5px", persiststate: false}, // initial: initial reveal amount in pixels (ie: 5px)
	animate: {enabled: true, steps: 5}, //steps: number of animation steps. Int between 1-20. Smaller=faster.
	pointerimage: {enabled: true, src: ["arrow-down.gif", "arrow-up.gif"]},
	closepanelonclick: {enabled: false} // close panel when links or elements with CSS class="closepanel" within container is clicked on?
})

Thread: Collapsible Frame Script ...HOW ?

Thread Tools

Search Thread

Collapsible Frame Script ...HOW ?

Bookmarks

Bookmarks

Posting Permissions