So I am trying to achieve a responsive website.
Here is my navigation so far (Window is maximized):
What I am trying to achieve is that when the window is resized, a new tab will appear called menu. This will be a button which once clicked will show all the existing links I have.
I have two lists in two separate div's, ideally, when the window is resized, I would want the content from both lists to be view able in this new menu.
This is what it looks like when Chrome is resized to its lowest width:
As you can see, those links in the image (Stretches, posture etc), those should not be visible. They should dynamically show up once menu is clicked, which is another issue, clicking menu does nothing.
Everything I have can be found in this fiddle: https://jsfiddle.net/hudnybux/
This is quite a common use-case as im sure you can imagine. Googling it took me 5 seconds, this was the first one that popped up. It seems simple and straight forward to follow.
As a general rule at stack overflow, try looking around a bit before you ask a question...people will generally respond better to your answers. :)
Related
I asked a question a while ago with something similar but fixed the problem myself, I'm trying to get back into web design again as a hobby but I'm stumped.
I'm trying to create a sort of storybook/powerpoint effect, when next is pressed it'll load the next div (.slide) and the previous slide will close.
Here's a code pen of what I have: (buggy on codepen for some reason)
As you can see, it's functional but not very effective. I'm pretty new to JavaScript so I'm struggling. I'm not sure why it's acting broken on the codepen but works on browsers (probably a bad sign) but you can see the how it functions.
However I want to add more functionality/practicality to it and want to be able to navigate to particular slides with the Navigation sidebar. The way I've done it means that the slide can't really be specified since it's set to active using the previous/next buttons.
Any sort of help would be great, some available tutorials or previous questions with the same desired effect (I've tried finding something) or just pointing me in the right direction would be great (I wanna make sure I understand)
I am currently trying to make the new website for my school but I am having some problems with the responsive menu. Basically when I open the menu on a mobile device some of the links do not appear on the page as there are too many. When I try to scroll down through the list of links the menu just closes. I don't know what to do to solve the problem cos I've got no idea what's even causing it. Please help!
Any ideas?
You can see the page here
First Change the script order in your website. Jquery should be at top of all the remaining scripts. In your website it's different. See the below image.
and at the same time you are using ksmenu.js twice.
And for the issue you are asking is there is a script to hide menu on resize. Please see the below image.
So I wanted to do for my company's webpage, a thing where are links that belong to people, to make it when you click, you have a little menu where you can choose to send him a message or view his profile..
Before click:
After click:
I tryed to search for it, couldn't find anything of much valuable.. Maybe someone can help me out.
If you're looking for an easy way to do it, I recommend using jQuery (http://jquery.com/) with one of the popup plugins (http://plugins.jquery.com/tag/popup/). It's easy to install, and most of them have a working demo for you to test out before download.
Otherwise, coding a popup window with pure JS takes time.
This general method is to:
Create a hidden div
Position: absolute and play with the z-index so your div will be on top of all other elements.
Set the position to where you clicked, or somewhere around the area of the target.
Take into account the width and height of the window/screen. (i.e. No poing in showing a div that'll appear off screen).
Fill it in with information you need.
Make it appear.
The way I've done things like that in the past is to have a hidden absolute or fixed DIV layer that houses that message menu. Then have a click trigger make that div layer visible and positioned at the current mouse coordinates.
There should be a lot of articles on google telling you how to do the various stages of all those steps.
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.
In General:
I need my nav to behave like a mobile app (swipe effect), but WITHOUT accessing it via a mobile product. (So JQuery Mobile and such isn't applicable here... at least I don't think.)
Specifics:
My nav (example attached below) is a set of horizontally arranged icons. I would like to be able to scroll horizontally, but instead of simply scrolling the icons over, I'd like them to slide in increments (much like how an iPhone's pages slide into discrete positions with swipes across the screen.) This means regardless of how much the user scrolls, only the same amount of slide is performed.
View work-in-progress here
My Problem:
So I currently have this (crappy/buggy) version working, but it's based on JQuery's .mousemove() which means as I cause the menu to move, the cursor is still also moving and no longer over the icon I wish to click. If I based it on .scroll(), then the containing div would have to be scrollable (which would show the scrollbars).
So: Is there...
a) an example of this already done somewhere? or
b) a way to make a div scrollable but without showing the scrollbars
This site is being used in a specific way for a specific purpose, so please don't reply just to tell me that hidden scrollbars on a scrollable div is bad juju/annoying for the users.
I found something called "Web In Touch". Could this help?
Many MANY thanks in advance.
http://www.jacksasylum.eu/ContentFlow/
Have you tried content flow? It can do horizontal scrolling for you on button presses (and you can map this to something else). I understand this isn't what you want exactly, but it might work, since you want to horizontally flow/scroll image icons.