control visibility based on page

**drpcken** · Oct 19th, 2004, 09:41 AM

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!

**Acidic** · Oct 19th, 2004, 09:47 AM

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.

**drpcken** · Oct 19th, 2004, 10:05 AM

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!

**Acidic** · Oct 19th, 2004, 10:17 AM

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.

**Acidic** · Oct 19th, 2004, 10:21 AM

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>

**drpcken** · Oct 19th, 2004, 10:48 AM

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!

**drpcken** · Oct 19th, 2004, 11:03 AM

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

**drpcken** · Oct 19th, 2004, 12:04 PM

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

**Acidic** · Oct 19th, 2004, 01:33 PM

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"
    }

Thread: control visibility based on page

Thread Tools

Display

control visibility based on page

Posting Permissions