Рубрика: Веб-разработка

Адаптивный виджет для сообществ вконтакте

Документация Страница виджета СложностьHTML 15%JavaScript 65%Описание Хотя адаптивные сайты уже стали нормой, кто-то все еще выпускает не адаптивные виджеты, как в случае с данным. Виджет подстраивается под ширину контейнера при загрузке страницы, но при ресайзе окна нет, и это может выглядеть очень некрасиво, например в случае, когда виджет находится в сайдбаре. Пришло время сделать адаптивным [...]
Read More

Адаптивный facebook плагин «Страница»

Документация СложностьHTML 30%CSS 20%JavaScript 70%Вступление На официальной странице плагина сказано: «Он не будет реагировать на изменения блочной модели после загрузки страницы.» Действительно, плагин не адаптивный, но сегодня мы научим его реагировать на изменения блочной модели после загрузки страницы 🙂 И все это мы сделаем на нативном JavaScript. HTML часть <div class="widget-facebook"> <iframe id="facebook_iframe" class="facebook_iframe"></iframe> </div> Уберем все лишнее, скрипты будем писать в [...]
Read More

Кнопка «Вниз» на чистом JavaScript

/* begin Scroll Down Button */ (function() { 'use strict'; var btnScrollDown = document.querySelector('#scroll_down'); function scrollDown() { var windowCoords = document.documentElement.clientHeight; (function scroll() { if (window.pageYOffset < windowCoords) { window.scrollBy(0, 10); setTimeout(scroll, 0); } if (window.pageYOffset > windowCoords) { window.scrollTo(0, windowCoords); } })(); } btnScrollDown.addEventListener('click', scrollDown); })(); /* end Scroll Down Button */ Stackoverflow СложностьHTML [...]
Read More

Кнопка «Наверх» на чистом JavaScript

Stackoverflow СложностьHTML 20%CSS 60%JavaScript 70%Описание Создаем кнопку на нативном JavaScript, без jQuery. Создаем улучшенную кнопку, действующую как вверх, так и вниз. HTML часть Вначале разметка. Добавляем в HTML тег a, задаем ему класс и заглавие(title). Содержимое тега будет спецсимвол &uarr; он как раз и будет отображаться в виде стрелки. Важно заметить, что здесь у тега a нет атрибута href, [...]
Read More