Pull to refresh

Букмарклет для отображения макетной сетки

Reading time1 min
Views607
Не так давно на хабре уже обсуждалась тема наложения макетной сетки поверх страницы. В голову пришла идея наложения сетки при помощи букмарклетов.

Собственно, вот они.

12 колонок


javascript:(function(a){for(var i=0,l=a.length;i<l;i++){var foo=document.body.appendChild(document.createElement('div'));var s=foo.style;s.position='fixed';s.zIndex=999;s.height='100%';s.top=0;s.borderRight='1px solid red';s.left=a[i]+'%';foo.className='_grid_';}})([2,10,18,26,34,42,50,58,66,74,82,90,98]);


16 колонок


javascript:(function(a){for(var i=0,l=a.length;i<l;i++){var foo=document.body.appendChild(document.createElement('div'));var s=foo.style;s.position='fixed';s.zIndex=999;s.height='100%';s.top=0;s.borderRight='1px solid red';s.left=a[i]+'%';foo.className='_grid_';}})([2,8,14,20,26,32,38,44,50,56,62,68,74,80,86,92,98]);


по третям


javascript:(function(a){for(var i=0,l=a.length;i<l;i++){var foo=document.body.appendChild(document.createElement('div'));var s=foo.style;s.position='fixed';s.zIndex=999;s.height='100%';s.top=0;s.borderRight='1px solid red';s.left=a[i]+'%';foo.className='_grid_';}})([2,34,66,98]);


Заменив [2,8,14,20,26,32,38,44,50,56,62,68,74,80,86,92,98] на свои значения, можно изготовить свою сетку.

UPD:
А вот таким букмарклетом можно пользоваться для удаления текущей сетки:

javascript:(function(a){var foo=document.getElementsByTagName('div');var bar=[];for(var i in foo){if(foo[i] && foo[i].className=='_grid_') bar.push(foo[i]);}delete foo;while(bar.length){document.body.removeChild(bar.pop());}})();


Tags:
Hubs:
Total votes 13: ↑13 and ↓0+13
Comments6

Articles