Как стать автором
Поиск
Написать публикацию
Обновить

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

Время на прочтение1 мин
Количество просмотров625
Не так давно на хабре уже обсуждалась тема наложения макетной сетки поверх страницы. В голову пришла идея наложения сетки при помощи букмарклетов.

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

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());}})();


Теги:
Хабы:
Всего голосов 13: ↑13 и ↓0+13
Комментарии6

Публикации

Ближайшие события