homepage Welcome to WebmasterWorld Guest from 54.163.72.86
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Mistake in my getElementById code?
vikasvrao




msg:3987171
 6:35 am on Sep 10, 2009 (gmt 0)

Hi guys,
I'm trying to hide a div and change the style of another div through javascript.
Here's my javascript method:

function hideRegisterDiv(){
document.getElementById("signupForm").style.display="none";
document.getElementById("loginbox").style="margin:40px auto 120px; width:300px";
}

The divs under question...
<form name="signupForm" id="signupForm" action="signup.do" method="POST">
<div id="register" style="width:400px; margin:44px 50px 120px 0px; float:left;">
........
</div>
</form>

<form name="loginForm" id="loginForm" action="j_spring_security_check" method="POST">
<div id="loginbox" class="darkBox" style="margin:40px auto 120px 10px; width:280px; float:right;">
..........
</div>
</form>

Is there something I'm missing here? Firebug shows my document.getElementById() calls return null.

Please help.

 

daveVk




msg:3987197
 7:46 am on Sep 10, 2009 (gmt 0)

document.getElementById("loginbox").style="margin:40px auto 120px; width:300px";

Don't think you can assign text to style object directly.

Probably better to set up two css entrys say for classes normLogon and altLogon, and change class namename.

eg
document.getElementById("loginbox").className="altLogon";

vikasvrao




msg:3987349
 2:44 pm on Sep 10, 2009 (gmt 0)

Thanks dave for pointing that out.
But my getElementById() method still returns null. I have no idea why

rocknbil




msg:3987425
 4:15 pm on Sep 10, 2009 (gmt 0)

I tested your code as is and get "Error: setting a property that has only a getter." I think you need to set each style individually, like

document.getElementById("loginbox").style.margin="40px auto 120px";
document.getElementById("loginbox").style.width="300px";

But it's more than that. First, validate yor document, you probably have HTML errors causing the null.

Second, one must ask why you have a div inside the form, complicating the overall structure. Why can't you apply your styles directly to the form? You will have to adjust your CSS, that is, apply darkbox to the form, not the div, etc.

Last, when you get in trouble, put borders on the errant elements to see what's going on.

I got this to work. Note the addition of return false to prevent the link from navigating, if that's your triggering event.


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- doctype on one line -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Untitled</title>
<script type="text/javascript">
function hideRegisterDiv(){
document.getElementById("signupForm").style.display="none";
document.getElementById("loginForm").style.margin="40px auto 120px";
document.getElementById("loginForm").style.width="300px";
return false;
}
</script>
</head>
<body>
<form name="signupForm" id="signupForm" action="signup.do" method="POST"
style="width:400px; margin:44px 50px 120px 0px; float:left; border:1px solid #ff0000;">
<!-- line breaks only to prevent post from going wide -->
form 1
</form>
<form name="loginForm" id="loginForm" class="darkbox" action="j_spring_security_check"
method="POST" style="margin:40px auto 120px 10px; width:280px; float:right; border:1px solid #000000;">
<!-- line breaks only to prevent post from going wide -->
form 2
</form>
<p><a href="#" onClick="return hideRegisterDiv();">Hide</a></p>
</body>
</html>

vikasvrao




msg:3987474
 5:47 pm on Sep 10, 2009 (gmt 0)

What you have works, I still dont know why the HTML I have here doesnt work.
I hate dumping a bunch of code on the world, but here is a snapshot:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title> Beta</title>
<script type="text/javascript">
function hideRegisterDiv(){ document.getElementById("signupForm").style.display="none";}
</script>

<script type="text/javascript" src="http://yui.yahooapis.com/combo?2.7.0/build/yahoo-dom-event/yahoo-dom-event.js"></script>

</head>
<body class="yui-skin-sam">
<div id="PageContainer">
<div id="Main" class="reg">
<div id="EditCartSections">
<div id="contentAuction" style="height:auto">
<center>
<script type="text/javascript">
hideRegisterDiv();
</script>

<span style="font-size:115%"> Thanks for creating an account!</span><br />
<span style="font-size:115%"> Now you can login </span>
</center>
<form name="signupForm" id="signupForm" action="signup.do" method="POST">
<div style="width:800px; padding-left:80px;">
<div id="register" style="width:400px; margin:44px 50px 120px 0px; float:left;">
<h2 style="text-align:center;margin-top:6px;color:#a00;border-bottom:1px dashed #dca; padding-bottom:11px;">

New users: create an account
</h2>
Join our community of users and compete for exceptional cash bonuses
<p>
Joining is free and easy and we respect your privacy.
</p>
<div align="center">
<br> <button type="submit"><div style="padding:3px 10px;font-size:16px"> &nbsp; Register now &nbsp; </div></button>

</div>
</div>
</div>
</form>

<form name="loginForm" id="loginForm" action="j_spring_security_check" method="POST">
<div id="loginbox" class="darkBox" style="margin:40px auto 120px 10px; width:280px; float:right;">

<h2 style="text-align:center;margin-top:6px;color:#a00;border-bottom:1px dashed #dca; padding-bottom:11px;">
Registered users: log in
</h2>

<table style="margin: 0px 10px 10px; width: 260px;">
<tr>
<td class="label" align="right" valign="top" nowrap><label for="email">Email:</label>&nbsp;</td>
<td style="padding-bottom:6px">
<input type='text' name='j_username' id="username"
value=''
onKeyPress="return submitEnter(event)" maxlength="50" style="width:200px;">
</td>
</tr>
<tr>

<td class="label" align="right" nowrap><label for="email">Password:</label>&nbsp;</td>
<td>
<input type='password' name='j_password' onKeyPress="return submitEnter(event)" maxlength="25" style="width:200px;">
</td>
</tr>
<tr>
<td>&nbsp;</td>
<td style="padding-top:6px">

<input type="checkbox" id="rememberEmail" name='_spring_security_remember_me' style="margin:0;"/>
<label for="rememberEmail" style="font-size:96%;">&nbsp; Remember my email address</label>
</td>
</tr>
<tr>
<td colspan="2" align="center" nowrap style="padding-top:6px">
<div style="margin-bottom:10px;margin-left:20px"><a style="font-size: 96%;" href="passwordReminder.do">Forgot your password?</a></div>

<button type="submit"><div style="padding:3px 10px;font-size:16px"> &nbsp; Log in &nbsp; </div></button>
</td>
</tr>
</table>
</div>
</form>
</div>

</div>
</div>

</div>
</div>



</div>
<script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/animation/animation-min.js"></script>

</body>
</html>

rocknbil




msg:3987623
 9:49 pm on Sep 10, 2009 (gmt 0)

Haha! Here it is!

<script type="text/javascript">
function hideRegisterDiv(){ document.getElementById("signupForm").style.display="none";}
</script>
.....
</head>
....
<script type="text/javascript">
hideRegisterDiv();
</script>

Source code is read top-down. You execute the request to hideRegisterDiv before "signupForm" is rendered.

Move that to the bottom of the page, or, more gracefully,

<script type="text/javascript">
function hideRegisterDiv(){ document.getElementById("signupForm").style.display="none";}
window.onload=function() { hideRegisterDiv(); };
</script>

if this is all you need to do, you don't even need a function.

<script type="text/javascript">
window.onload=function() {
document.getElementById("signupForm").style.display="none";
};
</script>

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved