I trying to do the following:
I want to redirect to another page using javascript, but I want the page (that we redirect to) to fade in instead of being redirect to aggressively. How can Iget that done using jquery?
I tried the following:
$('.splash').hide();
$('.splash').fadeIn(2000,
function() {
setTimeout(
function() {
document.location.href = 'test.html';
},100)
<div class = "splash"></div>
Well you could $('html').fadeOut(); the current page you are on, then do your redirect. But that second page would have to have it's own $('html').fadeIn();
There is no way to push a jQuery execution onto a totally separate page unfortunately :/
You could try loading the page with $.load() AJAX style also.
Related
I can't figure out how this is done:
I want to link to an internal page with an addEventlistener function. When the linked page loads I want to open a div that is hidden. So something along the line of:
button.addEventListener("click", () => {
const hiddenDiv = document.getElementById("hidden-div")
window.open("/newPage.html" + hiddenDiv.click())
});
I know the code above won't work, but I don't know how it could work, since window.open() ends the execution of the code.
Is there a way to store the function after the page refreshes (without localstorage)? Is there a way to handle it via the url? Or should be done with localstorage?
I'd like to be able to call a jquery function once window.location has completed loading a URL. Is this possible? I can't seem to find anything online about this.
for instance:
if(parseInt(msg.status)==1) {
window.location=msg.txt;
alert("This URL has finished loading")
}
Thanks,
-Paul
You can either use window.onload of the destination page (if you have access to modify the code of that page), or you can use window.onunload to have the alert be launched when unloading the current page. You cannot execute code on the current page after the new page has been loaded.
Yes.
This page demonstrates onload/onunload behavior.
<html>
<head>
<script>
window.doUnload = function(){
alert("Here!");
}
window.doLoad = function(){
window.location="http://www.google.com";
}
</script>
</head>
<body onload="doLoad();" onunload="doUnload();"></body>
</html>
After a user logs in for the first time I need to load my index page to initialize everything but then need to forward them to another page for profile completion.
use window.location to redirect the user to your index, adding a query parameter (something like window.location=index.php?firstLogin=true ) and on your index redirect (using javascipt http 300, header() or whatever you are using) to the profile page after it ends loading if the parameter is set
Iframe
One (ugly) method you could use is to instead of using window.location, clearing the body, adding an iframe with the relevant path and listening to its onload function.
After that you can run code inside the iframe as long as it's not cross-site scripting.
I use this method to perform small automated scripts, that can't really on third-party plugins.
Ajax
Another method might be using ajax to load the page/body content. Then replacing your body with the newly loaded body and start executing the next functions.
I want to change between two pages in html with javascript, but when I change with window.location, the code that is after this sentence continues executing.
So when I do, for example, a call to getElementById() it doesn't recognize the element because the page is still loading.
function myFun(){
// ...
window.location = 'page.html';
// ... wait until page.html is loaded
}
How can I wait until the page is loaded to avoid this problem?
When you do
window.location = 'page.html';
you replace the page in the browser, the one containing the code of myFun, by a new page. There is no way for the code following this instruction to be executed.
If you want to execute it, and only after that change page (but I don't see the point), then you might do
document.onload = function(){ window.location = 'page.html'; };
You can use jQuery document.ready or you can create custom bind like this one. In case you use jQuery.
$(document).ready(function() {
window.location = 'page.html';
});
You can't execute code in your own page after doing window.location = 'page.html';. Your page will be replaced by the new page and the code in the current page will no longer be there.
The only ways to execute some code after page.html is loaded into the current window are as follows:
Load it in an iframe or another window and monitor for when the iframe or window has finished loading. In this way, your current code stays around and is not replaced.
Have some code in page.html that monitors when it finishes loading and trigger your desired action from there.
Okay, i have a simple button on my page (MyPage) which fades out the current div (fade 1) and fade in another one (fade 2). I have now realised that there might be chances that i would want to go to that page (fade 2) from somewhere else directly. I am able to redirect my page by window.location. However i also want that if that link was pressed (from some other random page), go to page (fade 1) and then fadeOutthe current div and fadeIn another one (fade 2).
Hope this isn't too confusing. This is the code i am using to get to the page (MyPage):
$('#fav').click(function(){
window.location = 'production/produc_order.php';
$('#view_production').fadeOut('slow');
$('#create_order').fadeIn('slow');
})
If you don't want to or can't re-code your page to support AJAX, the other old-school option is to pass a parameter in the URL as a hint to the refreshed page. (You can hide it by making the redirect a POST if you feel it's really necessary, or use a cookie technique. The point is that the refreshed page needs a token of some form from the prior page.)
eg:
$('#fav').click(function(){
window.location = 'production/produc_order.php?create=1';
})
and put the fade code inside the $(document).ready() function, with a check for the create parameter, cookie or whatever.
I'll agree with #remibreton though, using AJAX is the more hip, modern method.
Changing the window.location will kill all scripts currently running in the browser.
Your only other solution is getting a page via AJAX and run a callback function to execute when the content is loaded. Here is something to get you started.
Also, jQuery as a nice .ajax() method to easily perform AJAX requests and associate callbacks to successful and failed requests.
you can do it with sessionStorage()
$('#fav').click(function(){
sessionStorage.setItem("reloading", "true");
window.location = 'production/produc_order.php';
});
var reloading = sessionStorage.getItem("reloading");
if(reloading == true) {
sessionStorage.removeItem("reloading");
$('#view_production').fadeOut('slow');
$('#create_order').fadeIn('slow');
}
I need to detect the first time a page loads in jQuery so that I can perform some actions only when the page loads the first time a user navigates to that page. Similar to server side code page.ispostbasck. I have tested $(document).ready and it fires every time the page loads so this will not provide what I need. I have also tried the jQuery Load function - it also fires every page load. So by page load an example is that I have an HTML input tag on the page of type button and it does not fire a postback (like an asp.net button) but it does reload the page and fires $(document).ready
Thanks
You will have to use cookie to store first load information:
if (! $.cookie("cookieName")){
// do your stuff
// set cookie now
$.cookie("cookieName", "firstSet", {"expires" : 7})
}
Note: Above example uses jQuery Cookie plugin.
An event doesn't exist that fires only when the page is loaded for the first time.
You should use jQuery's .ready() event, and then persist the fact that you've handled a first time page load using your method of choice (i.e. cookie, session variable, local storage, etc.).
Note: This method will never be fool proof unless you can store this information at the user level in a DB. Otherwise, as soon as the user clears their cookies, or whatever method you choose, the "first time loaded" code will fire again.
I just ran into this problem and this is how I handled it. Keep track of the first time the page loads by using a variable initialLoad:
var initialLoad = true;
$(document).ready(function() {
...
...
...
initialLoad = false;
});
Then in other functions, you can do this:
if (initialLoad) {
//Do work that is done when the page was first refreshed/loaded.
} else {
//Do work when it's not the initial load.
}
This works well for me. If the user is already on the page and some jQuery functions run, I now know if that user just loaded the page or if they were already on the page.
The easy solution is to use jQuery ‘Once’ plugin
$(element).once('class-name', function() {
// your javascript code
});