What should happen is when i click the log in button, the container for the log in form should become hidden and the sidebar, search bar, tiles and log out button should appear. I sometimes experience that if i have to click the log in button twice for it to react or when i do click it, all other elements appear as they should for a brief moment and then the page is either reloaded or those elements are just hidden again and the log in container foo is unhidden.
For debugging purposes i have inserted<a href="#" onclick="toggle_visibility('foo');">toggle container on.</a>
to manually hide and unhide the log in container foo. Not until after this will the log-in button appropriately do as desired. I feel like i need to initialize some value that the toggle continer on. is doing for me but i am now stumped. I have commented in my code below which elements correspond to which sections of code. I have tried google chrome and mozilla firefox. I would greatly appreciate any insight or assistance.
Here is my html w/ jquery:
<!DOCTYPE html>
<html>
<head>
<title>Welcome To Floor 3!</title>
<link rel="SHORTCUT ICON" href="number1.ico">
<link href="animate.css" rel="stylesheet"/>
<link rel ="stylesheet" type="text/css" href="login.css"></link>
<!--for sidebar-->
<title>SideBar Menu</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!--for search bar and logout button-->
<div id="wsf" style="display:none">
<form class="wrapsearchform">
<input type="search" placeholder="Search..." class="searchbar" required>
<input type="button" value="Search" class="button">
<input type="button" value="Logout" class="button">
</form>
</div>
<!--
<div id="logoutbutton">
<input type="button" value="Logout" class="button">
</div>-->
<!--for tiles-->
<div id="tiles" style="display:none">
<ul class="wrapper">
<li class="box">Search Employee</li>
<li class="box">Floor Map</li>
<li class="box">Search by Department</li>
<li class="box">Search by Job Title</li>
<li class="box">3</li>
<li class="box">2</li>
<li class="box">3</li>
</div>
<!--for sidebar menu-->
<div id="sidebar" style="display:none" class="sidebarfront">
<ul>
<li><a href="">Employee Directory!</a></li>
<li><a href="">Floor Map!</a></li>
<li><a href="">Search!</a></li>
</ul>
<div id="sidebar-btn">
<span></span>
<span></span>
<span></span>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#sidebar-btn').click(function(){
$('#sidebar').toggleClass('visible');
});
});
</script>
<!--for log in box-->
<div id="foo" style="display:block" class="container animated bounceInDown">
<img src ="number1.png">
<!--<form action="insert server info here"> this submits form fields
onerror="" to prompt user wrong input has been given.
onopen="" container is hidden to reveal homepage
-->
<form>
<div class="form-input">
<input type="text" name="username" placeholder="Enter Username">
</div>
<div class="form-input">
<input type="password" name="password" placeholder="Enter Password">
</div>
<input type="submit" name="submit" value="Login" class="btn-login" onclick="toggle_visibility('foo'); toggle_visibility('sidebar'); toggle_visibility('tiles'); toggle_visibility('wsf');"/>
</form>
</div>
<a href="#" onclick="toggle_visibility('foo');">toggle container on.</a>
<script type="text/javascript">
function toggle_visibility(id) {
var toggle = document.getElementById(id);
toggle.style.display = toggle.style.display == "block" ? "none" : "block";
//var e = document.getElementById(id);
//if(e.style.display == 'block')
// e.style.display = 'none';
//else
// e.style.display = 'block';
}
</script>
<!--
<div class="containsWelcome">
</div>
-->
</body>
</html>
Here is my css (seperate file):
body{
margin: 0.auto;
padding:0px;
background-image: url("number1building.jpg");
background-repeat: no-repeat;
background-size: 100% 1080px;
font-family:"Helvetica Neue", Helvetica, Arial;
}
.wrapsearchform{
text-align: center;
padding-top: 10px;
}
.searchbar{
padding:8px 15px;
border:0px solid white;
border-radius: 5px;
}
.button{
position:relative;
padding:6px 15px;
left:-8px;
border-radius: 5px;
border:2px solid #207cca;
background-color:#207cca;
color:#fafafa;
}
.button:hover{
background-color:#fafafa;
color:#207cca;
}
#sidebar{
background:#151718;
width:200px;
height:100%;
display:block;
position:absolute;
left:-200px;
top:0px;
transition:left 0.3s linear;
z-index: 100;
}
#sidebar.visible{
left:0px;
transition:left 0.3s linear;
}
/*
.containsWelcomeToNumber1{
font-family: Arial;
font-style: italic;
color: white;
text-align: center;
font-size: 500%
}
*/
.wrapper {
/*max-width: 1080px;*/
padding-top: 10px;
width: auto;
height: auto;
}
.box {
display: inline-block;
position: relative;
width: 49%;
height: 200px;
background: rgba(1, 1, 1, 0.1);
border-radius: 5px;
text-align: center;
z-index: 0;
margin: 5px 5px 5px -5px;
transition: all .15s ease-in-out;
}
.box:hover {
background: #9CC;
z-index: 100;
transform: scale(1.2,1.2);
box-shadow: 0 5px 5px 0 rgba(0,0,0,.2);
}
ul{
margin:0px;
padding:0px;
}
ul li{
list-style:none;
}
ul li a{
background:#1C1E1F;
color:#ccc;
border-bottom:1px solid #111;
display:block;
width:180px;
padding:10px;
text-decoration: none;
}
#sidebar-btn{
display:inline-block;
vertical-align: middle;
width:20px;
height:15px;
cursor:pointer;
margin:20px;
position:absolute;
top:0px;
right:-60px;
z-index: 100;
}
#sidebar-btn span{
height:1px;
background:#111;
margin-bottom:5px;
display:block;
z-index: 100;
}
#sidebar-btn span:nth-child(2){
width:75%;
z-index: 100;
}
#sidebar-btn span:nth-child(3){
width:50%;
z-index: 100;
}
.sidebarfront{
margin-left: auto;
margin-right: auto;
table-layout: fixed;
border-collapse: collapse;
position:relative;
z-index: 100;
}
.container{
vertical-align: middle;
width: 400px;
height: 230px;
text-align: center;
background-color: none;
border-radius: 5px;
border-color: #ffffff;
border-style: solid;
margin: 0 auto;
margin-top: 300px;
}
.container img{
text-align: center;
margin-top: 5px;
margin-bottom: 5px;
}
input[type="text"],input[type="password"]{
height: 30px;
width: 300px;
border-radius: 5px;
border: none;
font-size: 20px;
margin-bottom: 10px;
background-color: #fff;
padding-left: 30px;
}
.form-input::before{
position: absolute;
padding-left: 5px;
padding-top: 5px;
padding-bottom: 5px:
font-size: 30px;
}
.btn-login{
padding: 15px 30px;
color: #fff;
border-radius: 5px;
border: none;
background-color: #00659e;
}
