jquery - Element will not disappear and reappear until done manually the first time -

-

what should happen when click log in button, container log in form should become hidden , sidebar, search bar, tiles , log out button should appear. experience if have click log in button twice react or when click it, other elements appear should brief moment , page either reloaded or elements hidden again , log in container foo unhidden. debugging purposes have inserted <a href="#" onclick="toggle_visibility('foo');">toggle container on.</a> manually hide , unhide log in container foo. not until after log-in button appropriately desired. feel need initialize value toggle continer on. doing me stumped. have commented in code below elements correspond sections of code. have tried google chrome , mozilla firefox. appreciate insight or assistance. have found few sources online initialize element style="display:none" has not helped.

here html w/ jquery:

<!doctype html> <html> <head>     <title>welcome 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 , 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 department</li>         <li class="box">search 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"> submits form fields         onerror="" prompt user wrong input has been given.         onopen="" container hidden 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 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: .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;  }


Comments

Post a Comment

Popular posts from this blog

java - nested exception is org.hibernate.exception.SQLGrammarException: could not extract ResultSet Hibernate+SpringMVC -

-
i trying fetch records database , having above error this classs appropriate getters , setters public class user { private int id; private string username; private string password; private string email; i have create database , inserted data below configuration <bean id="datasource" class="org.apache.commons.dbcp2.basicdatasource" destroy-method="close"> <property name="driverclassname" value="com.mysql.jdbc.driver"/> <property name="url" value="jdbc:mysql://localhost:3306/usersdb"/> <property name="username" value="root"/> <property name="password" value=""/> </bean> this complete stacktrace severe: servlet.service() servlet [appservlet] in context path [/spring] threw exception [request processing failed; nested exception org.hibernate.exception.sqlgrammarexception: not ...
Read more

sql - Postgresql tables exists, but getting "relation does not exist" when querying -

-
Image
i have postgresql db number of tables. if query: select column_name information_schema.columns table_name="my_table"; i list of columns returned properly. however, when query: select * "my_table"; i error: (programmingerror) relation "my_table" not exist 'select *\n "my_table"\n' {} any thoughts on why can columns, can't query table? goal able query table. you have include schema if isnt public one select * <schema>."my_table" or can change default schema show search_path; set search_path my_schema; check table schema here select * information_schema.columns for example if table on default schema public both works ok select * parroquias_region select * public.parroquias_region but sectors need specify schema select * map_update.sectores_point
Read more

asp.net mvc - breakpoint on javascript in CSHTML? -

-
i have .cshtml file has javascript tag. within script tag have few lines of javascript. first line of javascript refers property in @viewbag. other javascript lines plain script without mvc related references. observation: can place breakpoints (visual studio 2015) on each of these javascript lines. however, breakpoints has white dot in center of breakpoint symbol (red circle) except line @viewbag reference (this particular line not have white dot in center). it seems breakpoint without white dot hit during run-time. question: can explain going on here? white dot mean? why plain red breakpoint line line hitting breakpoint? the visual studio debugger expecting debug actual server-side code within .cshtml file opposed client-side javascript within it. iirc, visual studio allow debug javascript code expected in internet explorer (and possibly edge), other browsers want use either third-party tool or developer tools (f12) within browser. an easy approach take advant...
Read more