CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Sungpah Lee
Sungpah Lee

Reputation: 1021

How to move elements that are within the overflowing div with Jquery?

I'm trying to move elements that are within the overflowing div with Jquery command. Here I'm attaching the image. enter image description here

I attach the image of what I'm trying to implement. The blue dotted box has a red box that overflows the blue box(parent). I hope that the red box will move within the blue dotted box with Jquery. 

        <div style="position:relative;">
          <div class="row" id='blue_box'
            style="overflow:scroll; overflow-y:hidden;
            width:100%; border:10px dotted blue;">
            <div id = 'red_box' class="col-xs-12 col-sm-12 col-md-12 col-lg-12"
              style="display:flex;justify-content:space-around;
              width:90vw; max-width:1296px; height:32vw; margin:10px;
              border: 1px solid red;">
              <div style="width:80vw;
                height:32vw;
                border:10px solid transparent;
                max-height:467px;">
              content..I want to move red box that is overflowing within the blue box..
              </div>
            </div>
          </div>
        </div>

How can I approach this problem? How can I use scrollTop(?) or scrollRight with which reference? I would love to eventually put the implemented function to the button (purple arrow)..

Please share your insight with me! I'm looking forward.

Upvotes: 0

Views: 130

Answers (1)

hashchange
hashchange

Reputation: 7225

Let's start with the outline of a solution:

  • When the user hits the move button (mousedown), initiate a programmatic scroll, at slow speed, to the right end of the inner pane.
  • When the user stops holding down the mouse key (mouseup), stop the programmatic scroll.
  • Make it work for touch-enabled devices, too, by adding the necessary events.

With jQuery.scrollable (which I have written), this is a matter of just a few lines. Assuming a scroll container #outer, and controls for left and right movement (#left and #right), this is a working solution:

$( function () {
  
  var $container = $( "#outer" ),
      $left = $( "#left" ),
      $right = $( "#right" ),
      $both = $left.add( $right ),
      
      opts = { duration: 2000 };
  
  $left.on( "mousedown touchstart pointerdown", function () {
    $container.scrollTo( "left", opts );
  } );
           
  $right.on( "mousedown touchstart pointerdown", function () {
    $container.scrollTo( "right", opts );
  } );
  
  $both.on( "mouseup touchend pointerup", function ()  {
    $container.stopScroll();
  } );
  
  // Controls are inside the scrolling area, so exclude them
  // from automatic detection of user interaction, see
  // https://github.com/hashchange/jquery.scrollable#exceptions-for-selected-elements
  $both.on( "mousedown touchstart pointerdown", function ( event ) { 
    event.stopPropagation(); 
  } );
  
} );

Have a look at this simplified demo (code view) to see it at work.

Upvotes: 1

Related Questions