Как сделать кнопку «наверх» для сайта

Приветствую вас, друзья мои. Сейчас я освящу наверное один из самых популярных вопросов в области «быстрых рецептов» на html/css/js. А именно — создание кнопки «наверх», которая так часто встречается на самых различных ресурсах. И как обычно, пишу я это не просто так, а исходя из своего личного опыта, ибо вы можете заметить у меня такую кнопку в нижней правой части экрана.

Создание кнопки, как и любого активного элемента на веб-странице, делится на три основные части. Необходимо написать html код самой кнопки, навести марафет с помощью css стилей и оживить кнопку с помощью js кода. О каждом этапе в подробностях, поехали!

HTML код кнопки «наверх»

Начать логичнее всего непосредственно с самой кнопки. Существует огромное количество вариантов, но я расскажу о самом визуально красивом способе нарисовать стрелочку на веб-странице — с помощью набора иконок Font Awesome.

читать далее «Как сделать кнопку «наверх» для сайта»

Обновление содержимого веб-страницы без перезагрузки с помощью JavaScript

Доброго времени суток. На этот раз еще немножечко про JavaScript. Появилась необходимость обновлять содержимое блока <div> по нажатию на кнопку, без перезагрузки страницы, чтобы не свести пользователя с ума. Благодаря этой небольшой заметке можно раз и навсегда запомнить, как такое реализовать.

Обновлять можно не только <div>, но и <span>, <td> и любой другой блочный элемент на странице. Все зависит от вашей фантазии. Перейдем сразу к примерам.

Пример обновления содержимого страницы без перезагрузки

Прежде всего, нам нужен блочный элемент. Пусть это будет <div>, создадим его на странице и присвоим ему уникальный идентификатор, по которому его узнает jQuery.

<div id="block">
    <p>Hello World</p>
</div>

читать далее «Обновление содержимого веб-страницы без перезагрузки с помощью JavaScript»

Вставить код JavaScript на страницу WordPress

Во время изучения премудростей великого и ужасного JavaScript`а, я задался очевидным вопросом: «Как тестировать скрипты?». Да ладно, тестировать можно и на локальном сервере, но внедрять в конечном счете мне их нужно на сайты с WP. Из коробки WordPress не позволяет подключать JavaScript в любом виде, а уж тем более исполнять PHP код. Но если для обхода второго ограничения есть легкие простые плагины, например Exec-PHP, то ради джаваскрипта ставить еще один плагин совсем не хочется.

Если писать скрипт напрямую в страницу, то WP любезно заменит все переносы строк абзацами и заменит кавычки так, что скрипт перестанет работать. Поэтому в голову приходит два логичных решения этой проблемы. Оба они имеют право на существование, так что давайте разбираться.

читать далее «Вставить код JavaScript на страницу WordPress»

Раскрывающийся список на jQuery

До последнего тянул и не использовал JavaScript в своих проектах. И понял, что очень зря. Появилась задача — сделать красиво скрывающийся и раскрывающийся по нажатию блок. В качестве испытательного полигона был выбран этот бложик, а в качестве блока — обычный вложенный список. Суть в том, чтобы заставить элементы вложенного списка появляться и исчезать по нажатию на элемент внешнего.

Допустим, у нас такой список.

<ul>
    <li><h3>Аверченко Аркадий</h3>
        <ul>
            <li>Повести и рассказы</li>
        </ul>
    </li>
    <li><h3>Андреев Леонид</h3>
        <ul>
            <li>Иуда Искариот</li>
        </ul>
    </li>
    <li><h3>Бодров Виталий</h3>
        <ul>
            <li>Кровь титанов(4 книги)</li>
            <li>Хоббит, или туда-сюда-обратно</li>
        </ul>
    </li>
</ul>

Каждый элемент внешнего списка авторов содержит вложенный список их произведений. Нужно сделать так, чтобы при нажатии на имя автора, список его произведений красиво всплывал под ним, и, не менее красиво, исчезал при повторном нажатии. Покажу два решения.

читать далее «Раскрывающийся список на jQuery»