Blog
Web development: Plovoucí reklama
| Zobrazit obsah | Zobrazit komentáře | Zobrazit pouze komentáře
|
Po delší době zase nějaký ten zápis do kategorie
Web development.
A aby toho nebylo málo, dnešní zápis bude s věnováním jednomu kamarádovi (RGB),
který si o mně myslí, že jsem JS maniak. Odpověď zní, že asi ano, bohužel
to jsou ale všechno situace, které dostávám na starost, abych je vyřešil,
nemám tedy na výběr :-) O co tedy v dnešním zápise půjde. Není to příliš
hezké téma, jedná se o reklamu. Jak tedy umístit snadno a rychle plovoucí
reklamu při načtení stránky, nad obsah a přímo na střed. To co bude
na následujících řádcích popsáno nemusí být nutně finální řešení, některé
konstrukce jsou možná mírně složité a neomalené, ale tak šel vývoj.
Odkaz
na ukázkový kód (poloprůhledné pozadí mimo MSIE - souboj s vlastností filter někdy jindy ;-)).
floatAdvertisement-page.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
<title>KAVALEK.NET - Combo Boxes</title>
<script src="floatDiv.js" type="text/javascript"></script>
</head>
<body>
<h1>Float advertisement</h1>
<p>
Lorem ipsum dolor sit amet consectetuer lacus In odio sit felis. Tincidunt
Nullam quis Vivamus feugiat et tempus a egestas vitae congue. Nascetur
Vivamus Ut pellentesque Donec pretium fringilla auctor consequat Sed eget.
Orci volutpat dictumst Nam Ut at tellus Vivamus cursus sagittis quis. Semper
Donec facilisi ante at id Aliquam nunc Nullam id neque. Integer condimentum
Curabitur ultrices auctor velit Donec habitant et est ornare. Amet.
.
.
.
Nullam quis Vivamus feugiat et tempus a egestas vitae congue. Nascetur
Vivamus Ut pellentesque Donec pretium fringilla auctor consequat Sed eget.
Orci volutpat dictumst Nam Ut at tellus Vivamus cursus sagittis quis. Semper
Donec facilisi ante at id Aliquam nunc Nullam id neque. Integer condimentum
Curabitur ultrices auctor velit Donec habitant et est ornare.
</p>
<!-- Advertisement - BEGIN -->
<div id="adv" style="background-color: #f2ab40; padding: 5px;
width: 400px; height: 400px;
border: 1px solid #000000; display: none;">
<div style="text-align: right; margin-right: 5px;">
<a href="javascript:void(0);" title="Close" onclick="hideElement('adv')">Close</a>
</div>
Lorem ipsum dolor sit amet consectetuer lacus In odio sit felis. Tincidunt
Nullam quis Vivamus feugiat et tempus a egestas vitae congue. Nascetur
Vivamus Ut pellentesque Donec pretium fringilla auctor consequat Sed eget.
Orci volutpat dictumst Nam Ut at tellus Vivamus cursus sagittis quis. Semper
Donec facilisi ante at id Aliquam nunc Nullam id neque. Integer condimentum
Curabitur ultrices auctor velit Donec habitant et est ornare. Amet.
Nulla vitae ac gravida sociis rhoncus eu egestas purus montes ut. Nulla
dignissim dictumst elit Morbi at dictum sed et non Vivamus. Neque id
condimentum a dolor sit mauris interdum purus laoreet eget. Adipiscing
tempus elit metus lacinia lacinia lacus sit ipsum Nam pellentesque.
</div>
<!-- Advertisement - END -->
</body>
</html>
floatDiv.js
// If type is "width" returns browser width else returns browser height
function getSize(type) {
var browserWidth = 0;
var browserHeight = 0;
if(typeof(window.innerWidth) == "number" ) {
// All browsers except MSIE
browserWidth = window.innerWidth;
browserHeight = window.innerHeight;
} else if(document.documentElement
&& (document.documentElement.clientWidth || document.documentElement.clientHeight)) {
// MSIE 6+ in 'standards compliant mode'
browserWidth = document.documentElement.clientWidth;
browserHeight = document.documentElement.clientHeight;
} else if(document.body && (document.body.clientWidth || document.body.clientHeight)) {
// MSIE 4 compatible - old browsers
browserWidth = document.body.clientWidth;
browserHeight = document.body.clientHeight;
}
// Return value according type
if(type == "width") return browserWidth;
else return browserHeight;
}
// Returns browser width via getSize()
function getBrowserWidth() {
return getSize("width");
}
// Returns browser width via getSize()
function getBrowserHeight() {
return getSize("height");
}
// Count and return top right corner of element - left
function getElementPositionLeft(id) {
var e = document.getElementById(id);
var eWidth = removePx(document.getElementById(id).style.width);
return (Math.round((getBrowserWidth() - eWidth) / 2));
}
// Count and return top right corner of element - top
function getElementPositionTop(id) {
var e = document.getElementById(id);
var eHeight = removePx(document.getElementById(id).style.height);
return Math.round((getBrowserHeight() - eHeight) / 2);
}
// Set element position - left
function setElementPositionLeft(id) {
checkAbsolutePosition(id);
document.getElementById(id).style.left = getElementPositionLeft(id) + "px";
return;
}
// Set element position - top
function setElementPositionTop(id) {
checkAbsolutePosition(id);
document.getElementById(id).style.top = getElementPositionTop(id) + "px";
return;
}
// Set element position
function setElementPosition(id) {
setElementPositionLeft(id);
setElementPositionTop(id);
setZIndex(id);
setVisibility(id);
return;
}
/* ************************************************************************** */
/* Support functions */
/* ************************************************************************** */
// Check absolute position setting
function checkAbsolutePosition(id) {
if(document.getElementById(id).style.position != "absolute")
document.getElementById(id).style.position = "absolute";
return;
}
// Remove string 'px' from CSS style
function removePx(text) {
return text.replace(/px/, "");
}
// Set z-index - great number for its layer
function setZIndex(id) {
document.getElementById(id).style.zIndex = 1000;
return;
}
// Set visibility
function setVisibility(id) {
document.getElementById(id).style.display = "inline";
return;
}
// Hide element
function hideElement(id) {
document.getElementById(id).style.display = "none";
return;
}
Jak to funguje
Do webové prezentace vložíme libovolný element, nejlépe div, ale
můžeme i img. Přiřadíme mu jednoznačný identifikátor id
přes který se pak budeme na tento element odkazovat. Pak už jen do onload
události elementu body přidáme hlavní funkci, která se
o všechno postará. Je vhodné, ne však nutné, nastavit počáteční viditelnost
objektu display na none, aby nebylo vidět
přebliknutí při přesunu. Dále pak přiřadíme událost pro skrytí reklamy
(viz ukázka).
Drobná úprava
Chceme-li používat tuto funkci k zobrazení při uživatelské události někde na stránce,
která je tak obsáhlá, že jsou v prohlížeči aktivní posuvníky, musíme kód mírně
upravit. Bez této úpravy by se nám plovoucí objekt objevil někde mimo aktivní
část, protože se počítá s velikostí okna prohlížeče, ne dokumentu. Využijeme
vlastností hodnot posuvníků k zjištění pozice v dokumentu. Do souboru
floatDiv.js přidáme následující funkce:
// If type is "left" returns scrollbar left position else returns scrollbar top position
function getScrollbars(type) {
var scrollLeft = 0;
var scrollTop = 0;
if(document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop)) {
scrollLeft = document.documentElement.scrollLeft;
scrollTop = document.documentElement.scrollTop;
} else if(document.body && (document.body.scrollLeft || document.body.scrollTop)) {
scrollLeft = document.body.scrollLeft;
scrollTop = document.body.scrollTop;
} else {
scrollLeft = window.scrollLeft;
scrollTop = window.scrollTop;
}
// Return value according type
if(type == "left") return scrollLeft;
else return scrollTop;
}
// Returns scrollbar left position via getScrollbars()
function getScrollbarLeft() {
return getScrollbars("left");
}
// Returns scrollbar top position via getScrollbars()
function getScrollbarTop() {
return getScrollbars("top");
}
Dále pak ve stejném souboru upravíme funkce setElementPositionLeft()
a setElementPositionTop() následujícím způsobem:
// Set element position - left
function setElementPositionLeft(id) {
checkAbsolutePosition(id);
document.getElementById(id).style.left = getElementPositionLeft(id) + getScrollbarLeft() + "px";
return;
}
// Set element position - top
function setElementPositionTop(id) {
checkAbsolutePosition(id);
document.getElementById(id).style.top = getElementPositionTop(id) + getScrollbarTop() + "px";
return;
}
Teď už vše funguje jak má. Tuto úpravu můžeme použít i v původním případě, hodnota scrollbarů bude nula, nic se nezmění.
Komentáře k tématu 'Plovoucí reklama' (3 komentáře)
RGB - ty provokatere :-)
teoreticky by se naslo i jine uplatneni, nejaky uvitaci dialog treba, vypada to docela hezky
ale:
"Je vhodné, ne však nutné, nastavit počáteční viditelnost objektu display na none"
-- je to nutne! jinak se v prohlizeci bez JS nebude mozny toho okynka/reklamy zbavit!
Tomáš Kavalek - Re: ty provokatere :-)
No, tak vidis, ale menit to nebudu. Pro priste rekneme "Pro lidi co maji nefunkcni JS, doporucuji element v pocatku skryt, pro ostatni prohlizece to neni nezbytne nutne, a pro vsechny prohlizece doporucuji i presto skryt. Pokud tomu nerozumite, nevadi, proste to skryjte, at to je skryty a neptejte se proc, reknu vam jen to, ze to tak je proste lepsi." Tak asi tak, jinak diky za komentar 
A odpust si ty dve pomlcky, tady nejsi doma a czechtypo tu proste NEjede
A odpust si ty dve pomlcky, tady nejsi doma a czechtypo tu proste NEjede Tomáš Kavalek - Re: Re: ty provokatere :-)
Kolega RGB me narkl, ze jsem pri popisu jak to priste napisu byl urcite pod vlivem omamnych latek, ale to kategoricky odmitam, to neni pravda, jen jsem se do toho moc vzil 
Dekuji za pochopeni.
Dekuji za pochopeni.