New Topic/Question
Reply
What I'm aiming for is to have 3 div's that will all display within the same part of the page, but only ever one at a time.
When you first come to the site you see the login_signup div, if you click signup it take you to that page, but if you click on login I want the login_signup div to be hidden and the login_form div be displayed.
Once the user has sucessfully signed into the site, I want to hide both the login_signup and login_form divs and display the logged_in div.
this is my code, there may be a couple of little issues with the content as I've compiled 3 seperate pages into one just to try and make it easier for posting
<html>
<head>
<script type="text/Javascript">
function display (div_name) {
if (document.getElementByID(login_signup) {
document.getElementByID(login_form) = "show" &&
document.getElementById(login_signup) = "hide"
} elseif (document.getElementById(close_login)){
document.getElementByID(login_signup) = "show" &&
document.getElementById(login_form) = "hide"
}
</script>
<style type="text/css">
#header {
height:370px;
width:960px;
position:absolute;
}
/* Nested Within Header Div */
#logo {
float:left;
height:370px;
left:0px;
position:absolute;
top:0px;
width:845px;
z-index:1;
}
#nav {
float:right;
position:absolute;
right:10px;
text-align:right;
top:80px;
width:220px;
z-index:2;
}
#login_signup {
float:right;
font-family:"Plasmatica";
right:50px;
text-align:right;
top:10px;
width:330px;
z-index:3;
background-color:#FF0000;
}
#login_form {
float:right;
font-family:"Plasmatica";
right:50px;
text-align:right;
top:10px;
width:330px;
z-index:3;
}
#logged_in {
float:right;
font-family:"Plasmatica";
right:50px;
text-align:right;
top:10px;
width:330px;
z-index:3;
}
/* End Of Divs Nested In Header_Container */
.show {
display:inline;
}
.hide {
display:none;
}
</style>
</head>
<body>
<div id="header_container">
<div id="header">
<div id="logo">
<img src="logo.png" />
</div><!-- end of logo div -->
<div id="nav">
<p class="nav-font">
<a href="index.php">Home</a><br />
<a href="aboutMe.php">About</a><br />
<a href="myPlans.php">My Plans</a><br />
<a href="myProgress.php">My Progress</a><br />
<a href="inventory.php">Inventory</a><br />
<a href="images.php">Images</a><br />
<a href="videos.php">Videos</a>
</p>
</div><!-- end of nav div -->
<div id="login_signup">
<a href="javascript:display('login_signup')">login</a>
<a href="signUp.php"> | signup</a>
</div>
<div id="login_form">
<input name="username" type="text" value="Username"
onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;" />
<input name="password" type="password" value="Password"
onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;" />
<input name="login" type="submit" value="Login" />
<a href="javascript:display('close_login')"><img src="x.png" id="close_login" /></a>
</div>
<div id="logged_in">
welcome user |
<a href="#"> Sign Out</a>
</div>
</div><!-- end of header div -->
</div><!-- end of header_container div -->
</body>
</html>
I think I must have my logic twisted in the display function so if someone can help me to not only find a solution, but explain where I slipped up I'd be grateful, I'm still pretty new to Javasctipt.
MultiQuote
| 