In my ToDo list app, I have a text area that is appended at the end of the list. The problem right now is that when I tap on the textarea, the keboard shows up but the textarea is behind the keyboard and the page doesnt scrollup unless I start typing. As you can imagine, this is not a good UX.
How do I scrollup to the textarea as soon as the keyboard shows up?
EDIT: This is an observation in the simulator version 2.0
I fixed it by scrolling to the container's bottom for onClick event:
$(document).on("click", "#new_todo_item",function(){ // scroll to bottom when clicked on input textarea
$("#todo_list_container").animate({ scrollTop: $(document).height()+$(document).height() }, 1000);
});
I had to add up $(document).height()+$(document).height() since one height didnt really scroll to the bottom. The downside is that there is no animation now.
Related
I have a box with overflow: hidden where some elements are positioned outside of the box
When I tab through to the elements outside of the box, the box is actually shifting or scrolling, even though it's not supposed to because of overflow: hidden
http://jsbin.com/rabetib/1/edit?html,css,js,output
Notice that you shouldn't be able to see the non-yellow boxes, but the container changes scroll position when tabbing
Is there another CSS/HTML/JS prop that can prevent my box from moving to show focused item?
My only solution right now is to repeatedly set scrollTop: 0 whenever focus changes
Ok so, the way I fixed this problem is to listen for scroll on the container.
It's too late to call e.preventDefault(), but you can set container.scrollTop = 0 after the erroneous scroll. No flash on my version of chrome
I'm trying to focus the top of a div on an anchor click using the below code.
$('html, body').animate({scrollTop: $("#" + divid).offset().top}, 100);
However, it is not getting scrolled to the top of div , rather the focus goes to a position inside the div. I cross checked the offset().top value of the div with the top value in Page Ruler chrome addon and they are in sync.So ideally it should scroll to the top of div. Any suggestion would be really helpful.
Your fiddle seems to be working (except that you forgot preventDefault() in the click handler).
Generally, you need to account for border, padding, margin on the scroll container (the window in your case). For a generic solution, have a look at this gist.
I have this function:
$(document).ready(function() {
$("#toggle-area").click(function() {
$("#show-area").toggle(300);
});
});
It displays some text when user click on the link. The problem is I have 12 links, one below the other, and the vertical scrollbar appears. However, when I scroll down and click on the 12th link (for example), my scrollbar jumps on the top of the page and I have to scroll down until the end to see the text that appeared.
How do I avoid this jump, and keep my list where it was before the click?
Here is the link - JSFiddle
Thanks in advance.
You could use preventDefault to skip the default hyperlink behaviour.
suppose #toggle-area are a hyperlink element.
$(document).ready(function() {
$("#toggle-area").click(function(e) {
$("#show-area").toggle(300);
e.preventDefault();
});
});
I am creating a hover over button, once hovered it will scroll up to unreal more content over my slideshow, but when I hover over the button it pulls up but wont come back down.
Click here to see live, hover over Contact Our Team Button on slider
jQuery(".buttontwo").hover(
function(e){
jQuery('.buttontwo').animate({top:'0px', bottom:'auto'}, 200)
},
function(e){
jQuery('.buttontwo').animate({bottom:'75px', top:'auto'}, 200)
}
);
Any ideas guys?
Thanks
Try adding a fixed value to the top property in the second function().
However you should be aware that as soon as you hover the button and the animation starts the second function will be triggered since you're not hovering the button anymore.
You might have to find a different way to animate that, perhaps adding aonMouseEnter / onMouseLeave event to the button's container.
I'm building an app with PhoneGap and I have a screen that has a fixed navigation bar, a scrollable area below, and a text field in that area (think facebook message screen). When you tap on the text field, keyboard pops up and although nav bar is fixed, it scrolls up and out of the screen. I want it to stay fixed and scrollable area should get narrower.
Is there a way to do this?
Here's a diagram (sorry for poor quality):
diagram
set frames here:
- (void)textFieldDidBeginEditing:(UITextField *)textField
{
// change base view frame
}
- (void)textFieldDidEndEditing:(UITextField *)textField
{
// reset base view frame
}
Rather than using C, just use javascript and window.scrollTo for this (on input focus)
$('input').live('focus', function(e) {
e.preventDefault(); e.stopPropagation();
window.scrollTo(0,0); //no scroll > stays fixed!
});
If you don't want to set a static value for the Y scroll position, feel free to use this short plugin I've written that automatically aligns the keyboard underneath the input field (unless there's no need to scroll). Just call this on focus as shown above:
setKeyboardPos(e.target.id);