Javascript Absolute Position Element Creator Assistant

Javascript Code that Assists in the Process of Creating and Absolutely Positioned Element

Home Short:

This Javascript code assists in the creation of an element or div that is absolutely positioned. This Javscript code creates and inserts absolutely positioned Element on your web page that has a red border for visibility, allowing you to move and resize the div until you are satisfied, then simply copy the code for the absolutely positioned element and insert it in your web page.

You can see how this words by clicking the Create Absolute Postioned Div button below.

You can also use this absolute positioned element helper bookmarklet. Simply drag and drop that link to your web browser bookmarks bar and when you are on the desired page, click it

alert('Double click on the location on the web page where you wish to insert the div. Also, be sure to set the css code for element you click on (the divs parent element) to position:relative;');

let activeElem = null,
    highlightingBorders = true,
    oldElemUnderMouse = null,
    oldElemUnderMouseBorder = '';

window.ondblclick = e => {

if(!activeElem){
     activeElem = e.target;
    
     if(activeElem == null){
         activeElem = document.body;
     }else{
         activeElem.style.position = 'relative';
     }
  
     if(oldElemUnderMouse){
        oldElemUnderMouse.style.border = oldElemUnderMouseBorder;
     }  
     
     highlightingBorders = false;
     create_div();
  }
}

function create_div(){
    let idval = prompt('What ID would you like to assign this div?', 'divnew');

if(idval == null){
        return false;
    }

let divstats = document.createElement('div'),
        tastats = document.createElement('textarea');

divstats.style.cssText = 'bottom:5px;right:5px;width:380px;padding:0;position:fixed;text-align:center;';
 
    tastats.style.cssText = 'height:170px;white-space:nowrap;width:95%;'; 
    tastats.ondblclick =()=> {tastats.select();};
    activeElem.appendChild(divstats);   
    divstats.appendChild(tastats);    
 
    let element = document.createElement('div'), 
        resizer = document.createElement('div'),
        currentlyResizing = false;
    
    element.id = idval;
    element.style.cssText = 'border:1px solid red;cursor:grab;height:200px;position:absolute;width:200px;z-index:99999999;';
    resizer.className = 'resizer';
    resizer.style.cssText = 'background:red;bottom:-5px;cursor:se-resize;height:10px;position:absolute;right:-5px;width:10px;';
    activeElem.appendChild(element);
    element.appendChild(resizer);
    write_code(element);
    
    var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
 
    element.onmousedown =(e)=> {
    
       if(!currentlyResizing){
            e = e || window.event;
            e.preventDefault();
            pos3 = e.clientX;
            pos4 = e.clientY;
            document.onmouseup = closeDragElement;
            document.onmousemove = elementDrag;
        }

function elementDrag(e) {
          e = e || window.event;
          e.preventDefault();
          pos1 = pos3 - e.clientX;
          pos2 = pos4 - e.clientY;
          pos3 = e.clientX;
          pos4 = e.clientY;
          element.style.top = (element.offsetTop - pos2) + "px";
          element.style.left = (element.offsetLeft - pos1) + "px";
          write_code(element);
        }

function closeDragElement() {
          document.onmouseup = null;
          document.onmousemove = null;
        }
     }

resizer.onmousedown =()=> { 
        currentlyResizing = true;
        window.addEventListener('mousemove', Resize, false);
        window.addEventListener('mouseup', stopResize, false);
     }

function Resize(e) {
        let rect = activeElem.getBoundingClientRect();
        element.style.width = parseInt((e.clientX - rect.left) - element.offsetLeft) + 'px';
        element.style.height = parseInt((e.clientY - rect.top) - element.offsetTop) + 'px';
        write_code(element);
     }
     
     function stopResize(e) {
         currentlyResizing = false;
         window.removeEventListener('mousemove', Resize, false);
         window.removeEventListener('mouseup', stopResize, false);
     }

function write_code(elem){
 
         tastats.value = 
            "<div id=\"" + idval + "\">\r\n\r\n</div>\r\n\r\n" +
            "#" + idval + "{\r\n" +
            " border:1px solid red; /* to see div, remove when desired */\r\n" +
            " height:" + elem.clientHeight + "px;" + 
            "width:" + elem.clientWidth + "px;\r\n" +
            " position:absolute;left:" + parseInt(elem.offsetLeft) + "px;" +
            "top:" + parseInt(elem.offsetTop) + "px;\r\n" +
            "}";
                 
      }

}

source code home