Autor Zpráva
xlifer
Profil
#1 · Zasláno: 14. 9. 2010, 20:43:00
Odpovědět Citovat
Poradíte s kódem na jednoduchém příkladu jak udělat ztmavení obsahu?

Nevím si s tím rady ani jak na to.

Moc děkuji. 

<html>
<head>
<title>test</title>
</head>
<body>

Zde je obsah webu.

Po kliknutí na tento odkaz se provede <a href="..." onClick="...udalost na ztmavení a zobrazeni tohtoo divu...">ztmavení</a>

<div id="blok" style="display:none">
Tento blok chci po udalosti onClick zvyditelnit do popředí a obsah webu pod ním zmatvit.
</div>

Zde je obsah webu.

</body>
</html>
panther
Profil
#2 · Zasláno: 14. 9. 2010, 20:47:48
Odpovědět Citovat
xlifer:
ztmavením myslíš asi opacity, bude se ti hodit asi i z-index.

Onclickem měň pouze třídu, která bude mít na starosti ztmavení.
johnl
Profil
#3 · Zasláno: 14. 9. 2010, 20:50:58 · Upravil/a: johnl
Odpovědět Citovat
Pro ztmavení si stačí přečíst něco o opacity..

Tohle by se mělo roztáhnou přes celou stránku a ztmavit ji: 
<div id="div" style="background-color: #000000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; opacity: 0.85; filter: alpha(opacity=80); display: none;"></div>

Divu který chceš mít nad tím pak jen nastavíš vyšší z-index, třeba 11..

Funkce pro zobrazení/skrití divu může být např.

Zobrazení 
onclick="document.getElementById('div').style.display='block';"
Skrytí 
onclick="document.getElementById('div').style.display='none';"
xlifer
Profil
#4 · Zasláno: 14. 9. 2010, 23:44:16
Odpovědět Citovat
Z toho co jsem pochopil, tak jsem vyzkoušel tento pokus, ale nefunguje to? :-(

Je pricnip pochopen dobře: ? 

<html>
<head>
<title>test</title>
</head>
<body>

Po kliknutí na tento odkaz se provede <a href="#not" onclick="document.getElementById('div').style.display='block';">ztmavení</a>

<div id="blok" style="z-index:11;">
Tento blok chci po udalosti onClick zvyditelnit do pop&oslash;edí a obsah webu pod ním zmatvit.
</div>

<div id="div" style="background-color: #000000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; opacity: 0.85; filter: alpha(opacity=80); display: none;"></div>

</body>
</html>
Keeehi
Profil
#5 · Zasláno: 14. 9. 2010, 23:56:49
Odpovědět Citovat 
<div id="blok" style="z-index:19;position:relative;background-color:white;">
xlifer
Profil
#6 · Zasláno: 15. 9. 2010, 00:18:07
Odpovědět Citovat
Super, už to začína pracovat. Akorat mi to funguje pouze ve FF, v IE to nejede? Poradíte proč.

Kód, který již ve FF jede: 

<html>
<head>
<title>test</title>
</head>
<body>

<h1>Obsah webu</h1>

Po kliknutí na tento odkaz se provede <a href="#not" onclick="document.getElementById('div').style.display='block';document.getElementById('blok').style.display='block';">ztmavení</a>

<h3>Text webu</h3>

<h4>Text webu</h4>

<div id="div" style="background-color: #000000; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; opacity: 0.40; filter: alpha(opacity=80); display: none;"></div>

<div id="blok" style="z-index:19;position:absolute;top:50;left:100;background-color:white;display:none;padding:20px;">
Tento blok chci po udalosti onClick zvyditelnit do pop&oslash;edí a obsah webu pod ním zmatvit.
<h2>Což se práv&igrave; stalo :-)</h2>
Po kliknutí na tento odkaz se provede <a href="#not" onclick="document.getElementById('div').style.display='none';document.getElementById('blok').style.display='none';">zrušení ztmavení</a>
</div>

</body>
</html>
Keeehi
Profil
#7 · Zasláno: 15. 9. 2010, 00:44:47
Odpovědět Citovat
position:absolute; Proč všude cpeš fixed?
xlifer
Profil
#8 · Zasláno: 15. 9. 2010, 01:09:40
Odpovědět Citovat
Protože s absolute; to nefunguje. Možná ano, ale když to v kódu vyměním za relative; tak to zkrátka nejede jak má.
Keeehi
Profil
#9 · Zasláno: 15. 9. 2010, 06:21:15
Odpovědět Citovat
xlifer:
„Protože s absolute; to nefunguje.“
To je zajímavé, mě to funguje. 


<html>
<head>
<title>test</title>
</head>
<body>

<h1>Obsah webu</h1>

Po kliknutí na tento odkaz se provede <a href="#not" onclick="document.getElementById('div').style.display='block';document.getElementById('blok').style.display='block';">ztmavení</a>

<h3>Text webu</h3>

<h4>Text webu</h4>

<div id="div" style="background-color: #000000;
position: absolute;
 top: 0; left: 0; width: 100%; height: 100%; z-index: 10; opacity: 0.40; filter: alpha(opacity=80); display: none;"></div>

<div id="blok" style="z-index:19;position:absolute;top:50;left:100;background-color:white;display:none;padding:20px;">
Tento blok chci po udalosti onClick zvyditelnit do pop&oslash;edí a obsah webu pod ním zmatvit.
<h2>Což se práv&igrave; stalo :-)</h2>
Po kliknutí na tento odkaz se provede <a href="#not" onclick="document.getElementById('div').style.display='none';document.getElementById('blok').style.display='none';">zrušení ztmavení</a>
</div>

</body>
</html>

IE prostě position:fixed; nezná, tak to nemůže fungovat jak by si chtěl.
xlifer
Profil
#10 · Zasláno: 16. 9. 2010, 00:51:52
Odpovědět Citovat
Aha, tak to jsem nevěděl... A funguje vám efekt ztmavení i v IE8? Mě ne, vždy se ten blok co ma překrýt obsah vytvoří a vloží až pod obsah... ?
Keeehi
Profil
#11 · Zasláno: 16. 9. 2010, 07:06:36
Odpovědět Citovat
xlifer:
Ano, funguje.
xlifer
Profil
#12 · Zasláno: 17. 9. 2010, 03:29:43
Odpovědět Citovat
Keeehi:

A můžete sem vložit přesně kód, který testujete v IE8? Chtěl bych vyzkoušet následně zkopírovat a spustit v IE8, protože nevím kde mám co špatně, ale ten můj zde uvedený kód mi nejede... Díky.
Keeehi
Profil
#13 · Zasláno: 17. 9. 2010, 06:52:12
Odpovědět Citovat
xlifer:
Použil jsem přesně ten samý kód, co je v [#9]. (djpw ho nějakým záhadným způsobem rozdělila na dva, ale funguje pořád stejně)
Bubák
Profil
#14 · Zasláno: 17. 9. 2010, 11:25:16
Odpovědět Citovat
xlifer, Keeehi:
Co vykreslovací režim, nebude to tím?

Bookmarklet na zjištění režimu:
javascript:(function(){var mode=document.compatMode,m;if(mode){if(mode=='BackCompat')m='Quirks';else if(mode=='CSS1Compat')m='Stand… Compliance';else m='nezjištěném';alert('Stránka byla renderována v '+m+' módu.');}})();
Keeehi
Profil
#15 · Zasláno: 17. 9. 2010, 15:02:56
Odpovědět Citovat
xlifer:
Možná ti pomůže ještě to, že když jsem otevřel soubor z disku, tak to nefungovalo vůbec, když jsem se podíval přes server, tak to fungovalo bez problémů.
xlifer
Profil
#16 · Zasláno: 18. 9. 2010, 02:37:16 · Upravil/a: xlifer
Odpovědět Citovat
Keeehi:

Tak jsem taky znovu zkopíroval vložený kód, který jsi vložil a rozdělil se na 2 kusy a ten mi funguje, taky :-)

Teď jde o to, jestli jsi ten kód uvedený mnou před tím neupravil v detailu a pak znovu vložil upravený... ?

Nicméně ten mi funguje jak na localu, tak i na serveru a to v IE (v6 až v8) i FF, dokonce Opera, Google a Safari. Všude testována a OK.

Akorát co nevím proč je v každém prohlížeči jiná míra toho ztmavení? Např. ve FF je akorát odpovídající nastavené hodnotě 85, ale v IE je to o dost tmavší, skoro až černá?
_es
Profil
#17 · Zasláno: 18. 9. 2010, 10:44:06
Odpovědět Citovat
xlifer:
„Akorát co nevím proč je v každém prohlížeči jiná míra toho ztmavení? Např. ve FF je akorát odpovídající nastavené hodnotě 85, ale v IE je to o dost tmavší, skoro až černá?“
Pre IE funguje iný príkaz ako pre i iné prehliadače.
Nastav správne v tom kóde hodnotu filter: alpha(opacity=80);.
Namiesto 80 daj iné číslo v rozsahu od 0 do 100.
xlifer
Profil
#18 · Zasláno: 18. 9. 2010, 13:39:15
Odpovědět Citovat
Ale v kódu je přesně jak píšeš filter: alpha(opacity=80); ?

Takže když dám namísto 80, třeba 60, tak to bude fungovat už všude stejně?

nabo si musím zjistit prohlížeč a podle toho podstrčit styl pro daný prohlížeč,
jako, že IE a ostatní
_es
Profil
#19 · Zasláno: 18. 9. 2010, 13:56:04
Odpovědět Citovat
xlifer:
> nabo si musím zjistit prohlížeč a podle toho podstrčit styl pro daný prohlížeč,
> jako, že IE a ostatní

Nie, tak ako máš, to stačí.
"Ostatné" prehliadače pochopia css vlastnosť opacity, tú IE nepochopí, ale za to pochopí vlastnosť filter, ktorú zase "ostatné" prehliadače nepochopia.
Takže ak sa ti to nezdá len v IE, tak ti stačí upraviť len to číslo vo vlastnosti filter.
Hodnota 80 v IE by mala zodpovedať hodnote opacity 0.8.
Bubák
Profil
#20 · Zasláno: 18. 9. 2010, 13:58:28
Odpovědět Citovat
xlifer:
„Takže když dám namísto 80, třeba 60, tak to bude fungovat už všude stejně?“
Než změnit jedno číslo v CSS a podívat se na výsledek, tak je pro tebe jednodušší položit dotaz ;-)
xlifer
Profil
#21 · Zasláno: 19. 9. 2010, 01:54:56
Odpovědět Citovat
_es:

Aha, super, už jsem pochopil. Díky moc.
xlifer
Profil
#22 · Zasláno: 19. 9. 2010, 01:56:13
Odpovědět Citovat
Bubák:

Ale mě šlo taky hlavně pochopit kde a co, než kdybych jen změnil a viděl, že funguje... :-)
Časová prodleva: 21 dní
xlifer
Profil
#23 · Zasláno: 10. 10. 2010, 03:15:35 · Upravil/a: xlifer
Odpovědět Citovat
Ješte se vracím s dotazem na překrytí obsahu: 

<div id="sdiv" style="background-color: #000000; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; opacity: 0.4; filter: alpha(opacity=40); display: none;"></div>


Výše uvedené překryje pouze obsah zobrazený do úrovně scollbaru,
pokud je obsah delší, tedy když se zobrazí scrollbar pro obsah,
tak je vidět, že překrytí končí nad obsahem, který se již posouvá dolů nebo do boku?
Lze situaci řešit nějak lépe, aby by překryt komplet obsah?
Keeehi
Profil
#24 · Zasláno: 10. 10. 2010, 09:24:00
Odpovědět Citovat
Musíš ten div na stránce zafixovat na tom jednom místě.
Příklad objektu zafixovaného na stránce
xlifer
Profil
#25 · Zasláno: 10. 10. 2010, 23:16:39
Odpovědět Citovat
Keeehi:

Ano, metoda funguje dobře, ale je to běžná metoda, která se většinou používá na tenfo efekt ztmavení?

Přijde mi, že to nepříjemně problikává jak se to dopočítává při posunu obsahu...

Např. tady:
www.dvdsvet.cz/dvd/mazlicek-p113865/

když si zvolíte náhled obalu (odkaz pod obrázkem dvd) a posunujete obsahem pod náhledem,
tak je to krásně plynulé a bez problikávání?
xlifer
Profil
#26 · Zasláno: 10. 10. 2010, 23:41:43
Odpovědět Citovat
A ještě související dotaz, proč mi toto nefunguje ve FF? 

var t = document.body.scrollTop + (screen.height/6);
document.getElementById('blok').style.top = t+'px';


Chci posouvat i 'blok'.
xlifer
Profil
#27 · Zasláno: 10. 10. 2010, 23:46:15
Odpovědět Citovat
Tak až teď jsem zjistil, že po přidání DOCTYPE
oba předchozí příspěvky jsou tímto vyřešeny! 

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Keeehi
Profil
#28 · Zasláno: 10. 10. 2010, 23:49:13
Odpovědět Citovat
Lepší řešení jsem zatím neviděl.

U mě se to problikávání projevuje jen v IE5. Ostatní vyšší IE jsou v pořádku. Google chrome je také v pořádku. Problém mám v opeře a FF, kde se mi ten obrázek místo toho zobrazí v novém okně. To však nesouvisí s problikáváním. Když jsem toto řešení používal já, poskakování se neprojevovalo ani v těchto prohlížečích. => Problikávání se projevuje (na mém počítači) jen u IE5, tkže to podle mě není nic strašného. 1) při lightboxu se většinou nescroluje 2) IE5 už není moc používaný.

Ještě mě napadlo, jelikož je zbytečné scrolovat při zobrazení lightboxu (stránka je stejně schovaná za obrázkem) odchytávat událost scrolování a potlačit ji.
xlifer
Profil
#29 · Zasláno: 12. 10. 2010, 00:39:09
Odpovědět Citovat
Ale celé řešení ztmavení, resp. opacity vč. fixování mi v IE6 nechodí? Je potřeba zcela jiné řešení nebo stačí drobně něco upravit?
Časová prodleva: 3 dny
xlifer
Profil
#30 · Zasláno: 14. 10. 2010, 22:34:44
Odpovědět Citovat
Nikdo neví jak to poupravit pro funkčnost i pro IE6? Díky.
Časová prodleva: 14 let

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0