This is a strange bug that occurs on the iPhone 5 when navigating back to a previous page.
Here's the steps to reproduce the bug on an iPhone 5:
Select a menu option that directs to a new page
From the new page press the browser back button
Try and navigate to the same page again using the same menu
An example page to try this on is here. On this page, select 'Javascript Tutorials' from the first menu on the page. Then follow steps above...
In my situation there is no go button to follow the link (like the second menu on the example page). The option is followed when clicked. The problem with this is that because the page you returned from is selected in the menu, you are unable to navigate to it. You cant re-select it.
My question: Is this a known iOS 7 bug? And is there a solution? My search has come up empty so far.
My JS code selects the first option when the menu is generated on page load. And as said, this bug only occurs on the iPhone.
This is not an iOS 7/iPhone 5 bug.
I can recreate it in Chrome on Windows 7.
As you said,
"because the page you returned from is selected in the menu,
you are unable to navigate to it"
The menu is pre-selected because of autocomplete behavior
When you press browser "back" in step 2 (versus page refresh), browser remembers the state you left the select in
https://stackoverflow.com/a/2699400/1175496
When you re-select an option that is already selected
You haven't changed anything; so the change event doesn't fire
Scripts listening for that event (as with the onChange attribute in your example) won't send you to the page
I fix this by putting autocomplete="off" attribute on the form element containing your select;
this prevents number 1, which prevents number 2.
Related
Strangely, all of the links in a HTML/CSS/JS dropdown menu (top right with parent menu items "Home" "Shop" "Create" as shown in example image), do not click-thru to their href= destinations on the 1st click. Clicking 1 time does nothing. Wait a few seconds to verify nothing happens, then click again - works browser follows the link to the destination on the 2nd click fine.
I am testing in Google Chrome.
This is the only menu or set of links having this issue in the entire site...
I've already right-clicked on them to inspect-element with the developer panel in Chrome, expecting to find some other element blocking it or something but it's not the case, the target seems clickable and the hover states work fine and everything.
View example here: http://www.PuckStyle.com
Thank you!
Update:
Here is a screenshot as requested-
(source: puckstyle.com)
I managed to find something using the Chrome dev tools checking for events.
If I remove that click event (1) then I can single click the link in the menu.
When I click the link to the script (2), the code block (3) is highlighted.
Looks like a script to double-tap. You could remove it from your site. Double-taping in your website is probably not needed.
The question is opposite to this one.
Say I open link in a new tab. Currently it is opened, but not loaded. It starts loading only when I select it. I want so that I open a lot of links on a page and those tabs start loading without need to be selected.
Furthermore, there is another problem. When I open link, select that tab, tab is loaded. Then I go to another tab, do something there and return to the first tab. So this tab starts to reload again.
How to fix this?
My version of Chrome is - 48.0.2564.116. It starts to happen recently.
If you are using (in settings) "continue where you left off" then switch to "Open specific page or set of pages" try it there, then switch back
The answer is https://superuser.com/questions/1048029/disable-auto-refresh-tabs-in-chrome-desktop#answer-1049471. Shorter, the flag #automatic-tab-discarding needs to be disabled on chrome://flags.
I am creating a webpage and am having some issues with how the back button works on the page. I am guessing that I need to set some headers, but don't know which ones or how. This is what I'm seeing:
(1) Go to the main page, which shows forum threads.
(2) Click a link to go to a page showing a thread. On this page, scroll down and add a comment.
(3) Comment is saved via form (edit: I have tried both POST and GET form). The same thread page is now reloaded via a redirect. The comment shows.
In Chrome: pressing the back button at this point still shows the comment as having been added. It looks as though the back button didn't work. However, the page is scrolled down as it was for (2). Clicking the back button again shows the main page. So, the back button does take me back, but if the same page is there twice, it shows the new data both times.
In IE9: pressing the back button displays "Webpage has expired". Clicking it again takes me to the main page.
How do I alter this behavior so the back button truly shows me the previous page?
(The reason I'm doing this is that I keep track of how many pages I am from the main page so I can generate a "back to main page" link. (2) above has history.go(-1) and (3) above has history.go(-2). This won't work if the user presses the browser back button from (3) since it will now be 1 away from the main page, but show the link from (3).
In step (3) you probably have a POST that returns the new HTML of the thread page. Instead the POST should redirect to a GET of the thread page.
See http://en.wikipedia.org/wiki/Post/Redirect/Get
I am developing a Chrome extension with browser action. I want to make some action on clicking on browser action icon (it is easy, not a problem), and show popup if user clicks on down arrow at the right side of the icon (that is a problem). So, we will receive a functionality similar to the firefox toolbarbutton from XUL. Is it possible to do such thing with Google Chrome?
Just want to make button, like that:
button
If it is pressed on the main part - it will do something, if on the right "drop-down" part - it will show quick settings page.
But I see only single button possibility.
The entire browserAction button works as a single button. There is no way to detect if a specific area was clicked. The best you can do is either have multiple extensions each having their own button for different actions or have options in the popup that the user selects with a second click.
I'm building a web page that will be viewed on mobile devices (Blackberry specifically). I have navigation drop down of sorts implemented as a <select> in the upper left corner of the page. Rather than require the user to click on the drop down directly I'd like to have so that the user can click/tap anywhere on the page the select drop down in the upper left corner opens. The page has no other links or clickable objects other than the select drop down in the upper left.
Is this even possible? From what I've found so far it seems that it's impossible to programmatically open a <select> drop down, but I figured I'd throw this specific case out there.
Since it's not possible to fake key presses with JavaScript (and rightfully so for security reasons), the closest thing is to change the size of the <select> element (change it from a drop down control to a list box control and back).
Demo, Code (pure JS, no library)
When the user selects an option by clicking (or tapping) it, the click event handler 'closes' the list box by setting its size back to 1, after which it converts back to a normal drop down control. I have only tested this in (non-mobile) Chrome, let me know if it works on Blackberry or not.
Edit:
I have created a small jQuery plugin that wraps behavior and configurability into a more comprehensible control. I have tested this on Safari Mobile on iOS 4 and it behaves just like a regular drop down does in that browser, except it can be opened programmatically.
Demo, Code (jQuery 1.7)
It works like this:
$("select").openable({ triggers: $("#trigger") });
Clicking on any trigger will open the selection UI.
I have also added a handler for the key up event to catch Enter, Esc and Space to 'close' the list box. This mimics the drop down control's selection mechanism on desktop browsers.
Of course, on a desktop browser this will change the layout of your page, as it's different from the native drop down control. You will have to come up with a CSS solution for that (something with position: absolute and z-index probably). But on iOS the selection UI isn't rendered on the page, so it's not a problem.
Again, haven't tested this plugin on BlackBerry...