xandeadx.ru Блог музицирующего веб-девелопера

JavascriptКак скрыть элемент при клике вне этого элемента

Опубликовано в

Распространённая задача — скрыть всплывающее js окно при клике вне этого окна.

Смысл в следующем — вешаем на документ обработчик onclick, который благодаря всплытию событий (bubbling) будет ловить все клики на странице. В этом обработчике, в переменной event.target будет доступен элемент, на котором произошёл клик. С помощью jQuery метода closest() проверяем где произошёл клик — на элементе или вне элемента. Если вне, то скрываем элемент.

HTML:

<a href="#" id="toggle-link">Show message</a>
<div id="message">
    <p>Some text.</p>
</div>

Javascript:

JavascriptCodeMirror — библиотека для удобного редактирования кода

Опубликовано в

Описание

CodeMirror

CodeMirror это Javascript библиотека, которая превращает textarea в подобие IDE, с подсветкой синтаксиса, табуляцией, автоотступами, автодополнением и другими полезными фишками.

Поддерживает подсветку основных языков программирования — C, C#, CSS, Javascript, HTML, PHP, SQL.

Есть API и множество настроек.

JavascriptКак подключить javascript файл из своего js скрипта

Опубликовано в

Пример подключения скрипта http://example.com/script.js:

Native javascript

var script = document.createElement('script');
script.src = 'http://example.com/script.js';
document.getElementsByTagName('head')[0].appendChild(script);
alert('script loaded');

jQuery:

$.getScript('http://example.com/script.js', function(){
  alert('script loaded');
});

JavascriptПользовательские события в jQuery

Опубликовано в

В jQuery есть множество встроенных событий, на которые можно навешивать свои обработчики (например click или change). Помимо этого, существует возможность создавать свои события с помощью метода trigger и перехватывать их с помощью bind.

Например, мы пишем скрипт, который выводит на экран модальное окно. Окно закрывается одним из трёх способов — кликнув на крестике в правом верхнем углу, кликнув в любом месте страницы за пределами окна или нажав Esc. И вот мы хотим дать возможность сторонним скриптам отлавливать момент закрытия окна и навешивать на это событие свои функции.

JavascriptКак с помощью jQuery UI Dialog открыть AJAX окно

Опубликовано в

В jQuery UI виджете Dialog нет встроенной возможности показать окно с данными, полученными с помощью AJAX. Но это легко решаемо:

$('<div>').load('/some/url').dialog();

Или так, если после получения данных, их необходимо обработать:

$('<div id="my-dialog">Загрузка...</div>').dialog({
    open: function() {
        $.get('/some/url', function(response) {
            $('#my-dialog').html('<p>' + response + '</p>

JavascriptКак получить реальный размер элемента при overflow:scroll

Опубликовано в

Чтобы узнать реальные размеры элемента, у которого свойство overflow установлено в scroll или auto, и содержание которого больше размеров самого элемента, нужно воспользоваться свойством scrollWidth:

<div id="div" style="width:200px; overflow-x:auto; white-space:nowrap;">
  Длинный предлинный контент, который не влазит в 200px
</div>
 
<input type="button" onclick="alert(document.getElementById('div').scrollWidth);" value="Show scrollWidth">

Демо.

JavascriptПользовательские атрибуты в html-тегах

Опубликовано в

В HTML5 появилась возможность добавлять к тегам пользовательские атрибуты и получать к ним доступ с помощью javascript. Такие атрибуты отличаются от стандартных префиксом data-:

<img id="img" src="kitty.png" data-color="red" data-is-protected="no" />

Ниже перечислены все доступные способы доступа к таким атрибутам.

JavascriptОшибка при отправке формы: submit is not a function

Опубликовано в

Код, который вызывает ошибку:

<form id="my-form">
    <input type="text" name="name" id="name" />
    <input type="submit" value="отправить" id="submit" />
    <input type="button" value="отправить c помощью js" onclick="formSubmit();" />
</form>
 
<script>
function formSubmit() {
    document.getElementById('my-form').submit();
}
</script>