control visibility based on page

Printable View

Oct 19th, 2004, 09:41 AM
drpcken

control visibility based on page

I have a page with two frames, a top and a bottom.

I want to have a control in the top frame page visible based on the page thats loaded in the bottom frame page.

For instance, i have a button in my top frame, and i want it to be visible if a certain page is loaded, but invisible if other pages are loaded the bottom frame.

Hope this makes sense.

Thanks!
Oct 19th, 2004, 09:47 AM
Acidic

Here's how to do that. MAke the bottom frame run a function onload. Make that function hide/show the element as you want it. To address the element in the other frame I think you do something like:
parent.topFrameName.document.getElementById('elementID').style.visibility='hidden'

but I'm not sure, that might be wrong.
Oct 19th, 2004, 10:05 AM
drpcken

Hey thanks for the quick response!!

I'm very new to javascript, so how would i declare my onLoad event? I know i put it all the code before my </head> tag, but how do i tell it to run the code onLoad? looking at other javascript, it seems that i call the function right after my <body> tag with a <script language="javascript">functionName;</script>

is that right? Thanks for the help!
Oct 19th, 2004, 10:17 AM
Acidic

shove this in the head tag ie between <head> and </head>:

Code:

<script type="text/javascript"> function hideElem() { parent.topFrameName.document.getElementById('elementID').style.visibility='hidden' } </script>

Then run this onload like this:

Code:

<body onload="hideElem()">

Note that I still haven't tested this. I know that'll make the function run, but I might have a mistake in the syntax. I never use frames and therefore might have a mistake.
Oct 19th, 2004, 10:21 AM
Acidic

OK. Now I've tested it and this works:
index.html:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> </head> <frameset cols="80,*" frameborder="no" border="0" framespacing="0"> <frame src="left.html" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" /> <frame src="right.html" name="mainFrame" id="mainFrame" /> </frameset> <noframes><body> </body></noframes> </html>

left.html:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>Untitled Document</title> <script type="text/javascript"> function hideElem() { parent.mainFrame.document.getElementById('myTXT').style.visibility='hidden' } </script> </head> <body onload="hideElem()"> left </body> </html>

right.html:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Untitled Document</title> </head> <body> swf<br /> <input type="text" value="sdfhldslkfjsdf" id="myTXT" /> </body> </html>
Oct 19th, 2004, 10:48 AM
drpcken

Dude this is working great so far. I have but one more request.

This element in the top frame is hidden or visible based on a variable in the bottom frame. I can get the variable and fill it with the value i need (either going to be a 0 or a 1) and if its a zero, I need the element in the top frame to be hidden, if its a 1 it needs to be visible.

So i have created the variable in my aspx page, and have my javascript in place to hide the variable, how can i tell my javascript to reference the variable and make it hidden or not? I know its an If Then Else statement in my JS, but I'm not sure how to set it up.

You've been a GREAT help man. Thanks again!
Oct 19th, 2004, 11:03 AM
drpcken

by the way, the variable is created using VB code and the value is pulled from sql

:)
Oct 19th, 2004, 12:04 PM
drpcken

Ok I did some tweaking, and instead of using vb to pull my variable, it will be in a textbox I created. I've created a variable like this:

Code:

var varDNC;

and now I want to put the value of the textbox in the variable, here's what I'm trying but I'm kinda confused...

Code:

varDNC = txtDNC.name; //this is putting the value of my textbox into my new var i just made, not sure if its right though

Then I want to do an if statement saying

Code:

If varDNC = 0 then parent.topFrame.document.getElementById("lblDNC").style.visibility="visible" Else parent.topFrame.document.getElementById("lblDNC").style.visibility="hidden";

I think I'm really close, I just usually don't code in javascript and I'm very confused.

Thanks!!!
Oct 19th, 2004, 01:33 PM
Acidic

JavaScript cannot read variables made by ASP and vice versa. You'll have to have ASP echo this somewhere:
JSvar = <% print ASPvar; %>
As you can tell I know no ASP, but you need to end up with:
JSvar = 1 or JSvar = 0
That has to go quite early on. You'll need this so that the JS can read the variable taken from the database.

Once JS knows what the variable is, do:

Code:

if (JSvar ==1) { parent.topFrame.document.getElementById("lblDNC").style.visibility="visible" } else { parent.topFrame.document.getElementById("lblDNC").style.visibility="hidden" }