Reload the page just once if a div is above certain position

Question

I want to reload the page only once if a given div is positioned higher than position:absolute; top:15%.

I think this could be done with jQuery's .css method, something like:

if ('#mydive').css('top') > '15%' {
    //reload the page
}

Could someone suggest a simple solution, preferably jQuery or pure JavaScript?

top position of your div is > than 15% of what? another container or whole document? — tradyblix, Jun 02 '11 at 05:11
What I mean is this: position:absolute; top:15%; – that is, the 15% of the current size of the browser window. — Dimitri Vorontzov, Jun 02 '11 at 05:17

tradyblix · Accepted Answer · 2011-06-02T05:35:24.563

2

If what you meant is the top of the document, you can probably try:

var percent = .15; // 15%
if ($('#yourdiv').offset().top > ($(document).height() * percent)) {
    window.location.reload();
}

// if by pixels
var pixels = 10; // 10px
if ($('#yourdiv').offset().top > pixels) {
    window.location.reload();
}

edited Jun 02 '11 at 05:35

answered Jun 02 '11 at 05:18

tradyblix

7,439
3
25
29

This looks like exactly what I want. But how do I do the actual reload? Could you please write the whole thing? – Dimitri Vorontzov Jun 02 '11 at 05:23
@Dimitri Vorontzov, I added `window.location.reload` to reload the page once it hits that mark – tradyblix Jun 02 '11 at 05:25
For some reason it keeps reloading and reloading, even though the actual position is below 15%. Could you please write a separate snippet that would do the same thing, but based on the pixel position of the div? For example, of the div is higher than 10px from the top? I would be very grateful. – Dimitri Vorontzov Jun 02 '11 at 05:27
@Dimitri Vorontzov, see my updated code. I changed `position().top` to `offset().top` so it checks relatively to the parent's top and not to it's offset parent (some container that contains the div). I also added another sample by pixel. – tradyblix Jun 02 '11 at 05:36
Thank you tradybix! But why does the page keep reloading? – Dimitri Vorontzov Jun 02 '11 at 05:40
@Dimitri Vorontzov, it will keep reloading if it keeps seeing your div in the `> value` that you specified, you can probably set a query string in your page to avoid that e.g. `yourpage.html?reloaded`, where if `reloaded` is set, you don't execute the code to reload. e.g. `if (document.location.search.indexOf('reloaded') == -1) { // that code above }` ..you might want to replace `window.location.reload()` to `window.location.href = 'yourpage.html?reloaded';` – tradyblix Jun 02 '11 at 05:45
OK tradyblix, I used the new version of your percentage code above, and now it stopped reloading. In fact, it does not reload at all. mydiv is about 200% above the upper edge of the browser window, so the page should be reloading, but it doesn't. Your help would be greatly appreciated. – Dimitri Vorontzov Jun 02 '11 at 05:49
So the code should be `if ($('#mydiv').offset().top > ($(window).height())) { window.location.reload(); }`? – Dimitri Vorontzov Jun 02 '11 at 06:00
@Dimitri Vorontzov, question..is there a reason for it to be set at 200%? I mean, why not pixels? it's more precise and you can check exact position if you wish. – tradyblix Jun 02 '11 at 06:01
@Dimitri Vorontzov, ignore what I said, it's probably not gonna happen..if you set a percantage more than the page height it will pull down the page height also (I think). – tradyblix Jun 02 '11 at 06:03
Pixels are fine, too. The problem is, whether I set pixels or percent, the code either keeps reloading the page when the div is below the mark, or doesn't reload it at all when the div is high above and outside the browser window. – Dimitri Vorontzov Jun 02 '11 at 06:04
@Dimitri Vorontzov, can you provide how are you using the code please? are you saving the position of the div so that after it reloads that it needs to stay there? what you need is just to check if you've reloaded once e.g. using `yourpage.html?reloaded`, if `reloaded` is there, don't do reloading. – tradyblix Jun 02 '11 at 06:06
OK, here's the whole story. I have the page whose content is below the lower edge of the browser window when the page loads. The content slides up to appear in the browser window. When I click on a menu link, the content slides up and of the browser window, and then a new page loads. When I clock the browser back button, I want to reload the previous page so that I can see the content again - because if I don't reload the page, the content will remain above the browser window. Does it make any sense? :-) – Dimitri Vorontzov Jun 02 '11 at 06:10
@Dimitri Vorontzov, It makes sense but seems to be a complicated way of doing things. Also, as you've mentioned, the back button being involved to do stuff, it may be a little tricky. – tradyblix Jun 02 '11 at 06:21
Well, actually, the back button is the whole point here. That's precisely the issue I'm trying to resolve. When the back button is clicked, the previous page is stuck in its final state, with content animated out of the viewport. I want to refresh it automatically so it scrolls back to view. – Dimitri Vorontzov Jun 02 '11 at 06:24
@Dimitri Vorontzov, hmm..this actually turned out to be a different problem now. – tradyblix Jun 02 '11 at 06:28

score 0 · Answer 2 · edited May 23 '17 at 11:43

0

You can check the current position of a div using the Computed Style

If you are have a like an animation or a drag and drop, you can use the onmousemove event to track the position of the div. but be careful the mousemove will be trigger for every pixel it moves and it my use lots of process time, so be wise on how you use it :)

edited May 23 '17 at 11:43

Community

1
1

answered Jun 02 '11 at 05:04

Ibu

42,752
13
76
103

A little off-mark, Ibu. No mousemove, no drag and drop. Just the simplest thing: if mydiv top is > than 15%, reload. But I would appreciate the correct syntax. :-) – Dimitri Vorontzov Jun 02 '11 at 05:07

score 0 · Answer 3 · answered Jun 02 '11 at 05:10

Well, it is rather hard to say how you should determine the position of the div since you presented no code, but basically you should write a function that fetches the window height and the offset of the div relative to the top of the window to determine whether it is higher than 15%. You then need to call this function every time using the window.onscroll event listener. When the function returns true, trigger trigger window.location.reload(true) to reload the page. I imagine this could be done fairly easily in jQuery as well.

score 0 · Answer 4 · edited May 23 '17 at 12:22

the above answers point you in the right way, but in order to "reload the page only once", you need an extra ingredient. you need a way to store a flag that points out whether the page has already been reloaded or not.
Say you follow tradyblix's code.
You should check for that flag before reloading your page :

if (hasReloaded() && $('#yourdiv').offset().top > ($(document).height() * percent)) {
     reload();
}

where hasReloaded is a function that determins if the page has been reloaded, and it can be either a function that sends an ajax request to a server, that checks a cookie or even the localStorage object:

function hasReloaded(){
    return !!localStorage['reloaded'];
}

In order to set that flag, your reload function needs to access the localStorage (or cookie or ajax server response) :

function reload(){
    localStorage['reloaded'] = true;
    window.location.reload();
}

This is just a sketch of how you should write this functionality.

This sounds great, gion_13, but may I ask you to actually write that snippet for me please? — Dimitri Vorontzov, Jun 02 '11 at 06:07
this should work just fine for browsers that implement the `localStorage` html5 feature (Ie7+,chrome,firefox 3.5+) — gion_13, Jun 02 '11 at 07:31

Reload the page just once if a div is above certain position

4 Answers4