Как сделать простую подсветку кода в HTML средствами JS
Если вам потребуется осуществить подсветку синтаксиса кода на странице, например HTML или PHP, то это можно несложно реализовать на Javascript при помощи регулярных выражений (Regular Expression).
Примечание: имеется ввиду что спецсимволы вроде треугольных скобок, как при обозначении HTML-тегов, будут заменены HTML-сущностями, т.е < будет заменено на < ну итд.
Итак, необходимый нам код мы будем размещать в блоках <pre class="code"> тут будет HTML/JS/PHP и любой другой код </pre>, а в после этих блоков или же на событие window.onload мы подключим нашу будущую функцию js_simple_code_highlighter(), для обработки и раскраски кода.
Если вы не знакомы с регулярными выраженям...
Итак, в этой статье я расскажу об общих сведениях при построении выпадающих меню на CSS и приведу 3 примера построения таких меню. Основная идея выпадающего меню на CSS крутиться вокруг написания CSS-кода с наследованием тегов, псевдо-класса :hover и некоторых CSS-селекторов.
В Internet Explorer версиях ниже 7-й очень ущербная поддержка CSS (не полная поддержка CSS 2.1), и псевдо-класс :hover работает только для ссылок. Поэтому для построения выпадающего меню в IE 6 есть два простых выхода.
Первый — это использовать специальное расширение файлов *.htc, которое майкрософт, видимо, и разработала в своё время чтобы скрыть недостатки своего браузера. Файлы *.htc — это практически чи...
Иногда, при HTML-верстке страниц, необходимо выровнять некий блок по центру вертикали родительского. Новички, наткнувшись на свойство CSS «vertical-align:middle», сразу же пытаются использовать его, якобы, по назначению, но не всё так просто.
Это свойство может быть пригодно только в двух случаях: в первом — оно аналогично аттрибуту valign="middle" у HTML-тега <TD> и будет работать как задумано. Во втором случае его можно использовать для выравнивания двух или более рядом стоящих линейных блоков (display:inline).
В остальных случаях, если мы хотим выравнять по центру вертикали родительского блока HTML-элемент, этот вариант не прокатит. Для этого, есть три не идеальных, но решени...
Перетаскивание объектов в HTML средствами JS (Drag & Drop)
Большинство из вас, наверное, уже видели, как на некоторых сайтах, различные элементы HTML-верстки можно «ухватить мышой» и перетащить в другое место на странице. Это называется «drag and drop», а если дословно, то «схвати и тащи». В статье я расскажу, как, при помощи небольшого куска кода на Javascript, реализовать подобный функционал на своём сайте. Итак, поехали.
Во-первых, для того, чтобы объекты на страницы могли свободно перемащаться, независимо от соседних элементов, мы выставим им абсолютное позиционирование (position:absolute) и начальные координаты (left и top) в CSS.
Во-вторых, главным участником всех действий в JS, послужит конечно-же стандартный объект window.event, при помощи...
Как вы думаете, что такое движение объекта? Ответ на этот вопрос также прост, как и его реализация в JS. Так вот, движение объекта — это изменение его координат (позиции) в определенный промежуток времени, по определенному закону движения.
В основе движения, или анимации в Javascript, лежит функция setInterval. Благодаря ей, мы можем создать таймер с необходимым кодом, который будет выполняться в заданный промежуток времени. Итак, что же нам нужно в итоге?
Сперва, необходимо сделать так, чтобы позиционирование объекта не влияло на остальные HTML-элементы на странице. Для этого, через CSS, зададим ему свойство position:absolute и укажем начальные координаты. В дальнейшем, весь скрипт с...
