JQuery $ is undefined [duplicate] - javascript

This question already has answers here:
I can't get jQuery to work [closed]
(3 answers)
Closed 8 years ago.
I took this snippet and placed all the code in index.html file as you can see below, but no matter where I put the js, jquery it does not work.
<!DOCTYPE html>
<html>
<head>
<style>
.parallax {
position: absolute;
width: 100%;
height: 800px;
overflow: hidden;
left: 0;
}
.water {
position: absolute;
width: 100%;
height: 800px;
left:0;
background-repeat: no-repeat;
background-position: top center;
}
.water-layer1 {
background-image: url(http://elikirk.com/demos/liquipel/images/water-layer-1.png);
}
.water-layer2 {
background-image: url(http://elikirk.com/demos/liquipel/images/water-layer-2.png);
}
.water-layer3 {
background-image: url(http://elikirk.com/demos/liquipel/images/water-layer-3.png);
}
.water-layer4 {
background-image: url(http://elikirk.com/demos/liquipel/images/water-layer-4.png);
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>
<div class="parallax">
<div class="water water-layer4"></div>
<div class="water water-layer3"></div>
<div class="water water-layer2"></div>
<div class="water water-layer1"></div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var currentX = '';
var currentY = '';
var movementConstant = .015;
$(document).mousemove(function(e) {
if(currentX == '') currentX = e.pageX;
var xdiff = e.pageX - currentX;
currentX = e.pageX;
if(currentY == '') currentY = e.pageY;
var ydiff = e.pageY - currentY;
currentY = e.pageY;
$('.parallax div').each(function(i, el) {
var movement = (i + 1) * (xdiff * movementConstant);
var movementy = (i + 1) * (ydiff * movementConstant);
var newX = $(el).position().left + movement;
var newY = $(el).position().top + movementy;
$(el).css('left', newX + 'px');
$(el).css('top', newY + 'px');
});
});
});
</script>
</body>
</html>
I get ReferenceError: $ is not defined. The jQuery is being loaded well before the script.
What could be the problem here?

You have referenced JQuery two times. Remove one of them and add reference as mentioned below :
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript" />

The jquery lib is not loaded on your script.
replace
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
with
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
Happy Coding:)

Related

keydown event listener for spacebar

I worked on a mini project that works when I click on the mouse the screen populates with numerous circles with each click. I am trying to do the same thing, however, the difference is when the spacebar is pushed for it to do the same thing.
For some reason the code I have is not working I am even console logging and see nothing and I do not understand why. Some guidance would be appreciated.
Here is my html:
<!DOCTYPE html>
<html>
<head>
<title>CircleMaker</title>
<link href="main.css" rel="stylesheet">
</head>
<body>
<div id="ball"></div>
</body>
<script src="mainn.js"></script>
</html>
css
html{
box-sizing: border-box;
}
*, *::before, *::after{
box-sizing: inherit;
}
#ball{
width: 200px;
height: 200px;
top: 200px;
left: 200px;
background-color: red;
border-radius: 100px;
}
Javascript
var circle = document.getElementById('ball');
circle.addEventListener('keydown', circleMultiplier);
function circleMultiplier(e){
e.preventDefault();
console.log(e.keyCode);
if (e.key === 32){
var divsize = ((Math.random()*100) + 50).toFixed();
var color = '#'+ Math.round(0xffffff * Math.random()).toString(16);
var posx = (Math.random() * (document.body.clientWidth - divsize).toFixed());
var posy = (Math.random() * (document.body.clientWidth - divsize).toFixed());
var newDiv = document.createElement('div');
newDiv.style.cssText = 'top:'+posx+'px; left:'+posy+'px; position:absolute; width: 200px; height: 200px;background-color:' +color+ '; border-radius: 100px;';
document.body.appendChild(newDiv);
}
}
When I hit the spacebar it should populate like the following image:
This code works for when I click the mouse:
var circle = document.getElementById('ball');
circle.addEventListener('click', circleMultiplier);
function circleMultiplier(){
var divsize = ((Math.random()*100) + 50).toFixed();
var color = '#'+ Math.round(0xffffff * Math.random()).toString(16);
var posx = (Math.random() * (document.body.clientWidth - divsize).toFixed());
var posy = (Math.random() * (document.body.clientWidth - divsize).toFixed());
var newDiv = document.createElement('div');
newDiv.style.cssText = 'top:'+posx+'px; left:'+posy+'px; position:absolute; width: 200px; height: 200px;background-color:' +color+ '; border-radius: 100px;';
document.body.appendChild(newDiv);
}
You can not listen to a keyboard event on a div. The click is happening on the div itself so it executes the corresponding callback function.
For your use case it makes more sense to attach the listener it the document itself.
For example.
document.addEventListener('keyup', function(e){console.log(e.keyCode)});

Line up image with the bottom edge of the window

I've done some work with parallax scrolling and resizing my image using javascript, but I cannot figure out how to getting a homepage to line up perfectly with the edge of the window.
The code I have does not line up with the bottom edge of the webpage.
If I do a fix value I can get it to line up; however, depending on whether or not someone has a toolbar it messes up the alignment.
<!doctype html>
<html>
<head>
<title>ParallecScrolling</title>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
#image {
position: relative;
z-index: -1
}
#content {
height: 2700px;
width: 100%;
margin-top:-10px;
background-color:#4dbbac;
position: relative;
z-index:1;
}
</style>
</head>
<body onresize="myFunction()">
<img id="image" src="IMG.JPG" style="margin:;" />
<div id="content"></div>
<script>
function myFunction() {
var w = window.outerWidth;
var h = window.outerHeight;
var yourImg = document.getElementById('image');
yourImg.height = h;
yourImg.width = w;
}
</script>
<script type="text/javascript">
var ypos, image;
function parallex () {
ypos = window.pageYOffset;
image = document.getElementById('image');
image.style.top = ypos * .5 + 'px';
}
window.addEventListener('scroll', parallex);
</script>
</body>
</html>
i'm not sure if i got your question right but why you dont use bottom property?
image.style.bottom = 0;

How to copy nodes from an existing div into another div Javascript

Im not sure what im doing wrong, but iv created 5 images placed at random positions in the left div and i want to copy all 5 - the firstchild and place them on the right side. So il have 5 images on the left and 4 on the right. I debugged my if with alert and it does run, but i cant figure out what wrong with my code? Why is it not print images to the right hand side? Any help is appreciated thank you
var theLeftSide = document.getElementById("leftside");
var theRightSide = document.getElementById("rightside");
facesNeeded = 5;
totalfFaces = 0;
function makeFaces() {
while(facesNeeded != totalfFaces) {
smiley = document.createElement("img");
smiley.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
smiley.style.top = Math.random() * 401 + "px";
smiley.style.left = Math.random() * 401 + "px";
document.getElementById("leftside").appendChild(smiley);
totalfFaces++;
// alert(totalfFaces); used to debug
}
if (facesNeeded == totalfFaces){
alert("hi");
leftSideImages = theLeftSide.cloneNode(true);
leftSideImages.removeChild(leftSideImages.childNode[0]);
document.getElementById("rightside").appendChild(leftSideImages);
//alert("hi");
}
}
<!DOCTYPE html>
<html>
<head>
<style>
img{
position: absolute;
}
div {
position: absolute;
width:500px;
height:500px;
}
#rightside {
left: 500px;
border-left: 1px solid black;
}
</style>
<script src="script3.js"></script>
</head>
<body onload="makeFaces()">
<h1> Matching Game</h1>
<p> Click on the extra smiling face on the left</p>
<div id="leftside"></div>
<div id="rightside"></div>
</body>
</html>
You have a typo in this line:
leftSideImages.removeChild(leftSideImages.childNode[0]);
it should be:
leftSideImages.removeChild(leftSideImages.childNodes[0]);
Full code:
var theLeftSide = document.getElementById("leftside");
var theRightSide = document.getElementById("rightside");
facesNeeded = 5;
totalfFaces = 0;
function makeFaces() {
while(facesNeeded != totalfFaces) {
smiley = document.createElement("img");
smiley.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
smiley.style.top = Math.random() * 401 + "px";
smiley.style.left = Math.random() * 401 + "px";
document.getElementById("leftside").appendChild(smiley);
totalfFaces++;
// alert(totalfFaces); used to debug
}
if (facesNeeded == totalfFaces){
alert("hi");
leftSideImages = theLeftSide.cloneNode(true);
leftSideImages.removeChild(leftSideImages.childNodes[0]);
document.getElementById("rightside").appendChild(leftSideImages);
//alert("hi");
}
}
<!DOCTYPE html>
<html>
<head>
<style>
img{
position: absolute;
}
div {
position: absolute;
width:500px;
height:500px;
}
#rightside {
left: 500px;
border-left: 1px solid black;
}
</style>
<script src="script3.js"></script>
</head>
<body onload="makeFaces()">
<h1> Matching Game</h1>
<p> Click on the extra smiling face on the left</p>
<div id="leftside"></div>
<div id="rightside"></div>
</body>
</html>

JQuery Parallax Background moving with mouseover

I have implemented horizontal parallax background following this tutorial.
I want to have the same effect vertically . Please Help.
This is my code so far,
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script>
var currentX = '';
var movementConstant = .015;
$(document).mousemove(function(e) {
if(currentX == '') currentX = e.pageX;
var xdiff = e.pageX - currentX;
currentX = e.pageX;
$('.parallax div').each(function(i, el) {
var movement = (i + 1) * (xdiff * movementConstant);
var newX = $(el).position().left + movement;
$(el).css('left', newX + 'px');
});
});
</script>
<style>
.parallax {
position: absolute;
width: 100%;
height: 800px;
overflow: hidden;
left: 0;
}
.water {
position: absolute;
width: 100%;
height: 800px;
left:0;
background-repeat: no-repeat;
background-position: top center;
}
.water-layer1 {
background-image: url(water-layer-1.png);
}
.water-layer2 {
background-image: url(water-layer-2.png);
}
.water-layer3 {
background-image: url(water-layer-3.png);
}
.water-layer4 {
background-image: url(water-layer-4.png);
}
</style>
</head>
<body>
<div class="parallax">
<div class="water water-layer4"></div>
<div class="water water-layer3"></div>
<div class="water water-layer2"></div>
<div class="water water-layer1"></div>
</div>
</body>
</html>
I'm on mobile so I can't test... try this:
<script>
var currentY = '';
var movementConstant = .015;
$(document).mousemove(function(e) { if(currentY == '') currentY = e.pageY;
var ydiff = e.pageY - currentY;
currentY = e.pageY;
$('.parallax div').each(function(i, el) { var movement = (i + 1) * (ydiff * movementConstant);
var newY = $(el).position().top + movement; $(el).css('top', newY + 'px'); }); });
</script>

Moving css scaled div using javascript

I have posted my problem at http://jsfiddle.net/ugnf4/ as it would be make it easier.
Below is my html / javascript code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="mainContainer">
<div id="pageContainer" style="background: #cdcdcd;"></div>
</div>
<style>
BODY {
margin: 0px;
padding: 0px;
}
#pageContainer {
position: relative;
margin: 10px auto;
-webkit-transform-origin:50% 20%;
-webkit-transform:scale(1.37);
width: 1218px;
height: 774px;
border: 1px solid #000000;
}
#mainContainer {
width: 100%;
overflow: hidden;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</script>
<script type="text/javascript">
$(document).ready(function() {
setHeight();
$(window).resize(setHeight);
});
function setHeight()
{
$('#mainContainer').css({'height': $(window).height()});
}
$('#mainContainer').mousemove(function (e) {
});
</script>
</body>
</html>
Currently #mainContainer div has overflow hidden as i dont want to show scroll bars and #pageContainer div (inner div) is scaled at 1.37 using css3, as in certain cases based on screen / browser width height #pageContainer's content would be hidden because of overflow hidden.
I want to code javascript so that if somebody moves cursor in #mainContainer, based on position of mouse X and Y co-ordinates I would like to move #pageContainer so that similar position of #pageContainer would be visible (I hope it is clear).
I m having problem as I m using -webkit-transform-origin, unable to understand how to move #pageContainer around with respect to mouse co-ordinates of #mainContainer.
UPDATE:
I m looking something like what happens in issuu.com website when you open an ebook and zoom it more than the browser size (Should make it more clear)
I m looking for algo or pointer how to achieve it (how to calculate it) not necessarily a working script.
How can this be achieved.
Below is working html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="mainContainer">
<div id="pageContainer" >
<div id="pageContainerInner"style="background: #cdcdcd;">
</div>
</div>
<style>
BODY {
margin: 0px;
padding: 0px;
}
#pageContainer {
margin: 10px auto;
-webkit-transform-origin:50% 20%;
-webkit-transform:scale(1.37);
width: 1218px;
height: 774px;
}
#mainContainer {
width: 100%;
overflow: hidden;
}
#pageContainerInner {
position: relative;
width: 1218px;
height: 774px;
border: 1px solid #000000;
top: 0;
left: 0;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</script>
<script type="text/javascript">
var pageWidth = 1220;
var pageHeight = 776;
var scale = 1.37;
var scaledDelta = 5; //Percentage mouse position approximation
$(document).ready(function() {
setHeight();
$(window).resize(setHeight);
});
function setHeight()
{
$('#mainContainer').css({'height': $(window).height()});
}
$('#mainContainer').mousemove(function (e) {
// Calculate the offset of scaled Div
var offsetX = $('#pageContainer').offset().left;
var offsetY = $('#pageContainer').offset().top;
// Calculate div origin with respect to screen
var originX = (-1 * offsetX) / scale;
var originY = (-1 * offsetY) / scale;
var wWdt = $(window).width();
var wHgt = $(window).height();
// Now convert screen positions to percentage
var perX = e.pageX * 100 / wWdt;
var perY = e.pageY * 100 / wHgt;
// Div content which should be visible
var pageX = perX * pageWidth / 100;
var pageY = perY * pageHeight / 100;
// Calculate scaled divs new X, Y offset
var shiftX = (originX - pageX) + (e.pageX / scale);
var shiftY = (originY - pageY) + (e.pageY / scale);
$('#pageContainerInner').css({'left': shiftX+'px', 'top': shiftY+'px'});
});
</script>
</body>
</html>
Hope this will help others.
I have posted a probable solution at http://jsfiddle.net/PYP8c/.
Below are the modified styles for your page.
BODY {
margin: 0px;
padding: 0px;
}
#mainContainer {
width: 100%;
overflow: hidden;
position: relative;
margin: 10px auto;
-webkit-transform-origin:50% 20%;
-webkit-transform:scale(1.37);
width: 1218px;
height: 774px;
border: 1px solid #000000;
}
#pageContainer {
position:absolute;
top:0px;
}
This is the javascript code for the same.
$(document).ready(function() {
//setHeight();
//$(window).resize(setHeight);
});
function setHeight()
{
$('#mainContainer').css({'height': $(window).height()});
}
$('#mainContainer').mousemove(function (e) {
var contentHeight = $("#pageContainer").height();
var minTop = 774 - contentHeight;
if(minTop>0)
minTop = 0;
var currTop = ((e.pageY-10)/774.0)*(minTop);
document.getElementById("pageContainer").style.top = currTop+'px';
});
Its just a demo on how you could get the text to move based on the mouse coordinates.
You could make a lot of changes, like adding a scrollbar that fades which gives the user a feedback about how much content is still available in both the vertical directions.
Also I have used hard coded values for height, but in your final version I would recommend you get the height of the mainContainer division dynamically.

Categories