0

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;

}

Edited by Roger_2

3
Contributors
2
Replies
22
Views
1 Year
Discussion Span
Last Post by broj1
1

Your button is of 'submit' type, so it means that it'll submit the form (an reload).

I didn't check all of your code, but i'd replace your input button for this one:

<button type="button" class="btn-login" onclick="toggle_visibility('foo'); toggle_visibility('sidebar'); toggle_visibility('tiles'); toggle_visibility('wsf');">Login</button>
0

Or use more jquery-like approach, where you catch onclick event in jquery:

<button type="button" class="btn-login" id="btn-login">Login</button>
...

<script>
$("#btn-login").on("click", function() {
    toggle_visibility('foo'); 
    toggle_visibility('sidebar'); 
    toggle_visibility('tiles'); toggle_visibility('wsf')
});
</script>
</body>
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.