Resizing of div by dragging

Question

Resizing of div by dragging

2.9k Views Asked by nagesh At 19 October 2024 at 16:34

Page layout

As depicted by the image I want to resize the "Document Icons" Div by dragging upwards and it should be accommodated by decreasing the height of "Document Viewer". I need a temporary slider to show the dragging on the screen.

Question modified: HTML

<div id="centerDiv" class="centerDiv" style="position:relative;float: left;width: 63%;height: 600px;border-right: 10px solid #ddd;">

<div class="header" style="width: 100%;height: 15px;background-color: #ddd;"></div>

<div class="documentViewer" id="documentViewer" style="width: 100%;height: 500px;margin-bottom: 5px;">
    <iframe id="frameValue" name="frameValue" src="NoDocument.html" width="100%" height="500px" style="margin-bottom: 5px;"></iframe>
</div>

<div class="dragDiv" id="dragDiv" style="width: 100%;height: 15px;cursor: row-resize;background-color: green;"></div>

<div class="iconList" id="iconParent" style="position:relative;width: 100%;height: 70px;background-color: #ddd;"></div>

Jquery

$('#dragBar').mousedown(function(e) {
    e.preventDefault();
    dragging = true;

    var main = $('#documentViewer');

    var scrollBar = $("<div>'",
                    {id:'scrollBar',
                    css: {
                        height: '5px',
                        top:'530px',
                        left:'40px',
                        z-index:'100',
                        background-color: 'red'
                     }
                    }).appendTo('body');
    $(document).mousemove(function(e) {
      scrollBar.css("top",e.pageX+2);
   });

    if(dragging) {            
        $(window).mouseup(function(e) {
            $('#position').html(e.pageX +', '+ e.pageY);
            $('#iconParent').css("height",e.pageY+2);
            $('#documentViewer').css("height",(600-(e.pageY+30)));
            $(document).unbind('mousemove');
        });
    }
});

Original Q&A

There are 1 best solutions below

**Thomas Theunen** · Answer 1

You can make use of jQuery UI for something like this. It supports resizing of certain items. You can find the example here. Although this is on the element itself and not another element. But you could do it like this:

$("#resizable").resizable();

#resizable {
  width: 150px;
  height: 150px;
  padding: 0.5em;
}
#resizable h3 {
  text-align: center;
  margin: 0;
}
.buttons {
  position: absolute;
  bottom: 0px;
  text-align: center;
}
.content {
  height: auto;
  overflow: scroll;
  overflow-x: hidden;
  height: 100%;
  margin-top: -5px;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>jQuery UI Resizable - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
</head>

<body>

  <div id="resizable" class="ui-widget-content">
    <p class="content">Content
      <br />Content
      <br />Content
      <br />Content
      <br />Content
      <br />Content
      <br />Content
      <br />
    </p>
    <div class="buttons">buttons</div>
  </div>


</body>

</html>

Resizing of div by dragging

There are 1 best solutions below

Related Questions in JQUERY

Related Questions in HTML

Related Questions in CSS

Related Questions in RESIZE

Related Questions in DRAGGABLE

Trending Questions

Popular # Hahtags

Popular Questions