Skip to content

Сниппеты

Простой скриптик для создания кнопки IMDB рейтинга на странице

Скрипт дает возможность создавать вот такую кнопку    одним тегом.

Скрипт можно подключать в любом месте страницы.

Пример кода вставки кнопки: <a id="thirdparty-imdb-rating-tt0245429" class="thirdparty-imdb-rating">  </a>

Дополнительный источник: https://gist.github.com/bogdan-nazar/86b241e4786b8d90cf40

/**
* Simple snippet to embed IMDB rating button to your web-page
* Author: Bogdan Nazar <me@bogdan-nazar.ru>
*
* USAGE: <div class="thirdparty-imdb-rating" id="thirdparty-imdb-rating-ttXXXXXXX"></div>
*        where "ttXXXXXXX" is the uniq IMDB title identifier
*
* IMPORTANT: Before using this snippet you must replace
*   var user = "urXXXXXXXX"
* with your real IMDB user id.
*  
*/
(function(){
  var user = "urXXXXXXXX";
  var $ = {d: document, h: document.getElementsByTagName("HEAD")[0], w: window},
    css = [...

Continue reading

Javascript: Alert Lightbox

var dlgAlert = function(msg, opts) {
	if (typeof opts != "object") opts = {};
	var optsd = {
		background: "#eee",
		borderRadius: 5,
		btnCloseBR: 5,
		btnCloseCap: "Close",
		btnCloseWidth: 150,
		textAlign: "left",
		fontColor: "#000",
		fontSize: 14,
		headerBgColor: "#fff",
		headerFontClr: "#000",
		headerFontSize: 16,
		headerFontWeight: "bold",
		headerHeight: 40,
		headerPadX: 10,
		headerPadY: 0,
		headerTextAlign: "left",
		height: 200,
		paddingX: 10,
		paddingY: 10,
		shaderColor: "#333",
		shaderOpacity: 0.5,
		shaddow: "",
		title: "Alert",
		width: 300
	};
	for (var c in optsd) {
		if (!optsd.hasOwnProperty(c)) continue;
		if (typeof opts[c] == "undefined") opts[c] = optsd[c];
	}
	/*
	сделать проверку входящих opts
	*/
	var d = {};
	d.main = document.createElement("DIV");
	d.main.style.fontSize = ("" + opts.fontSize + "px");
	d.main.style.fontFamily = "Tahoma, Arial, Helvetica, 'Helvetica Neue', 'Lucida Grande', Verdana, sans-serif";
	d.main.style.fontStyle = "normal";
	d.main.style.fontWeight = "normal";
	d.main.style.lineHeight = "normal";
	d.main.style.textAlign = "left";
	d.inner = document.createElement("DIV");
	d.inner.style.position = "absolute";
	d.inner.style.left = "0";
	d.inner.style.right = "0";
	d.inner.style.top = "0";
	d.inner.style.bottom = "0";
	d.inner.style.zIndex = 2147483500;
	d.inner.style.overflow = "hidden";
	d.main.appendChild(d.inner);
	d.shad = document.createElement("DIV");
	d.shad.style.position = "fixed";
	d.shad.style.left = "0";
	d.shad.style.right = "0";
	d.shad.style.top = "0";
	d.shad.style.bottom = "0";
	d.shad.style.background = opts.shaderColor;
	d.shad.style.opacity = opts.shaderOpacity;
	d.shad.style.zIndex = "-1";
	d.inner.appendChild(d.shad);
	d.cont = document.createElement("DIV");
	d.cont.style.position = "fixed";
	d.cont.style.width = "100%";
	d.cont.style.height = "100%";
	d.cont.style.textAlign = "center";
	d.inner.appendChild(d.cont);
	d.vsp = document.createElement("DIV");
	d.vsp.style.display = "inline-block";
	d.vsp.style.height = "100%";
	d.vsp.style.width = "0";
	d.vsp.style.verticalAlign = "middle";
	d.cont.appendChild(d.vsp);
	d.box = document.createElement("DIV");
	d.box.style.display = "inline-block";
	d.box.style.width = "" + opts.width + "px";
	d.box.style.height = "" + opts.height + "px";
	if (opts.borderRadius) {
		d.box.style.borderRadius = "" + opts.borderRadius + "px";
	}
	d.box.style.verticalAlign = "middle";
	d.box.style.background = opts.background;
	d.box.style.overflow = "hidden";
	d.cont.appendChild(d.box);
	d.header = document.createElement("DIV");
	d.header.style.height = "" + opts.headerHeight - (2 * opts.headerPadY) + "px";
	d.header.style.width = "" + (opts.width - opts.headerPadX * 2) + "px";
	d.header.style.padding = "" + opts.headerPadY + "px " + opts.headerPadX + "px";
	d.header.style.lineHeight = d.header.style.height;
	d.header.style.fontSize = opts.headerFontSize;
	d.header.style.fontWeight = opts.headerFontWeight;
	d.header.style.color = opts.headerFontClr;
	d.header.style.background = opts.headerBgColor;
	d.header.style.textAlign = opts.headerTextAlign;
	d.header.innerHTML = opts.title;
	d.box.appendChild(d.header);
	d.body = document.createElement("DIV");
	d.body.style.height = "" + opts.height - (opts.headerHeight * 2 + opts.paddingY * 2) + "px";
	d.body.style.width = "" + (opts.width - opts.paddingX * 2) + "px";
	d.body.style.padding = "" + opts.paddingY + "px " + opts.paddingX + "px";
	d.body.style.textAlign = opts.textAlign;
	d.body.innerHTML = msg;
	d.box.appendChild(d.body);
	d.btnWrap = document.createElement("DIV");
	d.btnWrap.style.height = "" + (opts.headerHeight - opts.paddingY) + "px";
	d.btnWrap.style.width = "" + opts.width + "px";
	d.btnWrap.style.padding = "0 0 " + opts.paddingY + "px 0";
	d.btnWrap.style.textAlign = "center";
	d.box.appendChild(d.btnWrap);
	d.btnClose = document.createElement("BUTTON");
	d.btnClose.style.margin = "0";
	d.btnClose.style.padding = "0";
	d.btnClose.style.outline = "0";
	d.btnClose.style.cursor = "pointer";
	d.btnClose.innerHTML = opts.btnCloseCap;
	d.btnClose.style.border = "1px solid #bcbcbc";
	if (opts.btnCloseBR) d.btnClose.style.borderRadius = "" + opts.btnCloseBR + "px";
	d.btnClose.style.fontSize = "" + opts.fontSize + "px";
	d.btnClose.style.width = "" + (opts.btnCloseWidth - 2) + "px";
	d.btnClose.style.height = "" + (opts.headerHeight - opts.paddingY - 2) + "px";
	d.btnClose.style.lineHeight = d.btnClose.style.height;
	d.btnClose.setAttribute("onclick", "document.body.removeChild(this.parentNode.parentNode.parentNode.parentNode.parentNode)");
	d.btnWrap.appendChild(d.btnClose);
	document.body.appendChild(d.main);
	return d;
};

События «mouseover» и «mouseout» для многослойных html-конструкций

Наверное многие программеры сталкивались с такой фигней, когда надо повесить, например, анимацию на кнопку, которая состоит из нескольких слоев (включая текстовый заголовок). Если слои вложены друг в друга по простому, без всяких position:relative и position:absolute, то делается это довольно-таки просто. Но как быть, если кнопка имеет неопределенную форму, и дочерние слои, например, вылазят за границы кнопки?

Самый простой метод, без выноса мозга, это перекрыть все слои одним верхним, прозрачным, и на него повесть все события. И в большинстве вариантов верстки таких кнопок это проходит на ура.. Но, все-таки, бывают случаи, когда «эстетическая» красота интерфейса очень важна. Например, ссылка под кнопкой должна откликаться отдельно (как ссылка), но в то же время подсвечивать всю кнопку.

Превью скрипта и полный исходник примера под катом.

Continue reading

Асинхронная вставка счетчика Hotlog

На одном из сайтов попросили меня вставить счетчик HotLog. Дело ерундовое вобщем-то, но возникла небольшая проблемка — сайт статический, каждая страница сверстана отдельной html-кой. Все бы ничего, да только страничек этих довольно много, и вставлять код в каждую из них было очень лениво. Решил проблему просто — переделал код так, чтоб счетчик создавался без document.write(), и вставил его в одну из js-ок, которая вставляется во все страницы.

//<!-- HotLog -->
(function(){
	document.cookie = "hotlog=1; path=/";
	var cont = null,
		//в селектор нужно указать любой селектор, чтоб локализовать контейнер для счетчика
		//ниже просто пример "от блады"
		selector = "html > body > table > tbody > div";
		//hotlog_id - номер счетчика, его нужно выцепить из оригинального кода вставки
		hotlog_id = "148182",
		hotlog_js = "1.3",
		hotlog_r = "" + Math.random() + "&s=" + hotlog_id + "&im=201&r=" + escape(document.referrer) + "&pg=" + escape(window.location.href);

	hotlog_r += ("&c=" + (document.cookie ? "Y" : "N"));
	hotlog_r += ("&j=" + (navigator.javaEnabled() ? "Y" : "N"));
	hotlog_r += ("&wh=" + screen.width + 'x' + screen.height + "&px=" + (((navigator.appName.substring(0,3) == "Mic")) ? screen.colorDepth : screen.pixelDepth));
	hotlog_r += ("&js=" + hotlog_js);
	hotlog_html = "<a href='http://click.hotlog.ru/?" + hotlog_id + "' target='_top'><img src='http://hit6.hotlog.ru/cgi-bin/hotlog/count?" + hotlog_r + "&'" + "border=\"0\" width=\"88\" height=\"100\" alt=\"HotLog\" /></a>";

	var checkCur = 0,
		checkInt = 100,
		checkTotal = 500;

	var HLInsert = function(){
		if (checkCur++ > checkTotal) {
			console.log("HotLog counter not inserted: container not found by selector [" + selector + "].");
			return;
		}
		cont = document.querySelector(selector);
		if (cont) {
			cont.innerHTML = hotlog_html;
			console.log("HotLog counter inserted.");
		} else {
			window.setTimeout(HLInsert, checkInt);
		}
	};
	HLInsert();

})();
//<!-- /HotLog -->