I'm working on a site which uses pure CSS and hover states to build the drop-menu. The problem is that the number of navigation items are so many that the a user has to scroll to see it on smaller laptops. But what happens is the menu disappears before reaching the bottom as if a mouseout event has occurred. Is there a way to prevent this without having to convert the menu to javascript/jQuery?
http://spinov8.com/SNS_demo/shop
Your dropdown seems to disappear with the rest of your navigation when you scroll down, as soon as you scroll upwards it reappears with your dropdown already open.
I removed the jquery that was making it disappear on scroll down and reappear on scroll up so that it remains fixed.
Related
I have a web page with two panels. The left panel takes up the majority of of the width and displays user posts. The right panel is a navigation menu so I want it to remain fixed and never roll off the screen.
When there are too many posts to fit on one screen, a scroll bar appears on the right of the screen (NOT the panel), and the user scrolls down. This is all good, except that the navigation menu scrolls off the screen.
Both panels are within a common div. I tried setting its position to relative, then making the nav panel position fixed, with a right offset of 0. This kept the nav panel on the screen, but on the far right (ie. not within the containing div).
How do I go about keeping the nav panel fixed on the screen, but floated to the right of it's containing div?
Thanks a million!
EDIT: For and example of what I mean, look at Facebook. You'll see that the posts column can extend on forever, but the right hand column (with the advertisements) stays on the screen...
You could use the Twitter Bootstrap Affix JS plugin:
http://twitter.github.io/bootstrap/javascript.html#affix
I have been playing around with -webkit-overflow-scrolling:touch; for a while and I getting randomly the following problem:
I only need scroll top/bottom ( width is fixed ), but sometimes the user needs to scroll left and right to
trigger the vertical scroll.
In other words, the user has to scroll horizontally to make the container scroll vertically.
again it is random, some times it just works.
I already have check all the relative positions for the child elements within the scroll.
any thoughts ?
I had as well a scroll that never broke and by looking at the html inside it I realised that if you apply the -webkit-overflow-scrolling:touch; in ul element it will never break.
the scroll that used to break had many elements within it and all I had to do was make the ul elements scrollable separately.
cheers
Ran into the same problem, been struggling with it forever until I did this:
Changed overflow-y: scroll to overflow: scroll. I've loaded up the page close to 20 times now and haven't experienced the left/right going up/down weirdness.
I work on a complex web application that uses multiple iframes. I have a window.setInterval setup that removes native scrolling from hidden iframes and adds it to the visible iframe. This works great except I experienced the same issue where I had to swipe left / right to scroll up down. I noticed if you opened or clicked on a different browser tab and then clicked back it fixed itself. We fixed our issue by adding the following jQuery after we apply the native scrolling to the visible iframe:
$(window).height($(window).height());
I am thinking this must force a repaint similar to clicking on a different tab and then clicking back does. Hopefully this helps someone in a similar situation!
As stated in the comments by Graygilmore. This worked for me:
// NOTE 2019-04-09: [referenced link was removed]
Make sure no parent element of the scrollable area is visibility:hidden or display:none.
I have some dropdown menus that are display:none and only show upon click (using jquery). However, there are divs that have been placed in positions that lie "underneath" the dropdown menu. They have to be underneath considering the dropdown must go overtop everything when it it shows up. However, is there anything I can do to "click through" these dropdown divs?
I know that there is "pointer-events:none" But this would seem to disable all clicking on the dropdown menu, which I cannot have.
I've seen 100s of websites with dropdown menus that cover entire sections of their website. However, when not in use, these menus don't block divs that are positioned "underneath" so what's the solution here?
Is it something I need to fix with the positioning of my dropdown menus?
Any and all help is appreciated. It took me forever to even discover the problem. I was so stumped as to why my divs weren't clickable! Then I did "clear:both" and it moved down and finally realized the hidden divs were in the way.
It seems like you're using opacity: 0 on these dropdown divs, which keeps them in place, and block the mouse events from firing on the elements underneath.
You should be hiding them differently, with either of the following:
Use visibility: hidden or display: none (if you want to also hide it from screen readers)
Absolutely position them off the visible viewport, by using a huge negative offset (e.g. -999em).
This will ascertain that they're still readable by screen readers.
Alternatively, you can toggle pointer-events:none together with its visibility, but old IE does not support pointer-events.
I had this idea for a website of creating a fixed horizontal navigation bar that simply scrolls through the content when you press the menu items but I wanted to have an "introduction" div on top of it with a background image and a logo, lets say of 300px height that displays when you first load the page.
So the navigation bar would appear attached to the bottom of this "introduction" div and only when you scrolled past it would it become attached to the top of the window and become fixed positioned when you scrolled.
If you clicked a certain menu item or if you simply scrolled up to the start of the page it would attach itself to the bottom of the "introduction" div again.
Is this possible to do simply with CSS or would I have to use javascript to achieve this effect?
Thanks in advance!
I think you'll need JavaScript for this one. It will not be hard however. The only thing you need to do is to switch the positioning of the menu to 'fixed' when the menu would otherwise scroll out of the viewport.
I have a dynamic sub-menu that gets programmatically constructed in the code behind. Whenever a large amount of items are added, the scroll arrow appears to allow scrolling of the sub-menu, but when it does appear, it also seems to truncate the menu text because the sub-menu width is not correctly sized to accommodate the text.
The problem is not the scrolling itself; that is working the way I want it to. The problem is that the menu width is shortened and this is truncating the menu text when the scrolling arrows are presented for large menus.
This problem seems to be in IE7, because it is working fine in IE6, the width of the menu is of the appropriate size to fit the text. Has anyone experienced this before and how did you fixed it?
you can wrap the menu in a div and set overflow:scroll on that, but that applies to the entire menu, not the drop-down part. You can't change the drop down part on the standard menu, but it you use the CSS Adapters (http://www.asp.net/cssadapters/) you can change the size and scroll capabilities of the drop-down parts. However, this gives the standard scrolling - you see a scroll bar around the section and you have to scroll manually, it's really not a very nice experience. What you probably want is something that gives an arrow at the top/bottom to allow scrolling as you hover over it, to bring the items into view; this cannot be done without rewriting the menu control. If you need this functionality you might be best to look at a third party menu control, or even one of the ajax frameworks which might have something. jQuery...