toggle two images on click - javascript

I'm trying to use someone's code from an earlier post that I posted on here, and in it, he provided a jsFiddle that shows how to toggle between two images.
I'm trying to replicate exactly what that person is doing, but it doesn't seem to work on my code:
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
$('#ellomatey').toggle(
function(){
$(this).attr('src', 'bgimage.png');
},
function(){
$(this).attr('src', 'redsquare.png');
});​
</script>
</head>
<body>
<img id="ellomatey" src="bgimage.png" />
</body>
</html>
Does anyone know what I'm doing wrong? I have a feeling that it's not calling the function correctly, but it seems to work on that person's example.

The other two answers talk about the actual problem, but they don't tell you how you get to discover that, this is where debugging comes into play.
console.log("before");
$('#ellomatey').toggle(
function(){
console.log("bgimage"); $(this).attr('src', 'bgimage.png');
},
function(){
console.log("redsquare"); $(this).attr('src', 'redsquare.png');
});​
console.log("after");
If you do this, you'll notice "before" and "after" in your console. That's okay. But when clicking on the image, you would expect the other console logs, which means that the toggle function isn't doing what you thought it would do.
You can somewhat suppose the heavily used function to work properly, so there must be something up with the selector. Let's inspect that.
console.log($('#ellomatey'));
Heh, what?! No elements.
And then you start to think why and then you'll discover you need to wait till the DOM loaded; supposing you would have some underlying background in how a webpage loads, which is a prerequisite for what you're doing.
Wrapping
$(document).ready(function() { ... });
around it does exactly that.
All it takes is a little understanding and some simple debug output...
Don't just mindlessly code supposing it'll work, but verify your assumptions while you do it.

You need to wrap your code in a document.ready call. The way you have it the code will try to run before the actual content of the page has loaded.
<script>
$(document).ready(function() {
$('#ellomatey').toggle(
function(){
$(this).attr('src', 'bgimage.png');
},
function(){
$(this).attr('src', 'redsquare.png');
});​
});
</script>

You're defining your toggle function for an element that doesn't exist yet in the document, so you should wrap the js code on window.load handler (assuming you want to wait the complete image load) or at document.ready event

I created a flexible toggle script:
jsBin demo
put the second image url inside an data attribute for your image:
<img id="ellomatey" src="img_1.jpg" data-src="img_2.jpg" />
and on click just call the 'swap' function!
$(function(){ // BTW, you were just missing this 'ready' function :)
function swap(){
var mem = this.src;
this.src = $(this).data('src');
$(this).data('src',mem);
}
$('#ellomatey').click( swap );
});
This snippet can also handle multiple elements by just nesting your elements:
$('#ellomatey, .button, #something').click( swap );
(Added also in the demo a pure JS version. Have fun!)

Related

How to guarantee that a script in the middle of the body runs after all the DOM has finished load

In my <body> I have a component that inserts a script that is supposed to run only after all the page has completely loaded:
<script>
$('<script id="smallPlacarScriptdId">\
$(window).load(function() {\
$(".main.right").hide();\
$("#rightzero").show();\
$(".comp.smallPlacard.firstChild").click(function () {\
var clicked = $(this).parent().attr("id");\
$("main.right").hide();\
$("#right"+clicked+"").show();\
});\
})\
<\script>').appendTo("body")
</script>
That's not happening and this script (1) is correctly inserted into the DOM but (2) is not working (not hiding .main.right nor showing #rightzero).
I though that by using this approach I would guarantee that it would be the same as just put this script at the bottom of the <body> but it isn't. In fact if I put it (not dynamically like this) in my page it produces the desired result.
I tried setTimeout() to validate my theory but I'm getting an error in jQuery and I'm lost.
That might be the problem:
<\script>').appendTo("body")
Browser might think you are actually closing your script tag. Change it to
</' + 'script>').appendTo("body")
Check this plunker out: http://plnkr.co/edit/Oc6yrFMdPoW2WV257CBQ?p=preview
Just use this code
<script id="smallPlacarScriptdId">
$(window).load(function() {
$("main.right").hide();
$("#rightzero").show();
$(".comp.smallPlacard.firstChild").click(function () {
var clicked = $(this).parent().attr("id");
$("main.right").hide();
$("#right"+clicked+"").show();
});
})
</script>
Sorry I didn't read you question well enough.
Javascript will allow you to access undeclared variables, so use that to your advantage. Check if a variable is set, undefined is treated as a false so no need for initialization. As soon as you enter the code just set it to true so nothing else will execute.
Hopefully this solves the problem for you, but you really should look at from the server avoiding the javascript, it will bloat the page.
<script>
if (!myScriptHasLoaded)
{
myScriptHasLoaded = true;
$(window).load(function() {
$("main.right").hide();
$("#rightzero").show();
$(".comp.smallPlacard.firstChild").click(function () {
var clicked = $(this).parent().attr("id");
$("main.right").hide();
$("#right"+clicked+"").show();
});
});
}
</script>

Unable to execute function after JSON loaded

This is the pen that shows that when a JSON request completes, a name 'Antonio' appears. But jQuery function is not executing on it. Please make sure that document.write is a necessary function for me.
This is the code I wrote to get the name Antonio.
<script type="text/javascript">
function gallery(json) {
document.write('<span>'+json.feed.title.$t+'</span>');
}
</script>
<script src='http://www.antonio-bloggerever.blogspot.com/feeds/posts/summary/-/Creative?max-results=2&alt=json-in-script&callback=gallery'/>
You don't have jQuery included. Add jQuery and it will work. Write this line in starting of your HTML.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
CodePen
You are essentially trying to bind a click event to an element that's not there yet.
For dynamically added elements to the DOM use on and off.
$('span').on('click', function(){
alert('aaaa');
});

Is there a way to use onclick without really onclick event?

I am having this code:
Add
is there any way to make an alert whenever the user will press this button without changing the code or adding onclick event?
You can simple overwrite the attribute with JavaScript:
// Select the targeted element(s), in this case the first <a> element
// Note: You will need to replace this by a code that works
// for your actual markup!
document.getElementsByTagName("a")[0].onclick = function() {
alert("hi");
return false;
}​​​;
Demo: http://jsfiddle.net/WNZAP/
As the OP states that they are not allowed to change the HTML, and that jquery is not available to them.
Not having an 'id' on the link makes life very difficult. So the following code presumes the link is the very first one on the page...
Place this javascript into the <head></head> section of your page...
<script type="text/javascript">
window.onload = function() {
document.getElementsByTagName("a")[0].onclick = function() {
alert("Hello World");
return false;
}
}
</script>
See Live JSFiddle Demo
It's not possible to trigger an action without an event. But if I get your question right you want to trigger an alert without changing the HTML.
The easiest way would be by using a JavaScript library like jQuery. So load the library either by downloading it and placing it in your project or through the Google CDN:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
And then do something like this:
<script type="text/javascript">
$(document).ready(function(){
$(".submitme").click(function(){
alert("hello world");
});
});
</script>

Any ideas as to why this jQuery does not work?

I have an HTML page where a click event is captured and hides #testContent. I put the HTML and Javascript in a jsFiddle here: http://jsfiddle.net/chromedude/VSXY7/1/ . For some reason in the actual page the .click() does not work, but in the jsFiddle works. Does anybody have a clue why this would be?
I have ensured that the jQuery and Javascript file were both correctly attached and show up in the Webkit Inspect and Firebug. I am not getting console errors either. It's quite confusing.
UPDATE:
You can check out the actual page here: http://blankit.co.cc/test/77/
It looks like your javascript is not loaded correctly.
<script type="text/javascript" src="../../includes/jquery.js"></script><script type="text/javascript" src="../../includes/navbar.js"></script><script type="text/javasript" src="../../includes/study.js"></script>
You can put some alert() function inside your javascript file to make sure it is loaded correctly.
Your script tag has a typo in the type change it to text/javascript you are missing a letter.
Change study.js from
$(function(){
console.log('hello');
alert('hello');
/*var testContent = $('#testContent').val();
var contentArray = testContent.split(" ");
$('#studyTestLink').click(function() {
$('#testContent').hide();
alert('hello');
});*/
});
to
$(function(){
$('#studyTestLink').click(function() {
var testContent = $('#testContent').val();
var contentArray = testContent.split(" ");
$('#testContent').hide();
alert('hello');
});
});
I added your code to a page (using jquery 1.5.2) and it works fine. Don't you have any other code that could be breaking it?

hide before load completed -jquery

I have tried this code to hide the body, and show when is loaded in totality. But I noticed that is not working well, because when the fade occurs, some images are not yet loaded.
How I can do this effect?
<script type="text/javascript">
$(document).ready(function(){
$('.nav').fadeIn(700);
});
</script>
<body class="nav" style="display: none">
Surely it's as simple as:
$(window).load(function() {
$('.nav').fadeIn(700);
});
If you want to wait for the images (questionable idea, but it's your site) you can just handle the "load" event instead:
$(document).load(function() { $('.nav').fadeIn(700); });
I say that that's a questionable idea because it may take some time to get the images, and that may be confusing. However, I don't have any clue what your site looks like, of course, so perhaps it's fine.
Oh, also: if you're really just targetting the body element, then you can just use
$('body').fadeIn(700);
Not that it matters at all in this context, but that's going to be more efficient.

Categories

Resources