Hidden Div layers controller by JavaScript

This is getting really irritating....

Page 1 of 1

9 Replies - 39465 Views - Last Post: 09 August 2005 - 04:30 PM

#1 WebMasterDefiance  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 8
  • Joined: 07-August 05

Hidden Div layers controller by JavaScript

Posted 07 August 2005 - 10:55 PM

I'm developing a website for an appraisal business. I have a link that when the user moves the mouse over it, a hidden div layer becomes visible giving information about a certain aspect of appraisal. For some reason IE tells me that an object is expected which means that the div layer isn't being recognized as an object even though it has an id and everything. What is this junk?

This post has been edited by WebMasterDefiance: 10 August 2005 - 12:35 PM

Is This A Good Question/Topic? 1
  • +

Replies To: Hidden Div layers controller by JavaScript

#2 skyhawk133  Icon User is offline

  • Head DIC Head
  • member icon

Reputation: 1866
  • View blog
  • Posts: 20,278
  • Joined: 17-March 01

Re: Hidden Div layers controller by JavaScript

Posted 07 August 2005 - 11:04 PM

Can you post your code so we can take a look, feel free to attach the .html file if it's inline, otherwise just put it in [ code ] tags and we'll re-create the page. Thanks, and welcome to dream.in.code!
Was This Post Helpful? 0
  • +
  • -

#3 WebMasterDefiance  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 8
  • Joined: 07-August 05

Re: Hidden Div layers controller by JavaScript

Posted 07 August 2005 - 11:14 PM

Yeah. Sorry about not posting the code. Here it is.

<html>
	<head>
  <title>LAS ~ Lloyd Appraisal Services Select Home Page</title>
  <script language="Javascript">
 	 function show_div()
 	 {
    document.getElementById(RegUser1).style.visibility = "visible";
 	 }
  </script>
	</head>

	<body>

  <!-- This is the page that the user will be able to see a different section of the site depending on who they are -->
  <center><img src="Logo1.png" /></center>

  <h1 style="text-align:center; text-decoration:underline;">Choose your home page</h1>

  <table cols="1" cellpadding="20" cellspacing="0" width="500" height="300" align="center">
 	 <tr>
    <td style="border-left-width:0px; border-top-width:0px; border-bottom-width:0px; border-right-width:3px; text-align:center;"><h3 style="text-decoration:underline;">Regular User</h3><a id="RegUser" href="LASRegUserHome.html" style="border-color:white;" onmouseenter="javascript:show_div()">Home</a><br /><br />This is the home page that is suitable for users who want a personal appraisal on their homes.</td>
    <td style="border-left-width:3px; border-top-width:0px; border-bottom-width:0px; border-right-width:0px; text-align:center;"><h3 style="text-decoration:underline;">Contracting Companies</h3><a href="LASContractUserHome.html" style="border-color:white;"><img id="Contractuser" src="ContractUp.bmp"></a><br /><br />This is the home page that is more suitable for users from contracting companies.</td>
 	 </tr>
  </table>

  <!-- The invisible DIV elements that explain the different sections --> 
  <div id="RegUser1" style="width:225px; height:175px; border-color:black; border-width:1px; background-color:lemonchiffon; visibility:hidden; position:absolute; top:290px; left:350px;"><h4>Regular User</h4></div>

	</body>
</html>

Was This Post Helpful? 0
  • +
  • -

#4 skyhawk133  Icon User is offline

  • Head DIC Head
  • member icon

Reputation: 1866
  • View blog
  • Posts: 20,278
  • Joined: 17-March 01

Re: Hidden Div layers controller by JavaScript

Posted 07 August 2005 - 11:25 PM

Grrr, I have no idea what's causing that off the top of my head, we use very similar code on our hidden divs and don't have that problem in IE that I'm aware of.

However, I must comment on the following piece of code:
background-color:lemonchiffon;


That's one puurrrrdy color ;)

Hmmm, upon some further looking, it doesn't even appear to work in firefox... I don't see that div appearing at all.

Here is the code we use, passing the ID as a parameter, and also doing an on/off depending on if it was showing to begin with, notice we are using a different CSS property...

function hiderow(theTable)
{
     if (document.getElementById(theTable).style.display == 'none')
     {
          document.getElementById(theTable).style.display = 'block';
     }
     else
     {
          document.getElementById(theTable).style.display = 'none';
     }
}


That's the code that runs the top right hand box with the forums list, if you click the little arrows they will expand or contract.
Was This Post Helpful? 0
  • +
  • -

#5 WebMasterDefiance  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 8
  • Joined: 07-August 05

Re: Hidden Div layers controller by JavaScript

Posted 07 August 2005 - 11:31 PM

I'm gonna give it a whirl to see if it does anything for my predicament. Thanks. Yes lemon chiffon seems to work very nicely and is a good color.
Was This Post Helpful? 0
  • +
  • -

#6 skyhawk133  Icon User is offline

  • Head DIC Head
  • member icon

Reputation: 1866
  • View blog
  • Posts: 20,278
  • Joined: 17-March 01

Re: Hidden Div layers controller by JavaScript

Posted 07 August 2005 - 11:35 PM

Ooooh, one other thing, I think you are missing a return in there, this is how we implement our onclick, you should do the same for your mouse action:

onclick="hiderow('3');return true;"


notice the ;return true;, I think that's what is causing the error, you may be able to just add that to your current implementation.
Was This Post Helpful? 0
  • +
  • -

#7 WebMasterDefiance  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 8
  • Joined: 07-August 05

Re: Hidden Div layers controller by JavaScript

Posted 07 August 2005 - 11:45 PM

Oy. Not working. This has been driving me nuts for days.

I modified my function to look similar to yours but using the ID of my div as the parameter and passing is so it looks like this:

  <script language="Javascript">
 	 function show_div(RegUser1)
 	 {
    if (document.getElementById(RegUser1).style.display == 'none')
    {
   	 document.getElementById(RegUser1).style.display = 'block';
    }
    else
    {
   	 document.getElementById(RegUser1).style.display = 'none';
    }
 	 }
  </script>


Sorry if the indents are funky. It's how I code. B)

But I have one question, you said I needed the return true in my event on the link. I see that you are passing a value back to the function. Could this be what is causing my problem because I added the return true and it still gave me an error.

This post has been edited by WebMasterDefiance: 08 August 2005 - 03:18 PM

Was This Post Helpful? 0
  • +
  • -

#8 snoj  Icon User is offline

  • Married Life
  • member icon

Reputation: 84
  • View blog
  • Posts: 3,564
  • Joined: 31-March 03

Re: Hidden Div layers controller by JavaScript

Posted 08 August 2005 - 07:38 PM

My show/hide javascript. And the page it's used on.

Yes, I know I could have done it with just two functions.
Was This Post Helpful? 0
  • +
  • -

#9 Codemonger  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 8
  • Joined: 08-August 05

Re: Hidden Div layers controller by JavaScript

Posted 09 August 2005 - 10:07 AM

Heres the fixed code -- it's in the javascript (i just commented the original code and placed the new line in)

<html>
<head>
 <title>LAS ~ Lloyd Appraisal Services Select Home Page</title>
 <script language="Javascript">
  function show_div()
  {
  // document.getElementById(RegUser1).style.visibility = "visible";
  document.getElementById("RegUser1").style.visibility = "visible"; 
  }
 </script>
</head>

<body>

 <!-- This is the page that the user will be able to see a different section of the site depending on who they are -->
 <center><img src="Logo1.png" /></center>

 <h1 style="text-align:center; text-decoration:underline;">Choose your home page</h1>

 <table cols="1" cellpadding="20" cellspacing="0" width="500" height="300" align="center">
  <tr>
   <td style="border-left-width:0px; border-top-width:0px; border-bottom-width:0px; border-right-width:3px; text-align:center;"><h3 style="text-decoration:underline;">Regular User</h3><a id="RegUser" href="LASRegUserHome.html" style="border-color:white;" onmouseenter="javascript:show_div()">Home</a><br /><br />This is the home page that is suitable for users who want a personal appraisal on their homes.</td>
   <td style="border-left-width:3px; border-top-width:0px; border-bottom-width:0px; border-right-width:0px; text-align:center;"><h3 style="text-decoration:underline;">Contracting Companies</h3><a href="LASContractUserHome.html" style="border-color:white;"><img id="Contractuser" src="ContractUp.bmp"></a><br /><br />This is the home page that is more suitable for users from contracting companies.</td>
  </tr>
 </table>

 <!-- The invisible DIV elements that explain the different sections --> 
 <div id="RegUser1" style="width:225px; height:175px; border-color:black; border-width:1px; background-color:lemonchiffon; visibility:hidden; position:absolute; top:290px; left:350px;"><h4>Regular User</h4></div>

</body>
</html>


here are the two lines side by side (original commented out):

// document.getElementById(RegUser1).style.visibility = "visible";

  document.getElementById("RegUser1").style.visibility = "visible"; 


I hope this Helps.

This post has been edited by Codemonger: 09 August 2005 - 10:08 AM

Was This Post Helpful? 0
  • +
  • -

#10 WebMasterDefiance  Icon User is offline

  • New D.I.C Head

Reputation: 1
  • View blog
  • Posts: 8
  • Joined: 07-August 05

Re: Hidden Div layers controller by JavaScript

Posted 09 August 2005 - 04:30 PM

Codemonger, You're amazing. I forgot the quotes in the getElementById() method. I didn't think you needed them but I guess you do. Thank you so much! Thanks to everyone for help!
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1