I load a page inside a div. This div supposed to trigger a function on a mouse click. I would like that this onClick event also works when you click on the loaded page.
If you load a page inside the div, the functions of the loaded page only works for that page.
How can I make it happen that also the onClick function get triggered for the loaded page?
This is a simple example of the code:
function load() {
var url_view = '<object type="text/html" data="http://www.example.com/"></object>';
document.getElementById("image").innerHTML=url_view;
}
window.onload = load;
function showbox() {
alert("test");
}
<div id ="frame" onclick="showbox()">
<div id="image">
</div>
<div class="infotext">
<span>here comes some text.</span>
</div>
</div>
To be clear
What I want to achieve is that when you load the page, you'll load data from example.com in a div with the id "image". This event happens with the function 'load()', on window.load.
When that is ready, I would like that you trigger the 'showbox()' function on a mouseclick when you click inside the div with the id "image" (the div where example.com is loaded into).
You can try something like this:
<div id ="frame">
<div id="image">
</div>
<div class="infotext">
<span>here comes some text.</span>
</div>
</div>
JS:
function showbox() {
alert("show box");
}
$(document).ready(function() {
$.get('https://jsfiddle.net/about', function(data) {
$('#image').html(data);
showbox();
});
$('#image').click(function() {
showbox();
});
});
Run it on jsfiddle due to CORS: https://jsfiddle.net/usn9qam7/1/
Related
Okay below I have posted the script I'm using and the #targetDiv, Basically my problem is when I move the link that is currently contained within the #targetDiv outside of the div, The link no longer loads the page inside of the div, Is there a way I can move the link outside of the #targetDiv and still have it load the page contents inside of the div.
Script
$(function(){
$('#targetDiv').on('click', 'a', function(e){
e.preventDefault();// prevent browser from opening url
$('#targetDiv').load(this.href);
});
});
Div
<div id="targetDiv" class="collapse">
Load
</div>
The problem I have is that I want the load link to be outside of the target div however when I move it outside of the div it loads the main page not the content within the targetDiv.
What I'm trying to achieve;
Load
<div id="targetDiv" class="collapse">
</div>
Add a class to any links you want to use to load content
<a class="content-link" href="/page.php">Load</a>
And modify event listener accordingly so it handles both types of links
$(document).on('click', '.content-link, #targetDiv a',function(e){
e.preventDefault();// prevent browser from opening url
$('#targetDiv').load(this.href);
});
Try this:
$(function(){
$('#divLoad').click(function(e){
e.preventDefault();// prevent browser from opening url
$('#targetDiv').load(this.href);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="divLoad" href="/page.php">Load</a>
<div id="targetDiv" class="collapse">
</div>
You can also do this (more difficult to be precise):
$(function(){
var divLoad = $('#targetDiv').prev('a');
//alert(divLoad.attr('href') );
divLoad.click(function(e){
e.preventDefault();// prevent browser from opening url
$('#targetDiv').load(this.href);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a id="divLoad" href="/page.php">Load</a>
<div id="targetDiv" class="collapse">
</div>
This script is triggered only once when the page loads.
The page has loaded, click the link, the data came from.
Click the link again, nothing.
Overload the page, the link works, etc.
What is wrong in the script, why it triggered only once?
<script>
$(function() {
$('a').click(function() {
$.get('ajax', function(data) {
$('#mydiv').html(data);
});
});
});
</script>
<div id="mydiv">
Update the div!
</div>
Compared the data in the "mydiv" before and after clicking the link:
before clicking the link
<div id="mydiv">
<a href="#">
Update the div!
</a>
</div>
after link was cliked
<div id="mydiv">
<a href="#">
Update the div!
<!--Here is the data that came from.-->
</a>
</div>
Because you're overwriting the a tag that you attached the click event to, you'd need to rerun the code that attaches the click event again. Or you could use event delegation like blex suggests:
$(document).on("click", "a", function(){
}
Because of dynamically created a you should use:
$(document).on("click", "a", function() {
I would like to show the contents of a div when I navigate to it via a URL. Currently the Div contents are revealed onclick.
How would I get the Div contents to be revealed when using a URL with anchor to navigate to the main title in the ?
Here's javascript
<script type="text/javascript" src="jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
//Set default open/close settings
$('.acc_container').hide(); //Hide/close all containers
//$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container
//On Click
$('.acc_trigger').click(function(){
if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
$('.acc_trigger').removeClass('active').next().slideUp(); //Remove all .acc_trigger classes and slide up the immediate next container
$(this).toggleClass('active').next().slideDown(); //Add .acc_trigger class to clicked trigger and slide down the immediate next container
}
return false; //Prevent the browser jump to the link anchor
});
});
</script>
here's my html
<h2 class="acc_trigger">Some Title Goes Here</h2>
<div class="acc_container">
<div class="block">
<h3>Strap Line Goes here</h3>
Text content goes here
</div>
</div>
<h2 class="acc_trigger">Another title Goes Here</h2>
<div class="acc_container">
<div class="block">
<h3>Another Strap Line Goes here</h3>
Some more text content goes here
</div>
</div>
If you're using a hash (e.g. url.com/page.html#otherStuff) then read the location.hash
http://www.w3schools.com/jsref/prop_loc_hash.asp
If you're using a query (e.g. url.com/page.html?otherStuff) use the location.search
http://www.w3schools.com/jsref/prop_loc_search.asp
Put the code below the DIV that you want to show, so the element has been created. Then just do a simple if(hash == "#otherStuff"){ /* Do stuff */ } Where in "Do stuff" you would just run the open function.
listen to the hashchange event which is triggered on the window object. then you can show the div or do what you want with it.
Something along the lines of this;
About
<div id="mydiv_about" style="display:none">
</div>
Media
<div id="mydiv_media" style="display:none">
</div>
and some javascript
window.addEventListener("hashchange", function(){
document.getElementById("mydiv_"+document.location.hash.substr(1)).style.display="block";
},false);
//edit
updated to reflect a working example
Hey guys i am new to HTML and Jquery. Now i am able to replace a container div from my navigation menu using load function but the script does not work if it is called from the container i want to change itself. For example i am running this script
$("#pagehome").click(function(){
$("#container").load("home.html #wraper", function ()
when i call this from another div section(navigation menu) it works just fine and the div
section of container gets replaced with #wraper div of another page
<div id=navigationmenu>
<a id="pagehome" href="#"><;img src"..."/></a>
</div>
</pre>
but when i try to call the script from container div it does not get executed
<div id=container>
<a id="pagehome" href="#"><img src"..."/>
</div>
Try this.
$(document).on('click', '#pagehome', function(){
...
return false;
});
How do you make this href thing into a script so that it is executed immediately when you enter the webpage?
Click Here
<div id="underlay">
</div>
<div id="lightbox">
Close
</div>
Place a <script> tag at the end of the body.
You can also place it in the head, although it has to wait until the page loads:
<script>
window.addEventListener('load', function () {
document.getElementById('underlay').style.display='block';
document.getElementById('lightbox').style.display='block';
}, false);
</script>