PDA

View Full Version : Help with frames



tech_support
05-26-2006, 04:54 AM
Hi,

I was wondering if you can hide and show frames (like a script)?

Is it possible?
Can you make it slide?

Thanks in advance,

________

Peter

benslayton
05-26-2006, 05:01 AM
Like this?
I-Frame Scroller (http://www.dynamicdrive.com/dynamicindex2/iframe-scroller.htm)

In this one you can take off the frame...
Do this, take:


<script type="text/javascript">

/***********************************************
* IFRAME Scroller script- Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

//specify path to your external page:
var iframesrc="external.htm"

//You may change most attributes of iframe tag below, such as width and height:
document.write('<iframe id="datamain" src="'+iframesrc+'" width="150px" height="150px" marginwidth="0" marginheight="0" hspace="0" vspace="0" frameborder="1" scrolling="no"></iframe>')

</script>

The highlited text, frameborder="1" Change it to frameborder=""
Example with out a frame (http://shout.to/jesus)

I think that what you want right?

jscheuer1
05-26-2006, 05:08 AM
How do you show and hide a script? Um, iframes may be shown or hidden in the usual manner for all HTML elements. There are many variations but the two basic methods are, to hide - set either the display style property to none or the visibility property to hidden. To reveal iframes hidden in these fashions set the display property to inline or the visibility property to visible, respectively:


<script type="text/javascript">
function showHideEl(id){
document.getElementById(id).style.visibility=document.getElementById(id).style.visibility=='hidden'? 'visible' : 'hidden';
}
</script>


<iframe id='test'></iframe><br>
<input type="button" value="Show/Hide" onclick="showHideEl('test')">

The main difference between display and visibility is that setting display to none takes the element out of the flow of the document, not even reserving a spot for it, often causing the layout to shift. Setting visibility to hidden leaves the element in place as well as its spot in the document, you just can't see it.

tech_support
05-26-2006, 07:33 AM
No, sorry I don't want iFrames.

I mean like a frame in a frameset.

I want to be able to press a button on another page and then the 'contents' frame to disappear. Not like just change the visibility, the display.

And, if possible, to have a 'slide' effect.

Sorry 'bout that

______________

Peter

djr33
05-26-2006, 07:56 AM
It's possible... but there are logic holes.

changing the frameset onmouseover or something would be awkward... even with a click.

Can you give a link or more info as to why this is the needed solution? It'll help make sense of the right method to do it as well.

tech_support
05-26-2006, 09:10 AM
It's possible... but there are logic holes.

changing the frameset onmouseover or something would be awkward... even with a click.

Can you give a link or more info as to why this is the needed solution? It'll help make sense of the right method to do it as well.

Hi,

I need the solution for a web application I'm developing. I want the user to have the menu, and hide it so he can read the information. And, I'm not considering to use a JavaScript menu.

And, if possible, to make a slide in effect (Like I said before) for more special effect.

I don't need the Slide in Effect, but it would be nice if it was there :)

For example, the contents page is on the left and the page is on the right. On the page there is a button saying [Hide/Show Menu]. When the user clicks the [Hide/Show Menu] button, the "contents" page hides. And when the user clicks the [Hide/Show Menu] button again, the menu shows.

______________

Peter

jscheuer1
05-26-2006, 04:56 PM
There are better or more complete ways to do this but, for what you describe, this should work and is well documented:

http://www.dynamicdrive.com/dynamicindex8/collapsemain.htm

benslayton
05-26-2006, 05:44 PM
oopps. My bad again. "brain Fart"!!

tech_support
05-27-2006, 05:10 AM
Oh, right! OK!

Thanks for the script

But now just one more question?

Can you make the frames slide in and out?

Thanks for your help!


________________


Peter

tech_support
05-27-2006, 05:18 AM
Just applied the script and it works! (With a bit of adjusting)

Now, can you make it slide in?

djr33
05-27-2006, 05:36 AM
I really doubt that you could do so.

There may be ways, and actually probably are some weird ways to do it with javascript, but it would be very processor intensive to rerender the frameset, and both pages (or more) that is was affecting.

Frames aren't graphics... they're tools.
As such, if you need graphical stuff, you better look into flash or something more suited for those needs. (Or even just tables/divs/etc on a page, not frames).

However, someone may have a script.. but it isn't the right way.

It's like asking how to cut a piece of wood in half with a screwdriver and a hammer... sure, might end up working, but there are much better ways.

shachi
05-27-2006, 07:08 AM
I think if you want to make them slide in then you should use div's with overflow hidden and use some of the scriptaculous effects to slide them in and out.
That's only a guess.

tech_support
05-27-2006, 08:11 AM
Yeah, but the point is:

Is there a slide in frames script?

I don't really want it to do in div's or layer's or table's or anything else. I just want to do frames.

And plus I don't want it for graphical stuff, just to make it a nice, professional-looking web application without the use of flash.

Because, I'm actually developing this web application for school and half the computers there don't have Flash! If they do, it'll be blocked due to proxy's.

shachi
05-27-2006, 02:51 PM
First things first ... take a look at this website http://dhtmlnirvana.com/index_back.html if you want slide in like those on you website then it will ONLY be possible with divs OR tables OR layers(same as divs but available in NS) if you want the frame itself to slide then I am sorry to say but it is IMPOSSIBLE(may be I am wrong but as far as I know)!!! And I don't think that there is any thing like sliding frame script. That's all I have to say.
Sorry if my post was a little offensive.:(

tech_support
05-28-2006, 05:32 AM
Anyone willing to modify the "Collapisable Frame Script" and one of the slide-in scripts for me?

Thanks in advance!

djr33
05-28-2006, 07:20 AM
Again, don't know if this is possible... we'll see if someone knows.

tech_support
05-28-2006, 07:24 AM
And for shachi:

No offence taken

jscheuer1
05-29-2006, 06:02 AM
This script is called from the child pages in the same manner as the original -

ex (as in the demo of the original):


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


The script goes in the head of the frameset page, like the original:


<script type="text/javascript">

/***********************************************
* Sliding Collapsible Frames script- freely adapted from:
* Collapsible Frames script- Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
* Modifications John Davenport Scheuer - username: jscheuer1
* As first seen in: http://www.dynamicdrive.com/forums
***********************************************/

var columntype="";
var defaultsetting='';
var settingvalues=new Array();
var diff=new Array();
var units=new Array();
var thecurrent=new Array();
var thesettings=new Array();
var defaultscroll=new Array();

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

function setframevalue(settingvalue){
settingvalues=settingvalue.split(',')
thecurrent=getCurrentSetting().split(',')
for (var i_tem = 0; i_tem < settingvalues.length; i_tem++)
if(thecurrent[i_tem]!=='*'&&settingvalues[i_tem]!=='*')
units[i_tem]=settingvalues[i_tem].replace(/[\d\* ]/g, '').length>0?settingvalues[i_tem].replace(/[\d\* ]/g, ''):thecurrent[i_tem].replace(/[\d\* ]/g, '')
for (i_tem = 0; i_tem < settingvalues.length; i_tem++){
settingvalues[i_tem]=isNaN(parseFloat(settingvalues[i_tem]))?settingvalues[i_tem]:parseFloat(settingvalues[i_tem])
thecurrent[i_tem]=isNaN(parseFloat(thecurrent[i_tem]))?thecurrent[i_tem]:parseFloat(thecurrent[i_tem])
}
for (i_tem = 0; i_tem < settingvalues.length; i_tem++)
diff[i_tem]=isNaN((settingvalues[i_tem]-thecurrent[i_tem])/10)?'':(settingvalues[i_tem]-thecurrent[i_tem])/10
var theframes=document.getElementsByTagName?document.getElementsByTagName('frame'):document.all.tags('frame');
for (i_tem = 0; i_tem < theframes.length; i_tem++)
if(theframes[i_tem].contentDocument)
tryem(1, theframes, i_tem);
else{
defaultscroll[i_tem]=theframes[i_tem].scrolling
theframes[i_tem].scrolling='no';
}
doit()
}

function doit(){
for (var i_tem = 0; i_tem < settingvalues.length; i_tem++){
if (settingvalues[i_tem]!==thecurrent[i_tem])
thecurrent[i_tem]=isNaN(thecurrent[i_tem]*1+diff[i_tem]*1)?thecurrent[i_tem]:thecurrent[i_tem]*1+diff[i_tem]*1
thesettings[i_tem]=thecurrent[i_tem]+units[i_tem]
}
if (columntype=="rows")
document.body.rows=thesettings.join(',')
else
document.body.cols=thesettings.join(',')
if(settingvalues.join().replace(/ /g, '')==thecurrent.join().replace(/ /g, '')){
var theframes=document.getElementsByTagName?document.getElementsByTagName('frame'):document.all.tags('frame');
for (i_tem = 0; i_tem < theframes.length; i_tem++)
if(theframes[i_tem].contentDocument)
tryem(2, theframes, i_tem);
else
theframes[i_tem].scrolling=defaultscroll[i_tem];
return;
}
else
setTimeout("doit()",70)
}

function resizeFrame(contractsetting){
if(typeof getCurrentSetting()!=='string')
return;
if (getCurrentSetting().replace(/[% ]/g, '')!=defaultsetting.replace(/[% ]/g, ''))
setframevalue(defaultsetting)
else
setframevalue(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>
<!-- The below script is required for error handling -->
<!-- Do not remove commenting (required for validation) or alter it -->
<script type="text/javascript">
<!--
function tryem(num, theframes, i_tem){
if(num==1){
defaultscroll[i_tem]=theframes[i_tem].scrolling
theframes[i_tem].scrolling='no';
}
else
theframes[i_tem].scrolling=defaultscroll[i_tem];
}
document.write("<script language=\"javascript1.5\">\n\
/*Language Attribute Required & Type Attribute excluded for error handling -\n\
Do not change or modify above script tag. */\n\
function tryem(num, theframes, i_tem){\n\
if(num==1)\n\
try{\n\
defaultscroll[i_tem]=theframes[i_tem].contentDocument.body.style.overflow;\n\
theframes[i_tem].contentDocument.body.style.overflow='hidden';\n\
}\n\
catch(e){\n\
defaultscroll[i_tem]=theframes[i_tem].scrolling\n\
theframes[i_tem].scrolling='no';\n\
}\n\
else\n\
try{theframes[i_tem].contentDocument.body.style.overflow=defaultscroll[i_tem];}\n\
catch(e){theframes[i_tem].scrolling=defaultscroll[i_tem];}\n\
}\n\
<\/script>")
//-->
</script>

tech_support
05-30-2006, 11:26 PM
Thanks!

tr4ssj2
04-11-2010, 03:38 AM
For some reason it doesn't seem to work for me. when I click the trigger the frame just expands and takes up the whole page. Anyone have an idea?

Will

djr33
04-11-2010, 03:47 AM
This discussion is four years old. Linking to your page for an example may help us be able to figure out what is going on after so much time.

jscheuer1
04-11-2010, 04:16 AM
For some reason it doesn't seem to work for me. when I click the trigger the frame just expands and takes up the whole page. Anyone have an idea?

Will

Please post a link to a page on your site that contains the problematic code so we can check it out.