Change <href> to <script> javascript? - javascript

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>

Related

onClick inside an in div loaded page

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/

Display whatever content this page have to another page using Ajax/Jquery

Whats wrong with this code?
Index.cshtml -- has
$(document).ready(function() {
$("#main").load('CallScreen.cshtml #content');
});
<div id="main">
Content Will be here.
</div>
CallScreen.cshtml -- has
<div id="content">
</div>
What I would like to do here is display my content on <div id=main"> and then display it inside <div id="content"> from another page CallScreen.cshtml. Am I missing something here?
For one - I assume you know this but the javascript needs to go into a
<script>
$(document).ready(function() {
$("#main").load('CallScreen.cshtml #content');
});
</script>
tag
Also - make sure you remove the extra space so that 'CallScreen.cshtml #content' is 'CallScreen.cshtml#content'
Your code will inject #content into #main.

Link positioning inside of div;

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>

JavaScript runs only once after page loading

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() {

Following anchor on another page and triggering href

So I want to click on a link of a page which redirects to another one that has 3 different div's which trigger scripts on their href. I am not being able to do this. I tried using anchors but it does not trigger the href...
1st page
<a href="second_page.html#anchor">
2nd page
<div>
<a id="header" href="javascript:showonly('header');" name="anchor">
</div>
You need an onload handler in the head section of your second page which catches the hash and runs your action(s). Something like this should work:
<script type="text/javascript">
window.onload = function(){
if( window.location.hash == '#anchor' ) showonly('header');
}
</script>
You dont need the <a id="header" href="javascript:showonly('header');" name="anchor"> in your markup for this to work

Categories