0

I know that the question is confusing but let me explain what I'm trying to achieve.

Say i have the following css and html.

<style>  
   body{ height: 10000px;}  
   #revolve{ border: 1px solid red; width: auto; height: auto;}  
</style>

<body>  
  <div id="revolve">  
    <ul>  
      <li> one </li>  
      <li> two </li>  
      <li> three </li>  
    </ul>
  </div>
</body>

Because the body is set to ten thousand pixels, on a normal use of the scroll wheel the whole page would scroll down as normal.

I want to be able to change the position of the < ul> elements such that when the mouse cursor is over the "revolve" div element, to use the scroll wheel to swapt the position of the elements rather than scrolling the 10000px page. I also need all my < li> elements to be visible at all time and the div to be able to accommodate any other < li> elements if needed.

(eventually my desired result would be in the following order of < li> elements)

<li>  two </li>  
<li>  three </li>  
<li>  one  </li>

Now setting the div element to a certain height and "overflow: scroll;" wont give me the result I want. I thought of a long and complicated way to do it, but maybe there is someone experienced who can show me a nice and elegant way to achieve it.

2 Answers 2

1

you can try position: fixed; top: 20px; left: 20px; inside #revolve, to keep on the page all the time Let me show you as below in example,

<style>  
   body{ height: 10000px;}  
   #revolve{ position: fixed; top: 20px; left: 20px; border: 1px solid red; width: auto; height: auto;}  
</style>

<body>  
  <div id="revolve">  
    <ul>  
      <li> one </li>  
      <li> two </li>  
      <li> three </li>  
    </ul>
  </div>
</body>

you can use jQuery function to change position of <li> as below

You can use jQuery's .after() for moving elements around. I cloned one of them so the original can remain as a placeholder. It's like if you wanted to switch variables a and b, you'd need a third temporary variable.

$.fn.exchangePositionWith = function(selector) {
    var other = $(selector);
    this.after(other.clone());
    other.after(this).remove();
};

your code would be: $("#revolve ul li:eq(1)").exchangePositionWith("#revolve ul li:eq(3)");

i hope this would help.

1

the only way to achieve this would be using javascript. Changing the order of DOM elements requires scripting, defeintly if you want it to react on the scrollwheel. Note that this will be an unexpected behavioure wich could confuse your users an might put them of. I would think twice before actualy implementing this.

Keeping the div visible at all time is less complicated. Just look into fixed positioning with css (position: fixed; top: #px; left: #px;).

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.