detect 2 rows in navigator and force toggle - javascript

He all guys, im have some issues I cannot fix. First of all I need to commentar that all my content is dynamic so, its why i'm not doing fix width. I have a main horizontal navigator with some "categories" but these re totally dynamic. The problem is, i would like to make a toggle menu (when this navigator overflow/collapse).
Example:
https://jsfiddle.net/d81bgzkx/
So, depend the window width many times it goes 2 rows... and its then when I want it to force the toggle menu.
Is it possible?
If it is, thank you guys!

Related

React Virtualized: sticky content in a Collection

Is it possible to let the content of a cell in a react-virtualized Collection stick to a side when scrolling? I normally do this by using position sticky but this does not work for the content in a Collection.
I'm building a Grid TV Guide like the one in the image below. When scrolling the content of the most left visible cell of a row should stick to the left side of the screen.
I am able to get this working without using react-virtualized, but after scrolling through the guide for a while too much data is rendered and the page becomes very slow.
Can any of you help me? I would be very grateful.
Thx in advance!
One possible approach is to make an extra element that looks like the column that is to be sticky, and positioning it over it, e.g. https://codesandbox.io/s/l5z0wvpj77

Dropdown menu on navigation bar disappears behind when scrolled down

this is the website I am trying to set up: http://koralhassan.com
I have adjusted the template to make the CV section a hover-dropdown section. However, when I scroll down, the dropdown menu no longer appears when hovering. I am trying to find a way to either make the it appear, or make the dropdown expand to the right of the CV section instead of below it (which I think would also solve the problem). I have very little programming knowledge so please don't throw me in the deep end. Thank you!
Your class .w3-bar has property overflow: hidden.
Remove it and it should be fine.

Creating drop-able menu when resizing browser window

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. :)

Responsive navigation menu, items "tuck under" eachother

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.

How do I make something look like a tab after it is clicked

Alright, so the title may not be the best way to describe what i am trying to do, but i am not sure quite how to phrase it.
To start of (when the page loads) there are 20 'tiles' which serve as buttons on a page. They are divs. The 5 on top are larger and the rest of the rows are the same size.
Once one of the buttons is clicked, i want a div to show under the row of the button that is clicked. I know how to do this part using jquery toggle. Here is an example of what i will want it to look like once a button is clicked.
You can see in the drawing how i want it to sort of look like a tab once it is clicked. I am having trouble thinking of how i am going to add the part that ties the button div into the div that is toggled in the middle of the rows. This part:
I sort of thought that i could make 5 images, one for each column of buttons, that has that little part of background color, and toggle the image as well. I believe that there is a better way to do this so i am looking for a steer in the right direction. I have had some trouble searching for something like this as I dont really know what to call it so i thought i would come here for help. Thanks!
I would increase the height of the tile when it is clicked (so that it expands down from the upper red line to the lower red line shown in the last image).
It can all be done just with CSS (using the checkbox hack in the same way I made this div to increase its height) or with JavaScript (if you want reliable behaviour for IE8 and especially IE7).
Like this fiddle :
http://jsfiddle.net/techunter/ph8vY/

Categories

Resources