Jump to content

Help with Show/Hide Buttons...


Agent Moose

Recommended Posts

When ever the page loads, it automaticly have the iframes shown. How do I make it so that when the page loads, it will always be hidden, so you have to press the Show button to show it...Here is the code I am useing...

<script>function hide(which) {var hide = new Array();hide = document.getElementsByName(which);for (i=0; i<hide.length; i++) {  hide[i].style.display = 'none';}}function show(which) {var hide = new Array();hide = document.getElementsByName(which);for (i=0; i<hide.length; i++) {  hide[i].style.display = 'inline';}}</script><input type="button" value="Show A" onclick="show('a');"><input type="button" value="Hide A" onclick="hide('a');"><iframe src='http://www.smfsupport.com/support/' width='100%' height='100%' scrolling='yes' name='a'></iframe><br><input type="button" value="Show B" onclick="show('b');"><input type="button" value="Hide B" onclick="hide('b');"><iframe src='http://www.google.com' width='100%' height='100%' scrolling='yes' name='b'></iframe><br><input type="button" value="Show C" onclick="show('c');"><input type="button" value="Hide C" onclick="hide('c');"><iframe src='http://www.google.com' width='100%' height='100%' scrolling='yes' name='c'></iframe>

Link to comment
Share on other sites

One way to start would be to use CSS:

<style type="text/css">iframe { display: none; }</style>

This will make all of your iframes invisible when the page loads.

Link to comment
Share on other sites

Thanks. Now I have another questions. I have changed some stuff with the code. I have added buttons to make the iframe get smaller and bigger if you press them. Just like the buttons on the bottom text area when your typing a message to make the text area bigger or smaller. Mine doesn't work though...

<script>function show(which) {var hide = new Array();hide = document.getElementsByName(which);for (i=0; i<hide.length; i++) {  hide[i].style.display = 'inline';}}function hide(which) {var hide = new Array();hide = document.getElementsByName(which);for (i=0; i<hide.length; i++) {  hide[i].style.display = 'none';}}</script><style type="text/css">iframe { display: none; }</style><table cellpadding="0" cellspacing="0" style="padding:0px;margin:0px;" id='std-table-buttons' width="100%"><tr><td style="padding:0px;margin:0px;" align="center" width="1%" valign='top' nowrap="nowrap"><b>SMFFF Support</b><input type="button" value="Show" onclick="show('a');"><input type="button" value="Hide" onclick="hide('a');"></td><td style="padding:0px;margin:0px;height:0px" align="right" valign='top' width="99%"><input type="button" value=" + " onclick=''std_window_resize( 100  ); name="a"/><input type="button" value=" - " onclick=''std_window_resize( -100  ); name="a"/></td></tr></table><iframe src='http://www.smfsupport.com/support/' width='100%' height='100%' scrolling='yes' name='a'></iframe><table cellpadding="0" cellspacing="0" style="padding:0px;margin:0px;" id='std-table-buttons' width="100%"><tr><td style="padding:0px;margin:0px;" align="center" width="1%" valign='top' nowrap="nowrap"><b>Google</b>     <input type="button" value="Show" onclick="show('b');"><input type="button" value="Hide" onclick="hide('b');"></td><td style="padding:0px;margin:0px;height:0px" align="right" valign='top' width="99%"><input type="button" value=" + " onclick=''std_window_resize( 100  ); name="b"/><input type="button" value=" - " onclick=''std_window_resize( -100  ); name="b"/></td></tr></table><iframe src='http://www.google.com' width='100%' height='100%' scrolling='yes' name='b'></iframe><table cellpadding="0" cellspacing="0" style="padding:0px;margin:0px;" id='std-table-buttons' width="100%"><tr><td style="padding:0px;margin:0px;" align="center" width="1%" valign='top' nowrap="nowrap"><b>Google</b>     <input type="button" value="Show" onclick="show('c');"><input type="button" value="Hide" onclick="hide('c');"></td><td style="padding:0px;margin:0px;height:0px" align="right" valign='top' width="99%"><input type="button" value=" + " onclick=''std_window_resize( 100  ); name="c"/><input type="button" value=" - " onclick=''std_window_resize( -100  ); name="c"/></td></tr></table><iframe src='http://www.google.com' width='100%' height='100%' scrolling='yes' name='c'></iframe>

Link to comment
Share on other sites

I'm not sure what you are trying to do with this:

onclick=''std_window_resize( 100  );

It should be more like:

onclick="std_window_resize( 100 );"

But then, I don't see anywhere in your code where you have a function named "std_window_resize" declared so that will return an error until you build that function.

Link to comment
Share on other sites

How would I build the function?
Check out the HTML DOM. This page talks about many of the properties and methods that are available to you with the iframe object:http://www.w3schools.com/htmldom/dom_obj_iframe.asp
var frame1 = document.getElementById("iframe1");frame1.height = "400px";  // sets the iframe's height to 400pxframe1.width = "400px";frame1.src = "http://www.google.com/"; // set's the src of the frame to google's page

Link to comment
Share on other sites

Sorry for the Double post...I know what to make the buttons change. So when it isn't showing it will say "Show" then when you click on it, it changes to "Hide". I know I have to have an ID for it, and I have to use the onclick event. The other one that is above, it doesn't work if you have more than one of the buttons on. So, I want the code to work if you have more than one on a page.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...