I'm trying to avoid scrolling on the main content in mobile browsers when a sidebar menu is opened ° by adding a class to the main content with a 100% height, a hidden overflow and an absolute position, but the problem is if I scroll down and then open the menu I get automatically moved to the top of the page and don't stay on the position where I was before opening the sidebar. I can't figure out what's going wrong.
I tried some solutions like saving the position and then forcing the window to stay always at that place until the sidebar is closed, but I'm pretty sure there's a cleaner way to do it.
Anyone has a better idea?
Thank you very much.
° (I think the technique is known as "off canvas")
You must have put the sidebar at the top of your page, thats why it scrolls to top. To solve this, just use position:absolute;
Related
Not sure if the title made sense, but I noticed in the wordpress 3.8.1 admin panel, If you resize your window to where the sidebar has menu items blocked from view, it is normal positioning, which allows the sidebar to scroll.
If all the items are visible, then the sidebar has fixed positioning so that only the content to the right of the sidebar will scroll.
Neat little effect.
I was thinking it requires jQuery to add a class or change css. Maybe if the last item in the sidebar is visible then add the class, else leave it alone.
Not sure how to actually code that though.
Can someone help out, maybe even a basic fiddle?
You can do this with simple CSS.
.div_name {
position:fixed;
}
check W3schools Position fixed property for tags
I have a jQuery plugin that makes pages dynamic (found here: http://css-tricks.com/dynamic-page-replacing-content/ - Demo here: http://css-tricks.com/examples/DynamicPage)
My nav bar is in the footer (I know this is not generally a good idea but it suits the layout and objective of my website).
When there is not much content on the page, obviously the footer is in view on the window so no action needs to be taken. However, when a longer dynamic page is loaded which requires a scroll bar, the footer is pushed out of the window to make space for the content.
I want the footer to STOP and fix itself to the bottom of the window if the dynamic page creates a scrollbar, essentially so the navigation is always in view.
I've looked at other solutions on this site, but it's all either to permanently stick the footer to the bottom of the window, or only fix to the top when scrolling. I've tried inverting those solution values (i.e. changing top to bottom) but to no avail.
Could anyone help?
wrap in a DIV with overflow auto or scroll
So I found a problem with my website so have added in
“-webkit-overflow-scrolling: touch”
So that the scrolling left-right now works when content overflows (all the content is within an iframe). However I've noticed that when you scroll either vertically or horizontally within this iframe any content that wasn't initially draw on the page is not shown, it's just white.
Is there something I'm missing?
http://cantina.co/2012/03/06/ios-5-native-scrolling-grins-and-gothcas/
This pretty much sums it up, and provides one pretty poor but usable implementation. The fault lies with Apple and this will be a temporary workaround.
I am using a Superfish plugin to display menu pop-ups but the problem is when a menu item is big it gets overflow from viewport.
How can I adjust the position of pop-up menu to always keep it in the viewport.
I've helped someone turn superfish into a megadropdown and I think this may be a nice clean way to reformat your code with only HTML & CSS changes. Otherwise, I think you'd have to resort javascript/jQuery.
When I take mouse over the Navigation menu links (About Us..), the page moves to left. Is that due to javascript?
link text
It's because of the scrollbar that appears at the browser window's right side. It seems to me that there is a design error causing the content to be much larger with the menu hovered ...
if you hover the menu, the page gets so long that scrollbars occur - and that causes the page to "move to left" (it stays in the center of your viewport, which is what it should do). to fix this, find out whats causing this overflow (the page isn't looking that long, i don't know where the scrollbars come from) or set overflow-y:scroll for your body, so there's always a scrollbar (which would be the bad "i don't know what else to do to fix this"-solution)
Try moving the UL dropdown elements away from the bottom of the page or set them to display:none until after you've absolutely positioned them at the top of the page. visibility:hidden does not take the elemtens out of the flow of the document but just hides them.
A better bet though would be to make them children of the <a> tags you already have, so they only need to be displayed rather than displayed and moved.