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.
Related
I used display:none for one of sections so its visible only on devices with less than 576px. And anchors are wrong, and scrolling jumps from second to first section. How to fix it?
This is the
page
According to GitHub's plugin docs, this is still an open issue that needs to be fixed by the lib's developer. What he mentioned as a workaround is destroying fullpage.js and reinitializing it again without the faulty section. (Whenever you are going to do that is up to you to find appropriate, whether on screen width resize, page loads, etc etc)
I am doing an website where I have to keep one image fixed to the screen and on scroll I want different elements to appear one by one and stick to one position. When this is done I continue to the footer of the website.
I have done tried to reach that but whatever I do the page keeps scrolling and does not wait for all the elements to appear on the screen.
Example of what I want to do can be seen here Link on the second page where the mobile phone it is sticked in the screen and on scroll different content appear one by one.
How do I achieve this ? What kind of libraries would you suggest?
Thank you in advance.
stuff like this is usually done with js libriaries, as you already wrote. One that is actively supported and works quite well is Scrollmagic. It should be able to do what you describe, at least it can do the stuff in the example you linked: It can "pin" elements on the page for a defined duration (= "scroll duration") or animate elements controlled by the scroll position.
Scrollmagic can be found on Github or here: http://scrollmagic.io/ , examples to be seen here: http://scrollmagic.io/examples/index.html
Your fixed html content should have css position: fixed;.
Have you tried position: sticky? There may be browser compatibility issues but there are polyfils out there to fix that.
Check it out here: http://bit.ly/16DJQjN
When I resize the window down to a lower resolution, everything is fine, the navigation menu turns into mobile version. But just try to get the page narrower and refresh the page, you'll see the items drop down one after another in an irregular way, just resize it once more, it's perfect again. That way, it doesn't seem alright on lower resolution devices when first opened.
To give you an idea of what it looks like, that's how it looks when the page is opened in this resolution.
But when I just resize it in any way, it looks perfect, see:
I checked the JS and CSS, obviously it's not done with media-queries thing, I believe it's pure jS. How do I fix it? Can you help me?
Add this css to your style sheet this will hide menu until javascript load.
.responsive_nav ul{
display:none;
}
I'm hoping somebody is able to point me in the right direction with what I'm hoping to achieve. I'm building a responsive site, and have a traditional navigation menu spanning the top, with several items inside.
I need for this menu to shrink when the page gets narrower, but rather than the navigation menu breaking I would like for the items that don't fit to go underneath a "More..." drop down tab. Does this make sense? Here's a graphical representation...
So the top image would be what it might look like with 1024 width, and below is the 768 width.
The content in the menu is unknown so the widths would vary, so I'd need to calculate the width of the combined links and then anything more than that would get put underneath the More.. dropdown.
Any tips would be greatly appreciated, just not sure where to start at the moment.
Thanks
Implementing this is quite simple, if the menu can be static and doesn't have to adjust when the window is resized; #skip405's example is a really good solution in this case (+1).
If the implementation has to adjust the menu dynamically on window resize, it get's tricky though... The window.onresize event is fired quite often while the user scales the browser window, so a naive implementation (e.g. #skip405's approach executed on every event) would be too slow/expensive.
I'd solve the problem as follows:
Calculate and add up the outer width of all links at the beginning.
Append all available links to the "more" tab (cloning) so they can be shown/hidden dynamically. This is much faster than creating new (resp. destroying) DOM elements all the time.
Bind a handler to the onresize event. In the handler, get the current menu width and compare it to the width of the links. Hide all links that don't fit in the menu and show their counterparts in the "more" tab. The same goes the other way round for showing links if the menu is wide enough.
Here's my implementation: http://jsfiddle.net/vNqTF/
Just resize the window and see what happens. ;) Note that the solution can still be optimized of course - it's just an example.
Here's a nice jQuery plugin that may solve the problem: https://github.com/352Media/flexMenu
Also be sure to check out a great article providing a step-by-step instructions on how to organize this kind of flexible navigation using the aforementioned flexMenu plugin: http://webdesign.tutsplus.com/tutorials/site-elements/a-flexible-approach-to-responsive-navigation/
I think my variant may be a starting point for you. I'm a novice in jQuery and am learning a lot myself - so anybody, feel free to correct (and improve) my method or my logic :)
My starting point is here: http://jsfiddle.net/skip405/yN595/1/
To see it in action you need to resize the Result window so that there were 3 or 4 items in a row (not 7) and press Run again. Hover over More to see the rest of them.
In this fiddle I calculate the width of the list items in a loop and compare it with the width of the whole menu. When the calculated width of the items becomes higher than that of the menu - we can get the number of visible lis at the moment.
NB: This code works on document.ready and won't work on resizing of the window yet. So press Run when you resize the window for now.
I'm trying to create a flyout menu that has scrolling build in if its larger than the screen. I can't seem to figure out how to do this with the native overflow-y scrolling properties. Everytime I seem to set that overflow-y:auto then the the menu that flys out is nested within the parent div with a scroll bar.
Anyone has any ideas?
Thanks!
This is not a solution of mine, but you can try this.. it has a really nice effect and serves your purpose:
http://css-tricks.com/examples/LongDropdowns//
you should set the max-height proparty for the div otherwise it cant tell (since it is sort of absolutely positioned) where to stop, or u can set the height for older browsers, or you can javascript it, change height dynamically until it reaches a maximum