javascript - Making a vertical UL slider -


I would like to create a vertical menu that has a certain height, when you press the arrow, slide up and down.

How will I know my head how to work with offset to jump Now I take relative offsets from the next item and jump over it. But it does not do that which is supposed to be done. Even more, this is not right. I think I want to know that the bottom of UL has been displayed in the div. If so, there is no need to move the down arrow anymore. But how can I know?

  // The next element is var offsetNextLi = jQuery ($ nextElement). Event (); $ LiScrolledto = $ next element; JQuery ("ul #inline_navigation"). Chetan ({scrollTop: offsetNextLi.top}, 500);  

This is my answer:

< P> Offset is relative, but your example has a steady li height, so you can use a continuous step. Or calculate the next invisible external li element To do this, I spew a small JSFDL.

  (function ($) {$ (document) .ready (function () {// slide on jQuery ("# ​​arrowup"). ("Click", function () {Var $ Ul = $ ('#inline_view'); var y = $ ul.scrollTop (); var $ firstChild = $ ul.children (). First (); var step = $ firstChild.outerHeight () + parseInt ( $ FirstBild (y ', y, phase); if (y> = 0) {y - =; console.log (' later ', y) .css (' marginbottom '), 10); console.log ; $ Ul.stop (). Chetan ({scrollTop: y}, 100);}}); // slide below ("# arrowdown"). ("Click", function () {var $ ul = $ ('#inline_navigation'); var y = $ ul.scrollTop (); var h = $ ul.height (); var $ firstChild = $ ul.children (). First (); var step = $ firstChild.outerHeight () + ParseInt ($ firstChild.css ('marginbot '), 10); console.log (' beforehand ', y, phase); if (h> = y) {y + = step; Console.log (' later ', y); $ ul .stop (). Chetan ({scrollTop: y}, 100);}});});} (JQuery));  

This code has not been optimized, it is for instructional reasons only to see a list of each click in the list "ul", by specifying y variables by jQuery's scrollTop () function Relatable coordinates get. For example, this step can also be equal to 59 or I am sad as before calculation.

Then checks whether y breaks the top or bottom, so it looks at the bottom of the height, and 0 records the y upwards. The rest is almost the same for the top and bottom, only the sign + leads to -

Hope it helps the code be more reusable and can be customized, as well as the key Press.


Comments

Popular posts from this blog

import - Python ImportError: No module named wmi -

Editing Python Class in Shell and SQLAlchemy -

c# - MySQL Parameterized Select Query joining tables issue -