I have designed a one-page homepage with lots of content, in which a contact form is implemented at the bottom (see http://neu.logopaedie-scheithauer.de/). Upon opening the page for the first time, most browsers (IE, FF, Safari) scroll down to the first field of the contact form, possibly due to an auto focus.
This undesired behaviour leads to a bad user experience, as the user expects to read the page from top to bottom. However, I can't figure out, how to stop it. Any ideas?
It is because of the runonload function, and just removing the code, will fix the issue. Let us know if it has fixed. Just remove this code from the file contactform.js:
runOnLoad(function(){
$("input#name").select().focus();
});
Related
I need to build a chart with the Chart.js library.
I've got a strange behavior with Firefox: the charts behaves randomly, sometimes it's OK and sometimes I need to click several times on my button.
Does anyone know of a method in JavaScript to force the reload via a simple button like this?:
Refresh the page
To see the other ways to reload the page you can check this comment https://stackoverflow.com/a/7632005/17542117, but most likely browser should be reloading with your code snippet itself.
If you are still facing the issue try the following things,
try to narrow down the places where you have to click multiple times
check if you see an invisible overlay over the button which could be blocking your click action. (try placing the button from the top to the bottom of the screen while scrolling and try clicking it at multiple positions, this might help you too to find if invisible overlay is only in a specific portion of the screen)
try to see if your click function throws any console errors which can block your JS code execution on the click action.
I have a heavily interactive page that, while it does not use a form, does have objects that maintain state. This state is completely messed up when someone navigates away from the page and then comes back to it again with the back button. So, I'd like to be able to detect when someone uses the "back" button to navigate to my page, and have it reset the content at that point. How can I accomplish this?
I found one other question that addressed this issue, but it is very out-of-date (from 2011), doesn't mention anything about support for Chrome, and I'd rather not use JQuery if I don't have to (I'm not using it anywhere else at the moment).
My Issue
I am currently in the process of writing an application for iOS using Cordova. I have a page with a form on it like so:
When the user taps on a field, the keyboard appears as expected on iOS. However, to prevent my app from moving off the screen, I have enabled the following setting:
// Prevent the keyboard from pushing up the webview
cordova.plugins.Keyboard.disableScroll(true);
Unfortunately, this prevents a few things that are causing me issues:
When a field is focused, the screen does not scroll to that field so sometimes, the field appears behind the keyboard.
Even if I did have a solution to the above, for the elements that are at the bottom of the screen, I will not be able to scroll down far enough to bring them into view above the keyboard.
My Question(s)
Solution 1
Is there any way, in Cordova, to auto scroll to the focused field without moving the whole app off the screen?
If it is possible, then how can I handle fields that are close to the bottom and cannot be scrolled up any further into view?
Obviously, the first point can be achieved using JavaScript/jQuery and some clever logic with the keyboard_height, position() and scrollTop(). But, this then creates the issue with the second point about the input fields behind the keyboard...
Solution 2
If I apply the following code, it will fix the issue highlighted above, but it will create another issue (explained below):
// Enable the auto scroll when the keyboard is shown
cordova.plugins.Keyboard.disableScroll(false);
Is there anyway to fix my header (the 'Edit Profile' bit), to the top of the screen to ensure that part is always visible?
Use https://www.npmjs.com/package/cordova-plugin-keyboard#keyboardshrinkview and its Keyboard.shrinkView method.
I have the following scenario, a user is scrolled some wheres down a search page. They click on an item and after they are done viewing the item they hit the back button. The back button brings the user back to their exact location within the search page as it's suppose to. After a second, the page auto scrolls to the top of the search results. You can see this behavior in action cardaddy.com/forsale
I've spent a couple hours trying to figure this out with no success. I'm not aware of any js causing this issue either. Please feel free to take a look. Any suggestions would be great since this is destroying my ux
I though maybe the forward from my root domain to www.domain.com with godaddy.com may of been the cause, so i changed that behavior around to use amazons name server eliminating the forwarding. I thought I repaired the issue as it seem repaired on the desktop, but it still seems to happen on mobile.
As far as I know, this behaviour depends on your browser.
The back button brings you to the last site you visited and loads this site new. So the effect to stay at the possition is caused by the browser engine.
1 way of doing it would be to save the location of the page and restore to that location when back button is clicked
on click : var position = $(window).scrollTop();
On back button : $(window).scrollTop(position);
Is there anything particular to chrome or safari that would make a javascript/jquery script work on the first page load, but then when the user hits the back button after navigating the site, it causes select boxes to be selected?
Here is the code. Apologizes before hand for the lack of conventions. I had to get this up quick:
http://www.mailcanarias.com/index.php
I believe that's because (at least Safari) auto-refills forms when you go back