Home/ Questions/Q 8375999
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T15:19:10+00:00

I know that the question is confusing but let me explain what I’m trying

  • 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.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0