mark-rolich / rulersguides.js Goto Github PK
View Code? Open in Web Editor NEWCreates Photoshop-like guides and rulers interface on a web page
License: MIT License
Creates Photoshop-like guides and rulers interface on a web page
License: MIT License
Very cool...
thx
Any idea how I can change the units of measure to say, Inches? or mm?
Allow the grid positions to be saved to local storage on a per page/url bases. This way, the page can be reloaded and not need to recreate the grid.
Hi, there. I`m looking for a PhotoShop-like ruler frame, and I wanner how to use this inner a div.
Thx for you great job.
When scrolling vertically up/down the page. The top x-axis ruler should always be visible. Similarly, when scrolling horizontally left/right the page. The left y-axis ruler should also be visible.
Also, note that when scrolling, the ruler should still show the offset from the top left, (0,0). Using position: fixed will keep them on screen, but not display the correct offsets.
This plugin looks awesome. It would be greate if there is a plugin for Chrome
Hi, thank you for making such a wonderful ruler script. But there is a small issue that i am facing in the script. In my application, the ruler comes in a portion of page. The div that contains the ruler, have left and top properties. When getting guide from top, the click position always remains page top. but left side is working fine.
Our site has been migrated to Wordpress. RulersGuides.js would be great for layout, except the horizontal ruler across the top of the page is almost covered by the WordPress admin toolbar. So, the little red menu icon for the rulers (top/ left) is covered and unusable.
I could use the hot keys associated with the menu items but when I invoke "Cntrl Alt I" for the detailed information I get this Javascript error:
"TypeError: 'null' is not an object (evaluating 'vRuler.style')"
Here a screenshot of how the menu lays out in WordPress -- showing the errors (ignore the first two errors):
If I could get the hot key combination to work the problem would be solved.
Thanks,
JH
0,0 point is now always the most top left point
it would be useful for some situation to relatively set 0,0 point on a page
thank you for sharing this
Hi, thank you for making such a wonderful ruler script. It works fine all leading browsers. Can you please add a function to delete individual guide line. Thank you
With dynamic content, the page's height and/or width may change. The ruler may be too large or too small for the page based on the changing content. toggling the ruler does not seem to resolve this issue. It would be best if the ruler would update its size on the page's re-size event.
Examples after re-sizing this page:
The ruler does not extend far enough
Hey! Great stuff, love the bookmark functionality!
One thing that would be even better would be a mode where the rules snap to DOM elements.
Suggestion comes from here: https://news.ycombinator.com/item?id=6449883
Hi Mark.,
I working in your rulersguides.js. I create rulers for particular div refer FIDDLE.but i need to create grid line for that particular div not in body element.How to achieved it? Can you give proper guidelines to complete this issues?
added as address field
javascript:(function(){var%20Event=function(){'use%20strict';this.attach=function(evtName,element,listener,capture){var%20evt='',useCapture=(capture===undefined)?true:capture,handler=null;if(window.addEventListener===undefined){evt='on'+evtName;handler=function(evt,listener){element.attachEvent(evt,listener);return%20listener;};}else{evt=evtName;handler=function(evt,listener,useCapture){element.addEventListener(evt,listener,useCapture);return%20listener;};}return%20handler.apply(element,[evt,function(ev){var%20e=ev||event,src=e.srcElement||e.target;listener(e,src);},useCapture]);};this.detach=function(evtName,element,listener,capture){var%20evt='',useCapture=(capture===undefined)?true:capture;if(window.removeEventListener===undefined){evt='on'+evtName;element.detachEvent(evt,listener);}else{evt=evtName;element.removeEventListener(evt,listener,useCapture);}};this.stop=function(evt){evt.cancelBubble=true;if(evt.stopPropagation){evt.stopPropagation();}};this.prevent=function(evt){if(evt.preventDefault){evt.preventDefault();}else{evt.returnValue=false;}};};var%20Dragdrop=function(evt){'use%20strict';var%20elem=null,started=0,self=this,moveHandler=null,doc=document.documentElement,body=document.body,gWidth=(document.body.scrollWidth%3Edocument.documentElement.clientWidth)?document.body.scrollWidth:document.documentElement.clientWidth,gHeight=Math.max(body.scrollHeight,body.offsetHeight,doc.clientHeight,doc.scrollHeight,doc.offsetHeight),move=function(e){var%20xDiff=e.clientX-elem.posX,yDiff=e.clientY-elem.posY,x=xDiff-(xDiff%elem.snap)+'px',y=yDiff-(yDiff%elem.snap)+'px';if(started===1){switch(elem.mode){case%200:elem.style.top=y;elem.style.left=x;break;case%201:elem.style.left=x;break;case%202:elem.style.top=y;break;}if(elem.mode!==2){if(xDiff%3C=elem.minX){elem.style.left=elem.minX+'px';}if(elem.offsetLeft+elem.offsetWidth%3E=elem.maxX){elem.style.left=(elem.maxX-elem.offsetWidth)+'px';}}if(elem.mode!==1){if(yDiff%3C=elem.minY){elem.style.top=elem.minY+'px';}if(elem.offsetTop+elem.offsetHeight%3E=elem.maxY){elem.style.top=(elem.maxY-elem.offsetHeight)+'px';}}elem.onMove(elem);}},start=function(e,src){if(src.className.indexOf('draggable')!==-1){evt.prevent(e);moveHandler=evt.attach('mousemove',document,move,true);started=1;elem=src;elem.posX=e.clientX-elem.offsetLeft;elem.posY=e.clientY-elem.offsetTop;if(elem.mode===undefined){self.set(elem);}elem.onStart(elem);if(elem.setCapture){elem.setCapture();}}},stop=function(){if(started===1){started=0;elem.onStop(elem);evt.detach('mousemove',document,moveHandler);if(elem.releaseCapture){elem.releaseCapture();}}};evt.attach('mousedown',document,start,false);evt.attach('mouseup',document,stop,false);this.start=start;this.set=function(element,elemOptions){var%20options=elemOptions||{};elem=(typeof%20element==='string')?document.getElementById(element):element;elem.mode=options.mode||0;elem.minX=options.minX||0;elem.maxX=options.maxX||gWidth;elem.minY=options.minY||0;elem.maxY=options.maxY||gHeight;elem.snap=options.snap||1;elem.onStart=options.onstart||function(){};elem.onMove=options.onmove||function(){};elem.onStop=options.onstop||function(){};elem.style.left=elem.offsetLeft+'px';elem.style.top=elem.offsetTop+'px';elem.unselectable='on';};};var%20RulersGuides=function(evt,dragdrop){'use%20strict';var%20doc=document.documentElement,body=document.body,wrapper=null,lockHandler=null,locked=1,hRuler=null,vRuler=null,menu=null,dialogs=[],snapDialog=null,openGridDialog=null,xSnap=0,ySnap=0,mode=2,guides={},guidesCnt=0,gUid='',rulerStatus=1,guideStatus=1,hBound=0,vBound=0,gridList=null,gridListLen=0,menuBtn=null,gInfoBlockWrapper=null,detailsStatus=0,domElements=[],domDimensions=[],resizeTimer=null,snapDom=0,cssText='html,body{margin:0;padding:0}.rg-overlay{position:absolute;top:0;left:0;overflow:hidden}.guide{position:absolute;top:0;left:0;z-index:9991;font-size:0}.guide.v{width:1px;height:7000px;border-right:solid%201px%20#00f;cursor:col-resize}.guide.h{width:3000px;height:1px;border-bottom:solid%201px%20#00f;cursor:row-resize}.info{width:50px;height:25px;line-height:25px;text-align:center;position:relative;font-size:13px;background-color:#eee;border:solid%201px%20#ccc;color:#000}.guide.v%20.info{left:2px}.guide.h%20.info{top:2px}.unselectable{-moz-user-select:-moz-none;-khtml-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none}.ruler{background-color:#ccc;position:absolute;top:0;left:0;z-index:9990}.ruler%20.label{font:12px%20Arial;color:#000}.ruler,.ruler%20span{font-size:0}.ruler.h{width:3000px;left:-1px;padding-top:14px;border-bottom:solid%201px%20#000}.ruler.v{height:7000px;top:-1px;padding-left:16px;width:25px;border-right:solid%201px%20#000}.ruler.h%20span{border-left:solid%201px%20#999;height:9px;width:1px;vertical-align:bottom;display:inline-block;*display:inline;zoom:1}.ruler.v%20span{display:block;margin-left:auto;margin-right:0;border-top:solid%201px%20#999;width:9px;height:1px}.ruler.v%20span.major{border-top:solid%201px%20#000;width:13px}.ruler.v%20span.milestone{position:relative;border-top:solid%201px%20#000;width:17px}.ruler.v%20span.label{border:0;font-size:9px;position:absolute;text-align:center;width:9px}.ruler.h%20span.major{border-left:solid%201px%20#000;height:13px}.ruler.h%20span.milestone{position:relative;border-left:solid%201px%20#000;height:17px}.ruler.h%20span.label{border:0;font-size:9px;position:absolute;text-align:center;top:-14px;width:9px}.ruler.h%20.l10{left:-5px}.ruler.h%20.l100{left:-7px}.ruler.h%20.l1000{left:-10px}.ruler.v%20.l10,.ruler.v%20.l100,.ruler.v%20.l1000{top:-7px}.ruler.v%20.l10{left:-12px}.ruler.v%20.l100{left:-17px}.ruler.v%20.l1000{left:-23px}.menu-btn{position:fixed;left:3px;top:2px;line-height:9px;z-index:9998;width:20px;height:20px;background-color:red;opacity:.5;font-size:20px;text-align:left;color:#fff;font-weight:700;cursor:pointer;border-radius:2px}.rg-menu{position:fixed;top:22px;left:3px;padding:0;margin:0;list-style:0;display:none;font:13px%20Arial;z-index:9999;box-shadow:2px%202px%2010px%20#ccc}.rg-menu%20li{border-bottom:solid%201px%20#999;padding:0}.rg-menu%20a{background-color:#777;display:block;padding:5px;text-decoration:none;color:#fff;line-height:18px}.rg-menu%20a:hover,.rg-menu%20a.selected{color:#fff;background-color:#3b94ec}.rg-menu%20a.disabled{color:#ccc}.rg-menu%20.desc{display:inline-block;width:170px}.dialog{position:fixed;background-color:#777;z-index:9999;color:#fff;font-size:13px;display:none;box-shadow:2px%202px%2010px%20#ccc}.dialog%20button{border:0;color:#333;cursor:pointer;background-color:#eaeaea;background-image:linear-gradient(#fafafa,#eaeaea);background-repeat:repeat-x;border-radius:3px;text-shadow:0%201px%200%20rgba(255,255,255,.9)}.dialog%20input,.dialog%20select,.dialog%20button{font-size:13px;margin:3px;padding:3px}.dialog%20.title-bar{padding:5px;background-color:#aaa;font-weight:700}.dialog%20.wrapper{padding:10px}.open-dialog%20select,.open-dialog%20button{float:left;display:block}.open-dialog%20.ok-btn,.open-dialog%20.cancel-btn{margin:10px%203px}.open-dialog%20.ok-btn{clear:both}.snap-dialog%20label{font-weight:700;padding:3px}.snap-dialog%20.ok-btn{margin-left:18px}.snap-dialog%20.ok-btn,.snap-dialog%20.cancel-btn{margin-top:10px}.snap-dialog%20.rg-y-label{margin-left:10px}#rg-x-snap,#rg-y-snap{width:50px}.info-block-wrapper{position:absolute;z-index:9989}.info-block{position:absolute;text-align:left}.info-block.even{background:0;background-color:rgba(0,0,255,.2);-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#330000FF,%20endColorstr=#330000FF);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#330000FF,%20endColorstr=#330000FF);zoom:1}.info-block.odd{background:0;background-color:rgba(255,0,0,.2);-ms-filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33FF0000,%20endColorstr=#33FF0000);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#33FF0000,%20endColorstr=#33FF0000);zoom:1}.info-block-txt{padding:5px;display:inline-block;vertical-align:top;background-color:#777;color:#fff;font-size:13px;*display:inline;zoom:1}',Ruler=function(type,size){var%20ruler=document.createElement('div'),i=0,span=document.createElement('span'),label=null,labelTxt=null,spanFrag=document.createDocumentFragment(),cnt=Math.floor(size/2);ruler.className='ruler%20'+type+'%20unselectable';for(i;i<cnt;i=i+1){span=span.cloneNode(false);if(i%%2025===0){span.className='milestone';if(i>0){label=span.cloneNode(false);label.className='label';if(i<50){label.className+='%20l10';}else%20if(i>=50&&i<500){label.className+='%20l100';}else%20if(i>=500){label.className+='%20l1000';}labelTxt=document.createTextNode(i*2);label.appendChild(labelTxt);span.appendChild(label);}span.className='milestone';}else%20if(i%5===0){span.className='major';}else{span.className='';span.removeAttribute('class');}spanFrag.appendChild(span);}ruler.appendChild(spanFrag);return%20ruler;},getWindowSize=function(){var%20w=Math.max(body.scrollWidth,body.offsetWidth,doc.clientWidth,doc.scrollWidth,doc.offsetWidth),h=Math.max(body.scrollHeight,body.offsetHeight,doc.clientHeight,doc.scrollHeight,doc.offsetHeight);return[w,h];},getScrollPos=function(){var%20t=Math.max(doc.scrollTop,body.scrollTop),l=Math.max(doc.scrollLeft,body.scrollLeft);return[t,l];},getScrollSize=function(){var%20w=Math.max(doc.scrollWidth,body.scrollWidth),h=Math.max(doc.scrollHeight,body.scrollHeight);return[w,h];},closeAllDialogs=function(){var%20i=0;for(i;i<dialogs.length;i=i+1){dialogs[i].close();}},removeInboundGuide=function(guide,gUid){var%20scrollPos=getScrollPos();if(rulerStatus===1&&guideStatus===1&&((guide.className==='guide%20h%20draggable'&&guide.offsetTop<hBound+scrollPos[0])||(guide.className==='guide%20v%20draggable'&&guide.offsetLeft<vBound+scrollPos[1]))){wrapper.removeChild(guide);delete%20guides[gUid];guidesCnt=guidesCnt-1;}},removeInboundGuides=function(){var%20i;for(i%20in%20guides){if(guides.hasOwnProperty(i)){removeInboundGuide(guides[i],i);}}},toggleGuides=function(){var%20i;guideStatus=1-guideStatus;for(i%20in%20guides){if(guides.hasOwnProperty(i)){guides[i].style.display=(guideStatus===1)?'block':'none';}}if(guideStatus===1){wrapper.style.display='block';}},toggleRulers=function(){rulerStatus=1-rulerStatus;if(rulerStatus===1){vRuler.style.display='block';hRuler.style.display='block';wrapper.style.display='block';removeInboundGuides();}else{vRuler.style.display='none';hRuler.style.display='none';}},removeGrid=function(gridName){if(gridList[gridName]!==undefined){delete%20gridList[gridName];window.localStorage.setItem('RulersGuides',JSON.stringify(gridList));gridListLen=gridListLen-1;}},deleteGuides=function(){var%20i;if(guidesCnt>0){for(i%20in%20guides){if(guides.hasOwnProperty(i)){wrapper.removeChild(guides[i]);delete%20guides[i];guidesCnt=guidesCnt-1;}}gInfoBlockWrapper.style.display='none';}},renderGrid=function(gridName){if(gridList[gridName]!==undefined){var%20grid=gridList[gridName],guideId=null,guideElem=null;deleteGuides();for(guideId%20in%20grid){if(grid.hasOwnProperty(guideId)){guideElem=document.createElement('div');guideElem.id=guideId;guideElem.className=grid[guideId].cssClass;guideElem.style.cssText=grid[guideId].style;wrapper.appendChild(guideElem);guides[guideId]=guideElem;guidesCnt=guidesCnt+1;}}}},OpenGridDialog=function(){var%20dialog=null,self=this,select=null,renderSelect=function(insertOrUpdate){var%20gridName,options='',i;gridListLen=0;if(window.localStorage){gridList=JSON.parse(window.localStorage.getItem('RulersGuides'));for(i%20in%20gridList){if(gridList.hasOwnProperty(i)){gridListLen=gridListLen+1;}}}if(insertOrUpdate===0){select=document.createElement('select');select.id='grid-list';}if(gridListLen>0){for(gridName%20in%20gridList){if(gridList.hasOwnProperty(gridName)){options+='<option>'+gridName+'</option>';}}select.innerHTML=options;}return%20select;};this.render=function(){if(dialog===null){dialog=document.createElement('div');select=renderSelect(0);var%20text=document.createTextNode(''),titleBar=dialog.cloneNode(false),dialogWrapper=dialog.cloneNode(false),okBtn=document.createElement('button'),cancelBtn=okBtn.cloneNode(false),delBtn=okBtn.cloneNode(false),titleBarTxt=text.cloneNode(false),okBtnTxt=text.cloneNode(false),cancelBtnTxt=text.cloneNode(false),delBtnTxt=text.cloneNode(false);titleBarTxt.nodeValue='Open%20grid';okBtnTxt.nodeValue='OK';cancelBtnTxt.nodeValue='Cancel';delBtnTxt.nodeValue='Delete';dialog.className='dialog%20open-dialog';titleBar.className='title-bar';dialogWrapper.className='wrapper';okBtn.className='ok-btn';cancelBtn.className='cancel-btn';delBtn.className='del-btn';titleBar.appendChild(titleBarTxt);okBtn.appendChild(okBtnTxt);cancelBtn.appendChild(cancelBtnTxt);delBtn.appendChild(delBtnTxt);dialogWrapper.appendChild(select);dialogWrapper.appendChild(delBtn);dialogWrapper.appendChild(okBtn);dialogWrapper.appendChild(cancelBtn);dialog.appendChild(titleBar);dialog.appendChild(dialogWrapper);body.appendChild(dialog);evt.attach('click',delBtn,function(){if(window.confirm('Are%20you%20sure%20?')){if(select.options.length>0){removeGrid(select.options[select.selectedIndex].value);select.removeChild(select.options[select.selectedIndex]);}if(select.options.length===0){self.close();}}});evt.attach('click',okBtn,function(){renderGrid(select.value);self.close();});evt.attach('click',cancelBtn,function(){self.close();});}};this.render();this.open=function(){closeAllDialogs();renderSelect(1);if(gridListLen>0){dialog.style.display='block';dialog.style.left=((doc.clientWidth-dialog.clientWidth)/2)+'px';dialog.style.top=((doc.clientHeight-dialog.clientHeight)/2)+'px';}};this.close=function(){dialog.style.display='none';};},toggleRulersLock=function(){if(locked===0){if(lockHandler!==null){evt.detach('scroll',window,lockHandler);}}else{lockHandler=evt.attach('scroll',window,function(){var%20pos=getScrollPos(),size=getScrollSize();hRuler.style.top=pos[0]+'px';wrapper.style.height=size[1]+'px';vRuler.style.left=pos[1]+'px';wrapper.style.width=size[0]+'px';});}locked=1-locked;},saveGrid=function(){var%20data={},gridData={},i,gridName='';while(gridName===''&&guidesCnt>0){gridName=window.prompt('Save%20grid%20as');if(gridName!==''&&gridName!==false&&gridName!==null&&window.localStorage){for(i%20in%20guides){if(guides.hasOwnProperty(i)){gridData[i]={'cssClass':guides[i].className,'style':guides[i].style.cssText};}}if(window.localStorage.getItem('RulersGuides')!==null){data=JSON.parse(window.localStorage.getItem('RulersGuides'));}data[gridName]=gridData;window.localStorage.setItem('RulersGuides',JSON.stringify(data));gridListLen=gridListLen+1;}}},showDetailedInfo=function(){var%20i,j=0,hGuides=[],vGuides=[],scrollSize=getScrollSize(),infoBlockWrapper=document.createElement('div'),infoFrag=document.createDocumentFragment(),infoBlock=infoBlockWrapper.cloneNode(false),infoBlockTxt=infoBlockWrapper.cloneNode(false),infoData1=document.createTextNode(''),infoData2=infoData1.cloneNode(false),text='',br=document.createElement('br');for(i%20in%20guides){if(guides.hasOwnProperty(i)){if(guides[i].type==='h'){hGuides.push(guides[i].y);}else{vGuides.push(guides[i].x);}}}vGuides.unshift(0);vGuides.push(scrollSize[0]);hGuides.unshift(0);hGuides.push(scrollSize[1]);vGuides=vGuides.sort(function(a,b){return%20a-b;});hGuides=hGuides.sort(function(a,b){return%20a-b;});for(i=0;i<hGuides.length-1;i=i+1){j=0;for(j;j<vGuides.length-1;j=j+1){infoBlock=infoBlock.cloneNode(false);infoBlockTxt=infoBlockTxt.cloneNode(false);infoData1=infoData1.cloneNode(false);infoData2=infoData2.cloneNode(false);br=br.cloneNode();infoBlockWrapper.className='info-block-wrapper';infoBlock.className='info-block';infoBlockTxt.className='info-block-txt';infoBlock.className+=((i%2!==0&&j%2!==0)||(i%2===0&&j%2===0))?'%20even':'%20odd';infoBlock.style.top=hGuides[i]+'px';infoBlock.style.left=vGuides[j]+'px';infoBlock.style.width=(vGuides[j+1]-vGuides[j])+'px';infoBlock.style.height=(hGuides[i+1]-hGuides[i])+'px';text=(vGuides[j+1]-vGuides[j])+'%20x%20'+(hGuides[i+1]-hGuides[i]);infoData1.nodeValue=text;text=hGuides[i]+'%20:%20'+vGuides[j];infoData2.nodeValue=text;infoBlockTxt.appendChild(infoData1);infoBlockTxt.appendChild(br);infoBlockTxt.appendChild(infoData2);infoBlock.appendChild(infoBlockTxt);infoBlockTxt.style.marginTop=(i===0)?'31px':'0';infoBlockTxt.style.marginLeft=(j===0)?'42px':'0';infoFrag.appendChild(infoBlock);}}infoBlockWrapper.appendChild(infoFrag);if(detailsStatus===1){wrapper.replaceChild(infoBlockWrapper,gInfoBlockWrapper);gInfoBlockWrapper=infoBlockWrapper;}else{gInfoBlockWrapper.style.display='none';}},calculateDomDimensions=function(){var%20x=[],y=[],dm=[],i=0,len=domElements.length,findDimensions=function(elem){var%20t=0,l=0,w=elem.offsetWidth,h=elem.offsetHeight;while(elem){l+=(elem.offsetLeft-elem.scrollLeft+elem.clientLeft);t+=(elem.offsetTop-elem.scrollTop+elem.clientTop);elem=elem.offsetParent;}return[l,t,l+w,t+h];},getUnique=function(arr){var%20u={},a=[],idx=0,arrLen=arr.length;for(idx;idx<arrLen;idx=idx+1){if(u.hasOwnProperty(arr[idx])===false){a.push(arr[idx]);u[arr[idx]]=1;}}return%20a;};for(i;i<len;i=i+1){dm=findDimensions(domElements[i]);x.push(dm[0]);x.push(dm[2]);y.push(dm[1]);y.push(dm[3]);}x=getUnique(x).sort(function(a,b){return%20a-b;});y=getUnique(y).sort(function(a,b){return%20a-b;});return[x,y];},Menu=function(){var%20menuList=null,status=0,toggles={},menuItemsList=[{'text':'Hide%20rulers','hotkey':'Ctrl%20+%20Alt%20+%20R','alias':'rulers'},{'text':'Hide%20guides','hotkey':'Ctrl%20+%20Alt%20+%20G','alias':'guides'},{'text':'Hide%20all','hotkey':'Ctrl%20+%20Alt%20+%20A','alias':'all'},{'text':'Unlock%20rulers','hotkey':'Ctrl%20+%20Alt%20+%20L','alias':'lock'},{'text':'Clear%20all%20guides','hotkey':'Ctrl%20+%20Alt%20+%20D','alias':'clear'},{'text':'Open%20grid','hotkey':'Ctrl%20+%20Alt%20+%20O','alias':'open'},{'text':'Save%20grid','hotkey':'Ctrl%20+%20Alt%20+%20G','alias':'save'},{'text':'Snap%20to','hotkey':'Ctrl%20+%20Alt%20+%20C','alias':'snap'},{'text':'Show%20detailed%20info','hotkey':'Ctrl%20+%20Alt%20+%20I','alias':'details'},{'text':'Snap%20to%20DOM','hotkey':'Ctrl%20+%20Alt%20+%20E','alias':'snapdom'}],i=0;this.render=function(){menuBtn=document.createElement('div');menuBtn.className='menu-btn%20unselectable';menuBtn.appendChild(document.createTextNode('\u250C'));menuList=document.createElement('ul');menuList.className='rg-menu';var%20menuItems=document.createDocumentFragment(),li=document.createElement('li'),liLink=document.createElement('a'),liDesc=document.createElement('span'),liHotKey=liDesc.cloneNode(false),liDescTxt=document.createTextNode(''),liHotKeyTxt=liDescTxt.cloneNode(false);liLink.href='javascript:';liDesc.className='desc';liHotKey.className='hotkey';for(i;i<menuItemsList.length;i=i+1){li=li.cloneNode(false);liLink=liLink.cloneNode(false);liDesc=liDesc.cloneNode(false);liHotKey=liHotKey.cloneNode(false);liDescTxt=liDescTxt.cloneNode(false);liHotKeyTxt=liHotKeyTxt.cloneNode(false);liDescTxt.nodeValue=menuItemsList[i].text;liHotKeyTxt.nodeValue=menuItemsList[i].hotkey;liDesc.appendChild(liDescTxt);liHotKey.appendChild(liHotKeyTxt);liLink.appendChild(liDesc);liLink.appendChild(liHotKey);li.appendChild(liLink);menuItems.appendChild(li);toggles[menuItemsList[i].alias]={obj:liLink,txt:liDescTxt};}evt.attach('mousedown',toggles.rulers.obj,function(){toggleRulers();});evt.attach('mousedown',toggles.guides.obj,function(){toggleGuides();});evt.attach('mousedown',toggles.all.obj,function(){if(rulerStatus===1||guideStatus===1){rulerStatus=guideStatus=1;wrapper.style.display='none';}else{rulerStatus=guideStatus=0;wrapper.style.display='block';}toggleRulers();toggleGuides();});evt.attach('mousedown',toggles.lock.obj,function(){toggleRulersLock();});evt.attach('mousedown',toggles.clear.obj,function(){deleteGuides();});evt.attach('mousedown',toggles.open.obj,function(){openGridDialog.open();});evt.attach('mousedown',toggles.save.obj,function(){saveGrid();});evt.attach('mousedown',toggles.snap.obj,function(){snapDialog.open();});evt.attach('mousedown',toggles.details.obj,function(){detailsStatus=1-detailsStatus;showDetailedInfo();});evt.attach('mousedown',toggles.snapdom.obj,function(){snapDom=1-snapDom;if(snapDom===1){domDimensions=calculateDomDimensions();}});menuList.appendChild(menuItems);body.appendChild(menuBtn);body.appendChild(menuList);evt.attach('mousedown',menuBtn,function(){toggles.rulers.txt.nodeValue=(rulerStatus===1)?'Hide%20rulers':'Show%20rulers';if(guidesCnt>0){toggles.guides.obj.className='';toggles.clear.obj.className='';toggles.save.obj.className='';toggles.guides.txt.nodeValue=(guideStatus===1)?'Hide%20guides':'Show%20guides';}else{toggles.guides.obj.className='disabled';toggles.clear.obj.className='disabled';toggles.save.obj.className='disabled';}toggles.all.txt.nodeValue=(rulerStatus===1||guideStatus===1)?'Hide%20all':'Show%20all';toggles.lock.txt.nodeValue=(locked===0)?'Lock%20rulers':'Unlock%20rulers';toggles.details.txt.nodeValue=(detailsStatus===0)?'Show%20detailed%20info':'Hide%20detailed%20info';toggles.snapdom.txt.nodeValue=(snapDom===0)?'Snap%20to%20DOM':'Turn%20off%20snap%20to%20DOM';toggles.open.obj.className=(gridListLen>0)?'':'disabled';menuList.style.display=(status===0)?'inline-block':'none';status=1-status;});};this.render();this.close=function(){if(menuList!==null){menuList.style.display='none';status=0;}};},SnapDialog=function(){var%20dialog=null,xInput=null,yInput=null,self=this;this.render=function(){if(dialog===null){dialog=document.createElement('div');xInput=document.createElement('input');yInput=xInput.cloneNode(false);var%20text=document.createTextNode(''),okBtn=document.createElement('button'),xLabel=document.createElement('label'),titleBar=dialog.cloneNode(false),dialogWrapper=dialog.cloneNode(false),inputWrapper=dialog.cloneNode(false),btnWrapper=dialog.cloneNode(false),resetBtn=okBtn.cloneNode(false),cancelBtn=okBtn.cloneNode(false),yLabel=xLabel.cloneNode(false),titleBarTxt=text.cloneNode(false),xLabelTxt=text.cloneNode(false),yLabelTxt=text.cloneNode(false),okBtnTxt=text.cloneNode(false),resetBtnTxt=text.cloneNode(false),cancelBtnTxt=text.cloneNode(false);titleBarTxt.nodeValue='Snap%20guides%20to';xLabelTxt.nodeValue='X';yLabelTxt.nodeValue='Y';okBtnTxt.nodeValue='OK';resetBtnTxt.nodeValue='Reset';cancelBtnTxt.nodeValue='Cancel';dialog.className='dialog%20snap-dialog';titleBar.className='title-bar';dialogWrapper.className='wrapper';xLabel.className='rg-x-label';xLabel.setAttribute('for','rg-x-snap');yLabel.className='rg-y-label';yLabel.setAttribute('for','rg-y-snap');xInput.setAttribute('type','number');xInput.value='100';xInput.id='rg-x-snap';xInput.setAttribute('type','number');yInput.value='100';yInput.id='rg-y-snap';okBtn.className='ok-btn';resetBtn.className='reset-btn';cancelBtn.className='cancel-btn';titleBar.appendChild(titleBarTxt);xLabel.appendChild(xLabelTxt);yLabel.appendChild(yLabelTxt);okBtn.appendChild(okBtnTxt);resetBtn.appendChild(resetBtnTxt);cancelBtn.appendChild(cancelBtnTxt);inputWrapper.appendChild(xLabel);inputWrapper.appendChild(xInput);inputWrapper.appendChild(yLabel);inputWrapper.appendChild(yInput);inputWrapper.appendChild(resetBtn);btnWrapper.appendChild(okBtn);btnWrapper.appendChild(cancelBtn);dialogWrapper.appendChild(inputWrapper);dialogWrapper.appendChild(btnWrapper);dialog.appendChild(titleBar);dialog.appendChild(dialogWrapper);body.appendChild(dialog);evt.attach('mousedown',okBtn,function(){xSnap=parseInt(xInput.value,10);ySnap=parseInt(yInput.value,10);self.close();});evt.attach('mousedown',resetBtn,function(){xSnap=0;ySnap=0;self.close();});evt.attach('mousedown',cancelBtn,function(){self.close();});}};this.render();this.open=function(){closeAllDialogs();dialog.style.display='block';dialog.style.left=((doc.clientWidth-dialog.clientWidth)/2)+'px';dialog.style.top=((doc.clientHeight-dialog.clientHeight)/2)+'px';};this.close=function(){dialog.style.display='none';};},prepare=function(){var%20style=document.createElement('style'),size=getWindowSize(),elements=document.getElementsByTagName('*'),len=elements.length,i=0;for(i;i<len;i=i+1){domElements.push(elements[i]);}style.setAttribute('type','text/css');if(style.styleSheet){style.styleSheet.cssText=cssText;}else{style.appendChild(document.createTextNode(cssText));}body.appendChild(style);setTimeout(function(){hRuler=new%20Ruler('h',3000);vRuler=new%20Ruler('v',7000);wrapper=document.createElement('div');gInfoBlockWrapper=wrapper.cloneNode(false);wrapper.className='rg-overlay';gInfoBlockWrapper.className='info-block-wrapper';wrapper.style.width=(size[0])+'px';wrapper.style.height=(size[1])+'px';wrapper.appendChild(hRuler);wrapper.appendChild(vRuler);wrapper.appendChild(gInfoBlockWrapper);body.appendChild(wrapper);domDimensions=calculateDomDimensions();menu=new%20Menu();snapDialog=new%20SnapDialog();openGridDialog=new%20OpenGridDialog();dialogs=[snapDialog,openGridDialog];},10);};prepare();this.status=1;this.disable=function(){if(vRuler!==null){deleteGuides();vRuler.style.display='none';hRuler.style.display='none';wrapper.style.display='none';menuBtn.style.display='none';}rulerStatus=0;this.status=0;};this.enable=function(){if(vRuler!==null){vRuler.style.display='block';hRuler.style.display='block';wrapper.style.display='block';menuBtn.style.display='block';}rulerStatus=1;this.status=1;};evt.attach('mousedown',document,function(e,src){var%20x=e.clientX,y=e.clientY,guide=null,guideInfo=null,guideInfoText=null,scrollPos=getScrollPos(),snap=0;if(src.className.indexOf('menu-btn')===-1){menu.close();}if(vBound===0){vBound=vRuler.offsetWidth;hBound=hRuler.offsetHeight;}if(((x>vBound&&y<hBound)||(y>hBound&&x<vBound))&&rulerStatus===1){guide=document.createElement('div');guideInfo=guide.cloneNode(false);guideInfoText=document.createTextNode('');gUid='guide-'+guidesCnt;guideInfo.className='info';guideInfo.appendChild(guideInfoText);guide.appendChild(guideInfo);if(x>vBound&&y<hBound){guide.className='guide%20h%20draggable';guide.style.top=(e.clientY+scrollPos[0])+'px';guideInfo.style.left=(x+scrollPos[1]+10)+'px';guide.type='h';snap=ySnap;mode=2;}else%20if(y>hBound&&x<vBound){guide.className='guide%20v%20draggable';guide.style.left=(x+scrollPos[1])+'px';guideInfo.style.top=((y+scrollPos[0])-35)+'px';guide.type='v';snap=xSnap;mode=1;}guide.id=gUid;guide.info=guideInfo;guide.text=guideInfoText;guide.x=0;guide.y=0;guides[gUid]=guide;wrapper.appendChild(guide);dragdrop.set(guide,{mode:mode,onstart:function(elem){var%20text=(elem.mode===1)?parseInt(elem.style.left,10)+2:parseInt(elem.style.top,10)+2;elem.text.nodeValue=text+'px';if(elem.over!==undefined){evt.detach('mouseover',elem,elem.over);evt.detach('mouseout',elem,elem.out);}},onmove:function(elem){var%20text='',pos=0,dims=[],len=0,i=0;pos=(elem.mode===1)?elem.style.left:elem.style.top;pos=parseInt(pos,10);if(snapDom===1){dims=domDimensions[elem.mode-1];for(i,len=dims.length;i<len;i=i+1){if(pos<=dims[i]){pos=dims[i];break;}}}text=pos+'px';if(elem.mode===1){elem.style.left=(pos-2)+'px';elem.x=pos;}else{elem.style.top=(pos-2)+'px';elem.y=pos;}elem.text.nodeValue=text;},onstop:function(elem){elem.over=evt.attach('mouseover',elem,function(e,src){if(src.className==='guide%20v%20draggable'){elem.info.style.top=((e.clientY+scrollPos[0])-35)+'px';}else%20if(src.className==='guide%20h%20draggable'){elem.info.style.left=(e.clientX+scrollPos[1]+10)+'px';}elem.info.style.display='block';});elem.out=evt.attach('mouseout',elem,function(){elem.info.style.display='none';});},snap:snap});dragdrop.start(e,guide);guidesCnt=guidesCnt+1;}});evt.attach('mouseup',document,function(e,src){removeInboundGuide(src,src.id);if(detailsStatus===1){showDetailedInfo();}});evt.attach('keyup',document,function(e){if(e.ctrlKey===true&&e.altKey===true){switch(e.keyCode){case%2083:saveGrid();break;case%2082:toggleRulers();break;case%2079:openGridDialog.open();break;case%2076:toggleRulersLock();break;case%2073:detailsStatus=1-detailsStatus;showDetailedInfo();break;case%2071:toggleGuides();break;case%2069:snapDom=1-snapDom;if(snapDom===1){domDimensions=calculateDomDimensions();}break;case%2068:deleteGuides();break;case%2067:snapDialog.open();break;case%2065:if(rulerStatus===1||guideStatus===1){rulerStatus=guideStatus=1;wrapper.style.display='none';}else{rulerStatus=guideStatus=0;wrapper.style.display='block';}toggleRulers();toggleGuides();break;}}});evt.attach('resize',window,function(){var%20size=getWindowSize();wrapper.style.width=size[0]+'px';wrapper.style.height=size[1]+'px';if(resizeTimer!==null){window.clearTimeout(resizeTimer);}if(snapDom===1){resizeTimer=window.setTimeout(function(){domDimensions=calculateDomDimensions();},100);}});};var%20evt=new%20Event(),dragdrop=new%20Dragdrop(evt);if(window.rg===undefined){window.rg=new%20RulersGuides(evt,dragdrop);window.rg.status=0;}if(window.rg.status===1){window.rg.disable();}else{window.rg.enable();}})()
but nothing happened when i click it?
It's a great tool! But I want to put pixel ferfect guides. It's not easy to do now.
Can you add some options to zoom the content? Or some little window magnifying the mouse area?
If I want to make sure about positions or dimensions, nowdays I have to make a screenshot, paste it into PS, zoom in and use guides. With this I could forget that method.
HI, This was amazing js to help me lot.
How to use ruler guide in svg editor.But in svg editor already having rules with zoom functionality.
I want to integrate in draggable guides of verticle and horizontal to svg rulers.Can you please help me.
In my CSS, i have this CSS property :
* { -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ }
I think you need to use the property for your CSS to be sure your display is good
.rg-overlay * { -webkit-box-sizing: content-box; /* Safari/Chrome, other WebKit */ -moz-box-sizing: content-box; /* Firefox, other Gecko */ box-sizing: content-box; /* Opera/IE 8+ */ }
Thanks for your plugins ๐ :-)
Anyway to save load grids from file / parameters?
Allow for the grid to be cleared/removed without having to reload the page or drag each of the grid lines into the ruler.
This would be useful in conjunction with #1
When toggling the bookmarklet on and off, it basically changes the display of both .ruler
elements from none
to block
and vice versa. Any chance you could change the display value of their parent (.rg-overlay
) instead?
Currently, it makes the site unsable as soon as you have enabled the bookmarklet once, even if you have used it again in order to turn it off. This because the full screen overlay remains and prevents the site below from being used.
Using pointer-events: none
could be a solution if you have some solid reasons not to move the show/hide to the parent.
Thanks!
Hi buddy,
Here, I am struggle with to add rulers for particular inner div using this rulerguides.js.But i dont achieved it.Here i tried to add rulers for div like photoshop.
My current changed script:
var evt = new Event(),
dragdrop = new Dragdrop(evt),
rg = new RulersGuides(evt, dragdrop, document.getElementById('workarea'));
I get this code for this issues :https://github.com//issues/11
How to changed ruler for div.A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.