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
Related
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.
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.
I have a hover event set on an element that use's jQuery UI's position function to show a div right underneath it, with the "out" set to hide that div.
The problem is, subsequent hovers position that div further and further on each hover.
Example: http://jsfiddle.net/Shpigford/8ZkgJ/
Hover over the red box, then hover over it again and you'll see the blue box quickly get positioned further and further to the right.
Same thing happens if I change to a click event. Seems like something odd is happening with positioning when I hide the div and then try to show it again.
Instead of position({...}).show(), use show().position({...}). The reason is that positon won't work when the element is invisible. You can find the following note at http://api.jqueryui.com/position/:
jQuery UI does not support positioning hidden elements
I am facing a problem with set scroll bar top position. Actually what I need is; I am using a JQuery Keyboard plugin where for all the elements I need to display the virtual keyboard at the center bottom of the page and its done.
But the problem I am having is when I have a input field near to the bottom of the page where that page does not display the scroll bar (It means there is no need of overflow because all the elements I have is visible in my page). Since I am displaying the virtual keyboard at the bottom of the page and when the focused element also is at the bottom of the page I need to initiate the scroll bar and page should go up by scroll down automatically so active input field element is visible to me.
I tried to set the scroll bar by using this
$(document).scrollTop(_scroll_top + (_el_top + _el_height) - _keyboard_top);
Where _scroll_top is my current scroll top position, _el_top is focused elements top position, _el_height is my focused elements height and _keyboard_top is the top position of the keyboard.
Now the problem is when I have a more height page (It means scroll bar size is small i.e. scroll bar size may be around 60% of the screen.Height) scrollTop is correctly working and I can see the active input element even though keyboard is visible. But when I have small height of a page (Example: scroll bar size is around 90% or it may be same size of screen.Height) scrollTop is is not working correctly so the active input element is not visible and it is behind to virtual keyboard.
How can I set the scroll top correctly so I will be able to see the active input element then at the bottom of that element I can see virtual keyboard.
Please see the attached image. That is where actually active input element should be displayed.
First Image is Before Enable the keyboard: Just see the element's position, sroll top
Second Image is After Enable the keyboard: Just see the element's position, sroll top
This is what I need when my scroll bar size is big (Around 90% of the screen.Height)
Thanks in advance.
P.S: I am extremely sorry if I confuse by the way I expressed my question.
use jQuery('html,body').scrollTop('other things here');
Thanks for the responses.
I have found the solution for my question.
At the bottom of the page I have created a dummy div element.
<div id="scroll_dummy"></div>
Initially this div will be having zero height. I applied the height of the keyboard to this div. As a result your page size will be increased so it can easily move the scroll top. At the time of close again revert back this style.
Then at the place of I am applying scrollTop I have done this.
$("#scroll_dummy").css("height", _keyboard_height);
$(document).scrollTop(_scroll_top + (_el_top + _el_height) - _keyboard_top);
Where
_scroll_top : scroll top position
_el_top : active element top position
_el_height : active element height
_keyboard_top : keyboard element top position
_keyboard_height : keyboard element height position
Done with this... :)
I am using "overflow: hidden" on the body tag, which hides the scroll bars, but it doesn't prevent the user from click-dragging the mouse to reveal outer content when dragging to the bottom or right-hand edge of the browsing window. Here's the site:
http://entanglement.gopherwoodstudios.com/
To replicate behavior, one way (in Chrome) is to press the middle mouse button and drag down or right. In IE9, grab and drag a menu button to the edge.
Is there an application-wide way to prevent this, or is there a property or event-call that I must rework on every single element?
Try setting both the overflow-x and overflow-y CSS properties to "hidden" on the element that is serving as your clipping element.
overflow-x:hidden;
overflow-y:hidden;
my first thought was to use the CSS clip property, and change it via javascript to match the visible parts of the body...
You could add a timer loop that constantly moves back to (0,0).
var noScroll = function() { window.scrollTo(0,0) };
setInterval(noScroll,10);