Web Мастерская
Контакт

Web Мастерская»Блог

Сообщество Web Мастеров. Тут собрано всё, чтобы написать свой первый сайт, запустить его в Интернет и поддерживать его в течении всей его работы.
Поиск блогов...

Как подключить highlight.js (Подсветка синтаксиса)

CSS JavaScript
Подключить highlight.js на сайте довольно просто, для этого переходим на сайт: https://highlightjs.org/ выбираем все языки, которые необходимо посветить на вашем сайте и скачиваем архив (https://highlightjs.org/download/).
Распаковываем архим, файл highlight.pack.js и один из файлов стиля (css) помещаем на вашем сайте, далее между тегами <head> и </head> подключаем файл highlight.pack.js, прописывая: 
<script type="text/javascript" src="js/highlight.pack.js"></script>

И файл стиля, например vs.css: 
<link rel="stylesheet" href="css/vs.css" />

Еще один код, который надо вставить между тегами <head> и </head>: 
<script type="text/javascript">
    hljs.initHighlightingOnLoad();
</script>

Теперь тот код, что надо подсветить помещаем между тегами: 
<pre><code>
    <!-- Тут код, который необходимо подсветить -->
</code></pre>

Вот и всё!

Спасибо за внимание!...

Индикатор выполнения AJAX запроса (jQuery)

Библиотека JS
Как говорится "Краткость - сестра таланта", я конечно не брат краткости и вообще, ее родственником не являюсь, но буду краток! Сразу к делу.

Допустим, у нас есть код обработки формы (форма #form), в которую вводим, какие то данные, жмем кнопку и через ajax выводим результат на экран (блок #display): 
    $.ajax({ 
        url: 'ajax.php',
        type: 'POST',
        data: $('#form').serialize(),  
        success: function(data) {
            $('#display').html(data);        
        }
    });

Стоит задача - имитировать процесс выполнения обработки данных. В качестве индикатора можно использовать картинку анимацию (формат .gif). Анимированная картинка должна появится сразу после нажатия кнопки и исчезнуть перед тем, как будет выведен результат.

Приступаем, создаем класс, задаем размеры картинки и прописываем полный путь до нее: 
.processing {
    width: 25px;
    height: 10px;
    background: url("loading.gif");
}

Теперь в ajax запрос добавляем две функции: addClass() и remove...

Анимированное появление и исчезновение HTML элементов на JavaScript | jQuery

Библиотека JS
Для появлении и исчезновении элементов, будем использовать библиотеку jQuery (Как подключить библиотеку jQuery).

И без лишних слов, сразу к делу. Я написал вот такой код: 
<button id="button">Показать</button>
<div style="display: none;">Скрытый текст</div>
<script>
$('#button').click(function() {
    $('div').show(1000);

    setTimeout(function() {
        $('div').hide(1000);
    }, 2000);
}); 
</script>

Данный код, после нажатия кнопки "Показать" разворачивает в течении одной секунды строчку "Скрытый текст", и ровно через две секунды (с момента нажатия кнопки) сворачивает текст обратно. Сворачивается строчка, так же одну секунду. Из-за того, что на появление и исчезновение заданно время, появление текста стало анимированным.

Постараюсь подробно объяснить, что происходит в нашем примере, так сказать, разберу код по отдельности. Первые две строчки: 
<button id="button">Показать</button>
<div style="display: none;">Скрытый текст</div>

Это кнопка, с идентификатором button, после...

Как установить задержку выполнения функции на JS

Недавно задавали вопрос, как придержать выполнение функции на определенное время, используя JavaScript, как это сделать, расскажу в этой теме. Для этого будем использовать функцию setTimeout, данная функция однократно выполняет помещенный в нее код по истечению заданного времени (в миллисекундах). Пример работы: 
setTimeout(function() {
    alert('Привет Мир!');
}, 2000);

Код из примера выведет сообщение "Привет Мир!" по истечении двух секунд (2000). Кстати, это же код можно написать так: 
function hi() {
    alert('Привет Мир!');
};

setTimeout(hi, 2000);

Или так: 
function hi() {
    setTimeout(function() {
        alert('Привет Мир!');
    }, 2000);
};

hi();

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

Удалить пробелы в начале и в конце строки на jQuery

JavaScript Библиотека JS
Порой появляется необходимость удалить пробелы в начале и в конце строки, например, когда надо проверить поле формы на пустоту. Удаляются пробелы при помощи функции trim, предназначение этой функции, как раз для удаления пустого место с начала и конца строки. Делается это так: 
row = $.trim(row);

Чтобы убедиться, что функция действительно работает, могу предложить попробовать выполнить код ниже: 
var row = ' Библиотека jQuery      ';
alert('\'' + row + '\'');
row = $.trim(row);
alert('\'' + row + '\'');

Тут мы создаем переменную с пробелами в начале и в конце фразы "Библиотека jQuery". Функция alert, строчкой ниже, выведет окошко с сообщением:
' Библиотека jQuery '

Видно, что между фразой и кавычками имеются пробелы.
Дальше по коду, функция trim удаляет пробелы и отдает новое значение той же переменной.
Кстати писать функцию необходимо со знаком доллара, либо со словом jQuery (так: $.trim или так: jQuery.trim), в противном случаи, функция работать не будет и скрипт будет...
Реклама