The default behavior for browsers on page reload is to scroll back to the position where you last were on the page.
Let's say you scrolled to features section and then you hit F5. The browser will reload the page but it will remember the position you were at and scroll to features section.
Does anyone know how to reset this scroll state in browsers? In my application I need the browser to load page naturally and position the page on top on every page refresh.
There is not something that you can "configure" to avoid that behavior because that's the browser behavior.
What you can do is to add a simple javascript when the page has been loaded to scroll to the top (if you already are on the top, this will do nothing):
window.scrollTo(0, 0);
To know when the page has been loaded, you can use jQuery document on load functionality if you are using jQuery, the equivalent on your javascript framework or the body onload property to place a function that execute the above code.
Related
The animation when tapping the hamburger menu is working perfectly (though the css positioning is off, and needs to be fixed). But when the user taps one of the links in the nav (whether it is a new page or the page they are on), I want the animation in reverse (with either the current page or the new page, depending upon which link they press)
Code in CodeSandbox
Any ideas on the one, or probably many things I am doing wrong?
I am developing a chrome extension that would like to add a tab at the bottom of the page to manipulate DOM elements. Chrome 'manifest.json' file doesn't provide such feature. So how to do it or rather how does Firebug add a tab at the bottom of the Chrome?
I would suggest inserting a panel in every page through a content script. You can style it in order to appear at the bottom of the page and be always visible.
In order for it to retain its state between navigation from one page to another, you need to persist it some how (example use chrome.storage or a similar mechanism through the background page to persist the content (or whatever you need).
See this answer on how to insert (and style) a toolbar-like div or iframe in a page through a content script. (It is fixed to the top of the page, but you can easily modify the code to fix its position at the bottom.)
I have a dijit dialog created declaratively in my static html page.
If I open this dialog as soon as my page is loaded it opens properly in the center of the page, but if I perform some actions available on the page and then load the dialog then the dialog gets padded to the bottom of the page.
This happens ONLY THE FIRST TIME the dialog is loaded and ONLY if the first time happens to be after performing some actions on the page. All the other times the dialog is loaded properly in the center of the page.
There's a similar question here:
Dojo and dijit.Dialog not centered
but the solution given there is not working for me because I'm already using dialog.startup() and dialog.show().
This happens in Firefox, Chrome and IE and I'm using Dojo 1.8
Anyone have some sample code for an in-app browser that they would like to share?
I am looking to add a browser view in my app that is pushed and includes a toolbar with four buttons: back, forward, stop/refresh and actions. However, I'd like to show somewhat transparent and none-tapable buttons when you can't go forward or back, and also have the stop/refresh button show the appropriate icon when it's loading and done loading?
My issue is currently that I cannot get "blanked out" back and forward that cannot be tapped if you cannot go back in the web history. Also, how do I change out the stop icon with the refreshing icon when the view is loading?
For tool bar items, simply set "item.enabled = webview.canGoForward;" (or canGoBack). To change the refresh/stop button you can set item.customView if you want to use a progress view or some such, otherwise if you just want to use a static image you can set item.image. All this is in the documentation as well.
I have a page where I open a "modal window". It is really just a DIV, with an IFRAME inside, where I load another page. When I want to refresh the page, the browser pops up a window saying "Are you sure you want to navigate away from this page? Reloading this page will cause the modal window to disappear. Press OK to continue, or Cancel to stay on the current page."
How does this message get generated? How does the browser figure out that I have a modal window there, because I don't use any window.open() call from JavaScript? Is there any way to disable this behavior of the browser.
It may be body.onunload in the source of the page loaded in the IFRAME.
As the modal window is essentially an IFRAME, then when you close (or refresh) the main window, the browser knows it is killing that IFRAME, hence any body.onunload in that IFRAME fires.
If you have a function that handel onbeforeunload, automaticaly the Firefox message is generated.
you can disable it by returning null at the and of your handler.
This could be caused by some script modifying all off-site links to display this modal window, and then return true, or return false based upon your interaction with the modal window.
If you want to strip that behavior, you could remove all click events for external links.