I'm using a simple javascript toggle function to expand a div to show its contents. If the div is near the bottom of the screen, it expands and some of the div disappears off the screen.
How can I get the page to automatically scroll down to make sure the div is in view?
Each element on your page, including your DIV, will have a set of offset values relative to the document. You can get these via the $.offset() method. This will give you the x and y coordinates to the element on the page.
There are many plugins that exist in the wild (such as $.scrollTo() by Ariel Flesler) which will animate scrolling of your page for you, and even do so via a set of provided coordinates. You would join these two items together to automate a scrolling to the offset coordinates of your DIV.
Just make sure your DIV isn't taller than your viewport, or else you'll need to scroll even more to see all of it.
Related
I am trying to render inovua/reactdatagrid inside the popover component of headless-ui that has absolute position, which is not working.
I tried to use a separate div to render the grid but it does not show up on ui, if the div has absolute or fixed position but it does show up as soon as I change the positioning to relative. Although the grid is added to the dom, it's just isn't visible.
I am using iframe-resizer for cross domain application, The Iframe loads fine in desktop and andriod devices but on my Iphone, I am facing below issue:
The bootstrap modal pop ups on Iframe app is hiding and flickering behind when I scroll on page.
I tried
-webkit-overflow-scrolling: touch;
on container of Iframe but that does not work.
Any help/suggestion will be highly appreciated.
We fixed the issue by using position:absolute instead of position:fixed
Position fixed and absolute are somewhat similar in behavior. Both use x,y positioning in the view port and both are outside of the DOM document flow so other content is not affected by the placement of containers. Both require zIndex positioning to determine vertical priority in the view stack.
Position fixed keeps the element pinned at whatever position you set it to regardless of the scroll position of the browser. This makes sense in some scenarios where you actually want to scroll the entire page but leave content in place. The key to remember is to not use it when you build have your own scrollable content on the page.
It turns out in my case I don’t really need position:fixed because I manage the position and size of the container and toolbar headers and footers myself anyway. I know where everything is positioned and keep the content area effectively wedged in the middle of the statically sized elements. By way of CSS and media queries I can force the header to the top and the footer on the bottom using fixed sizes which means I can safely use position:absolute.
have a page with disabled scrolling. page contains in it's content two sap.m.Table. one table for the sake of a fixed header. it contains just columns. other table inside a sap.m.ScrollContainer's content. it contains the items. use case is that the items do not fit the screen's height. without a scroll container the items would fall over the screen's bottom. page scrolling is still disabled. now i'd like that the scroll container jumps in. and it should exactly fill out the remaining page space between the first table in the page and the end of the page. until the bottom of the page. the end of the browser window. is there any work around to achieve that the sap.m.ScrollContainer goes automatically over the remaining space? without a scroll container's set to a specific height.
work around: wrap the site's content with a sap.ui.layout.FixFlex: set a pixel value to the sap.ui.layout.FixFlex property minFlexSize. the sap.m.ScrollContainer with the sap.m.Table goes into the sap.ui.layout.FixFlex aggregation flexContent. now the parent of the sap.m.ScrollContainer has a fixed height. therefore the sap.m.ScrollContainer can resize itself based on this.
I'm using a JSSOR slider that scrolls content horizontally. My issue is that the slide content is dynamic. An admin has the ability to add and remove images & text from the slider, however not all the divs are the same width. This creates gaps and/or overlapping.
I can create a code to get the width of each slide prior to the initialization of jssor, however I'm wondering if there's a way to apply $SlideWidth to individual slides by index?
Thanks.
Im using the jscrollpane jquery plugin. My content are images that expand when you mouse over them, and shrink back to normal on mouseleave. What I need if for the images to be able to expand over beyond the scroll bar and remain visible while expanded.
By giving the images a z-index I can get them to expand over the scroll bar handles, but im struggling to get them to expand any further.
If I set a number of elements to having overflow visible I can get it to work, but then I have browser scroll bars at the bottom of the screen.
Can I have the images visible when they expand but no browser scroll bars?
Thanks
Answer from:
http://groups.google.com/group/jscrollpane/browse_thread/thread/8073378d51551efa
Hi,
If I understand correctly you want your images to expand out of the
bounds of the scrollpane "box"? That won't be possible in a simple manner.
A workaround might be to do something like this:
* On mouseover clone the image that is rolled over and attach the
clone to the body with position: absolute.
* Use jQuery to figure out the position of the image you cloned with
respect to the body (a loop with offsetParent will be your friend
here).
* Apply this position to the cloned image so that it is sitting
directly above the original image then expand it.
* Listen for the mouseout event on the cloned image and when this
happens the shrink the cloned image and then remove it from the body.
Hope it helps,
Kelvin :)