English | Magyar
JS ki | CSS ki | Ékezetek ki | HiContrast
Lapozó:  (0 - 1428) 
<== | ==>
Ugrás a végére | Összes megjelenítése | Utolsó oldal
OpenOpera patches | Opera-SSL patches | Opera 12.15 source (Git repository) | Opera 12.15 source (Torrent) | Opera internal pages | Otter Browser Linux x64 - Qt5.15.2/QtWebKit5.602.1 (2024.12.02. 21:02)
OS for MC680x0 | OS for PPC | OS for Sparc64 | besztofbégéaefcé | CSÉNDZSLOG | WebToolz | DDG Shit Filter | Google Shit Filter | Progz | Fast CSS Box | Browser | OS | Agent | Statisztika | BBCode
Monospace font-family: Courier New | Browser default monospace
Email értesítő / Email notification ===> 
Keresés
Σ: 1 post

TCH  (statz) Főfasz
#1, Főfasz (10466)
8525 | #2e81 | ^ | Idézet | Tue, 16 Sep 2014 14:55:23 +02
213.222.*.* Linux x86 Opera Classic Hungary *.catv.broadband.hu
Írjunk fejlécnél megragadható, klónozható, mindentől függetlenül mozgatható, overlay-t támogató és CSS-ből 100%-ig bedesignolható "ablakot" kevesebb, mint 150 sornyi JavaScriptből rovat:
function new_fwin(data)
{
	var fwin_caption = document.createElement('div');
	fwin_caption.className = 'fwin-title';
	fwin_caption.innerHTML = data.title;

	var fwin_close = document.createElement('button');
	fwin_close.className = 'fwin-close';
	fwin_close.innerHTML = 'X';
	fwin_close.onmousedown = function (e)
	{
		this.parentNode.dataset.block = '1';
		var cld = this;
		window.onmouseup = function ()
		{
			cld.parentNode.dataset.block = '0';
			window.onmouseup = null;
		};
	}
	fwin_close.onmouseup = function (e)
	{
		if (this.parentNode.dataset.block == '1' && e.button == 0)
		{
			this.parentNode.dataset.block = '0';
			document.getElementById(data.id).style.visibility = 'hidden';
			overlay_check();
			typeof(data.callback) == 'function' ? data.callback() : 0;
		}
	};

	var fwin_header = document.createElement('div');
	fwin_header.className = 'fwin-header';
	fwin_header.dataset.block = '0';
	fwin_header.style.visibility = data.visibleHeader === true ? '' : 'hidden';
	fwin_header.onmousedown = function (e)
	{
		if (e.button == 0 && this.dataset.block == '0')
		{
			var z = 0;
			var u = document.getElementsByClassName('fwin-container');
			for (var i = 0; i < u.length; ++i)
			{
				u[i].style.zIndex > z ? z = u[i].style.zIndex : 0;
			}
			var fwin = document.getElementById(data.id);
			fwin.style.zIndex = (parseInt(z) + 1) + '';
			var ox = e.clientX - parseInt(fwin.style.left);
			var oy = e.clientY - parseInt(fwin.style.top);
			window.onmousemove = function (e)
			{
				fwin.style.left = (e.clientX - ox) + 'px';
				fwin.style.top = (e.clientY - oy) + 'px';
			};
			window.onmouseup = function (e)
			{
				if (e.button == 0)
				{
					window.onmouseup = null;
					window.onmousemove = null;
				}
			};
		}
		'stopPropagation' in e ? e.stopPropagation() : 0;
		'preventDefault' in e ? e.preventDefault() : 0;
	};
	fwin_header.appendChild(fwin_close);
	fwin_header.appendChild(fwin_caption);

	var fwin_body = document.createElement('div');
	fwin_body.className = 'fwin-content';
	fwin_body.innerHTML = data.content;

	var fwin_container = document.createElement('div');
	fwin_container.id = data.id;
	fwin_container.className = 'fwin-container';
	fwin_container.setAttribute('data-overlay', data.overlay === true ? '1' : '0');
	fwin_container.style.zIndex = '1000001';
	fwin_container.style.position = 'fixed';
	fwin_container.style.visibility = data.show === true ? '' : 'hidden';
	data.width != undefined && data.width != false ? fwin_container.style.width = data.width + 'px' : 0;
	data.height != undefined && data.height != false ? fwin_container.style.height = data.height + 'px' : 0;
	if (data.center === true)
	{
		fwin_container.style.left = (((window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth) >> 1) - (data.width >> 1)) + 'px';
		fwin_container.style.top = (((window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight) >> 1) - (data.height >> 1)) + 'px';
	}
	else
	{
		fwin_container.style.left = data.left != undefined && data.left != false ? data.left + 'px' : '0px';
		fwin_container.style.top = data.top != undefined && data.top != false ? data.top + 'px' : '0px';
	}
	fwin_container.appendChild(fwin_header);
	fwin_container.appendChild(fwin_body);

	document.body.appendChild(fwin_container);

	data.stretch === true ? fwin_container.childNodes[1].style.height = (fwin_container.clientHeight - (fwin_container.childNodes[0].clientHeight + ((fwin_container.scrollHeight - fwin_container.clientHeight) << 2))) + 'px' : 0;
	if (data.overlay === true && overlay == null)
	{
		overlay = document.createElement('div');
		overlay.className = 'fwin-overlay';
		overlay.style.zIndex = '1000000';
		overlay.style.visibility = 'hidden';
		overlay.style.position = 'fixed';
		overlay.style.width = '100%';
		overlay.style.height = '100%';
		overlay.style.top = '0px';
		overlay.style.left = '0px';
		overlay.style.backgroundColor = data.overlayColor;
		document.body.appendChild(overlay);
		overlay_check();
	}
}

function fwin_show(id)
{
	document.getElementById(id).style.visibility = '';
	overlay_check();
}

function overlay_check()
{
	if (overlay != null)
	{
		var x = document.getElementsByClassName('fwin-container');
		for (var i = 0; i < x.length; ++i)
		{
			if (x[i].getAttribute('data-overlay') != 1)
			{
				continue;
			}
			if (x[i].style.visibility != 'hidden')
			{
				overlay.style.visibility = 'visible';
				return;
			}
		}
		overlay.style.visibility = 'hidden';
	}
}

var overlay = null;
Update 2015.10.10.:
 •  Added: A bezáró gombra került egy "X".
 •  Added: A bezáró gombnak most már van callback-je.
 •  Saned: A bezáró gomb innentől nem mousedown eseményre reagál, hanem normális klikkre.
 •  Saned: Felesleges stopPropagation()-ök, meg preventDefault()-ok kihajigálva.
 •  Fixed: Ha mozgatás közben a pointer elhagyta az ablakot, akkor megállt a mozgás és ha visszament, folytatódott akkor is, ha a bal gomb nem volt nyomva.
 •  Fixed: Operában az ablak mozgatás közben elcsúszott balra/fel, mert Operában az offsetLeft/offsetTop máshogy működik.

Update 2017.02.27.:
 •  Fixed: Close esetén a callback akkor is le akart futni, ha nem volt megadva. Hibát nem okozott, csak a konzolban jelent meg, hogy nem sikerült.

Funkciók:

new_fwin(data): Ez hozza létre a mozgatható ablakot. A data paraméter egy JS tömb, amiben a következő kulcsok lehetnek (az id kötelező, a többi opcionális):
 •  id: Az ID, amit az ablak konténere kap, és amivel hivatkozni tudunk rá.
 •  visibleHeader: Látható-e az ablak fejléce.
 •  title: A fejlécen található felirat.
 •  content: Az ablak tartalma.
 •  stretch: Húzza-e szét az ablak tartalmának konténerét 100% magasságra.
 •  left: Az ablak bal felső sarkának X koordinátája.
 •  top: Az ablak bal felső sarkának Y koordinátája.
 •  width: Az ablak szélessége.
 •  height: Az ablak magassága.
 •  center: Rakja-e középre az ablakot létrehozáskor. (Felülírja az X,Y koordinátákat.)
 •  show: Jelenítse-e meg az ablakot automatikusan.
 •  overlay: Takarja-e ki az ablak megjelenítésekor a többi tartalmat egy overlay-jel.
 •  overlayColor: Az overlay színe.
 •  callback: A függvény, amit az ablak bezárásakor végrehajt a browser.

fwin_show(id): Ablak megjelenítése, az id paraméter az ablak konténerének ID-je, amit a new_fwin függvény data paraméterében átadtunk létrehozáskor.

CSS osztályok:

fwin-overlay: Az overlay-ra osztálya.
fwin-container: Az ablak konténerének osztálya.
fwin-header: Az ablak fejlécének osztálya, a szülő a fwin-container.
fwin-close: Az ablak bezárógombjának osztálya, a szülő a fwin-header.
fwin-title: Az ablak feliratának osztálya, a szülő a fwin-header.
fwin-content: Az ablak tartalmának osztálya, a szülő a fwin-container.

És akkor egy kapaszkodó a CSS-hez:
.fwin-container
{
	border: 2px solid #000000;
	border-top: 2px solid #ffffff;
	border-left: 2px solid #ffffff;
	background-color: #aaaaaa;
}

.fwin-header
{
	width: 100%;
	border-bottom: 2px solid #000000;
	background-color: #6688bb;
	cursor: move;
}

.fwin-close
{
	text-align: center;
	background-color: #6688bb;
	cursor: default;
	color: #ffffff;
	border: 0px;
}

.fwin-title
{
	display: inline-block;
	padding-left: 4px;
	color: #ffffff;
	padding: 2px;
}

.fwin-content
{
	padding: 2px;
}


English | Magyar
JS ki | CSS ki | Ékezetek ki | HiContrast
Lapozó:  (0 - 1428) 
<== | ==>
Ugrás a végére | Összes megjelenítése | Utolsó oldal
OpenOpera patches | Opera-SSL patches | Opera 12.15 source (Git repository) | Opera 12.15 source (Torrent) | Opera internal pages | Otter Browser Linux x64 - Qt5.15.2/QtWebKit5.602.1 (2024.12.02. 21:02)
OS for MC680x0 | OS for PPC | OS for Sparc64 | besztofbégéaefcé | CSÉNDZSLOG | WebToolz | DDG Shit Filter | Google Shit Filter | Progz | Fast CSS Box | Browser | OS | Agent | Statisztika | BBCode
Monospace font-family: Courier New | Browser default monospace
Email értesítő / Email notification ===> 
Keresés

Név: (max 255 byte)

Email: (max 255 byte) Nem kötelező!

Üzenet: (max 65536 kar.) 65536-0=65536




crap_vkn v4.34.0 by TCH
Thx to saxus for the escaped string decoder function (PHP), the realIP function (PHP) & the SQL handle layer (PHP), to thookerov for the int_divide function (PHP), to Jeff Anderson for the getSelText function (JS), to Alex King for the insertAtCursor function (JS), Flood3r for the new CSS styles, Pety for the spamprotection idea and some design and comfort ideas, MaxMind for the IP2Country database, famfamfam for the flags of countries and an unknown PHP programmer for the removeAccents function.



Kecskebaszók ide!