Jump to content
Please Use CODE Tags

My JS isn't working

Hackzzila
By Hackzzila
in Programming
 Share
Go to solution Solved by Ciccioo, 
$('.nav-side . nav-toggle')

the space after the dot and before nav-toggle

 

next time please report the error that you get, or even better a jsfiddle :)

Posted

I am following this tutorial and have the exact same thing, but my JS wont work for some reason. I've had this problem before, I had an exact replica of his code, yet it didn't work.

 

HTML:

<!DOCTYPE html><html lang="en"><head>	<meta charset="UTF-8">	<title>Slide Out</title>	<meta name="viewport" content="width=device-width, initial-scale=1.0">	<link rel="stylesheet" href="css/app.css"></head><body>	<nav class="nav-side">		Side content		<a href="#" class="nav-toggle"></a>	</nav>	<div class="wrapper">		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis nam magnam dolorem, consectetur eaque deleniti accusamus veniam. At placeat mollitia cum officiis, temporibus dolorem eius officia quos illo, beatae repellat accusamus quis nostrum odit. Hic eum assumenda non, excepturi at repellat inventore facere odio? Ullam ex, quis consectetur omnis repudiandae.</p>		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique temporibus officia aliquam consectetur nihil, omnis quo deserunt, natus facilis magni enim quibusdam, amet blanditiis quas quia voluptatum aspernatur fugiat qui perspiciatis rerum eum quos! Quisquam modi vero, vel alias eos ab doloribus quasi debitis earum perspiciatis incidunt veritatis, voluptatibus odio fuga ratione libero? Ducimus nihil tempore aliquid itaque quisquam odio expedita odit a corrupti cumque distinctio pariatur mollitia iusto, illum tenetur. Numquam, itaque. Nam placeat officia illo reiciendis iste pariatur id. Aliquam necessitatibus illum saepe reprehenderit officia ratione libero eius at quia, reiciendis culpa cum mollitia dicta quod aut rem enim ea veniam, distinctio consequatur quisquam? Aperiam voluptates, quidem fuga assumenda cum dolor, blanditiis unde illo, pariatur ratione cumque inventore. Animi doloremque, pariatur saepe rerum aut quibusdam, facere, tenetur aperiam quo nisi libero quam! Quaerat asperiores magni perspiciatis soluta porro, illum et! Incidunt odio blanditiis assumenda non possimus numquam consectetur sapiente, autem, facilis rerum veniam nihil et illum? Quas quos nam veniam, ab quis. Temporibus repellendus, assumenda officiis. Dicta tempore dolorem asperiores natus vero inventore praesentium tenetur amet quo dolor ratione obcaecati accusamus doloremque ducimus, quia eaque cum nam ipsum dolorum, voluptatum veritatis. Nesciunt reprehenderit soluta cumque, illum dicta recusandae numquam quasi sit, amet suscipit aspernatur perferendis aut? Excepturi nesciunt incidunt cumque, harum quia ipsa! Hic reiciendis eum velit esse modi expedita, quos sapiente suscipit dolorum aliquam natus similique nisi vitae rerum minima totam voluptas nobis, deserunt exercitationem veniam, quam odio qui ducimus. Iusto ratione, explicabo quos incidunt ducimus dicta modi adipisci omnis alias rem dolorum perferendis fuga nihil eaque facere, repudiandae deleniti. Deleniti, debitis possimus totam mollitia expedita nemo illo sit minus magni officia quae iste, odio error molestiae deserunt praesentium eligendi. Facere fugiat voluptatum, necessitatibus suscipit, odio, eum deserunt quis doloribus quam dignissimos debitis. Vel hic dolor non ratione, fugiat voluptatum, numquam harum laboriosam ea earum doloribus illum maxime repellendus neque ducimus consectetur quis. Nihil in rem laudantium omnis facilis ex aut possimus consequuntur cum rerum quidem dolores, magni quae saepe sequi, deserunt iusto debitis tempore officia eveniet sint placeat velit sapiente? Blanditiis nulla et, quaerat illum. Saepe rem doloremque quaerat commodi distinctio facilis, porro corrupti eaque mollitia recusandae id, sed sunt dolorum. Esse distinctio quaerat maxime similique dolorem ea, corporis, harum, labore inventore modi reiciendis a incidunt vitae aliquam, libero temporibus ipsam eveniet cupiditate? Voluptatum, magnam, nulla debitis, maiores cupiditate quod commodi veritatis, nihil molestias quo eius dolore hic laudantium facere deleniti ea sequi natus consequatur quisquam at rerum ipsam. Nulla veritatis dolorem totam hic minus rem fuga, eligendi praesentium dolor sapiente molestias ducimus similique tempore error consequatur ab! Distinctio optio ea consequuntur eveniet ratione, ducimus minima officiis sequi sapiente quam in tempore minus tenetur laborum nihil fuga! Amet, recusandae? Nobis enim corporis non cumque similique, accusamus dolore eligendi aperiam suscipit. Consequuntur ut omnis voluptate vitae natus quis repellat unde sed cumque, odio ipsam, animi repudiandae, aspernatur placeat repellendus assumenda porro. Quaerat consequuntur obcaecati fuga quam debitis quidem, maiores eveniet odit similique iste. Quos vitae, iusto pariatur.</p>		<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa rem atque, sint animi accusantium facere incidunt, tenetur quo? Animi at non provident excepturi error dolor inventore, voluptatem necessitatibus aliquam ullam enim! Aperiam, quasi maiores dignissimos distinctio, tempore eaque inventore dolorum accusamus eveniet totam corrupti eum modi! Perferendis, enim sed, necessitatibus vitae quo at deserunt nobis quasi provident ea corporis reprehenderit autem veniam assumenda fugit eligendi sequi. Fuga reiciendis quibusdam ullam porro quas ipsa enim id eum earum nobis illo, illum beatae a dolorem. Possimus quo quae, fugiat nemo! Ea impedit vel quibusdam, animi porro, esse. Deleniti, saepe facere quod suscipit.</p>	</div>	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>	<script src="js/app.js"></script></body></html>

CSS:

body {	font: 1em "Halvetica", sans-serif;	line-height: 1.4;	font-weight: 200;}.wrapper{	margin-left: 50px;}.nav-side {	position: fixed;	left: 0;	top: 0;	height: 100%;	width: 100%;	max-width: 250px;	background-color: cornflowerblue;	box-sizing: border-box;	padding: 20px;	color: #fff;	;	}.nav-side.nav-open{	margin-left: 0;	box-shadow: 1px 1px 3px rgba(0, 0, 0, .1);}.nav-toggle{	position: absolute;	right: -40px;	top: 0;	height: 40px;	width: 40px;	background-color: cornflowerblue;	line-height: 40px;	text-decoration: none;	text-align: center;	border-bottom-right-radius: 3px;	box-shadow: 1px 0 3px rgba(0, 0, 0, .1);}.nav-toggle:before {	content: "\2192";	font-weight: 600;	color: #fff;}.nav-side.nav-open .nav-toggle:before {	content: "\2190";}

JS:

$('.nav-side . nav-toggle').on('click', function(e) {	e.preventDefault();	$(this).parent().toggleClass('nav-open');});

Does anyone know what's going on?

00110000 00110001 00110000 00110000 00110000 00110000 00110001 00110000 00100000 00110000 00110001 00110001 00110000 00110001 00110001 00110001 00110001 00100000 00110000 00110001 00110001 00110001 00110000 00110000 00110001 00110000 00100000 00110000 00110001 00110001 00110000 00110000 00110001 00110000 00110000 00100000 00110000 00110001 00110001 00110000 00110000 00110001 00110000 00110001 00100000 00110000 00110001 00110001 00110000 00110001 00110001 00110000 00110001 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Solution
$('.nav-side . nav-toggle')

the space after the dot and before nav-toggle

 

next time please report the error that you get, or even better a jsfiddle :)

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

the space after the dot and before nav-toggle

 

next time please report the error that you get, or even better a jsfiddle :)

Oops, I wasn't getting an error, it just didn't work. Thanks!

00110000 00110001 00110000 00110000 00110000 00110000 00110001 00110000 00100000 00110000 00110001 00110001 00110000 00110001 00110001 00110001 00110001 00100000 00110000 00110001 00110001 00110001 00110000 00110000 00110001 00110000 00100000 00110000 00110001 00110001 00110000 00110000 00110001 00110000 00110000 00100000 00110000 00110001 00110001 00110000 00110000 00110001 00110000 00110001 00100000 00110000 00110001 00110001 00110000 00110001 00110001 00110000 00110001 

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

I am following this tutorial and have the exact same thing, but my JS wont work for some reason. I've had this problem before, I had an exact replica of his code, yet it didn't work.

 

HTML:

<!DOCTYPE html><html lang="en"><head>	<meta charset="UTF-8">	<title>Slide Out</title>	<meta name="viewport" content="width=device-width, initial-scale=1.0">	<link rel="stylesheet" href="css/app.css">LINK JS HERE


Does anyone know what's going on?




You need to link your JS 



			
		


		
			

	

		

		

			

	CPU: AMD Ryzen 5 5600X | CPU Cooler: Stock AMD Cooler | Motherboard: Asus ROG STRIX B550-F GAMING (WI-FI) | RAM: Corsair Vengeance LPX 16 GB (2 x 8 GB) DDR4-3000 CL16 | GPU: Nvidia GTX 1060 6GB Zotac Mini | Case: K280 Case | PSU: Cooler Master B600 Power supply | SSD: 1TB  | HDDs: 1x 250GB & 1x 1TB WD Blue | Monitors: 24" Acer S240HLBID + 24" Samsung  | OS: Win 10 Pro





	 





	Audio: Behringer Q802USB Xenyx 8 Input Mixer |  U-PHORIA UMC204HD | Behringer XM8500 Dynamic Cardioid Vocal Microphone | Sound Blaster Audigy Fx PCI-E card.





	 





	Home Lab:  Lenovo ThinkCenter M82 ESXi 6.7 | Lenovo M93 Tiny Exchange 2019 | TP-LINK TL-SG1024D 24-Port Gigabit | Cisco ASA 5506 firewall  | Cisco Catalyst 3750 Gigabit Switch | Cisco 2960C-LL | HP MicroServer G8 NAS | Custom built SCCM Server.





	 





	 



		

	


		
	


	

	






















	

	





	
Link to comment

	
		
	
	
	

	
	
Share on other sites

	

	


	

	

	




	


		
Link to post

		
			
		
		
		

		
			
Share on other sites

			

	


	

	

		
	



	




					
					
					
				

					

					
					






	

	
	

		




	

		

			Posted 
			
			
				
				
			
		

		

			

				
    
					
					
  • Author
    • 
					
					
					
					
					
				

			

			
		

	

	

	

    

	

		

			

You need to link your JS 


I did in the bottom, and it's been solved, just a simple mistake.



			
		


		
			

	

		

		

			
00110000 00110001 00110000 00110000 00110000 00110000 00110001 00110000 00100000 00110000 00110001 00110001 00110000 00110001 00110001 00110001 00110001 00100000 00110000 00110001 00110001 00110001 00110000 00110000 00110001 00110000 00100000 00110000 00110001 00110001 00110000 00110000 00110001 00110000 00110000 00100000 00110000 00110001 00110001 00110000 00110000 00110001 00110000 00110001 00100000 00110000 00110001 00110001 00110000 00110001 00110001 00110000 00110001 

		

	


		
	


	

	






















	

	





	
Link to comment

	
		
	
	
	

	
	
Share on other sites

	

	


	

	

	




	


		
Link to post

		
			
		
		
		

		
			
Share on other sites

			

	


	

	

		
	



	




					
					
					
				

					

					
					






	

	
	

		




	

		

			Posted 
			
			
				
				
			
		

		

			

				
    
					
					
					
					
					
				

			

			
		

	

	

	

    

	

		

			
Oops, I wasn't getting an error, it just didn't work. Thanks!


check your browser's console when you debug javascript ;)


your code was giving this error:




 


Syntax error, unrecognized expression: .nav-side . nav-toggle




			
		


		
	


	

	






















	

	





	
Link to comment

	
		
	
	
	

	
	
Share on other sites

	

	


	

	

	




	


		
Link to post

		
			
		
		
		

		
			
Share on other sites

			

	


	

	

		
	



	




					
					
					
				

					

					
					






	

	
	

		




	

		

			Posted 
			
			
				
				
			
		

		

			

				
    
					
					
  • Author
    • 
					
					
					
					
					
				

			

			
		

	

	

	

    

	

		

			


check your browser's console when you debug javascript ;)


your code was giving this error:




I don't do much JS so I didn't know that happened!


			
		


		
			

	

		

		

			
00110000 00110001 00110000 00110000 00110000 00110000 00110001 00110000 00100000 00110000 00110001 00110001 00110000 00110001 00110001 00110001 00110001 00100000 00110000 00110001 00110001 00110001 00110000 00110000 00110001 00110000 00100000 00110000 00110001 00110001 00110000 00110000 00110001 00110000 00110000 00100000 00110000 00110001 00110001 00110000 00110000 00110001 00110000 00110001 00100000 00110000 00110001 00110001 00110000 00110001 00110001 00110000 00110001 

		

	


		
	


	

	






















	

	





	
Link to comment

	
		
	
	
	

	
	
Share on other sites

	

	


	

	

	




	


		
Link to post

		
			
		
		
		

		
			
Share on other sites

			

	


	

	

		
	



	




					
					
					
				

					

					
					






	

	
	

		




	

		

			Posted 
			
			
				
				
			
		

		

			

				
    
					
					
					
					
					
				

			

			
		

	

	

	

    

	

		

			

Just another quick tip, which probably may not have been useful in this instance, but you may find useful in the future, if your JS isn't working checking it line by line until it stops working is useful to find the source of your problem (which in my case is almost always a typo). 


 


Use this as an example, to check it: 


$('.nav-side . nav-toggle').on('click', function(e) {	e.preventDefault();	$(this).parent().toggleClass('nav-open');});


Cut all the lines but the first, then if the JS runs, paste everything back in, cut it up to the second line, if that works, rinse and repeat until eventually it stops working: 


$('.nav-side . nav-toggle').on('click', function(e) {	e.preventDefault();	


$('.nav-side . nav-toggle').on('click', function(e) {	e.preventDefault();	$(this).parent().toggleClass('nav-open');});


I know it's pretty simple, but it's useful when you can't find the source of a problem. 


 


(just used that to show you how i check it line by line)



			
		


		
	


	

	






















	

	





	
Link to comment

	
		
	
	
	

	
	
Share on other sites

	

	


	

	

	




	


		
Link to post

		
			
		
		
		

		
			
Share on other sites

			

	


	

	

		
	



	




					
					
					
				
			
			



		

	


	

	
	
		
	

			
				
				



	
	
		

			
				
Create an account or sign in to comment

				
You need to be a member in order to leave a comment

			
	
			

				

					

						
Create an account

						
Sign up for a new account in our community. It's easy!

						
							
						
						Register a new account
					

					

						
Sign in

						
Already have an account? Sign in here.

						Sign In Now
					

				

			

		

	


			
		

	

	
		

			

				
					


    
          Share
    

    

        
        
            

            
        
    


				
				
                

                




				
			

		

	







	

		
			
				Go to topic listing
				Programming
			
		
	

	





							

						

						


	

		
		
		
			

				



	
	



			

			

		
		

	

		
	


	


					

					

				

			

			
		

		
		


	×