How to fire onclick event when click the image ?
and one limitation is that I can't modify testcode2.html.
now the href properties only work.
please help me :( !!
<script>
function go()
{
alert("Hello World!");
}
</script>
<div href="#" onClick="go()">
<iframe src="testcode2.html" />
</div>
testcode2.html is as follows:
<a href="http://translate.google.com">
<img src="http://cdn01.cdn.pinkisthenewblog.com/wp-content/uploads/2012/07/071712_findingnemosequelfeat-250x250.jpg"/></a>
This might help you http://jsfiddle.net/fjGJ5/
jQuery
$(document).ready(function(){
$(".frame").on('click', call);
});
function call(){
alert("I am called.");
}
HTML
<div class="frame">
<iframe src="http://www.jsfiddle.net/" name="iframe_a"></iframe>
</div>
Give the div an ID and then fire the onClick event using jQuery.
<script type="text/javascript" src="jquery-1.10.2.min.js">
$( document ).ready(function() {
$("#divIFrame").click(function(){
alert("Hello World");
});
});
</script>
<div href="#" ID="divIFrame">
<iframe src="testcode2.html" />
</div>
Move your script on testcode2.html
<a href="javascript:go()">
<img src="http://cdn01.cdn.pinkisthenewblog.com/wp-content/uploads/2012/07/071712_findingnemosequelfeat-250x250.jpg"/></a>
Then make the redirect by javascript after alert
To call a Javascript function defined in parent use window.parent
<a href="http://translate.google.com" onclick="window.parent.go();">
<img src="http://cdn01.cdn.pinkisthenewblog.com/wp-content/uploads/2012/07/071712_findingnemosequelfeat-250x250.jpg"/>
</a>
You might want to stop the redirect in which case add a return false to your go() function and then use onclick="return window.parent.go();"
<script>
window.onload = function() {
document.getElementById("test_frame").contentWindow.document.body.onclick = function(){
alert("Hello World!");
};
};
</script>
<iframe id="test_frame" src="testcode2.html" />
EDIT: If you cannot use getElementById(), querySelector() or getElementsByTagName() may work.
<script>
window.onload = function() {
document.querySelector("iframe").contentWindow.document.body.onclick = function(){
alert("Hello World!");
};
/* document.getElementsByTagName("iframe")[0].contentWindow.document.body.onclick
= function(){
alert("Hello World!");
}; */
};
</script>
<iframe id="test_frame" src="testcode2.html" />
Related
I have an HTML page with an image that I set to be invisible by CSS visibility: hidden. I want to make a link called "Show image", so that when I click on it, the image appears.
Now, I don't know how to make such a link, since normally a link with <a href=...> links to some other page. In my case, I want the link to invoke a JavaScript to display the image.
If you already have a JavaScript function called showImage defined to show the image, you can link as such:
show image
If you need help defining the function, I would try:
function showImage() {
var img = document.getElementById('myImageId');
img.style.visibility = 'visible';
}
Or, better yet,
function setImageVisible(id, visible) {
var img = document.getElementById(id);
img.style.visibility = (visible ? 'visible' : 'hidden');
}
Then, your links would be:
show image
hide image
It's pretty simple.
HTML:
<img id="theImage" src="yourImage.png">
<a id="showImage">Show image</a>
JavaScript:
document.getElementById("showImage").onclick = function() {
document.getElementById("theImage").style.visibility = "visible";
}
CSS:
#theImage { visibility: hidden; }
This is working code:
<html>
<body bgcolor=cyan>
<img src ="backgr1.JPG" id="my" width="310" height="392" style="position: absolute; top:92px; left:375px; visibility:hidden"/>
<script type="text/javascript">
function tend() {
document.getElementById('my').style.visibility='visible';
}
function tn() {
document.getElementById('my').style.visibility='hidden';
}
</script>
<input type="button" onclick="tend()" value="back">
<input type="button" onclick="tn()" value="close">
</body>
</html>
Here is a working example: http://jsfiddle.net/rVBzt/ (using jQuery)
<img id="tiger" src="https://twimg0-a.akamaihd.net/profile_images/2642324404/46d743534606515238a9a12cfb4b264a.jpeg">
<a id="toggle">click to toggle</a>
img {display: none;}
a {cursor: pointer; color: blue;}
$('#toggle').click(function() {
$('#tiger').toggle();
});
You can do this with jquery just visit http://jquery.com/ to get the link then do something like this
<a id="show_image">Show Image</a>
<img id="my_images" style="display:none" src="http://myimages.com/img.png">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#show_image').on("click", function(){
$('#my_images').show('slow');
});
});
</script>
or if you would like the link to turn the image on and off do this
<a id="show_image">Show Image</a>
<img id="my_images" style="display:none;" src="http://myimages.com/img.png">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#show_image').on("click", function(){
$('#my_images').toggle();
});
});
</script>
HTML
<img id="theImage" src="yourImage.png">
<a id="showImage">Show image</a>
JavaScript:
document.getElementById("showImage").onclick = function() {
document.getElementById("theImage").style.display = "block";
}
CSS:
#theImage { display:none; }
I want to prevent a link from taking the user to another page.
When I try to select elements with getElementById("id"), it works fine. When I try to select by using $("#id"), however, it doesn't work. To clarify, this works:
https://jsfiddle.net/1nwaptL9/
but this doesn't work: https://jsfiddle.net/7vkepm9e/1/
I realise both of these fiddles do actually work, but when I load the HTML files in Chrome, the one with the jQuery selection doesn't work. Since the source code I've included below works fine in JSFiddle, but not in Chrome, I suspect I've done something wrong, but JSFiddle doesn't process links or something like that. Any help would be appreciated!
Source code that doesn't work:
<html>
<body>
<a id="preventlink" href="http://youtube.com"> click here </a>
<script src="js/jquery-1.11.3.min.js"> </script>
</body>
</html>
<script>
var link=$("#preventlink");
link.addEventListener("click", function(e) {
e.preventDefault()}, false)
</script>
jQuery creates a jQuery instance, if you want the actual DOM element, you can do the following:
var link = $("#preventlink")[0];
Or, just keep using jQuery to add events:
$("#preventlink")
.click(function (e) {
e.preventDefault();
});
Getting the element from the jQuery instance:
var link = $("#preventlink")[0];
link.addEventListener("click", function(e) {
e.preventDefault()
}, false);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="preventlink" href="http://youtube.com"> click here </a>
Sticking with just jQuery:
$("#preventlink").click(function(e) {
e.preventDefault()
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="preventlink" href="http://youtube.com"> click here </a>
See jQuery's doc on the subject
This is because addEventListener is a javascript function. It's not defined for jquery. For jquery you can use bind function. Below is the sample code
$(document).ready(function() {
var link=$("#preventlink");
link.bind('click', function(e){
e.preventDefault();})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<html>
<body>
<a id="preventlink" href="http://youtube.com"> click here </a>
</body>
</html>
You are mixing jQuery with vanilla JS:
$("#id") -- jQuery
document.getElementById("id") -- Vanilla JS
Try to use either one of them.
jQuery:
$("#preventlink").on("click", function(e) {
e.preventDefault()
})
Vanilla JS:
var link=document.getElementById("preventlink");
link.addEventListener("click", function(e) {
e.preventDefault()}, false)
Here is a more jQuery way of doing what you are looking for
var $link = $("#preventlink");
$link.on("click", function(e) {
e.preventDefault();
alert("link clicked");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<a id="preventlink" href="http://youtube.com"> click here </a>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
</body>
</html>
Try this:
$("#preventlink").on('click', function (e)
{
e.preventDefault ();
});
html code:
<a id="image1" href="images/1.jpg" class="swipebox" title="My Caption">
<img src="images/1mini.jpg" alt="image" />
</a>
Js code for firing the pugin when user enters with link that ends with '#1'
<script type="text/javascript">
$(document).ready(function(){
if(window.location.hash == "#1") {
$( '#image1' ).swipebox();
}
});
</script>
I figured it out that the js code
$( '#image1' ).swipebox();
works only when I click on the image. But I need that during the page load it would be popuped already.
To open the swipebox on page load; could you please try with following code:
<script type="text/javascript">
$(document).ready(function(){
if(window.location.hash == "#1") {
$( '#image1' ).swipebox();
$( '#image1' ).click();//click the image programmatically
}
});
</script>
I am learning addEventListener,I was testing one of the example but its not working .Can anybody tell me what i am doing wrong
<html>
<head>
<script type="text/javascript">
function click_handler1() { alert("click_handler1"); }
function click_handler2() { alert("click_handler2"); }
document.getElementById("id1").addEventListener("click", click_handler1, false);
document.getElementById("id2").addEventListener("click", click_handler2, false);
//window.addEventListener("load", setup, false);
</script>
</head>
<body>
<a id="id1">some stuff</a>
<a id="id2">stuff</a>
</body>
</html>
Thanks
Your elements are not found because you're executing the javascript before you've added the elements.
Try moving the script to the bottom of the body:
<html>
<head>
</head>
<body>
<a id="id1">some stuff</a>
<a id="id2">stuff</a>
<script type="text/javascript">
function click_handler1() { alert("click_handler1"); }
function click_handler2() { alert("click_handler2"); }
document.getElementById("id1").addEventListener("click", click_handler1, false);
document.getElementById("id2").addEventListener("click", click_handler2, false);
//window.addEventListener("load", setup, false);
</script>
</body>
</html>
Move this to the end of the document, or wrap it with an onload function:
window.addEventListener('load',function(){
document.getElementById("id1").addEventListener("click", click_handler1, false);
document.getElementById("id2").addEventListener("click", click_handler2, false);
});
Your code doesn't work because the DOM is not ready yet and you are already trying to fetch id1 and id2.
Your code throws below error in console:
Uncaught TypeError: Cannot call method 'addEventListener' of null
which specifies you need to first define your html element (anchor in this case) and then call methods on it.
What you are doing is - first calling method (addEventListener in this case) and defining the html element (anchor in this case) later on.
<html>
<head></head>
<body>
<a id="id1">some crap</a><br>
<a id="id2">crap</a>
<script type="text/javascript">
function click_handler1() { alert("click_handler1"); }
function click_handler2() { alert("click_handler2"); }
document.getElementById("id1").addEventListener("click", click_handler1);
document.getElementById("id2").addEventListener("click", click_handler2);
</script>
</body>
</html>
I have an HTML page with an image that I set to be invisible by CSS visibility: hidden. I want to make a link called "Show image", so that when I click on it, the image appears.
Now, I don't know how to make such a link, since normally a link with <a href=...> links to some other page. In my case, I want the link to invoke a JavaScript to display the image.
If you already have a JavaScript function called showImage defined to show the image, you can link as such:
show image
If you need help defining the function, I would try:
function showImage() {
var img = document.getElementById('myImageId');
img.style.visibility = 'visible';
}
Or, better yet,
function setImageVisible(id, visible) {
var img = document.getElementById(id);
img.style.visibility = (visible ? 'visible' : 'hidden');
}
Then, your links would be:
show image
hide image
It's pretty simple.
HTML:
<img id="theImage" src="yourImage.png">
<a id="showImage">Show image</a>
JavaScript:
document.getElementById("showImage").onclick = function() {
document.getElementById("theImage").style.visibility = "visible";
}
CSS:
#theImage { visibility: hidden; }
This is working code:
<html>
<body bgcolor=cyan>
<img src ="backgr1.JPG" id="my" width="310" height="392" style="position: absolute; top:92px; left:375px; visibility:hidden"/>
<script type="text/javascript">
function tend() {
document.getElementById('my').style.visibility='visible';
}
function tn() {
document.getElementById('my').style.visibility='hidden';
}
</script>
<input type="button" onclick="tend()" value="back">
<input type="button" onclick="tn()" value="close">
</body>
</html>
Here is a working example: http://jsfiddle.net/rVBzt/ (using jQuery)
<img id="tiger" src="https://twimg0-a.akamaihd.net/profile_images/2642324404/46d743534606515238a9a12cfb4b264a.jpeg">
<a id="toggle">click to toggle</a>
img {display: none;}
a {cursor: pointer; color: blue;}
$('#toggle').click(function() {
$('#tiger').toggle();
});
You can do this with jquery just visit http://jquery.com/ to get the link then do something like this
<a id="show_image">Show Image</a>
<img id="my_images" style="display:none" src="http://myimages.com/img.png">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#show_image').on("click", function(){
$('#my_images').show('slow');
});
});
</script>
or if you would like the link to turn the image on and off do this
<a id="show_image">Show Image</a>
<img id="my_images" style="display:none;" src="http://myimages.com/img.png">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#show_image').on("click", function(){
$('#my_images').toggle();
});
});
</script>
HTML
<img id="theImage" src="yourImage.png">
<a id="showImage">Show image</a>
JavaScript:
document.getElementById("showImage").onclick = function() {
document.getElementById("theImage").style.display = "block";
}
CSS:
#theImage { display:none; }