PDA

View Full Version : 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/dynamicindex8/collapsemain.htm

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

i did that !

then add this 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):


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


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

..........

</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/dynamicindex17/dddropdownpanel.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:eek:
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:


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


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

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:


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


//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?
})

ctzulu
04-05-2012, 06:57 PM
If you want it to always be closed on page load, set the persiststate to false:


//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?
})


i want it always to stay open ( on first page load ) .... on click close !

jscheuer1
04-06-2012, 01:19 AM
I'm not sure what you're asking. Is it:

Open on first page load, and then persist open or closed after that for subsequent visits?

Or:

Always open when the page is loaded?

In either case, edit as shown at the top of dddropdownpanel.js:


//** DD Drop Down Panel- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com
//** Oct 21st, 08'- Script created
//** March 23rd, 09' v1.01- Arrow images now preloaded

function ddpanel(setting){
setting.dir="down" //initial state of panel (up="contracted")
if (setting.stateconfig.persiststate && ddpanel.getCookie(setting.ids[0])=="down"){
setting.dir="down"
}
if (setting.di . . .

If you want it to persist after that, set persiststate to true at the bottom. Otherwise make it false.

ctzulu
04-06-2012, 08:16 AM
100% solved !

--thx