BACKGROUND:
When you have a page that includes an HTML form, and you refresh/reload the page or use the back button, Firefox is kind enough to repopulate your inputs with what was entered before you navigated away.
PROBLEM:
For some use-cases, this is not the desired functionality. Fortunately, there are ways around this behavior if you are willing to use one of the "redraw without caching" options below:
redraw without caching ;; Press CTRL+F5
redraw without caching ;; Press form "Reset" button while holding SHIFT
redraw without caching ;; Cut the address from the address bar, Paste it back into the address bar, press ENTER
redraw with caching ;; Press F5
The problem is, not all users know these options, and some just want a simple "Reset" button that they can click on with the mouse without having to use the keyboard.
QUESTION:
Is there a way to get Firefox to do a "redraw without caching" in a way that lets the user simply click on a button with the mouse, and not have to use the keyboard?
For the sake of completeness:
<script>
document.FORMNAME.reset()
</script>
It resets the form with the name FORMNAME on every reload of the page.
Method 1:
Holding Shift + clicking the Refresh button will do a refresh without cache. This isn't a mouse only, but this is the closest I can think of while using the mouse.
Method 2:
If you really want to use no mouse, on a Mac, you can drag and hold the favicon off the URL bar, then drag and drop it back into the URL bar. Can't confirm on Windows, and this just seems more confusing than holding Shift.
Method 3: Install Hard Refresh add-on, which installs ability in context menu.
How about a link to the same URL that the user is currently on?
Since the browser treats it as a navigation, rather than a refresh/reload, the form data won't be remembered.
Note that "reset" is a different term used specifically for reverting forms to their original state without reloading the page, as in <input type="reset">, don't confuse it with refresh/reload which are terms for getting a page to be requested again from the server
Related
I am developing an app. A page showing full image and when you tap on the image, image caption and sound options appear from two opposite sides i.e caption from left and sound options from right with translate animations.
I want to be clear about that when I press back button, I can navigate to back page or I have to make those options disappear first and then again press back key to go to previous page from microsoft certification point of view?
I believe this is the same since windows phone 7.
You should be allowed to capture the back event and add some code. I don't think that is seen as bad practice, you just aren't allow to stop it.
Saying that, I don't think you can easily do a double back. you might have to check.
Here is a fairly useful post on the subject:
WP7: navigate twice back
which leads to another post about navigating the stack:
http://blogs.windows.com/windows_phone/b/wpdev/archive/2010/12/13/solving-circular-navigation-in-windows-phone-silverlight-applications.aspx
Anyone with firefox browser can you open up this fiddle.
The issue I have is with this checkbox button I have, it requires multiple clicks to turn it off and my question is how can I stop this from happening? I know its the posistion:relative which is causing this but I need this so that every time I click on a button, it does not go to the top of the page. I just want the button to turn on and off in one click, not multiple clicks
(See comments below the question - now I know what happens to you)
Ahhh - you cannot solve this without Javascript: quick (double?) click on the TEXT ITSELF is interpreted as "select text" by the browser, and it does not send the event to the checkbox when that happens. With Javascript you can force "un-select" of the text on click.
Click "slowly" - avoiding double click text selection - and it will work (just to show the cause of the problem, no solution without Javascript or proprietary CSS).
Try adding this: Prevent text selection after double click
Maybe you should use a full Javascript Checkbox-Button solution instead of trying to accomplish it with just CSS.
Was just trying to cobble a quick site together as a favour for my sister. It's based on a template she bought and I've just quickly bunged her copy/pictures in, so I'm aware the markup is far from perfect. That said, I can't see how it would be causing the following issue...
The template uses a jQuery plugin called jScrollPane to make the content sections scrollable. Sometimes however, in Chrome (v20) this doesn't work - it doesn't let you scroll all the way down.
What's really odd though, is the pattern I've found that seems to effect whether it works or not. Try the following
Go to http://mattandkate2012.co.uk in Google Chrome - click 'Ceremony' - can you scroll down far enough to see the map? I can't.
Press the reload icon, click 'Ceremony' - can you scroll down? I can't.
Select the URL in the browser URL bar, press enter - can you scroll down? I can now!
Does everyone else get the same results as above, and do you have any idea why pressing enter in the URL bar has a different effect to the reload button?
This functionality works fine in Firefox and even IE!
Thanks
Pete
From a very quick look I guess it's because the section contains an image and you aren't re-initialising jScrollPane once the image loads. See:
http://jscrollpane.kelvinluck.com/image.html
The difference between refreshing and pressing enter in the location bar is that the cached image is shown when you press enter in the location bar...
I would suggest moving the call to $('.content').jScrollPane({showArrows: true}); to inside the $(document).ready block - if you call it before the document is ready often images or other elements won't have loaded and so the height of the containers will be wrong.
Google search + Google Chrome browser have this implemented, when you browse the google search results using your up and down arrows (only possible in Chrome browser) and than press CTRL+ENTER it opens the search result selected in a new tab but without focus to that tab. You can now use up and down keys in the same list of search results and CTRL-ENTER more results in new tabs to visit later on.
Does anyone have any idea how this is done? As it only works with Google Chrome at the moment I suspect something is added to the browser as well but I can't find anything on this subject.
The way I have seen this done before is for the webpage to listen for key presses (e.g., j/k) and simply focus() the desired link. Then, when the user presses Enter or Ctrl-Enter, he is simply performing the default operation on the focused link.
Sure enough, when I type this into the javascript console on a Google search result page, I see the links that are being focused.
document.addEventListener('focus', function(e) {console.log(e.target)}, true);
So Google is still using the same technique, although it's not so obvious because they hide the dotted outline around the focused link using CSS (a.noline{outline:0}).
My checkout cart displays (1) an animation for "Processing Order..." after the 's been (2) submitted and the card is being processed in a php script. However, there's a bug triggered when the user has reached the "order accepted" page, and pressed the back button. The "Processing Order..." animation is still displayed.
(1) The processing display is shown like:
<div style="position:absolute;display:none;" id="animation">
<img src="animation.gif"/>
</div>
(2) When the button is submitted, the javascript used:
onClick="document.getElementById('animation').style.display='block';
document.the_form.submit();"
So, the button is clicked, the animation displayed, the form submitted, and the card is processed, and the user is on a new page.
When the user clicks back, we should expect a page without the animation. But, onLoad isn't triggered, and the last state of the animation (displayed) is saved.
Any idea how to remove the animation when the user returns to the page?
Inspired by Adam A's comment, you could hide the animation when the user is leaving the page (through form submit is the normal route, I would suspect) so if/when coming back to the page, the animation isn't shown.
One way to achieve this is adding the hiding code to HTML body's onunload event.
<body onunload="document.getElementById('animation').style.display='none';">
In most modern browsers, clicking back doesn't reload the page, it just displays it from memory as it last remembered it (as this is likely to be the desired behaviour).
In my limited experience of UI design, I'm not sure why you would want users to click the 'back' button after submitting an order, instead you should provide a link that takes them forward to the next task they may wish to complete, or, forward them onto a new page that has useful tasks and simply displays a message somewhere that says "Thanks, your order is accepted".