Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Jan 2013
    Location
    Australia
    Posts
    118
    Thanks
    22
    Thanked 0 Times in 0 Posts

    Javascript not working

    hello I have a java script for my drop down menu not working

    Code:
    <div id="mobile-nav">
    		<input type="checkbox"/>
    	    <label>&equiv;</label>
    		<ul>
    			<li><a href="#">Home</a></li>
    			<li><a href="#">About</a></li>
    			<li><a href="#">My Account</a></li>
    		    <li><a href="#">Wish List</a></li>
    		    <li><a href="#">Shopping Cart</a></li>
    		    <li><a href="#">Checkout</a></li>
    		    <li><a href="#">Welcome, User</a></li>
    		    <li><a href="#">Sign Up</a></li>
    		    <li><a class="signin">Sign In</a>
    		     <div id="dropdown">
    		        <form id="LoginForm">
    		          <div class="content">
    		            <input type="text" name="email" placeholder="Username" value=""></input>
    		            <br/>
    		            <input type="password" name="password" placeholder="Password" value=""></input>
    		            <br/>
    		            <input type="submit" id="log" value="Sign In"></input>
    		          </div>
    		        </form>
    		      </div>
    		    </li>
    		  </ul>
    	</div>
    	
    	<script type="text/javascript">
    	// TOGGLE ON CLiCK 
    	
    	$('.signin').click(function() {
    	  $('#dropdown').slideToggle('slow', function() {
    	    // Animation complete.
    	  });
    	});
    	</script>

  • #2
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    851
    Thanks
    172
    Thanked 93 Times in 93 Posts
    Code:
    	
    <script type="text/javascript">
    	// TOGGLE ON CLiCK 
    	$(document).ready(function(){
    	//Hide the tooglebox when page load
    	$("#dropdown").hide();	
    	$('.signin').click(function() {
    	$('#dropdown').slideToggle('slow', function() {
    	 // Animation complete.
        });
      });
    });
    </script>
    LT
    Last edited by low tech; 08-16-2013 at 01:44 PM.
    "The greatest revenge is to accomplish what others say you cannot do."
    ~ Unknown

    I used to be indecisive, but now I'm not so sure.

  • #3
    Regular Coder
    Join Date
    Jan 2013
    Location
    Australia
    Posts
    118
    Thanks
    22
    Thanked 0 Times in 0 Posts
    Not working still had placed it at bottom and then tried at top

    Code:
    <!DOCTYPE>
    <html lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    	<link rel="stylesheet" type="text/css" href="mobilemenu.css" media="all" />
    	<script type="text/javascript">
    	// TOGGLE ON CLiCK 
    	$(document).ready(function(){
    	//Hide the tooglebox when page load
    	$(".dropdown").hide();	
    	$('.signin').click(function() {
    	$('.dropdown').slideToggle('slow', function() {
    	 // Animation complete.
        });
      });
    });
    </script>
    </head>
    <body>
    <div id="mobile-menu">
    	<input type="checkbox"/>
    	    <label>&equiv;</label>
    		<ul>
    			<li><a href="#">Home</a></li>
    			<li><a href="#">About</a></li>
    			<li><a href="#">My Account</a></li>
    		    <li><a href="#">Wish List</a></li>
    		    <li><a href="#">Shopping Cart</a></li>
    		    <li><a href="#">Checkout</a></li>
    		    <li><a href="#">Welcome, User</a></li>
    		    <li><a href="#">Sign Up</a></li>
    		    <li><a class="signin">Sign In</a>
    		     <div id="dropdown">
    		        <form id="LoginForm">
    		          <div class="content">
    		            <input type="text" name="email" placeholder="Username" value=""></input>
    		            <br/>
    		            <input type="password" name="password" placeholder="Password" value=""></input>
    		            <br/>
    		            <input type="submit" id="log" value="Sign In"></input>
    		          </div>
    		        </form>
    		      </div>
    		    </li>
    		  </ul>
    	</div>
    </div>
    </body>
    </html>

  • #4
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,535
    Thanks
    45
    Thanked 259 Times in 256 Posts
    You have jQuery code but no jQuery library. Why would it work?

  • #5
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    851
    Thanks
    172
    Thanked 93 Times in 93 Posts
    It works for me

    As Keleth pointed out, you have no jQuery library

    try adding a library at the top

    Code:
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    Last edited by low tech; 08-16-2013 at 02:47 PM.
    "The greatest revenge is to accomplish what others say you cannot do."
    ~ Unknown

    I used to be indecisive, but now I'm not so sure.

  • #6
    Regular Coder
    Join Date
    Jan 2013
    Location
    Australia
    Posts
    118
    Thanks
    22
    Thanked 0 Times in 0 Posts
    Still nothing very strange so confusing now might just have to not worry about it.

    Code:
    <!DOCTYPE>
    <html lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    	<link rel="stylesheet" type="text/css" href="mobilemenu.css" media="all" />
    	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    	
    </head>
    <body>
    <div id="mobile-menu">
    	<input type="checkbox"/>
    	    <label>&equiv;</label>
    		<ul>
    			<li><a href="#">Home</a></li>
    			<li><a href="#">About</a></li>
    			<li><a href="#">My Account</a></li>
    		    <li><a href="#">Wish List</a></li>
    		    <li><a href="#">Shopping Cart</a></li>
    		    <li><a href="#">Checkout</a></li>
    		    <li><a href="#">Welcome, User</a></li>
    		    <li><a href="#">Sign Up</a></li>
    		    <li><a class="signin">Sign In</a>
    		     <div id="dropdown">
    		        <form>
    		          <div class="content">
    		            <input type="text" name="email" placeholder="Username" value=""></input>
    		            <br/>
    		            <input type="password" name="password" placeholder="Password" value=""></input>
    		            <br/>
    		            <input type="submit" id="log" value="Sign In"></input>
    		          </div>
    		        </form>
    		      </div>
    		    </li>
    		  </ul>
    	</div>
    </div>
    <script type="text/javascript">
    	// TOGGLE ON CLiCK 
    	$(document).ready(function(){
    	//Hide the tooglebox when page load
    	$("#dropdown").hide();	
    	$('.signin').click(function() {
    	$('#dropdown').slideToggle('slow', function() {
    	 // Animation complete.
        });
      });
    });
    </script>
    </body>
    </html>
    Code:
    #mobile-menu {
    background: #000000;
    color: #FFFFFF;
    font-family: Arial, sans-serif;
    font-size: 16px;
    height: 40px;
    }
    
    #mobile-menu input {
    display: none;
    margin: 0px;
    padding: 0px;
    width: 40px;
    height: 40px;
    opacity: 0;
    filter: alpha(opacity=0);
    cursor: pointer;
    
    }
    
    #mobile-menu label {
    display: none;
    font-size: 16px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    float:left;
    }
    
    #mobile-menu ul {
    margin: 0px;
    padding: 0px;
    background: #313131;
    }
    
    #mobile-menu li {
    float: left;
    display: block;
    list-style: none;
    margin: 0px 0px 0px 10px;
    padding: 0px;
    }
    
    #mobile-menu li:first-child {
    margin-left: 0px;
    }
    
    #mobile-menu a {
    float: left;
    background: #313131;
    border: 1px solid hsl(0, 0%, 7%);
    box-shadow: 0 1px 0 hsl(0, 0%, 24%) inset;
    cursor: pointer;
    display: block;
    font-family: "Lucida Grande","Lucida Sans Unicode",Tahoma,Sans-Serif;
    font-size: 14px;
    outline: 0 none;
    padding: 5px 15px;
    margin-top: 5px;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-decoration: none;
    text-decoration: none;
    color: #FFFFFF;
    position: relative;
    }
    
     .dropdown { /* added all this */
      display: none;
      position: absolute;
    }
    
     .dropdown form {
      float: left;
      margin-top: 0px;
      background: #111;
      border: 1px solid #000;
      box-shadow: inset 0 0 0 1px #272727;
      display: block;
      font-size: 0px;
      padding: 20px;
      z-index: 1;
    }
    .dropdown .content input {
      margin-bottom: 10px;
    }
     .dropdown input {
      background: #222;;	
      border: 1px solid #444;
      box-shadow: 0 2px 0 #000;
      color: #888;
      display: block;
      float: left;
      font-family: 'Cabin', helvetica, arial, sans-serif;
      font-size: 13px;
      font-weight: 400;
      height: 40px;
      margin: 0;
      padding: 0 10px;
      text-shadow: 0 -1px 0 #000;
      width: auto;
    }
    .dropdown input {
      line-height: 40px;
    }
     .dropdown  input: :-webkit-input-placeholder {
      color: #888;
    }
    .dropdown input: :-moz-placeholder {
      color: #888;
    }
     .dropdown input:focus {
      -webkit-animation: glow 800ms ease-out infinite alternate;
      -moz-animation: glow 800ms ease-out infinite alternate;
      -o-animation: glow 800ms ease-out infinite alternate;
      -ms-animation: glow 800ms ease-out infinite alternate;
      animation: glow 800ms ease-out infinite alternate;
      background: #222922;
      border-color: #393;
      box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
      color: #efe;
      outline: none;
    }
    .dropdown input:focus::-webkit-input-placeholder { 
      color: #efe;
    }
     .dropdown  input:focus:-moz-placeholder {
      color: #efe;
    }
     .dropdown  #log {
      background: #222;
      -webkit-box-sizing: content-box;
      -moz-box-sizing: content-box;
      -o-box-sizing: content-box;
      -ms-box-sizing: content-box;
      box-sizing: content-box;
      border: 1px solid #444;
      border-left-color: #000;
      box-shadow: 0 2px 0 #000;
      border-radius: 5px;
      color: #fff;
      display: block;
      font-family: 'Cabin', helvetica, arial, sans-serif;
      font-size: 13px;
      font-weight: 400;
      height: 40px;
      line-height: 40px;
      margin: 0;
      padding-left: 8px;
      text-shadow: 0 -1px 0 #000;
      width: auto;
      cursor: pointer;
    }
     .dropdown  #log:hover,
     .dropdown  #log:focus {
      background: #292929;
      background: -webkit-linear-gradient(#393939, #292929);	
      background: -moz-linear-gradient(#393939, #292929);	
      background: -o-linear-gradient(#393939, #292929);	
      background: -ms-linear-gradient(#393939, #292929);	
      background: linear-gradient(#393939, #292929);
      color: #5f5;
      outline: none;
    }
     .dropdown  #log:active {
      background: #292929;
      background: -webkit-linear-gradient(#393939, #292929);
      background: -moz-linear-gradient(#393939, #292929);
      background: -o-linear-gradient(#393939, #292929);
      background: -ms-linear-gradient(#393939, #292929);
      background: linear-gradient(#393939, #292929);
      box-shadow: 0 1px 0 #000, inset 1px 0 1px #222;
      top: 1px; 
    }
    
    
    @-webkit-keyframes glow {
      0% {
        border-color: #393;
        box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
      }	
      100% {
        border-color: #6f6;
        box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
      }
    }
    @-moz-keyframes glow {
      0% {
        border-color: #393;
        box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
      }	
      100% {
        border-color: #6f6;
        box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
      }
    }
    @-o-keyframes glow {
      0% {
        border-color: #393;
        box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
      }	
      100% {
        border-color: #6f6;
        box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
      }
    }
    @-ms-keyframes glow {
      0% {
        border-color: #393;
        box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
      }	
      100% {
        border-color: #6f6;
        box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
      }
    }
    @keyframes glow {
      0% {
        border-color: #393;
        box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 2px 0 #000;
      }	
      100% {
        border-color: #6f6;
        box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 2px 0 #000;
      }
    }
    
    
    
    @media only screen and (max-width: 959px) {
    	
    	#mobile-menu {
    	position: relative;
        height: 40px;
    	}
    	
    	#mobile-menu ul {
    	position: absolute;
    	top: 100%;
    	right: 0;
    	left: 0;
    	height: 0px; 
    	visibility: hidden;
    	overflow: hidden;
    
    	-webkit-transition:all .26s ease-in-out;
    	-moz-transition:all .26s ease-in-out;
    	-ms-transition:all .26s ease-in-out;
    	-o-transition:all .26s ease-in-out;
    	transition:all .26s ease-in-out;
    	}
    	
    	#mobile-menu li {
    	background: #292929;
    	display: block;
    	float: none;
    	width: 100%;
    	}
    	
    	#mobile-menu li:first-child {
    	margin: 0px 0px 0px 10px;
    	}
      
    	#mobile-menu a {
    	color: #FFFFFF;
        padding-left: 20px;
        width: 100%;
        padding: 5px 5px;
        border: none;
        }
    	
    	#mobile-menu li:last-of-type {
    	border-bottom: none;
    	} 
    	
    	#mobile-menu input {
    	position: absolute;
    	top: 0;
    	right: 0;
    	display: block;
    	z-index: 4;
        height: 40px;
        width: 40px;
    	}
    	
    	#mobile-menu label {
    	position: absolute;
    	top: 0;
    	right: 0;
    	display: block;
        width: 40px;
        height: 40px;
    	}
    	
    	#mobile-menu  input:checked ~ ul {
        height: auto;
        visibility:visible;
       }
    	
    	#mobile-menu input:checked + label {
    	color: white;
    	}
    }

  • #7
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,535
    Thanks
    45
    Thanked 259 Times in 256 Posts
    If you go to https://ajax.googleapis.com/ajax/lib.../jquery.min.js, do you get anything?

    But again, why did you not have the library in from the start?

  • #8
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    851
    Thanks
    172
    Thanked 93 Times in 93 Posts
    This worked for me.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
    </head>
    <body>
    <div id="mobile-nav">
    		<input type="checkbox"/>
    	    <label>&equiv;</label>
    		<ul>
    			<li><a href="#">Home</a></li>
    			<li><a href="#">About</a></li>
    			<li><a href="#">My Account</a></li>
    		    <li><a href="#">Wish List</a></li>
    		    <li><a href="#">Shopping Cart</a></li>
    		    <li><a href="#">Checkout</a></li>
    		    <li><a href="#">Welcome, User</a></li>
    		    <li><a href="#">Sign Up</a></li>
    		    <li><a class="signin">Sign In</a>
    		     <div id="dropdown">
    		        <form id="LoginForm">
    		          <div class="content">
    		            <input type="text" name="email" placeholder="Username" value=""></input>
    		            <br/>
    		            <input type="password" name="password" placeholder="Password" value=""></input>
    		            <br/>
    		            <input type="submit" id="log" value="Sign In"></input>
    		          </div>
    		        </form>
    		      </div>
    		    </li>
    		  </ul>
    	</div>
    	
    <script type="text/javascript">
    	// TOGGLE ON CLiCK 
    	$(document).ready(function(){
    	//Hide the tooglebox when page load
    	$("#dropdown").hide();	
    	$('.signin').click(function() {
    	$('#dropdown').slideToggle('slow', function() {
    	// Animation complete.
    	  });
    	});
    });
    </script>
    </body>
    </html>
    "The greatest revenge is to accomplish what others say you cannot do."
    ~ Unknown

    I used to be indecisive, but now I'm not so sure.

  • #9
    Regular Coder
    Join Date
    Jan 2013
    Location
    Australia
    Posts
    118
    Thanks
    22
    Thanked 0 Times in 0 Posts
    It works fine with out my css but when add css now it doesn't work well with it. might have a quick look at that see whats wrong first
    Last edited by riwakawd; 08-16-2013 at 04:35 PM.

  • #10
    Senior Coder
    Join Date
    Jun 2008
    Location
    New Jersey
    Posts
    2,535
    Thanks
    45
    Thanked 259 Times in 256 Posts
    Adding CSS can't break javascript, just change how elements look. You need to go through your CSS and find what attributes are visually breaking your code.

    And what do you mean "doesn't work well"? That it works, but not as intended?

  • #11
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,620
    Thanks
    0
    Thanked 645 Times in 635 Posts
    Why do you have the script tag attaching jquery at the top of the page slowing the loading of the visible content rather than just before the script at the bottom?
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •