{"id":8760,"date":"2024-01-21T17:55:00","date_gmt":"2024-01-21T17:55:00","guid":{"rendered":"https:\/\/codehim.com\/?p=8760"},"modified":"2024-01-22T15:56:05","modified_gmt":"2024-01-22T10:56:05","slug":"resizable-div-javascript-code-with-example","status":"publish","type":"post","link":"https:\/\/codehim.com\/vanilla-javascript\/resizable-div-javascript-code-with-example\/","title":{"rendered":"Resizable div JavaScript Code with Example"},"content":{"rendered":"<p>This JavaScript code snippet helps you to create a resizable div element on a webpage. It provides functionality to change the size of a div by dragging its corners. It works by adding event listeners to the div&#8217;s resizer elements, enabling you to adjust the width and height of the div interactively. This code is helpful for creating user-friendly interfaces that require resizable elements, such as custom dashboards or design tools.<\/p>\n<p>You can use this code in web development projects to create resizable elements like panels, windows, or image containers. It enhances user experience by allowing them to customize the size of elements as needed.<\/p>\n<h2>How to Create a Resizable Div in JavaScript<\/h2>\n<p>1. Begin by setting up your HTML structure for a resizable div. Include the following code within your HTML file. It creates a div element with resizer handles at its corners.<\/p>\n<pre class=\"prettyprint linenums lang-html\">&lt;div class='resizable'&gt;\r\n  &lt;div class='resizers'&gt;\r\n    &lt;div class='resizer top-left'&gt;&lt;\/div&gt;\r\n    &lt;div class='resizer top-right'&gt;&lt;\/div&gt;\r\n    &lt;div class='resizer bottom-left'&gt;&lt;\/div&gt;\r\n    &lt;div class='resizer bottom-right'&gt;&lt;\/div&gt;\r\n  &lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>2. To ensure proper styling and positioning, add the following CSS code to your stylesheet. You can modify the CSS rules according to your needs.<\/p>\n<pre class=\"prettyprint linenums lang-css\">body,\r\nhtml {\r\n  background: black;\r\n}\r\n\r\nbody{\r\n   background: #000;\r\n   position: relative;\r\n   min-height: 720px;\r\n}\r\n\r\n.resizable {\r\n  background: white;\r\n  width: 100px;\r\n  height: 100px;\r\n  position: absolute;\r\n  top: 100px;\r\n  left: 100px;\r\n}\r\n\r\n.resizable .resizers{\r\n  width: 100%;\r\n  height: 100%;\r\n  border: 3px solid #4286f4;\r\n  box-sizing: border-box;\r\n}\r\n\r\n.resizable .resizers .resizer{\r\n  width: 10px;\r\n  height: 10px;\r\n  border-radius: 50%; \/*magic to turn square into circle*\/\r\n  background: white;\r\n  border: 3px solid #4286f4;\r\n  position: absolute;\r\n}\r\n\r\n.resizable .resizers .resizer.top-left {\r\n  left: -5px;\r\n  top: -5px;\r\n  cursor: nwse-resize; \/*resizer cursor*\/\r\n}\r\n.resizable .resizers .resizer.top-right {\r\n  right: -5px;\r\n  top: -5px;\r\n  cursor: nesw-resize;\r\n}\r\n.resizable .resizers .resizer.bottom-left {\r\n  left: -5px;\r\n  bottom: -5px;\r\n  cursor: nesw-resize;\r\n}\r\n.resizable .resizers .resizer.bottom-right {\r\n  right: -5px;\r\n  bottom: -5px;\r\n  cursor: nwse-resize;\r\n}<\/pre>\n<p>3. Include the following JavaScript code in your HTML file or an external script file. This code makes the div resizable. Make sure to include it just before the closing <code>&lt;\/body&gt;<\/code> tag:<\/p>\n<pre class=\"prettyprint linenums lang-js\">\/*Make resizable div by Hung Nguyen*\/\r\nfunction makeResizableDiv(div) {\r\n  const element = document.querySelector(div);\r\n  const resizers = document.querySelectorAll(div + ' .resizer')\r\n  const minimum_size = 20;\r\n  let original_width = 0;\r\n  let original_height = 0;\r\n  let original_x = 0;\r\n  let original_y = 0;\r\n  let original_mouse_x = 0;\r\n  let original_mouse_y = 0;\r\n  for (let i = 0;i &lt; resizers.length; i++) {\r\n    const currentResizer = resizers[i];\r\n    currentResizer.addEventListener('mousedown', function(e) {\r\n      e.preventDefault()\r\n      original_width = parseFloat(getComputedStyle(element, null).getPropertyValue('width').replace('px', ''));\r\n      original_height = parseFloat(getComputedStyle(element, null).getPropertyValue('height').replace('px', ''));\r\n      original_x = element.getBoundingClientRect().left;\r\n      original_y = element.getBoundingClientRect().top;\r\n      original_mouse_x = e.pageX;\r\n      original_mouse_y = e.pageY;\r\n      window.addEventListener('mousemove', resize)\r\n      window.addEventListener('mouseup', stopResize)\r\n    })\r\n    \r\n    function resize(e) {\r\n      if (currentResizer.classList.contains('bottom-right')) {\r\n        const width = original_width + (e.pageX - original_mouse_x);\r\n        const height = original_height + (e.pageY - original_mouse_y)\r\n        if (width &gt; minimum_size) {\r\n          element.style.width = width + 'px'\r\n        }\r\n        if (height &gt; minimum_size) {\r\n          element.style.height = height + 'px'\r\n        }\r\n      }\r\n      else if (currentResizer.classList.contains('bottom-left')) {\r\n        const height = original_height + (e.pageY - original_mouse_y)\r\n        const width = original_width - (e.pageX - original_mouse_x)\r\n        if (height &gt; minimum_size) {\r\n          element.style.height = height + 'px'\r\n        }\r\n        if (width &gt; minimum_size) {\r\n          element.style.width = width + 'px'\r\n          element.style.left = original_x + (e.pageX - original_mouse_x) + 'px'\r\n        }\r\n      }\r\n      else if (currentResizer.classList.contains('top-right')) {\r\n        const width = original_width + (e.pageX - original_mouse_x)\r\n        const height = original_height - (e.pageY - original_mouse_y)\r\n        if (width &gt; minimum_size) {\r\n          element.style.width = width + 'px'\r\n        }\r\n        if (height &gt; minimum_size) {\r\n          element.style.height = height + 'px'\r\n          element.style.top = original_y + (e.pageY - original_mouse_y) + 'px'\r\n        }\r\n      }\r\n      else {\r\n        const width = original_width - (e.pageX - original_mouse_x)\r\n        const height = original_height - (e.pageY - original_mouse_y)\r\n        if (width &gt; minimum_size) {\r\n          element.style.width = width + 'px'\r\n          element.style.left = original_x + (e.pageX - original_mouse_x) + 'px'\r\n        }\r\n        if (height &gt; minimum_size) {\r\n          element.style.height = height + 'px'\r\n          element.style.top = original_y + (e.pageY - original_mouse_y) + 'px'\r\n        }\r\n      }\r\n    }\r\n    \r\n    function stopResize() {\r\n      window.removeEventListener('mousemove', resize)\r\n    }\r\n  }\r\n}\r\n\r\nmakeResizableDiv('.resizable')<\/pre>\n<p>That&#8217;s all! hopefully, you&#8217;ve successfully implemented resizable div elements on your webpage using JavaScript. You can further customize the CSS and integrate this feature into your web projects, enhancing the user experience by allowing them to resize elements effortlessly. 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 create a resizable div element on a webpage. It provides functionality to change&#8230;<\/p>\n","protected":false},"author":1,"featured_media":8773,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[116],"tags":[],"class_list":["post-8760","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-vanilla-javascript"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Resizable div JavaScript Code with Example &#8212; CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a Resizable div JavaScript Code with Example. 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\/vanilla-javascript\/resizable-div-javascript-code-with-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Resizable div JavaScript Code with Example &#8212; CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a Resizable div JavaScript Code with Example. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/vanilla-javascript\/resizable-div-javascript-code-with-example\/\" \/>\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-21T17:55:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-22T10:56:05+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Resizable-div-JavaScript-Code-with-Example.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=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/resizable-div-javascript-code-with-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/resizable-div-javascript-code-with-example\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Resizable div JavaScript Code with Example\",\"datePublished\":\"2024-01-21T17:55:00+00:00\",\"dateModified\":\"2024-01-22T10:56:05+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/resizable-div-javascript-code-with-example\/\"},\"wordCount\":257,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/resizable-div-javascript-code-with-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Resizable-div-JavaScript-Code-with-Example.png\",\"articleSection\":[\"Vanilla JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/vanilla-javascript\/resizable-div-javascript-code-with-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/resizable-div-javascript-code-with-example\/\",\"url\":\"https:\/\/codehim.com\/vanilla-javascript\/resizable-div-javascript-code-with-example\/\",\"name\":\"Resizable div JavaScript Code with Example &#8212; CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/resizable-div-javascript-code-with-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/resizable-div-javascript-code-with-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Resizable-div-JavaScript-Code-with-Example.png\",\"datePublished\":\"2024-01-21T17:55:00+00:00\",\"dateModified\":\"2024-01-22T10:56:05+00:00\",\"description\":\"Here is a free code snippet to create a Resizable div JavaScript Code with Example. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/resizable-div-javascript-code-with-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/vanilla-javascript\/resizable-div-javascript-code-with-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/resizable-div-javascript-code-with-example\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Resizable-div-JavaScript-Code-with-Example.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Resizable-div-JavaScript-Code-with-Example.png\",\"width\":1280,\"height\":960,\"caption\":\"Resizable div JavaScript Code with Example\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/vanilla-javascript\/resizable-div-javascript-code-with-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Vanilla JavaScript\",\"item\":\"https:\/\/codehim.com\/category\/vanilla-javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Resizable div JavaScript Code with Example\"}]},{\"@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":"Resizable div JavaScript Code with Example &#8212; CodeHim","description":"Here is a free code snippet to create a Resizable div JavaScript Code with Example. 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\/vanilla-javascript\/resizable-div-javascript-code-with-example\/","og_locale":"en_US","og_type":"article","og_title":"Resizable div JavaScript Code with Example &#8212; CodeHim","og_description":"Here is a free code snippet to create a Resizable div JavaScript Code with Example. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/vanilla-javascript\/resizable-div-javascript-code-with-example\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-01-21T17:55:00+00:00","article_modified_time":"2024-01-22T10:56:05+00:00","og_image":[{"width":1280,"height":960,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Resizable-div-JavaScript-Code-with-Example.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":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/vanilla-javascript\/resizable-div-javascript-code-with-example\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/resizable-div-javascript-code-with-example\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Resizable div JavaScript Code with Example","datePublished":"2024-01-21T17:55:00+00:00","dateModified":"2024-01-22T10:56:05+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/resizable-div-javascript-code-with-example\/"},"wordCount":257,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/resizable-div-javascript-code-with-example\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Resizable-div-JavaScript-Code-with-Example.png","articleSection":["Vanilla JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/vanilla-javascript\/resizable-div-javascript-code-with-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/vanilla-javascript\/resizable-div-javascript-code-with-example\/","url":"https:\/\/codehim.com\/vanilla-javascript\/resizable-div-javascript-code-with-example\/","name":"Resizable div JavaScript Code with Example &#8212; CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/resizable-div-javascript-code-with-example\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/resizable-div-javascript-code-with-example\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Resizable-div-JavaScript-Code-with-Example.png","datePublished":"2024-01-21T17:55:00+00:00","dateModified":"2024-01-22T10:56:05+00:00","description":"Here is a free code snippet to create a Resizable div JavaScript Code with Example. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/vanilla-javascript\/resizable-div-javascript-code-with-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/vanilla-javascript\/resizable-div-javascript-code-with-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/vanilla-javascript\/resizable-div-javascript-code-with-example\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Resizable-div-JavaScript-Code-with-Example.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2023\/10\/Resizable-div-JavaScript-Code-with-Example.png","width":1280,"height":960,"caption":"Resizable div JavaScript Code with Example"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/vanilla-javascript\/resizable-div-javascript-code-with-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Vanilla JavaScript","item":"https:\/\/codehim.com\/category\/vanilla-javascript\/"},{"@type":"ListItem","position":3,"name":"Resizable div JavaScript Code with Example"}]},{"@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":2148,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/8760","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=8760"}],"version-history":[{"count":0,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/8760\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/8773"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=8760"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=8760"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=8760"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}