There is a horizontal menu:

alt text

On different pages it is different, both in the width of the components (from one short word to several long words) and by their number. The total width can greatly exceed the permissible width of the parent.

It is required to display this menu in one line, on the principle of "carousel" . As, for example, here , only instead of the images to scroll through the menu components. The problem is exacerbated by a rubber design.

It turns out that we need a carousel of unknown width for elements of unknown width.

I would like to find a jQuery plugin , but I don’t manage to google the right carousel needed in the legion of ordinary merry-go-rounds.

Tell me, please, how and where to find solutions? Can anyone come across a suitable plugin? You can, of course, try to write yourself, but the task seems too complicated for me at the moment (offhand it is no longer clear how to draw elements as an endless line, how to calculate its width, how to determine that the line has docked to the border, etc.)

  • one
    @Cypher, I think that you can hardly find a ready-made solution, because Your task is quite specific. Most likely, you have to write yourself. - Deonis
  • Let's not try too hard, I will try it myself first and I will ask for help step by step. It seems to me two algorithms: 1) Display the page. Calculate the width of all <li> - thus get the total width. Set this width to <ul>. Along with absolute positioning and width, output <ul> in one line. We turn <ul> into <div>. Diva overflov hidden and also find out its width (repeat at resize). Next, we compare and launch the carousels that manipulate the left value by 200px by clicking on the controls. - Cypher
  • 2) Create an array of lengths. One element of the array is the length of one li. Store the current first fit item and the current last fit item. By clicking on the controls, shift to the neighboring element by subtracting its width from the left. Thereby we get a more accurate scrolling: element by element. But it seems that this approach is much more complicated. - Cypher
  • @Cypher, yes, of course, try it yourself. Just do not advise immediately resort to modification of a plugin. Gentlemen, offering such, do not take into account one main nuance - the problem is not in the scrolling of elements, but in the dynamic change in the width of each. Fill them in such a way that the elements are clearly included in the viewing area, and not clipped to half way. - Deonis
  • Zakodil first algorithm. Everything is not so bad :). jsfiddle.net/Cypher/NLm8P/8 Step by step you can see the course of my thoughts from the first version :) ... / NLm8P / ... / NLm8P / 1 / etc. It is very hard for me to deal with two things: a) why in the process of integer calculations, after a few steps, the browser starts to produce values ​​of variables like 100.0000014134 or 99.999999992342? b) How to optimize code in a function and call it when the window is resized. How to collect subtasks in the function. How to deal with global variables? - Cypher

3 answers 3

I wrote you a small plugin . Commented through time, because just tired for the day. If it is not clear what - ask. Revise the plugin, optimize, correct my mistakes and excesses and use on health)).

PS The plugin, of course, can be taken out in a separate file. Connection example - at the very bottom of the code.

PPS Group of elements painted in different colors for clarity.

  • Thank you :). Honestly, I don’t know how quickly I can figure it out :) But I think there will be questions next week :) - Cypher

  1. Take the plugin for jQuery - jCarousel.

  2. Few code rules for our realities

  3. PROFIT

You can see it here: http://michaelsolovyev.com/en/breakfast.html

If it works, you can steal it, for I ruled the plugin

  • Thanks, let's try :) - Cypher

See carouFredSel. Very "flexible" carousel can do.