I am currently learning AnimeJS but I am having a problem with the animation.
Basically, what is happening is that when I run a simple html that contains css styles and a javascript script on my localhost, the website is skipping a portion of the `
Here is my entire code:
<!DOCTYPE html>
<html>
<head>
<title>AnimeJS</title>
</head>
<style>
div {
background-color: red;
width: 100px;
height: 100px;
}
</style>
<body>
<div></div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js" integrity="sha512-z4OUqw38qNLpn1libAN9BsoDx6nbNFio5lA6CuTp9NlK83b89hgyCVq+N5FdBJptINztxn1Z3SaKSKUS5UP60Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script >
anime({
targets: 'div',
translateX: 250,
duration: 1000,
});
</script>
</html>
Here is the localhost version:
And here is the version when I just open the index.html normally (locally) without localhost
Any suggestions as to what I am doing wrong and/or what I need to change in order for my localhost to work properly?
Related
fairly new to js. I have a simple project in which all I have is an image twice the height of the screen. I want the webpage to open at the bottom of the page, so I have added the "window.scroll" funtion method in javascript. This works fine... most of the time. Sometimes, particularly if I test on a mobile device with a home server, the javascript just doesn't fire up and the page starts at the top. So my main question is: is there a way to do the same as "window.scroll" but with CSS, bypassing js altogether? And a second question I would have is, why is javascript so flaky? I am really new to web development and I have already twice (the other time with the "slide" method) had to use css instead of js because js doesn't work properly, or it needs to be cached etc... is this normal behaivour or just me really bad at writing it at this point? Thanks for your time. P
Here's the simple code:
$(document).ready(function(){
window.scroll(0,2000);
});
body {
margin: 0px;
padding: 0px;
}
img {
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<img src="https://pixabay.com/static/uploads/photo/2016/10/18/21/22/california-1751455_960_720.jpg" width="100%" style="display: block;">
</body>
</html>
CSS:
body {
margin: 0px;
padding: 0px;
}
img {
width: 100%;
}
JavaScript:
$(document).ready(function(){
window.scroll(0,2000);
});
I think the problem is that the image takes time to load.So I think your event is fired however the image loads later and changes the page size again. The load event will fire after images are loaded.
try this code instead:
$(window).on("load", ,function(){
window.scroll(0,2000);
});
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<link href="index.css" rel="stylesheet" type="text/css">
<script src="main.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<a id="myLink" href="#">
Click to slide in new page
</a>
<iframe id="newPage" src="http://jsfiddle.net"></iframe>
</body>
</html>
And here is my CSS:
#myLink {
position: absolute;
}
iframe {
width: 100%;
height: 100%;
top: 100%;
position: fixed;
background-color: blue;
}
And my JavaScript:
$("#myLink").click(function () {
$('#newPage').transition({top: '0%' });
});
I am literally copy and pasting from this source http://jsfiddle.net/TheGAFF/hNYMr/ to achieve a transition between web pages using iframe but for some reason when I try this simple code in my browser, it doesn't work. I can't see why this doesn't work in my browser when I link it to index.html. Can anyone help? Thanks.
Edit: The "#myLink" in the CSS page isn't commented out, it just happened to format like this in the question.
Look in your JavaScript console. Expect to see an error about $ not being defined.
See this code:
<script src="main.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
First you load your script, which tries to use $. Then you try to load jQuery, which defines $.
Swap the order or your script elements.
You then have a second problem.
$("#myLink")
You have no element with id="myLink" in the document at the time the script runs.
It doesn't get added to the DOM until 4 lines later.
Either:
move the script so it appears after the elements you are trying to access
use an event handler (like DOM Ready):
Such:
$( function () {
$("#myLink").click(function () {
$('#newPage').transition({top: '0%' });
});
} );
use delegated events
Such:
$(document).on("click", "#myLink", function () {
$('#newPage').transition({top: '0%' });
});
Edit; sorry you already did that.
Try puttting your js file Under the js library file.
This is probably the weirdest thing I've encountered while programming in JavaScript, and I can't find a solution anywhere online.
So all I've done is created an html document and a JS file that is externally linked to it. When I try to reference an element from the page in the JS file, it doesn't do anything, and there aren't any errors in the console. Here's an example:
$('#box').click(function() {
alert('test');
})
<html>
<head>
<script src="script.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <!--jQuery-->
</head>
<body>
<div id="box" style="width: 200px; height: 100px; background: #000;">
</div>
</body>
</html>
It works wonderfully in the fiddle, but on my machine it doesn't. Also tried hosting on Google Drive, nothing. I opened it on another computer, nada. Here's the live page:
https://7568fa8ec856c21498701e0edd220440c5c75264.googledrive.com/host/0B4rWYiw5-JZtfm1wNE1iMkY1b0tuaXFnaUZmaWFsSU5XLXQtaTh5U2ozVFB0NHgyVXpOOW8/test.html
I don't understand!?!?
How does it behave if you define HTML like below:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <!--jQuery-->
</head>
<body>
<div id="box" style="width: 200px; height: 100px; background: #000;">
</div>
</body>
<script src="script.js" type="text/javascript"></script>
</html>
It is actually recommended to include custom JavaScript after document body.
In addition to fixing your issue, the HTML will be displayed on the page before JavaScript execution will finished.
If scripts.js is using jquery, you need to load the jquery before you load scripts.js
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> <!--jQuery-->
<script src="script.js" type="text/javascript"></script>
You have two separate issues:
First you must load jQuery before your script so that it is available when your script runs. So, switch the order of your two script tags to fix that issue.
Your script cannot run until the DOM is loaded. When you run it in the <head> tag, it is running BEFORE the DOM has loaded and thus the page is empty at that point so your code can't find the proper elements to install click handlers. There are a couple ways to solve this issue. The simplest is to move all your script tags to right before </body>. This will ensure that the DOM is available when the scripts run and you won't have to do anything else special.
Here's a revision of your HTML that should work:
<html>
<head>
</head>
<body>
<div id="box" style="width: 200px; height: 100px; background: #000;">
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="script.js" type="text/javascript"></script>
</body>
</html>
You could also just switch the order of your two scripts and leave them in the <head> tag and then change your script to this:
$(document).ready(function() {
$('#box').click(function() {
alert('test');
})
});
In jQuery, the $(document).ready(fn) construct instructs jQuery to call a specific function only when the DOM has finished loading. This allows you to place this initialization script anywhere and jQuery will make sure that your callback function is not called until the DOM is ready.
I'm trying to test out how the animate() function works, and this is an example I got from stackexchange actually (it works on fiddle), but when I run it on my local computer, it doesn't work anymore.
Here's the code:
<html>
<head>
<script type="text/javascript" src="scripts\jquery-1.11.0.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('button').click(function () {
$('div').animate({
width: 'toggle'
});
});
alert("hei");
});
</script>
<style type="text/css">
div {
background-color: red;
height: 100px;
width: 100px;
display: none;
}
</style>
</head>
<body>
<button>Show/Hide</button>
<div></div>
</body>
Why is this? When I refresh, there's no alert popping up so it's not even processing the javascript I have in there. But it works fine in fiddle.
Oh, and here's the fiddle. But I really don't think it's relevant since it works there, just not on my local computer. Am I missing declaring a library?
Please change below line :
<script type="text/javascript" src="scripts\jquery-1.11.0.js"></script>
with this one :
<script type="text/javascript" src="scripts/jquery-1.11.0.js"></script>
You have used backslash instead of slash
It work For me
I think your jQuery path is not correct you have used
scripts\jquery-1.11.0.js
normally we used scripts/jquery-1.11.0.js
scripts\jquery-1.11.0.js should be scripts/jquery-1.11.0.js
I am having issues with a simple project I am doing. I am trying to play around with some JavaScript, HTML5, SVG drawing using Raphael.js. When I try loading the HTML page with the embedded JavaScript files I get a blank page in my browser. I checked Firebug and Chrome developer tools and I keep getting a 304 Not Modified error for my scripts and my HTML page.
I'm running this project on my local server using MAMP on a Mac OSX.
Here is my HTML:
<html>
<head>
<title>g.Raphael Practise</title>
<script type="text/javascript" src="raphael-min.js"></script>
<script type="text/javascript" src="g.pie-min.js"/></script>
<script type="text/javascript" src="myscript.js"></script>
<style type="text/css">
#canvas-container {
width: 500;
border: 1px solid #aaa;
}
</style>
</head>
<body>
<div id="canvas-container"></div>
</body>
</html>
This is the content of "myscript.js":
window.onload = function() {
var paper = new Raphael(document.getElementById("canvas-container"), 500, 500);
paper.piechart(250, 250, 100, [55, 20, 13, 32, 5, 1, 2]);
}
From the docs of g.raphaeljs:
include raphael.js, g.raphael.js and any (or all) of g.line.js, g.bar.js, g.dot.js and g.pie.js into your HTML page
Your current code doesn't really show an empty page, but you have to include the gRaphaël basic script as well to make it work:
<script type="text/javascript" src="raphael-min.js"></script>
<script type="text/javascript" src="g.raphael-min.js"/></script>
<script type="text/javascript" src="g.pie-min.js"/></script>
<script type="text/javascript" src="myscript.js"></script>