{"id":10093,"date":"2024-01-19T18:14:00","date_gmt":"2024-01-19T18:14:00","guid":{"rendered":"https:\/\/codehim.com\/?p=10093"},"modified":"2024-01-22T16:16:51","modified_gmt":"2024-01-22T11:16:51","slug":"resize-div-by-dragging-border-in-javascript","status":"publish","type":"post","link":"https:\/\/codehim.com\/layout\/resize-div-by-dragging-border-in-javascript\/","title":{"rendered":"Resize div by Dragging Border in JavaScript"},"content":{"rendered":"<p>This JavaScript code snippet helps you to resize div by dragging border. It initializes a split view layout with resizable containers. The method `splitview.addEventListener` listens for resizing events like horizontal and vertical resizing, start, and stop, triggering the function `call(e)` to log the event details. This functionality helps create interactive interfaces with resizable divs by drag-and-drop actions.<\/p>\n<h2>How to Create Resize Div By Dragging Border In Javascript<\/h2>\n<p>1. First of all, load the Splitview CSS by adding the following CDN links into the head tag of your HTML document.<\/p>\n<pre class=\"prettyprint linenums lang-html\">&lt;link rel=\"stylesheet\" type=\"text\/css\" href=\"https:\/\/cdn.rawgit.com\/luisreyes\/SplitviewJs\/master\/lib\/splitview.css\"\/&gt;\r\n&lt;link rel='stylesheet' href='https:\/\/raw.githubusercontent.com\/luisreyes\/splitview.js\/master\/lib\/min\/splitview.min.css'&gt;<\/pre>\n<p>2. Include the necessary HTML structure with div elements representing the containers you want to resize.<\/p>\n<pre class=\"prettyprint linenums lang-html\">&lt;section id=\"work-space\"&gt;\r\n    \r\n    &lt;section id=\"container0\"&gt;\r\n      &lt;span&gt;\r\n        &lt;h2&gt;Your Content Here&lt;\/h2&gt;\r\n        &lt;p&gt;Consectetur adipiscing elit. Quisque nec tempor sem, quis pulvinar quam. Aenean iaculis tempor sem. Nunc sed tincidunt augue, et ultricies eros. In hac habitasse platea dictumst. Vivamus condimentum vehicula porta. Nulla sapien velit, scelerisque non suscipit eu, malesuada eget nisl. Pellentesque gravida a nunc in volutpat. Donec pulvinar nulla massa, eu placerat lacus facilisis eget. Etiam vel cursus erat, sed ultricies felis. Etiam turpis nisi, lacinia eu velit posuere, ullamcorper tincidunt urna. Maecenas blandit nisi felis, quis condimentum dui viverra a.&lt;\/p&gt;\r\n\r\n        &lt;p&gt;Donec vehicula risus id vulputate sodales. Donec convallis varius elementum. Cras iaculis orci id nulla ornare posuere. Sed ullamcorper eget lacus in dictum. Vivamus eget cursus lorem. Curabitur pulvinar pellentesque tellus, nec posuere tortor sollicitudin eget. Ut consectetur placerat lorem quis ultricies. Donec varius sapien quis turpis vestibulum mattis id et leo. Cras eleifend ante at urna lacinia, non dapibus dui consectetur. Suspendisse id iaculis risus, at eleifend eros. Suspendisse nec mollis ipsum. Maecenas et nunc vitae dui molestie eleifend et vel augue. Nunc ac nibh sed ligula cursus elementum a vitae sapien. Suspendisse quis felis et arcu fringilla pellentesque id id tellus. Nullam ut ullamcorper arcu. Pellentesque ac tempus turpis.&lt;\/p&gt;\r\n      &lt;\/span&gt;\r\n    &lt;\/section&gt;\r\n    \r\n    &lt;section id=\"container1\"&gt;\r\n      &lt;span&gt;\r\n        &lt;h2&gt;Your Content Here&lt;\/h2&gt;\r\n        &lt;p&gt;Consectetur adipiscing elit. Quisque nec tempor sem, quis pulvinar quam. Aenean iaculis tempor sem. Nunc sed tincidunt augue, et ultricies eros. In hac habitasse platea dictumst. Vivamus condimentum vehicula porta. Nulla sapien velit, scelerisque non suscipit eu, malesuada eget nisl. Pellentesque gravida a nunc in volutpat. Donec pulvinar nulla massa, eu placerat lacus facilisis eget. Etiam vel cursus erat, sed ultricies felis. Etiam turpis nisi, lacinia eu velit posuere, ullamcorper tincidunt urna. Maecenas blandit nisi felis, quis condimentum dui viverra a.&lt;\/p&gt;\r\n\r\n        &lt;p&gt;Donec vehicula risus id vulputate sodales. Donec convallis varius elementum. Cras iaculis orci id nulla ornare posuere. Sed ullamcorper eget lacus in dictum. Vivamus eget cursus lorem. Curabitur pulvinar pellentesque tellus, nec posuere tortor sollicitudin eget. Ut consectetur placerat lorem quis ultricies. Donec varius sapien quis turpis vestibulum mattis id et leo. Cras eleifend ante at urna lacinia, non dapibus dui consectetur. Suspendisse id iaculis risus, at eleifend eros. Suspendisse nec mollis ipsum. Maecenas et nunc vitae dui molestie eleifend et vel augue. Nunc ac nibh sed ligula cursus elementum a vitae sapien. Suspendisse quis felis et arcu fringilla pellentesque id id tellus. Nullam ut ullamcorper arcu. Pellentesque ac tempus turpis.&lt;\/p&gt;\r\n      &lt;\/span&gt;\r\n    &lt;\/section&gt;\r\n    \r\n    &lt;section id=\"container2\"&gt;\r\n      &lt;span&gt;\r\n        &lt;h2&gt;Your Content Here&lt;\/h2&gt;\r\n        &lt;p&gt;Consectetur adipiscing elit. Quisque nec tempor sem, quis pulvinar quam. Aenean iaculis tempor sem. Nunc sed tincidunt augue, et ultricies eros. In hac habitasse platea dictumst. Vivamus condimentum vehicula porta. Nulla sapien velit, scelerisque non suscipit eu, malesuada eget nisl. Pellentesque gravida a nunc in volutpat. Donec pulvinar nulla massa, eu placerat lacus facilisis eget. Etiam vel cursus erat, sed ultricies felis. Etiam turpis nisi, lacinia eu velit posuere, ullamcorper tincidunt urna. Maecenas blandit nisi felis, quis condimentum dui viverra a.&lt;\/p&gt;\r\n\r\n        &lt;p&gt;Donec vehicula risus id vulputate sodales. Donec convallis varius elementum. Cras iaculis orci id nulla ornare posuere. Sed ullamcorper eget lacus in dictum. Vivamus eget cursus lorem. Curabitur pulvinar pellentesque tellus, nec posuere tortor sollicitudin eget. Ut consectetur placerat lorem quis ultricies. Donec varius sapien quis turpis vestibulum mattis id et leo. Cras eleifend ante at urna lacinia, non dapibus dui consectetur. Suspendisse id iaculis risus, at eleifend eros. Suspendisse nec mollis ipsum. Maecenas et nunc vitae dui molestie eleifend et vel augue. Nunc ac nibh sed ligula cursus elementum a vitae sapien. Suspendisse quis felis et arcu fringilla pellentesque id id tellus. Nullam ut ullamcorper arcu. Pellentesque ac tempus turpis.&lt;\/p&gt;\r\n      &lt;\/span&gt;\r\n    &lt;\/section&gt;\r\n    \r\n    &lt;section id=\"container3\"&gt;\r\n      &lt;span&gt;\r\n        &lt;h2&gt;Your Content Here&lt;\/h2&gt;\r\n        &lt;p&gt;Consectetur adipiscing elit. Quisque nec tempor sem, quis pulvinar quam. Aenean iaculis tempor sem. Nunc sed tincidunt augue, et ultricies eros. In hac habitasse platea dictumst. Vivamus condimentum vehicula porta. Nulla sapien velit, scelerisque non suscipit eu, malesuada eget nisl. Pellentesque gravida a nunc in volutpat. Donec pulvinar nulla massa, eu placerat lacus facilisis eget. Etiam vel cursus erat, sed ultricies felis. Etiam turpis nisi, lacinia eu velit posuere, ullamcorper tincidunt urna. Maecenas blandit nisi felis, quis condimentum dui viverra a.&lt;\/p&gt;\r\n\r\n        &lt;p&gt;Donec vehicula risus id vulputate sodales. Donec convallis varius elementum. Cras iaculis orci id nulla ornare posuere. Sed ullamcorper eget lacus in dictum. Vivamus eget cursus lorem. Curabitur pulvinar pellentesque tellus, nec posuere tortor sollicitudin eget. Ut consectetur placerat lorem quis ultricies. Donec varius sapien quis turpis vestibulum mattis id et leo. Cras eleifend ante at urna lacinia, non dapibus dui consectetur. Suspendisse id iaculis risus, at eleifend eros. Suspendisse nec mollis ipsum. Maecenas et nunc vitae dui molestie eleifend et vel augue. Nunc ac nibh sed ligula cursus elementum a vitae sapien. Suspendisse quis felis et arcu fringilla pellentesque id id tellus. Nullam ut ullamcorper arcu. Pellentesque ac tempus turpis.&lt;\/p&gt;\r\n      &lt;\/span&gt;\r\n    &lt;\/section&gt;\r\n  \r\n  &lt;\/section&gt;\r\n<\/pre>\n<p>3. Add the following CSS code to your stylesheet or within a <code>&lt;style&gt;<\/code> tag in the HTML to define the appearance of the divs and split view layout.<\/p>\n<pre class=\"prettyprint linenums lang-css\">body, html{ color: #333; font-family: sans-serif; }\r\n\r\n\r\n\/* Splitview Specific *\/\r\n.sv-split-space { background-color: #333; height:100%; }\r\n\r\n.sv-tl { background-color:#389090; }\r\n.sv-tr { background-color:#f47e7d; }\r\n.sv-bl { background-color:#b5d045; }\r\n.sv-br { background-color:#fb8335; }\r\n\r\n.sv-v, .sv-vt, .sv-vb{ border-left: 1px solid #333; }\r\n.sv-h, .sv-hl, .sv-hr{ border-top: 1px solid #333; }<\/pre>\n<p>4. Now, load the <a href=\"https:\/\/github.com\/nikolaynau\/splitviewjs\" target=\"_blank\" rel=\"noopener\">SplitviewJS<\/a> by adding the following CDN link just before closing the body tag:<\/p>\n<pre class=\"prettyprint linenums lang-html\">&lt;script src='https:\/\/cdn.rawgit.com\/luisreyes\/SplitviewJs\/master\/lib\/splitview.js'&gt;&lt;\/script&gt;<\/pre>\n<p>5. Finally, include the JavaScript code within your script tags or external JavaScript file. This code initializes the split view and sets up event listeners for resizing.<\/p>\n<pre class=\"prettyprint linenums lang-js\">splitview.init({\r\n      main:'work-space',\r\n      layout: '30,50,70',\r\n      containers:{\r\n        tl:'container0',\r\n        tr:'container1',\r\n        bl:'container2',\r\n        br:'container3'\r\n      }\r\n    });\r\n\r\n    \/\/ This is an example of the events\r\n    \r\n    \/\/splitview.addEventListener('resize', call);\r\n    splitview.addEventListener('resizehorizontal', call);\r\n    splitview.addEventListener('resizevertical', call);\r\n    splitview.addEventListener('resizestart', call);\r\n    splitview.addEventListener('resizestop', call);\r\n    \r\n    function call(e){\r\n      console.log(e);\r\n    }<\/pre>\n<p>That&#8217;s all! hopefully, you have successfully integrated this draggable resizing div elements functionality into your project. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This JavaScript code snippet helps you to resize div by dragging border. It initializes a split view layout with resizable&#8230;<\/p>\n","protected":false},"author":1,"featured_media":10095,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[109],"tags":[],"class_list":["post-10093","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-layout"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Resize div by Dragging Border in JavaScript &#8212; CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a Resize div by Dragging Border in JavaScript. You can view demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/layout\/resize-div-by-dragging-border-in-javascript\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Resize div by Dragging Border in JavaScript &#8212; CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a Resize div by Dragging Border in JavaScript. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/layout\/resize-div-by-dragging-border-in-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-01-19T18:14:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T11:16:51+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Resize-div-by-Dragging-Border-in-JavaScript.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"960\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/layout\/resize-div-by-dragging-border-in-javascript\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/layout\/resize-div-by-dragging-border-in-javascript\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Resize div by Dragging Border in JavaScript\",\"datePublished\":\"2024-01-19T18:14:00+00:00\",\"dateModified\":\"2024-01-22T11:16:51+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/layout\/resize-div-by-dragging-border-in-javascript\/\"},\"wordCount\":209,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/layout\/resize-div-by-dragging-border-in-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Resize-div-by-Dragging-Border-in-JavaScript.png\",\"articleSection\":[\"Layout\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/layout\/resize-div-by-dragging-border-in-javascript\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/layout\/resize-div-by-dragging-border-in-javascript\/\",\"url\":\"https:\/\/codehim.com\/layout\/resize-div-by-dragging-border-in-javascript\/\",\"name\":\"Resize div by Dragging Border in JavaScript &#8212; CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/layout\/resize-div-by-dragging-border-in-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/layout\/resize-div-by-dragging-border-in-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Resize-div-by-Dragging-Border-in-JavaScript.png\",\"datePublished\":\"2024-01-19T18:14:00+00:00\",\"dateModified\":\"2024-01-22T11:16:51+00:00\",\"description\":\"Here is a free code snippet to create a Resize div by Dragging Border in JavaScript. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/layout\/resize-div-by-dragging-border-in-javascript\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/layout\/resize-div-by-dragging-border-in-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/layout\/resize-div-by-dragging-border-in-javascript\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Resize-div-by-Dragging-Border-in-JavaScript.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Resize-div-by-Dragging-Border-in-JavaScript.png\",\"width\":1280,\"height\":960,\"caption\":\"Resize div by Dragging Border in JavaScript\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/layout\/resize-div-by-dragging-border-in-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Layout\",\"item\":\"https:\/\/codehim.com\/category\/layout\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Resize div by Dragging Border in JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Resize div by Dragging Border in JavaScript &#8212; CodeHim","description":"Here is a free code snippet to create a Resize div by Dragging Border in JavaScript. You can view demo and download the source code.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/codehim.com\/layout\/resize-div-by-dragging-border-in-javascript\/","og_locale":"en_US","og_type":"article","og_title":"Resize div by Dragging Border in JavaScript &#8212; CodeHim","og_description":"Here is a free code snippet to create a Resize div by Dragging Border in JavaScript. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/layout\/resize-div-by-dragging-border-in-javascript\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-19T18:14:00+00:00","article_modified_time":"2024-01-22T11:16:51+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Resize-div-by-Dragging-Border-in-JavaScript.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/layout\/resize-div-by-dragging-border-in-javascript\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/layout\/resize-div-by-dragging-border-in-javascript\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Resize div by Dragging Border in JavaScript","datePublished":"2024-01-19T18:14:00+00:00","dateModified":"2024-01-22T11:16:51+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/layout\/resize-div-by-dragging-border-in-javascript\/"},"wordCount":209,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/layout\/resize-div-by-dragging-border-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Resize-div-by-Dragging-Border-in-JavaScript.png","articleSection":["Layout"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/layout\/resize-div-by-dragging-border-in-javascript\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/layout\/resize-div-by-dragging-border-in-javascript\/","url":"https:\/\/codehim.com\/layout\/resize-div-by-dragging-border-in-javascript\/","name":"Resize div by Dragging Border in JavaScript &#8212; CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/layout\/resize-div-by-dragging-border-in-javascript\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/layout\/resize-div-by-dragging-border-in-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Resize-div-by-Dragging-Border-in-JavaScript.png","datePublished":"2024-01-19T18:14:00+00:00","dateModified":"2024-01-22T11:16:51+00:00","description":"Here is a free code snippet to create a Resize div by Dragging Border in JavaScript. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/layout\/resize-div-by-dragging-border-in-javascript\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/layout\/resize-div-by-dragging-border-in-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/layout\/resize-div-by-dragging-border-in-javascript\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Resize-div-by-Dragging-Border-in-JavaScript.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/12\/Resize-div-by-Dragging-Border-in-JavaScript.png","width":1280,"height":960,"caption":"Resize div by Dragging Border in JavaScript"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/layout\/resize-div-by-dragging-border-in-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Layout","item":"https:\/\/codehim.com\/category\/layout\/"},{"@type":"ListItem","position":3,"name":"Resize div by Dragging Border in JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":1874,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/10093","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=10093"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/10093\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/10095"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=10093"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=10093"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=10093"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}