why doesnt this animate() jquery function script work? - javascript

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

Related

JavaScript erratic with starting point funciton

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);
});

Why isn't my web page transition working? (HTML, CSS, JavaScript)

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.

Modifying LESS variables not working for in-page <style> tag containing LESS code

Using the latest version of LESS (1.5.1), when I try to modify a LESS variable that's defined in a <style> tag in JS by calling less.modifyVars(), the variable doesn't get updated.
Example:
<style type="text/less">
#bgColor: red;
#box {
width: 100px;
height: 100px;
border: 1px solid black;
background-color: #bgColor;
}
</style>
<div id="box"></div>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="less-1.5.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("#box").hover(
function(){
less.modifyVars({'#bgColor': 'blue'});
},
function(){
less.modifyVars({'#bgColor': 'red'});
}
);
});
</script>
If the code in the <style> tag is put into an external LESS stylesheet and referenced via a <link> tag, then the LESS variable will get updated.
Any ideas why? Is this a bug with LESS?
Thanks.
A Bug
Here is the current thread that reports it. It was thought fixed, but reopened two months ago for LESS 1.5 because it was not, in fact, updating variables in <style> elements.

Why cant Safari manage this dynamic cssStyle

This seems to work OK in FF, Opera, IE (10), even chrome but safari wont have it?
<html> <head>
<style> .moveable_image {position:absolute; top:50px;} </style>
<script type="text/javascript">
function move_image() {
var image_top = 200
document.styleSheets[0].cssRules[0].style.top = image_top;
} </script>
</head> <body>
<input type='button' onClick='move_image()' value='move image'/>
<img class="moveable_image" src="f/4thumb.jpg">
</body> </html>
it works like this:
document.styleSheets[0].cssRules[0].style.top = "200px"
but not when it's calling up a 'var'?
it works calling the same var if I (could) go the name route:
document.images['moveable'].style.top = image_top;
but I need to change a whole class
here it is live: http://generationsinc.co.uk/test/safari_java_cssrule_test.html
I hope this makes sense, I've not been able to find anything covering this at all. I've even just re-installed Safari...
I realise it wont be obvious why I need to achieve this in this particular way, but that's because I've carved this annoyance out of the bowels of my project and presented it as simply as possible.
what are my options folks?
EDIT; there seems rather a lot more incompatibility on browsers only a little older... see my comments.
Is there some better way that i have missed to change a whole class of elements dynamically?
or simply a whole bunch of elements somehow?
You can use jquery to set css property top: 200px;. See this code-
<!DOCTYPE html>
<html> <head>
<style>
.moveable_image {position:absolute; width: 100px ; top:50px;}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
function move_image() {
$('.moveable_image').css({"top":"200px"});
} </script>
</head> <body>
<input type='button' onClick='move_image()' value='move image'/>
<img class="moveable_image" src="Tupils.jpg">
</body> </html>
This is working for IE, Chrome and Safari.

Callback function doesn't work when using getJSON

This is the code that I am using,
When I write the link into the browser (I.E. or Mozilla) it is working like
(MyFunc({"memes":[{"source":"http://www.knall......),
but when I try to run it as HTML file I have a error in status Bar.
what is the problem?. Thanks
<head>
<style>img{ height: 100px; float: left; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="images"></div>
<script>$.getJSON("http://tagthe.net/api/?url=http://www.knallgrau.at/en&view=json&callback=MyFunc",function(data){
alert(data);
});
</script>
</body>
You don't define MyFunc anywhere in your code. You should rather put a ? in the URL instead of an arbitrary name, and jQuery will replace it with a generated callback name.
Eureka man!
It doesn't work with the latest version... you should use the jquery 1.3.1 not newer...
You have to use getScript instead of getJSON since you are calling a URL on another domain name.
Update:
The following code works fine for me:
<head>
<style>img{ height: 100px; float: left; }</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="images"></div>
<script>
function MyFunc(data) {
alert(data)
}
$.getScript("http://tagthe.net/api/?url=http://www.knallgrau.at/en&view=json&callback=MyFunc");
</script>
</body>
you cant make ajax calls to other domains
http://en.wikipedia.org/wiki/Same_origin_policy
Also, your URL is not a valid url, copy and paste it in a browser and you will see an error
http://tagthe.net/api/url=http://www.knallgrau.at/en&view=json&callback=MyFunc
your valid URL is:
http://tagthe.net/api/?url=http://www.knallgrau.at/en&view=json&callback=MyFunc
$.getJSON("
http://tagthe.net/api/url=http://www.knallgrau.at/en&view=json&callback=MyFunc",
function(data){
alert(data);
});

Categories

Resources