I have page 1 and page 2, A button in page 1 takes a user to page 2. I want a javascript to wait till page 2 has fully loaded before displaying it when the user clicked the button in page one, In between I need to put loading gif, so that visitor will know that something is loading.
How can I achieve that using pure javascript?
No jQuery please.
EDIT:
The javascript has to be pasted in page one, so that the button would be the trigger, do note that we can't load page 2 in div as some might suggest to load page two in div, then read if page two is fully loaded then display div.
window.onload
might be what you’re looking for
document.addEventListener("DOMContentLoaded", function(event) {
//Your code
});
Related
My website has button A. When I click it a pop up div appears with yes no option. I must click yes. So I write a script so that when I click button A, the yes option is automatically clicked. It goes like this
buttonA.onclick = function(){
document.getElementById('buttonYes').click()
};
I load this into Tampermonkey. When the page loads, the code work for the first time. After that the button goes back to their original behavior. The Javascript somehome only works once when the page is newly loaded. Can someone suggest a way to make the code works all the time in the page and I don't need to reload the page for it to work.
Suppose i have 4 html pages say a.html,b.html,c.html and d.html.
Initially when i run the program i load a.html, when the user scrolls to the top and if it is already the top the alert says "you have reached the top of the page and this is the first page".
Now when i scroll dowm, using the js way of detecting page end, when i reach page bottom i call the next page and load the next page that is b.html.
In this way when it reaches d.html and you scroll down to the end of the page its will alert you that "you have reached the page end and this is the last page".
Same method is used when i scroll up and when it reached the page top, js will call the previous page function and it will load the previous page.
in here i will load the previous page bottom first. this is also working fine(but there is no continuity)
This strategy is working fine. But i need a mechanism to load these html pages continuously so that it will load the webpages in a neat fashion as if i open a pdf doc in a doc viewer.
Like the next and previous page swaps are smooth rather that opening it as a new page(this is very important in the case of previous page calls).
Is there any library in jquery or java script for this functionality?
someone please help. I searched a lot for this functionality
If you want to load HTML documents onto a webpage, you can use jQuery's .load() function.
Syntax:
// $ is the same as jQuery
$(element).load(documentURL);
Here, .load() gets the HTML from the document and puts this HTML into the element specified. To get specific elements in an HTML document, just locate them as you do in CSS. If you wanted to get the header from the document:
$("#result").load("myDocument.html header");
Remember: If you are loading the HTML on the DOM page load, use $(document).ready();. Here's an example:
$(document).ready(function() {
$("#result").load("myDoc.html body main");
});
I am trying to create a loading icon which triggers on a code behind function (Button click) the function redirects to another page. I am trying to find a way of having a loading icon appear on the button click and go away when the second page is loaded.
I have tried using Jquery by hiding the loading icon on page ready using the following function
$('#LoadingIcon').hide()
... in the document ready function.
However the icon doesn't appear until the page is already halfway through its loading process.
Any guidance on how I could solve this would be greatly appreciated.
Please use the following link which may help you to do this. There's a way to do it using a bit of JavaScript.
http://blog.ysatech.com/post/2010/02/06/ASPNET-redirect-a-web-page-with-AJAX-loading-indicator-image
I am using ajax to load content from another internal page into a div because that content takes a long time to generate (about 10+ seconds typically).
I have noticed that I am not able to click on any links on the parent page until the .load page is fully loaded. More precisely, I can click on the link but the browser waits for the content to finish loading first before it brings me to the next page.
How can I allow this?
My code is below:
<script>
$(document).ready(function () {
$('#content').load('http://samesite.com/slow-loading-page.php');
});
</script>
<div id="content"><img src="images/loading.gif"></div>';
I have a mydiv on my site which fades out after 10 seconds but when i refresh the page it 'll comes back again. I would need to know if i can add a code in .js to vanished completely for a visitor if they refresh the site again. I have tried cookie but so far but no success so all i need to know if i can add just a code in my js file to let that work?
here is what i have in .js which make the div disappears after 10 seconds.
setTimeout(function() {
$('#mydiv').fadeOut('fast');
}, 10000);
You can use 'document.referrer' property of page to see if the last page was this page or not. If it was, don't display the div. That's the best I can think of.
'document.referrer' gives you the url of the page which linked to your page.