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

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

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

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

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

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

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

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

Читати далі

Як порахувати висоту/ширину елемента, коли його не видно (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;

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

	}

);

Читати далі

Чому не працює jQuery.getJSON() в IE8?

  1. Можливо є зайві коми в записі JSON, наприклад, як остання кома в коді:

    obj = {a: 1, b: 2, c: 3,}
    
  2. Перевірити, чи прописано:

    contentType: application/json
    
  3. Не кешувати результати, оскільки ІЕ «агресивно» кешує AJAX-запити:

    jQuery.ajaxSettings.cache = false;
    // don't cache the result
    

ezColumns: динамічне розбиття на колонки

ezColumns: динамічне розбиття на колонки

ezColumns — jQuery плагін для сайтів, які використовують в дизайні колонки (т.з. газетний стиль, коли текст для зручності читача розбивають на вузькі колонки). Автор: Андрес Відал (англ. Andres Vidal).

Плагін «бере» дочірні елементи контейнера і організовує їх в колонки. Його також можна комбінувати з механізмом пошуку, щоб відсіювати елементи, які не задовольняють бажаним критеріям (на сторінці плагіна є хороший демонстраційний приклад).

Синтаксис:

$().ezColumns({options});

Читати далі