I want to show a GIF first and when the mouse hovers on the GIF it should show a different JPG picture – so that it looks like it stopped.
I tried this code but it didn't work.
I would like to know which part needs to be fixed.
<html>
<script>
$(document).ready(function()
{
$("#imgDino").hover(
function()
{
$(this).attr("src",
"http://s2.favim.com/610/150619/airplane-fly-landscape-plane-Favim.com-2831842.jpg");
},
function()
{
$(this).attr("src", "https://66.media.tumblr.com/233306b207ff895cc591ee86684fd792/tumblr_mze5yi7uwQ1sqqsygo1_400.gif");
}
);
});
</script>
<body>
<img id="imgDino" src="https://66.media.tumblr.com/233306b207ff895cc591ee86684fd792/tumblr_mze5yi7uwQ1sqqsygo1_400.gif" />
</body>
</html>
There are two problems here with your code:
You are not loading jQuery - so you can't use it. And the console (F12) throws an error for that: Uncaught ReferenceError: $ is not defined
You are registering the javascript-event before the dom-element is available
So a working solution for your scenario would be:
<html>
<head>
</head>
<body>
<img id="imgDino" src="https://66.media.tumblr.com/233306b207ff895cc591ee86684fd792/tumblr_mze5yi7uwQ1sqqsygo1_400.gif" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#imgDino").hover(
function() {
$(this).attr("src",
"http://s2.favim.com/610/150619/airplane-fly-landscape-plane-Favim.com-2831842.jpg");
},
function() {
$(this).attr("src", "https://66.media.tumblr.com/233306b207ff895cc591ee86684fd792/tumblr_mze5yi7uwQ1sqqsygo1_400.gif");
}
);
});
</script>
</body>
</html>
You script is using syntax from JQuery, add the following between your <head></head> tags:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
The code will work as expected after you do this (though the effect looks kinda weird with the images used by the script).
Also, as this question is related to JQuery, you should add that tag to your question.
Related
I want to remove class "active" from the body when all components will be loaded.For this purpose, I wrote following jquery code snippets and it's working perfectly in Chrome, but in Firefox the "active" class is not removed by the removeClass function after loading all components.
$(document).ready(function($){
$("body").addClass("active");
});
$(window).on('load', function () {
$("body").removeClass("active");
});
Is there anything else that could be causing the issue..?
I tried this in Chrome and Firefox and it works fine....doc loads first...Maybe try running this code below to see if this does the same thing on your firefox...?
But it could be FF version or maybe jQuery version too.
I have FF 56.0 (32-bit) it's updating as we speak :-P
and jQuery 2.2.4
<!doctype html>
<html>
<head>
<title>Quick Loading test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
</head>
<body>
<h1>testing</h1>
<img src="http://www.guoguiyan.com/data/out/113/69175307-large-wallpapers.jpeg">
<script>
$(window).on('load', function() {
$('body').removeClass('active');
console.log('window load');
});
$(document).ready(function($) {
$('body').addClass('active');
console.log('doc ready');
});
</script>
</body>
</html>
I found this link regarding this...
https://github.com/jquery/jquery/issues/3194
So maybe try
$(window).on('load', function() {
$('body').removeClass('active');
console.log('window load');
});
$(function() {
$('body').addClass('active');
console.log('doc ready');
});
I have the next code. What am trying to do is when i refresh or open the page, to add the class intro. But my main problem is in the part :
$("body").load(function(){
I want when the page is opened, then to add the class .intro. Instead of body, i have also tried html, and still doesn't work.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("body").load(function(){
$("p").addClass("intro");
});
});
</script>
<style>
.intro {
background-color:green;
}
</style>
</head>
<body>
<img src="https://k32.kn3.net/taringa/1/9/3/9/4/7/32/johnny_te_toco/330x330_248.gif" width="304" height="236">
<p><b>Note:</b> Depending on the browser, the load event may not trigger if the image is cached.</p>
</body>
</html>
You should not use load() for this purpose.
load() function description : Load data from the server and place the returned HTML into the matched element.
You need just ready function to achieve that :
$(document).ready(function(){
$("p").addClass("intro");
});
//OR
jQuery(function($){
$("p").addClass("intro");
});
Hope this helps.
Try this instead:
$(document).ready(function(){
$(window).load(function(){
$("p").addClass("intro");
});
});
Load event attached to the window. If that is what you meant? Load on a DOM element like that doesn't make much sense.
Whilst this should work, you could pull it out of your ready() event.
$(document).ready(function(){
// Nothing to see here...
});
$(window).load(function(){
$("p").addClass("intro");
});
This waits for the load of the window, but if you just want to add the class as soon as possible when the DOM is ready, well, you won't need the load() at all:
$(document).ready(function(){
$("p").addClass("intro");
});
Bonus: You should use on() to attach all events going forward.
$(window).on('load', function(){
$("p").addClass("intro");
});
on() is the preferred method for events in future jQuery versions, as older methods are deprecated.
All the best.
Put your code inside $(document).ready callback.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("p").addClass("intro");
});
</script>
<style>
.intro {
background-color:green;
}
</style>
</head>
<body>
<img src="https://k32.kn3.net/taringa/1/9/3/9/4/7/32/johnny_te_toco/330x330_248.gif" width="304" height="236">
<p><b>Note:</b> Depending on the browser, the load event may not trigger if the image is cached.</p>
</body>
</html>
$(window).on('load', function(){
$("p").addClass("intro");
});
What i want to do is simple. When i click the image, i want some message to appear.
Afterwards, when i click it again i want it to disappear. I have problems iplementing it
due to my lack of jQuery knowledge. I would appreciate some help with the following code, as well as some other implementations. I know i can do something with class="hidden" and have jQuery add/remove it but oh well.
This is what i'm trying to work with.
<!DOCTYPE html>
<html>
<head>
<script>
function greet(){
a = document.getElementById('here');
if (a.trim().length==0){
a.innerHTML = 'message!';
}
else{
a.innerHTML = '';
}
</script>
</head>
<body>
<img src="http://www.clker.com/cliparts/K/9/M/I/M/8/on-button-small-th.png" alt="alt" onclick="greet()"/>
<p id='here'></p>
</body>
</html>
EDIT: seems like i should use a.value, but i must be doing something else wrong too.
If you are using jQuery it is very simple; just use this as your JavaScript (don't forget to link the jQuery main library - I like the Google CDN for that). Just use the toggle function:
function greet() {
$('#here').toggle();
}
Also it is better to register the onClick through jQuery rather than your html (for examplesee this SO question). So that would be like this for the whole page instead :
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$( document).ready(function() {
$("#greet").click(
function () {
$('#here').toggle();
}
);
$("#here").hide();
}
</script>
</head>
<body>
<img id="greet" src="http://www.clker.com/cliparts/K/9/M/I/M/8/on-button-small-th.png" alt="alt"/>
<p id='here'><!--MESSAGE SHOULD BE HERE--></p>
</body>
</html>
Working example in jsFiddle.
I'm currently trying to get an alert to happen when something is clicked. I can get it working in jsFiddle, but not in production code:
jsFiddle example that works (jQuery 1.5 loaded)
HTML (in case jsFiddle is inaccessible):
<!DOCTYPE HTML><html><head><title>Test</title></head>
<body> <h1>25 Feb 2011</h1><h3>ABC</h3><ul>
<li class="todoitem">Test—5 minutes</li> </ul>
</body></html>
Javascript:
$(".todoitem").click(function() {
alert('Item selected');
});
Non-working production example:
<!DOCTYPE HTML><html><head><title>Test</title>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(".todoitem").click(function() {
alert('Item selected');
});
</script>
</head>
<body>
<h1>25 Feb 2011</h1><h3>ABC</h3><ul><li class="todoitem">Test—5 minutes</li></ul>
</body>
</html>
Safari's Inspector indicate that jQuery is being loaded correctly, so that's not the issue. As far as I can tell, these two pieces of code are essentially identical, but the latter isn't working. Can anyone see what I've done wrong?
You need to wrap your code in $(document).ready()
This will work
$(document).ready(function(){
$(".todoitem").click(function() {
alert('Item selected');
});
});
JSfiddle does this for you automatically
Wrap the code inside
$(function (){
})
And you have the working code
$(function (){
$(".todoitem").click(function() {
alert('Item selected');
});
})
I'm trying JQUERY on my machine, but for some reason, nothing seems to work. Here's the test file:
<html>
<head>
<script type="text/css" src="jquery.js">
</script>
<script type="text/javascript">
$("p").mouseover(function () {
$(this).css("color","black");
});
$(document).ready(function(){
$("body").css("background-color","black");
$("body").css("color","white");
});
</script>
</head>
<body>
<h1>This is a test</h1>
<p>Roll over me!</p>
</body>
</html>
Nothing in there works. Also, if anybody wants to know, accessing through my domain and through the local both don't work. I'm really confused, because I copied most of that code off the internet, just in case there was something wrong with my typing.
For some reason, firefox is throwing this error:
Code: Evaluate
$ is not defined
http://hussain.mooo.com/jq.html
Line: 6
$ is not defined
http://hussain.mooo.com/jq.html
Line: 6
New code (moved the p onmouseover handeler)
<script src="jquery.js" type="text/css">
</script>
<script type="text/javascript">
$(document).ready(function(){
$("p").mouseover(function () {
$(this).css("color","black");
});
$("body").css("background-color","black");
$("body").css("color","white");
});
</script>
Specify correct type for javascript file:
<script type="text/javascript" src="jquery.js"></script>
Update
You're currently using type="text/css" as content type for javascript file which is incorrect. Try to copy above code into your script.
Screenshot
removed dead ImageShack link
Install firebug and see what it tells you in the Console tab.
You should move the attachment of the mouseover handler into $(document).ready(...) because the paragraph won't necessarily exist until the document is ready and so no handler can be attached to it.
Download the latest version of jQuery "jquery-1.3.2.min.js" and link the file correctly. and try this,
<script type="text/javascript">
$(function(){
$("p").mouseover(function () {
$(this).css("color","black");
});
$("body").css("background-color","black");
$("body").css("color","white");
});
</script>