How to make a div onload function? - javascript

I want to load an HTML page as a div inside my webpage by removing its HTML and body tags. But the HTML page has a <body onload=" ... " > , I need this function to continue working. Seems <div onload=" ... " > is not working. How can I insert this onload function into my website's body (on this page only) without directly editing my original website code (php)?

Have you used jQuery before? If so, just get the id of your div (let's say "SomeDiv") and then use the "ready" method like this:
$("#SomeDiv").ready(
function(){
//do stuff
});

you can use jQuery.load to load the contents of the page into your div
$(document).ready(function() {
$("#containing-div").load("[url of page with onload function]");
});
the code above goes in the page that contains the div. the page with the onload function doesn't get changed.

You can add an additional Javascript tag at the end of the loaded page (once inserted inside the div) which will executing as soon as it's loaded. Like this:
<div>
Insert the inner html content of that pages here and add this script at the bottom and add the onload function of the original html to this script.
<script type="javascript">
alert("hello world");
</script>
</div>
Just remember to have the javascript available to your page. What I mean is that if the javascript function called which is called inside onload="..." is defined in the <head> of the loading html document and you're throwing the <head> out then this won't work.

Not the best but one way is to check the div periodically if it's loaded:
var myInterval = setInterval(function () {
if ($('.mydiv') && $('.mydiv').width() > 0) {
// write your logic here
clearInterval(myInterval);
}
}, 3000);

If you want to add the onload event on a div, you cannot, but you can add onkeydown and trigger the onkeydown event on document load.
<div onkeydown="setCss();"></div>
$(function () {
$(".ccsdvCotentPS").trigger("onkeydown");
});

Related

Alternative to hide/show content with JS?

is there a better way to replace this kind of js function by simply collapse/toggle a div and show/hide its content?
$(function() {
$('#destselect').change(function(){
$('.dest').hide();
$('#' + $(this).val()).show();
});
});
The reason this is happening is because your js file is called on the head of your page.
Because of this, when you document.getElementsByClassName('collapsible');, colls result in an empty array, as your elements in body are not yet created.
You could either create a separate js file and add it at the end of your body (in that way you make sure your colls are created when your javascript is executed), or just wrap your code on a DOMContentLoaded event listener that will trigger your code once the document has completely loaded.
My guess would be that you are loading your script before browser finishes loading dom conetent and so when it runs the elements it is trying to add event listeners to, don't yet exist.
Try wrapping all you javascript in that file in this:
document.addEventListener("DOMContentLoaded", function(event) {
// all your code goes here
});
The above makes sure that your script is run after loading all elements on the page.
You could add a script tag to the header of your HTML file, this will import the JS file into your current page as follows
<script src="File1.js" type="text/javascript"></script>
Then call the function either in onclick in a button or in another script (usually at the bottom) of your page. Something like this:
<body>
...
<script type="text/javascript">
functionFromFile1()
</script>
</body>
Seems like your script is not executing properly due to a missing variable.
In this script https://www.argentina-fly.com/js/scripts.js
Naves variable in function UpdateDetailsDestination() is not defined.
I think you should resolve this first and then check your further code is working on not.
Please take a look into Console when running page. You'll see all JavaScript related errors there.

How to display a span tag after page load

I'm trying to display a span tag only after the page has fully loaded, the span content is generated via a different scrpt and I want to prevent the flicker it show while loading, so I tried the following code to show the tag only once page has fully loaded and content correctly generated by that other script:
<span id="ETOButton" style="display:none;" onload="LoadETOButton()">hello</span>
<script>
function LoadETOButton(){
document.getElementById("ETOButton").style.display="inline block";
}
</script>
what am I doing wrong?
edit: the span correctly show after page load, but this created a different issue, now the span is placed outside the div that should contain it, probably wrapper (Wrodpress) is being checked against its content to dedermine the width.
What you're currently doing is waiting for the span to finish loading before the function is called.
What you need to do instead is add an event listener onto your window, which will be called when the page is done loading.
Also you had a typo with "inline block", it should be "inline-block".
function LoadETOButton() {
document.getElementById("ETOButton").style.display = "block";
}
window.addEventListener("load", LoadETOButton);
<span id="ETOButton" style="display:none;">hello</span>
Use this code do your work:-
function LoadETOButton() {
document.getElementById("ETOButton").style.display = "block";
}
window.addEventListener("load", LoadETOButton);
<span id="ETOButton" style="display:none;">hello</span>
it is inline-block not inline block
You need to call the function LoadETOButton in order to do the CSS changes.
<span id="ETOButton" style="display:none;" onload="LoadETOButton()">hello</span>
<script>
function LoadETOButton(){
document.getElementById("ETOButton").style.display="inline-block";
}
LoadETOButton();
</script>
for this you can use native js:
<script>
window.onload = function(){
document.getElementById("ETOButton").style.display="block";
}
</script>
or jquery:
<script>
$(document).ready( ()=> {
function LoadETOButton(){
document.getElementById("ETOButton").style.display="inline block";
}
LoadETOButton();
});
</script>
Use document ready function, if you are using JQuery library
$(document).ready(function(){
$("#ETOButton").show();
});
or
$(document).ready(function(){
$('#ETOButton').css('display', 'block');
});
If you want the solution in pure javascript then add load event listener
function YourMethodName() {
document.getElementById("ETOButton").style.display = "block";
}
window.addEventListener("load", YourMethodName)

Trigger onload, inline javascript event

I've a pop-up that can be called trough a link. The problem is that i need to call it onload, an I can't find a way to do this.
This is the code of the pop-up
<a href="https://sloways.leadpages.co/leadbox/14169a873f72a2%3A14f192411746dc/5636318331666432/"
target="_blank">Click Here to Subscribe</a>
<script data-leadbox="14169a873f72a2:14f192411746dc"
data-url="https://sloways.leadpages.co/leadbox/14169a873f72a2%3A14f192411746dc/5636318331666432/"
data-config="%7B%7D" type="text/javascript"
src="https://sloways.leadpages.co/leadbox-1483020619.js">
</script>
I've tried to trigger the "Click Here to Subcribe" in different ways, like the following, without success:
Jquery how to trigger click event on href element
jQuery(document).ready(function(){
jQuery("#add_redirect").trigger('click');
});
Window.location.href (this open the link but in another page, not as a pop-up)
UPDATE N.1
I've bypassed the problem loading the pop-up URL through the <object> tag.
I've put the <object> inside a Bootstrap modal so it still works like some kind of pop-up.
<html>
<head>
<script data-leadbox="14169a873f72a2:14f192411746dc"
data-url="https://sloways.leadpages.co/leadbox/14169a873f72a2%3A14f192411746dc/5636318331666432/"
data-config="%7B%7D" type="text/javascript"
src="https://sloways.leadpages.co/leadbox-1483020619.js"></script>
<script>
var displayPopup = function(){
var element = document.getElementById('popUp');
element.click();
}
</script>
</head>
<body onload="displayPopup();">
<a href="https://sloways.leadpages.co/leadbox/14169a873f72a2%3A14f192411746dc/5636318331666432/" id="popUp"
target="_blank">Click Here to Subscribe</a>
</body>
</html>
I am using plan JS. When body JS object is completely formed or in other words when body's content is completely loaded then onLoad event is fired . I wired a displayPopup function to this event.
In displayPopup function i retrieve the anchor tag and manually click it .
Use this following code
jQuery=jQuery.noConflict();
jQuery(document).ready(function(e){
e.preventDefault();
jQuery("#add_redirect").click();
});
The solution by #Prashanth Reddy should work if you have jQuery loaded on your page.
For a simple implementation using plain javascript, you'll need to change the target attribute on your tag to '_self' from '_blank'. This will open the popup in your existing page instead of a new page.
then add the following at the end of the body section of your html:
<script>
(function() {
document.getElementById('add_redirect').click();
})();
</script>
see here for a working example: jsfiddle
If you want to avoid inline script tags, you'll need to add an event listener to your javascript code. Here is a good starting point for how to do that:
plain js equivalent to jquery $.ready

JavaScript in the head tag

I have a html file which looks like this.
<head>
<script>
document.onready
{
document.getElementById("demo").innerHTML="Works";
}
</script>
</head>
<body>
<div id="demo">
</div>
</body>
When I put the script tags at the bottom of the page, everything works fine. But when I put the script in <head></head tag, it does not work. I guess it is not able to access elements that are below the script.
On many sites like StackOverflow, JavaScript is in head tag. How is it then able to access HTML elements that are below it?
What should I do now? Should I just move my script to the bottom or is there a way by which JavaScript can access elements below it?
Try using something like this:
window.addEventListener('load', function() { document.getElementById("demo").innerHTML="Works"; }, false);
Where did you get document.onready from? That would never work.
To ensure the page is loaded, you could use window.onload;
window.onload = function () {
document.getElementById("demo").innerHTML="Works";
}
Your syntax is incorrect.
document.ready= function () {
//code to run when page loaded
}
window.onload = function () {
//code to run when page AND images loaded
}

Execute JavaScript code at the end when the HTML has been loaded

I want to execute a function at the end when the HTML has been loaded. I tried it with onload without success. I also tried it with ready, but it still doesn’t work. Here is my code. This is again placed in the header:
<script type="text/javascript">
$(document).ready(function() {
$('#infowindow_content').html('test');
});
</script>
The div is also set by an external JavaScript file. Content:
window.onload = initialize;
function initialize() {
document.getElementById('infowindow_content').innerHTML = 'testa';
}
It is included the following way before the closing body tag:
<script type="text/javascript" src="../lib/functions.js"></script>
I tried to place the above code before the closing body tag, but currently I have no idea why this doesn't work (the content isn't changed by my JavaScript code). If I execute it on the console afterwards everything works fine.
Solution:
I set a configuration parameter (language) in the HTML file. In the JavaScript file I ask for this value and depending on the value I define another content. Sometimes it could be so simple ...
Try this:
setTimeout(function() {
$(document).ready(function() {
$('#infowindow_content').html('test');
});
}, 20);
I don't know the jQuery equivalent but try the native JS.
Since the <body> has the most HTML & loads after <head>...
document.body.onload=function(){
yourFunction(args)
}
<body onload="yourFunction(args)">...</body>
Or maybe the window object, since it's the root of every webpage DOM...
window.onload=function(){
yourFunction(args)
}
Always place DOM manipulating code directly before your </body> tag. JavaScript in the header should only be called to libraries, such as jQuery.

Categories

Resources