| Autor | Zpráva | ||
|---|---|---|---|
| Milkys Profil |
Dobrý večer dámy a pánové,
v podstatě to skrývá i odkrývá správně. Pokud se to někomu hodí, budu rád, že jsem tady také užitečný. Jenom je potřeba kliknout na stejný odkaz, kterým se div zobrazil. To potřebuji "zautomatizovat", aby se obsah divu skryl po kliknutí na jiný odkaz. Budu rád i za event. opravu kodu, který se dá napsat třeba i jednodušeji. Nechci klasické záložky=>kotvy kvůli delší době načítání celého textu (i samozřejmě pomocí js skrytého - několika ext. iframů) - toto by mělo být rychlejší. <html class="nemajs">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style>
/*.majs {display: none}*/
.nemajs {display: block}
.skryvany {color:green}
</style>
<script>
function zobrazSkryj(idecko){
el=document.getElementById(idecko).style;
el.display=(el.display == 'block')?'none':'block';
}
//////xxxxxxxxxxxxxxxxxxxxxxxxxxxxx////
function Baliky()
{
var bal_ifr = '<div align="center"><iframe src="....nějaký iframe č.1...."></iframe></div>';
document.getElementById("pac").innerHTML = bal_ifr;
}
/////////////////////////////
function Objednat()
{
var obj_ifr = '<div align="center"><iframe src="....nějaký iframe č.2...."></iframe></div>';
document.getElementById("rez").innerHTML = obj_ifr;
}
/////////////////////////////
function Mapicka()
{
myWindow=window.open('','','width=480,height=480,scrollbars=yes');
myWindow=document.write('<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=klic" language="JavaScript"><'+'/script>');
myWindow.document.write('<div style="width:450px;height:450px" id="detail-mapicka"></div><script language="JavaScript">'+'js cript na zobrazení gmapy<'+'/script></div>');
}
</script>
</head>
<body>
<noscript>Váš prohlížeč nepodporuje JavaScript, zapněte si jej prosím pro přehlednější zobrazení.<br /></noscript>
<a href="#desc" onclick="zobrazSkryj('des')">Desc</a> |
<a href="#baliky" onclick="Baliky();zobrazSkryj('pac')">Balíky</a> |
<a href="#objednat" onclick="Objednat();zobrazSkryj('rez')">Objednat</a> |
<a href="#mapicka" onclick="Mapicka();">Mapička</a>
<div id="des" class="skryvany"><p>Při načtení běžně zobrazený text, který se má skrýt po kliknutí na odkazy "Balíky" nebo "Objednat".</p><p>Závada: Skryje se jen pokud na odkaz "Desc" kliknu podruhé</p></div>
<div id="pac" class="skryvany"></div>
<div id="rez" class="skryvany"></div>
</body>
</html> |
||
| preca1 Profil |
#2 · Zasláno: 28. 9. 2012, 10:00:03
Zdravim,
fce zobrazSkryj není úplně dokonalá. Při prvním zavolání má totiž div hodnotu display nastavenou na '', takže funkce mu nastaví display: block. Při druhém kliknutí už nastaví display: none.
Při kliknutí na Balíky a Objednat nevoláš kód na skrytí div#des. Proto tam pořád je. Ze stejnýho důvodu se ti neschovávaj ani ty iframy, když klikáš na různý odkazy. Nikde nevoláš kód, kterej by je měl skrýt.
„Nechci klasické záložky=>kotvy kvůli delší době načítání celého textu (i samozřejmě pomocí js skrytého - několika ext. iframů) - toto by mělo být rychlejší.“ Nikdy neoptimalizuj dopředu, pokud si nejseš jistej, že to opravdu pomůže. Zbytečně tam taháš iframy, který můžou představovat další potíže. Lepší přístup je použít klasický taby: Vytovříš 4 divy a dáš do nich obsah. Pomocí JS (ne CSS) všechny kromě aktivního schováš (aby obsah byl vidět i pro lidi, co nemaj zapnutej JS). A pak už jen pomocí odkazů skrýváš a odkrýváš jednotlivý divy. |
||
| Milkys Profil |
preca1:
děkuji za vysvětlení, ovšem js vůbec neznám (upřímně, ani nemám v úmyslu se ho učit, více mě baví php) a to co jsem zesmolil (pokus - omyl) je z různých for a stránek kde něco o js bylo a já se domníval, že to bude dělat co má. Nechtěl jsem jen tak přijít a z někoho tahat rozumy, ale zkusit zda to zvládnu sám. A má produktivita? Trvalo mi to více jak 30 hodin.... Nemám sil a už ani chuť dál v tomto pokračovat, protože js neumím a bez js se asi v tomto případě neobejdu. Tomuhle se už říká zoufalost. Iframy tam musí být, možných potíží si jsem vědom. Vytovříš 4 divy a dáš do nich obsah. Pomocí JS (ne CSS) všechny kromě aktivního schováš (aby obsah byl vidět i pro lidi, co nemaj zapnutej JS). Takhle to mám doposud udělané (záložek je víc - 3 záložky/divy "můj" text z mysql db a 3 záložky s externími iframy, ovšem chci, aby se obsah divů s iframy načetl až po kliknutí, aby se nemuselo čekat až se všechny divy načtou. Někdy totiž třeba uživatel záložky s iframy vůbec nezobrazí. V podstatě by to mělo fungovat, že "des" se načte i zobrazí hned a další "moje" divy budou skryté (načtené) čekat na kliknutí na příslušnou záložku, nastane-li tato fáze skryje se obsah "des" a zobrabrazí se další "můj" už načtený div. Klikne-li uživatel na záložku, která ovládá div s externím obsahem (to je ten iframe) teprve potom se začne načítat tento externí iframe. Vada o které zatím vím je ta, že pokud se uživatel vrátí resp. zobrazí "záložku s iframem" poněkolikáté vždy se bude muset obsah iframu načítat a bude to asi vyšší zátěž na cizí server odkud zobrazuji "cizí" (povoleno) text. Dá se toto nějak vyřešit? Proč to vůbec dělám: Načtení "mého" obsahu stránky bez iframů je do 1,5 sec. a asi do max. 70 requestů (firebug - pagespeed) S iframy a s gogmapou + můj obsah od 5 do 9 sec. a asi 90 - 150 requestů (firebug - pagespeed) Samozřejmě, že obrázky optimalizované, s přesnými rozměry, které jsou i v html, nacachované, komprimaci css a js (u js pokud to šlo) mám každé v jednom souboru atd... Domnívám se, že to je podstatný rozdíl. Nebo má někdo lepší nápad? Nechat to tak jak to mám doteďka? Děkuji za Vaše reakce. |
||
| Milkys Profil |
#4 · Zasláno: 28. 9. 2012, 22:35:53
asi něco mám co by mělo vyřešit výše uvedené:
Zde. |
||
| panther Profil |
#5 · Zasláno: 29. 9. 2012, 09:49:10
Milkys:
„Načtení "mého" obsahu stránky bez iframů je do 1,5 sec.“ nebude zapotřebí hledat chybu jinde (nejspíše v PHP aplikaci), kdy načtení nějakého obsahu (nebo stránky), obzvláště cachované, trvá tak nechutně dlouho? Za to iframe, ani 4 skryté divy s obsahem, nemůže. O těch 5-9sec. je škoda mluvit. Chyba bude jinde. |
||
|
Časová prodleva: 3 dny
|
|||
| Milkys Profil |
panther:
ok, děkuji za reakci. Děkuji i preca1, to byl ten impuls. Níže dávám k dispozici funkční kód na skrývání několika<div>ů a zobrazení jednoho <div>u bez použití jquery. Funkční i při vypnutém javascript v prohlížeči. Funkcionalita Vypnutý javascript v prohlížeči: Zobrazí všechny <div>y, po kliknutí na odkaz "najde" kotvu s <div>em s požadovaným id. Zapnutý javascript v prohlížeči: Zobrazí se jen první <div>, ostatní jsou načtené, ale skryté. Po kliknutí na jiný odkaz než "first" v menu se zobrazí pouze jeden příslušný <div> (dle id). Ostatní <div>y i včetně prvního jsou skryté. Jelikož jsem laik na javascript, domnívám se, že se to dá napsat určitě jednodušeji. Proto prosím zda by mi někdo nepomohl zjednodušit javascriptový kód. Předem beru výtky, že je to patlanina a možná i prasácký kód, že by? Upřímně, já jsem to nenapsal, já jsem to jen "slepil" z několika zdrojů, aby to fungovalo. <html>
<head>
<title>titulek</title>
<style>
body { font-family: "Segoe UI"; text-align: left; }
a:link, a:visited, a:active, a:hover { color: #333; outline: none; padding-left: 3px; padding-right: 3px; text-decoration: underline; }
a:hover { background-color: #c7d1d6; }
#flowtabs { float: left; width: 600px; text-align: left; margin-left: 635px; margin-top: 4px; padding-left: 10px; padding-right: 10px; }
#flowtabs li { list-style-type: none; float: left; padding-left: 10px; padding-right: 10px; font-size: large; }
.none {display: none;}
.visible {display: block;}
</style>
<script type="text/javascript">
function setClass(cls) {
document.getElementById("second").className='none';
document.getElementById("third").className='none';
document.getElementById("fourth").className='none';
document.getElementById("fifth").className='none';
}
</script>
</head>
<body onload="setClass('none');">
<ul id="flowtabs">
<li><a href="#first" onclick="document.getElementById('first').className='visible';document.getElementById('second').className='none';document.getElementById('third').className='none';document.getElementById('fourth').className='none';document.getElementById('fifth').className='none';">First</a></li>
<li><a href="#second" onclick="document.getElementById('second').className='visible';document.getElementById('first').className='none';document.getElementById('third').className='none';document.getElementById('fourth').className='none';document.getElementById('fifth').className='none';">Second</a></li>
<li><a href="#third" onclick="document.getElementById('third').className='visible';document.getElementById('first').className='none';document.getElementById('second').className='none';document.getElementById('fourth').className='none';document.getElementById('fifth').className='none';">Third</a></li>
<li><a href="#fourth" onclick="document.getElementById('fourth').className='visible';document.getElementById('first').className='none';document.getElementById('second').className='none';document.getElementById('third').className='none';document.getElementById('fifth').className='none';">Fourth</a></li>
<li><a href="#fifth" onclick="document.getElementById('fifth').className='visible';document.getElementById('first').className='none';document.getElementById('second').className='none';document.getElementById('third').className='none';document.getElementById('fourth').className='none';">Fifth</a></li>
</ul>
<div id="flowpanes">
<br style="clear: both;" />
<div id="d1">
<h2>This is the first tab</h2>
<p>
Consectetur adipiscing elit. Duis viverra, leo sit amet auctor fermentum, risus
lorem posuere tortor, in accumsan purus magna imperdiet sem.
</p>
</div>
<div id="second">
<h2>This is the second tab</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur in sem. Vivamus
adipiscing vulputate lacus. Sed enim lorem, fringilla eget, nonummy sed, ullamcorper
sit amet, diam. Sed a justo. Curabitur quis nibh sit amet nunc malesuada rutrum.</p>
</div>
<div id="third">
<h2>This is the third tab</h2>
<p>
Mauris ultricies. Nam feugiat egestas nulla. Donec augue dui, molestie sed, tristique
sit amet, blandit eu, turpis. Mauris hendrerit, nisi et sodales tempor, orci tellus
laoreet elit, sed molestie dui quam vitae dui.
</p>
</div>
<div id="fourth">
<h2>This is the fourth tab</h2>
<p>
Maecenas at odio. Nunc laoreet lectus vel ante. Nullam imperdiet. Sed justo dolor,
mattis eu, euismod sed, tempus a, nisl. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus.
</p>
</div>
<div id="fifth">
<h2>This is the fifth tab</h2>
<p>
Maecenas at odio. Nunc laoreet lectus vel ante. Nullam imperdiet. Sed justo dolor,
mattis eu, euismod sed, tempus a, nisl. Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus.
</p>
</div>
</div>
</body>
</html> |
||
|
Časová prodleva: 12 let
|
|||
0