Here's an interesting browser UX problem that I'm solving.
Let's say you click an anchor link in a browser and get transferred to www.example.com/#footer. Then you click "Home" button on your keyboard and your browser scrolls up to the top of site. If you reload your page now via F5, the URL will still have #footer in it (www.example.com/#footer) but the browser won't scroll down to #footer - the page will stay scrolled to top.
The question that I've is - is there a way to get browser to scroll to #footer when page reloads without JavaScript?
Here's HTML that illustrates the problem:
<html>
<body>
<div style="height: 2000px">
click here to go to footer
</div>
<div style="height: 300px" id="footer">
footer div (now scroll up and hit F5)
</div>
</body>
</html>
Load this page in your browser and click the link to footer. Then scroll to top, then reload the page. Your browser won't scroll the page to footer again even though it has #footer in the URL.
Similar effect happens if you simply scroll up a little bit and hit reload. When the page reloads it will stay where you left rather than going back to anchor.
I could solve it by adding scrollong in onload with JavaScript but I wonder if there is a pure browser solution to this? How do I make browser forget the position the page was at before I reload the page and make browser scroll to anchor in URL?
Related
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.
A user of one of my websites is reporting an alarming-looking frame content error on a page that embeds Google Maps. I have played with the security settings in IE9, IE10 and IE11 but have only been able to either display the embed without issue or display nothing (blank space where iframe should be.) What do I need to do in which version of IE to see this error?
Here is the embed in question (need to redact specific map.)
<iframe id="googlemap" width="640" height="480" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps/ms?t=m&msa=0&msid=1234.1234&source=embed&ie=UTF8&ll=37.996163,-96.855469&spn=33.053774,56.25&z=4&output=embed"></iframe>
Here is a screenshot of the error the user is receiving.
Open a new browser window, and pull down the "Tools" menu.
Select "Internet Options".
Click the "Security" tab, select the "Internet" icon, and click the "Custom Level" button.
Scroll down to the "Miscellaneous" section, find the "Launching programs and files in an Iframe" entry and select "Prompt".
Close all open Dialogs by clicking the OK buttons.
Is there a way in chrome extensions to add a div OVER the page view, not to the page. I want that when I switch to another tab, the div is still there. The div should not be a part of the page, but over every page.
When this is possible: How?
No such thing.
You would need to add a div to each tab and then sync its content by exchanging messages with a background page (or make it iframe linked to extension's html page).
I'm having some problems with panelPopup and IE8. When I set autoCentre="true" and positionOnLoadOnly="true", I expect the popup to appear in the center of the view port and stay put there. This works fine in Safari, Chrome and Firefox, but in IE the popup "follows the scroll", if you see what I mean. I.e if the page where the popup is displayed is longer than the popup the popup is re-centered when I scroll the page. Also, and this is a bigger issue - if the popup is longer than the page I can only scroll part of the way down it, then it's re-centered. This means I can never see the information at the bottom of the popup...
This is the code used to generate the popup:
<ice:panelPopup
id="popup"
positionOnLoadOnly="true"
autoCentre="true"
style="z-index:999; background: #FFFFFF;"
resizable="false"
draggable="false"
modal="true"
clientOnly="true"
visible="#{SomeBean.popupRendered}" >
Any ideas?
Thanks!
According to the documentation, the autoCentre option is supposed to keep it centered through scrolling and window resizing but dragging should disable it. Turning draggable to true might give you reasonable results because the user can drag it to a position they can see the entire popup.
I'm having no end of fun (sic) with jQuery.tabs. The widget is quite crafty in that it turns basic HTML like so
<div>
<ul>
<li>Tab #1</li>
...
</ul>
<div for panel #1>
</div>
<div for panel #2>
</div>
...
</div>
into a cute tabbed dialogue. (It does so by restyling the UL and then toggling the "display" attribute for the panel DIVs to show/not show whatever panel is selected.)
Now I found that I can spare myself a lot of trouble in my JS project if I insert a scrollable IFRAME into each panel.
One usability problem I'm trying to ameliorate is that when the tabbed panel becomes larger than the browser's window, then the user ends up with too many scrollbars. I am trying to avoid this situation by linking the size of the tabbed panel to that of $(window). That is, I trap and process the resize event on $(window).
To make my life bearable, all components are relatively sized. This is also true, in particular, of the IFRAMEs (100% width, 100% height). The only exception are the panel DIVs, which are of fixed height (in px). And this is the only dimension css attribute that I manipulate during my resize action.
All of this works a treat in FF and Chrome, but IE6 is doing something rather cute: So long as I do not affect the width of the browser window (but only change its height), only the panel DIV changes in height; the IFRAME contained will not change. As a result of this behaviour, it is not possible to shorten the tabbed panel below the height of the IFRAME. I can lengthen the DIV, yes. But the IFRAME will not fill the panel in that case.
All becomes good the moment I make the slightest change to the width of the browser window. In that moment, the IFRAME expands to catch up with the extended DIV or DIV and IFRAME contract in tandem.
Bizarre. I inserted useless CSS instructions like "position: relative" and "zoom: 1". Also nudged the display with "display: block". No joy so far.
Any ideas?
Thanks.
Never mind. Just had an inspiration: jQuery.tabs doesn't mind if I make the panels outright IFRAMEs. That is, I can do away with the wrapping DIV and thus need not rely on IE6 to honour the automatic relative dimensioning (height=100%, width=100%) of the wrapped IFRAME. The IFRAME is now fixed px in height and is directly resized by my resizeHandler. Life is now good across 4 browsers. Yipee!