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.
Related
I am using this setTimeout("document.location.reload();", 10000); to refresh the page every 10 seconds. And after reloading fully, it gets back to the original location. But for like 0.1 second, the top of the page is shown. You can see this in the video:
https://drive.google.com/file/d/1LKDyqhFnKRapUY_fEugIS5Te-2tawlmk/view?usp=sharing
As i see it, your images didn't load yet that is why it looks like it jumps up and than down. That is why your top row is visible at the very beginning. Scroll seems to stay at the bottom. Scroll isn't the problem here (as i see it).
I don't know how images are shown (are you using any data in the background to generate output). But solution to prevent top row to be seen would be in CSS. Presetting width and height of 'img' tag.
If you can see i posted two images of the issue.
There can be few ways to fix it. One way I can think of is using 'window.onload'.
I guess you could show page when HTML is fully loaded with all images to stop 'jumping' after each load. It could help.
Maybe this post will help: window.onload vs document.onload
Let me know if this was helpful for you finding solution for a problem.
Detect event refresh in javascript, save the value of x-scroll in a cookie, if cookie exist when reload, put the value of x-scroll to this value
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
});
I have a page with several hidden divs and buttons with click events, on which divs becomes visible.
The problem is when I reload the page, all divs are hidden again.
Actually when I click some of the buttons, some of the divs becomes visible, but when I reload the page all divs are invisible again.
Can I make divs which were visible before the page reload to be visible after the reload?
Example http://jsfiddle.net/DxKCj/1/.
Of course they will be invisible again. That is how HTML/JavaScript is supposed to behave. When you reload the page, the browser throws away the current state and "compiles" the page all over again. It is like running running a simple C program, exiting it, and running it again. If you want to save the state of the Divs, you will have to save it somewhere. You can either save it using HTML5 local storage, or in the cookies. You can do both of these through JavaScript.
Yes. Don't bother using a session - just set a cookie. Google "javascript setcookie" and you'll find everything you need - store which divs are visible in the cookie, and then check the cookies value when the page loads.
`
Check out the following answer:
create session with jquery?
You can make an ajax call to a PHP page which will create a session. You can then do a simple IF when the page loads to see if the session is set to 1 or 0. If it's 1, display the div, if not, remove it.
Simply make the AJAX call when the user clicks the button. If you need more specific code, let me know
I have a search form that, once submitted loads the results of the search query on a new page. When you press submit, however, it takes about 10 seconds or so before the next page is rendered, so I'm showing a loading box (via ExtJS) while the user waits for the next page to load.
The problem is in IE9, the border, which uses background images, isn't showing up on the loading box.
I've done some digging around, and I've concluded that for some reason IE9 will not load any of the images specified in the CSS after the form has been submitted (and the next page has begun to load).
If I use the following code to set a timeout of 200 milliseconds before the form is submitted, everything loads fine.
function() {
Ext.MessageBox.wait('Searching for tenants eligible for rent increase...', 'Searching');
setTimeout(function() { document.getElementById('rental_increase_form').submit(); }, 200);
return false;
}
So here's my questions:
Can anyone else confirm that IE9 does not load CSS images on the current page after the next page request has begun? Is this a bug or intended functionality? Can anyone suggest a solution that doesn't involve setting a timeout before submitting a form? That solution seems a little hackish.
Don't have IE here to confirm, but can you just pre-load these images on start of the first page? E.g. make a set of hidden elements that have these background images set in their CSS. That way, you'll have the images loaded and when you show the loading box. Don't know if that is the only issue, though, but you can try to see if it works.
Here's what I need to do. I'm using Google Chrome. I have page that auto-reloads every 5 seconds using a script:
javascript: timeout=prompt("Set timeout [s]");
current=location.href;
if(timeout>0)
setTimeout('reload()',1000*timeout);
else
location.replace(current);
function reload()
{
setTimeout('reload()',1000*timeout);
fr4me='<frameset cols=\'*\'>\n<frame src=\''+current+'\'/>'; fr4me+='</frameset>';
with(document){write(fr4me);void(close())};
}
I found that script by Googling.
The reason why the page auto-reloads every 5 seconds is I'm waiting for a specific link or url to appear in the page. It appears at random times. Once I see the link I'm waiting for, I immediately click the link. That's fine.
But I want more. What I want is the page will auto-reload and I want it to auto-detect the the link I'm waiting for. Once the script finds the link I'm waiting for, it automatically loads that link on a new tab or page.
For example, I'm auto-reloading www.example.com. I'm waiting for a specific url "BUY NOW". When the page auto-reloads, it checks if there's a url "BUY NOW". If it sees one, it should automatically open that link.
Thanks.
For inspiration, check out what I have done it in my Chrome Extension "Auto-Reload". The code is here.
You should create yourself an extension (from what I understand of your question, that's what you are implying). Once the page reloads, you can use jQuery (for example) to scrap the page for your link.