Using JQuery in Notepad++


#1



The script I written does not animate when I run it, I am trying to create a mobile webpage which is interactive by using jQuery.

PLEASE HELP...?

I have been following the interactive website tutorial and then stopped at the animate page to learn the Jquery tutorial. I feel I now understand jQuery enough to add the animate in my webpage.

However when I do it doesnt move my body to the left.
Also it does not move the menu 'div' to the left


Replace this line with your code. 

HTML - index.html
<!DOCTYPE html>
<html>
<head>
<title>Thomas Prudden</title>
<link  rel='stylesheet' href='https://fonts.googleapis.com/css?family=Roboto:100,300,500' type='text/css'>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://file.myfontastic.com/nFdLpqQ5LQk757UcLKckV8/icons.css" >
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<Div id="pagewrap" >
<div class="menu" >
<g class="icon-close">Close</g>
<ul class="nav-list" >
<li> <a href= "index.html" > Home </a>
<li> <a href= "aboutme.html" > About </a>
<li> <a href= "contact.html" > Contact </a>
<li> <a href= "impossiblelist.html" > Impossible List </a>
</div>
<header class= "main-header" >
<span class= "nav-logo" >Prudden</span>
<div class= "menu-open" >
<h class= "icon-menu" href >Menu</h>
</div>
<div class= "title-header" >
<h1>Welcome to the site </h1>
</header>
</Div> 			<!-- pagewrap ENDS -->
</body>
</html>

jQuery - script.js

$(document).ready(function() {
	$(".icon-menu").click(function(){
		$(".menu").animate({left:'250px'},200);
		$('body').animate({left:'0px'},200);
		
	});
	
});


#2

@byteslayer54538,
Try it by changing

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

into

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

#3

Thank you for the quick reply, but it didn't work :pensive:


#4

@byteslayer54538,
In the beginning i would also use

$(document).ready(function() {
        alert("I am running the =ready= function");
	$(".icon-menu").click(function(){
		$(".menu").animate({left:'250px'},200);
		$('body').animate({left:'0px'},200);
		
	});
        alert("I have reached the end =ready= function");
	
});

#5

the alert doesn't show when i refresh the page, I'm using a chrome browser to open it with.


#6

@byteslayer54538,
With a google search
alert not functioning in chrome site:stackoverflow.com
for instance
http://stackoverflow.com/questions/19529036/google-chrome-not-displaying-alert-popups-for-one-site