Resizing of div by dragging

Question

Resizing of div by dragging

2.9k views Asked by nagesh At 23 November 2024 at 17:09

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 answers

**Thomas Theunen** · Answer 1 · 2015-06-15 05:37:05

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>

TechQA.

Resizing of div by dragging

There are 1 answers

Related Questions in JQUERY

Related Questions in HTML

Related Questions in CSS

Related Questions in RESIZE

Related Questions in DRAGGABLE

Popular Questions

Popular Tags

Trending Questions