Записи в категорії «JavaScript»

Пару слів про meta-тег viewport та масштабування в мобільних браузерах

Трохи історії

Був час, коли мобільних пристроїв (смартфонів, планшетів) не було чи були, але не в тій кількості, в якій вони є зараз. Веб-майстри оптимізовували сайти в основному під десктоп (від англ. desktop). Роздільна здатність настільний моніторів потрохи зростала — якийсь час веб-майстри орієнтувалися на 800 пкс., згодом на 1024 і так далі.

Час йшов і в мережі з’явилась величезна кількість сайтів оптимізованих під певну ширину монітора. Адже на загал всі мали монітори плюс-мінус такої ширини і вище.

І тут на арену вийшли мобільні пристрої, в яких кількість пікселів поступалася тим, що була в той час на десктопах.

Що робити? Треба якось правильно показувати власникам цих пристроїв веб-сторінки, які на той час були.

Примусити всіх переробити сайти було нереально, тож розробники мобільних браузерів придумали маштабувати веб-сторінки.

Читати далі

JavaScript: метод console.table()

Для тестування JavaScript коду зручно використовувати метод console.log(), про який всі чули, а, от, про console.table() знає менше людей.

Давайте спробуємо останній метод в дії (Firefox):

var data = [
	'Богдан Хмельницький', 'Петро Дорошенко', 'Пилип Орлик'
];
console.table(data);

Читати далі

Як порахувати висоту/ширину елемента, коли його не видно (display: none)?

Якщо ви спробуєте отримати висоту/ширину елемента, який прихований за допомогою display: none, то вам це не вдасться: вони будуть рівні нулю. Адже браузер нічого не знає про те, скільки місця має займати «прихований» елемент. Що робити?

Мені найбільше подобається наступний підхід-трюк. Для елемента, параметри якого ми намагаємось дізнатись, прописується наступне:

var block1 = $('...');

block1.css({
    position: "absolute",
    visibility: "hidden",
    display: "block"
});

Читати далі

Як перевірити наявність в елемента більше, ніж одного CSS-класу?

Маємо, до прикладу, елемент на сторінці, HTML-код якого наступний:

<div id="block1" class="sorted visible"></div>

і хочемо перевірити, чи має теґ <div> потрібні нам CSS-класи (скажімо, чи він посортований і видимий).

Можна скористатись функцією hasClass() і зробити перевірку так:

var block1 = $('#block1');

if ( block1.hasClass('sorted') && block1.hasClass('visible') ){
	// елемент містить обидва класи CSS
}

Читати далі

Якщо jQuery не завантажиться з CDN, то вона завантажиться з вашого сайту

Як відомо, щоб не навантажувати власний сервер, деякі розробники використовують публічні репозиторії, з яких можна безперешкодно викачувати потрібні бібліотеки.

Скажімо, за допомогою такого коду:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/{версія}/jquery.min.js"></script>

ви можете завантажити бібліотеку jQuery прямо з мережі доставки контенту (CDN — Content Delivery Network) пошукового гіганта Google.

Звісно не лише Google має такий CDN. Наприклад, ще є хостинг бібліотек від Яндекса — http://api.yandex.ru/jslibs/ і не тільки.

Читати далі

Як встановити затримку при наведенні (hover) в jQuery?

var timer;

$("деякий селектор").hover(

	function(){ // mouse enter

		if(timer) {

			clearTimeout(timer);
			timer = null;

		}

		timer = setTimeout(function() {

			// робимо щось при наведенні

		}, 500) // затримка в 500 мс 

	},

	function(){ // mouse leave

		clearTimeout(timer);
		timer = null;

		// робимо щось після того, як курсор миші
		// покинув елемент

	}

);

Читати далі

JavaScript: функції trim, ltrim та rtrim

Функція trim видаляє пробіли з початку і кінця рядка, ltrim — тільки зліва (з початку), rtrim — тільки справа (з кінця).

String.prototype.trim = function() {
    return this.replace(/^\s+|\s+$/g, "");
}
String.prototype.ltrim = function() {
    return this.replace(/^\s+/, "");
}
String.prototype.rtrim = function() {
    return this.replace(/\s+$/, "");
}

Читати далі