TOPlist

Pixylophone - komentáře

Komentáře (od nejstarších po nejnovější)

Komentáře k příspěvku CSS a Javascript: nové možnosti


[1] Vložil(a): Luděk, 2004-03-19, 14:55 Solo | MuteČtenáři: ---

Moc hezký, jen mi tam chybí, aby se to rozbalení schovalo po druhém kliknutí. ;-(

[2] Vložil(a): Lukyn.cz [web], 2004-03-19, 15:32 Solo | MuteČtenáři: ---

Hi hi... taky jsem všelijak klikal a čekal jestli se to náhodou nezabalí. ;) Ale i tak je to hezký...

[3] Vložil(a): pixy [web], 2004-03-19, 15:41 Solo | MuteČtenáři: ---

ad [1], [2] > Ale to už je přeci jen věcí nějakého triviálního rozšíření toho JS... Třeba si tam přidat stavovou proměnnou:

var menuOn = 0;

function show(n) {
  if (menu) {
    if (menuOn==n) {
      menu.className = '';
      menuOn = 0;
      }
    else {
      menu.className = 'sub'+n;
      menuOn = n;
      }
    }

A je to... (ale píšu to z voleje, takže nic neručím, že mi něco neujelo).

[4] Vložil(a): dusoft [web], 2004-03-19, 16:13 Solo | MuteČtenáři: ---

pixy: co tak este cursor: hand;
?

[5] Vložil(a): pixy [web], 2004-03-19, 16:30 Solo | MuteČtenáři: ---

ad [4] > cursor:hand? A takový parametr se nachází v jakém jazyku? V žádné verzi CSS neexistuje, nanejvýš tak cursor:pointer... ;)

Ale hlavně jsem tam napsal, že tam kromě toho, co je přímou součástí tohohle řešení, nedávám řádný styl, aby se to nepletlo. Takže ani barvy, ani písmo, ani pozadí, ani přeuspořádání - a ani cursor...

[6] Vložil(a): Bobo [web], 2004-03-19, 17:32 Solo | MuteČtenáři: ---

Já si myslím, že za pomocí CSS se dají dělat opravdu zajímavý věci a to i bez použití JavaScriptu. Já teď například předělávám naše firemní stránky do CSS, kde jsme dřív dělali menu právě JavaScriptem a stejnýho efektu jsem dosáhl i bez něj jen za použití CSS. Je pravda, že jde jen o jednoúrovňový menu, ale i tak. Líbí se mi, co se s tím dá dělat. A navíc pak bude stránka nejen správně strukturovaná, ale i validní :o)

[7] Vložil(a): Lukáš Mačí [web], 2004-03-19, 18:41 Solo | MuteČtenáři: ---

Ahoj Pixy, nechci rozhodně rejpat, ale tvůj kód seznamů není validní ani ve spotu ani v uvedeném příkladu.
Podseznam v seznamu totiž musí být mezi značkami li, tak jako každá jiná položka seznamu.
Např.:
[ul]
[li][/li]
[li]
[ul][li][/li][/ul]
[/li]
[/ul]

a ne
[ul]
[li][/li]
[ul][li][/li][/ul]
[/ul]

Jinak tvoje řešení mi přijde takové trochu složité. Moc hezky to mají uděláno třeba na http://preview.peckadesign.cz/efcon/ , kde se jen na událost onmouseover mění class elementu a na onmouseout zase zpátky.
Před několika dny jsem také vyprodukovat řešení takových menu jen pomocí CSS a behavior kvůli IE ( http://maciweb.net/blog/web/clanek.php?clanek=71 )
No a nakonec mi nepřijde moc šťastné, aby se při zobrazení podnabídky odsouvaly další položky nabídky hlavní. Při více položkách to může být docela síla... Toť můj skromný názor.

[8] Vložil(a): radek :: o'oblog [web], 2004-03-19, 18:53 Solo | MuteČtenáři: ---

[7] taky bych volil, pro tento případ, spíše "onmouseover" a "onmouseout", než "onclick", navíc, to rozbalování "pod sebe" tu bylo už před 10 lety, není to dobré v tom, že to hýbe s celou stránkou, "pop-up" řešení, s "onmouseover" je MNOHEM komfortnější a intuitivnější pro čtenáře...

Nemohu si pomoci Pixy, ale toto řešení je... špatně (na většinu použití co mě napadá).

[9] Vložil(a): Jerry [web], 2004-03-19, 19:26 Solo | MuteČtenáři: ---

[8] Ale vždyť to odsouvání/neodsouvání se pak už nechá dál nastylovat podle potřeby. Pixy výslovně píše, že nechává jen základní styly, co si s tím pak kdo udělá je jeho věc. A co se týče onclick/onmouseover, to už je taky hlavně věc vkusu každého - mně se třeba zrovna nutnost kliknout líbí víc.
Tohle je nastínění řešení, ne polopatický návod.

[10] Vložil(a): Bochi [web], 2004-03-19, 19:28 Solo | MuteČtenáři: ---

[7][8] Me prijde Pixyho ukazka pekna, i kdyz ma sve drobne chybicky (Napriklad ten cursor:pointer by to vazne chtelo, nebo aspon underline, ale to je opravdu jen detail, o ktery tam neslo). Prinejmensim clanek ocenuji z hlediska principielniho, nemusim to delat presne do pismenka, jak je popsano, ale dobrou inspiraci webdesignerum to byt muze.
Oblibenost ruznych typu menu je zrejme individualni, me se naopak vetsinou nelibi ty vyskakovaci podnabidky, ktere maji tendenci mi zmizet driv, nez se s myskou proplazim na tu prislusnou polozku. U horizontalniho pop-down je to vetsinou v pohode (do druhe urovne), ale u vertikalnich menu mi to casto vadi. A ze to ujizdi? To me az tak netrapi. A myslim, ze velka spousta uzivatelu je zvykla napr. na Windows Explorer, kde rozbalovani slozek funguje presne tak.

[11] Vložil(a): Bochi [web], 2004-03-19, 19:31 Solo | MuteČtenáři: ---

Koukam, ze ted Jerry [9] napsal neco podobneho. Takze souhlas.

[12] Vložil(a): TimeLord, 2004-03-19, 19:34 Solo | MuteČtenáři: ---

pixy: skusam to z mojho PDA a nefunguje to aj ked mam podporu CSS :-)

Hehe ale mna si nevsimaj, ja len tak aby rec nestala.. sedim na WC a okrem ineho (eehm) citam Tvoj blog na PDA, aby som neplytval casom, tak som hned klikal na priklad... a ono to neslo ;-)

[13] Vložil(a): Bochi [web], 2004-03-19, 19:46 Solo | MuteČtenáři: ---

[12] Jak daleko jiz pokrocila technika: Pixymu prichazi prispevky do diskuse rovnou z hajzlu... :-)

[14] Vložil(a): radek :: o'oblog [web], 2004-03-19, 20:44 Solo | MuteČtenáři: ---

[10] no ale obrovskou výhodou JavaScript menu je právě to, že nemusí "zmizet hned" (oproti :hover CSS), ale... dá se udělat, aby po mouseover, či třeba i mouseclick, se rozbalilo na, třeba 5 sekund, a pak se zavřelo, s CSS to nejde..

[15] Vložil(a): pavel, 2004-03-19, 20:45 Solo | MuteČtenáři: ---

Jak velky okruh navstevniku zasahne jeste to document.all ?
Pokud je to problem pouze IE4, tak myslim, ze to pulprocento lidi co ho jeste pouziva je lepe ozelet, nez si prznit scripty. A v ukazkovem prikladu to plati dvojnasob.

[16] Vložil(a): Joker, 2004-03-19, 20:56 Solo | MuteČtenáři: ---

Jak vypadá srovnání tohohle řešení a když si definuju dvě třídy (třeba .zobraz a .skryte) a pomocí skriptu budu měnit třídu prvku?

[17] Vložil(a): Hm, 2004-03-19, 21:12 Solo | MuteČtenáři: ---

Tak jsem tupej, ale v kombinaci: zapnuté CSS a vypnutý JS se neděje nic a podmenu není vidět: MSIE6, Opera7...

[18] Vložil(a): pixy [web], 2004-03-19, 22:17 Solo | MuteČtenáři: ---

ad [7] > OK, blbě jsem napsal </li>. Normálně zásádně vložený <ul> vkládám dovnitř <li>, nevimproč jsem to tady udělal takhle...

A jinak (také ad [16]) tohle má výhodu oproti měnění class přímo u prvků v tom, že díky kontextu můžeš libovolně změnit styl i všech okolních prvků, ne jen prvku samotného. Takže třeba při "rozsvícení" zvýrazněné položky se můžou současně ostatní potlačit (například), v záhlaví menu se může změnit nějaká informace, celé menu a jeho okolí se obarví podle vybrané položky atd atd atd. Když se pracuje pouze s prvek samotným, tak to nejde tak přímo.

A ostatní - to je typický. Když udělám něco příliš polopatickýho, hned se snese sprcha komentářů na téma "to ví přece každej" - a jednou napíšu něco obecnějšího, kde předpokládám trošku fantazie a už je hafo problémů jako tady... To si opravdu nedokážete představit, že ten seznam je zformátovaný horizontálně? Že je ta druhá úroveň pozicovaná absolutně, takže se nic nikam neposouvá? Že prvky mají cursor:pointer; že jsou položky barevný a v rámečku; nebo že funkci oGet() používá každý svou dle libosti...?

Přiznám se, že podle toho, kdo tenhle blog čte a kdo většinou přispívá do komentářů, jsem čekal spíš konstruktivnější příspěvky - napadlo někoho, jaký kouzla se dají dokázat třeba se změnou třídy/id u <body>? Co dokážou dynamický mnohonásobný třídy? Co třeba dynamické "pohledy" na stránku? Stránkování? Atd. atd. atd. - všechno jen dynamickou změnou třídy jednoho prvku a vhodně připraveným CSS? Ach jo...

Příště snad přece jen zase radši polopatičtěji...

[19] Vložil(a): Jerry [web], 2004-03-20, 01:05 Solo | MuteČtenáři: ---

Jak by řekla teta Kateřina, není na světě člověk ten...

[20] Vložil(a): vojto, 2004-03-20, 08:38 Solo | MuteČtenáři: ---

na opere 6 nefunguje z tohoto prikladu nic, asi som jediny co ju tu pouziva

[21] Vložil(a): PssT [web], 2004-03-20, 14:49 Solo | MuteČtenáři: ---

Jeden je rad, kdyz mu to druhy vyzkousi v jinych prohlizecich.
Takze me to funguje v IE 5.01, IE 5, IE 6, Mozilla 1.6 (Firefox 0.8), Opera 6.23 - vse pod WinXP.
Opera 6.05 pod Win98 to zobrazi rozbalene. Amaya si ani neskrtne a NC 4.85 take ne - ale tyhle prohlizece uz brzy smazu, neb jsou k nepouziti.

[22] Vložil(a): PssT [web], 2004-03-20, 14:56 Solo | MuteČtenáři: ---

oprava [21]: misto Opera 6.23 ma byt Opera 7.23

[23] Vložil(a): TimeLord, 2004-03-20, 20:26 Solo | MuteČtenáři: ---

[21] mne to na WebPro 3.0.1 pod PalmOS 5.2.1 zobrazilo vsetko rozbalene.. ale zase ja to beriem tak, ze s tym Palmom som riadne mensinovy..

[24] Vložil(a): kvezt [web], 2004-03-21, 13:46 Solo | MuteČtenáři: ---

ALE PIXY! copak se to už dávno neřeší pomocí :hover a pro IE behaviorem?
dá se tak upravit ten tvůj starší příklad s několikaúrovňovým menu a vůbec....
http://www.hszk.bme.hu/~hj130/css/list_menu/hover/

[25] Vložil(a): dgx [web], 2004-03-21, 18:01 Solo | MuteČtenáři: ---

ad onmouseover vs. onclick:

prosim, delejte weby pristupne i bez klavesnice. Tedy pouzivejte onclick.

Vzdy, kdyz na me mrkne Logitech MX700 cervenym okem a odlozim ho na nabijecku, tak se me naroky na pristupnost zvysi. A onmouseover je neprekonatelna bariera

[26] Vložil(a): Mise, 2004-03-22, 07:51 Solo | MuteČtenáři: ---

Mozna jsem neco nepochopil, ale IMHO ma tenhle postup prakticke vyuziti jen na kratke staticke jednourovnove seznamy. Tedy mi to pripada na nic.

[27] Vložil(a): Tokugawa [web], 2004-03-22, 09:35 Solo | MuteČtenáři: ---

Mě se to líbí... :o)
Pixy, bohužel neumím upravit ten script podle komentáře [3] . Nemohl bys to sem vložit komplet? Byl bych Ti vděčný. Díky

[28] Vložil(a): pixy [web], 2004-03-22, 09:38 Solo | MuteČtenáři: ---

ad [26] > Ano, něco jste hodně nepochopil.

Já podobné postupy používám už docela dlouho ke své velké spokojenosti, teď zrovna to bude na jednom připravovaném webu celkem intenzivně - ale i na hotových webech je to k vidění. Třeba na Blesku je veškeré obarvování rubrik děláno právě přes globální třídy a kontextové selektory. Není to sice dynamické (dynamika je na straně serveru a jen mezi-stránková), ale i tak to je stále přesně to samé. Jediný soubor CSS stejná šablona pro všechny stránky, a výslednou barevnost, styl záhlaví i zvýraznění položek v menu řídí pouze jediná hodnota class u <body>...

[29] Vložil(a): pixy [web], 2004-03-22, 09:46 Solo | MuteČtenáři: ---

ad [27] > Tož třeba tak:

// začátek skriptu

var menu = null;
var menuOn = 0;
window.onload = init;

function init() {
   menu = document.getElementById('menu');
   }

function show(n) {
   if (menu) {
     if (menuOn==n) {
       menu.className = '';
       menuOn = 0;
       }
      else {
       menu.className = 'sub'+n;
       menuOn = n;
       }
     }
   }

// konec skriptu

a do HTML u <ul> doplnit vsechny pouzite classy:

<ul id="menu" class="sub1 sub2 sub3 ... subN">

[30] Vložil(a): andrej [web], 2004-03-22, 10:22 Solo | MuteČtenáři: ---

masterpiece!
hlavne to dedenie od viacerych rodicov, to si javisti zase utru hubu...

[31] Vložil(a): Tokugawa [web], 2004-03-22, 12:46 Solo | MuteČtenáři: ---

[29]
Nezdá se mi, že by to chodilo s tímhle scriptem správně. Začne to zcela rozbalené. A pak už je jedno, jestli kliknu na Asii nebo na položku, kterou Asie obsahuje. Všechno se zabalí, kromě Asie. Bych si ten js upravil sám, ale pranic tomu nerozumím :o)
Tobě to s tímto js chodí dobře, Pixy?

[32] Vložil(a): Mise, 2004-03-22, 16:29 Solo | MuteČtenáři: ---

[28]: co treba bez tech tridnich orgii?: http://mujweb.cz/www/danielmise/tmp/remake_pixyho_ul.html

[33] Vložil(a): pixy [web], 2004-03-22, 16:43 Solo | MuteČtenáři: ---

ad [32] > Ano. To je pěkná, podrobná, pečlivá a velmi profesionální ukázka toho, jak jsi vůbec nepochopil, o čem jsem to vlastně celé psal.

No nic - kdo chtěl, pochopil, kde nepochopil, zvládne jistě vlastní javascript na tisícero způsobů.

[34] Vložil(a): Mise, 2004-03-22, 16:45 Solo | MuteČtenáři: ---

[27]:verze s mizenim: http://mujweb.cz/www/danielmise/tmp/remake_pixyho_ul_2.html

[35] Vložil(a): Cygnus, 2004-03-22, 23:42 Solo | MuteČtenáři: ---

Pánové a mistři, musím Vás všechny, kdo dosud vložili své ukázky upozornit, že jsou zcela nepoužitelné v Konqueroru s vypnutým JavaScriptem .... jediné pixiho řešení se zobrazí zcela bez problémů, byť rozbalené a bez zpříjěmňující dynamiky. Takže jestli svému řešení říkáte přístupný web ... no já bych na něj přistupoval nerad, zvláště kdybych musel a nešlo to.

JavaScript? Leda když to jde i bez něj.

[36] Vložil(a): kkl2401 [web], 2004-03-23, 13:43 Solo | MuteČtenáři: ---

[18] Myslim, ze je, pixy, zbytecne placat se s necim polopatictejsim, nahozeno to podle me bylo vice nez dostatecne podrobne, ten zbytek at uz si kazdy predstavi a dodela podle sebe. Akorat zabijes cas nad nudnym dodelavanim detailum a stejne se pak ozve nekdo, kdo Ti poradi, zes to pozadi nemel delat zeleny, ale modry...

[37] Vložil(a): Jan Dvořák, 2004-03-23, 18:41 Solo | MuteČtenáři: ---

Já myslím, že není špatné řešení použít v menu onmouseover, onmouseout na přidělení třídy (.hover) pro explorer. Pro ostatní to prostě píšu i s dvojtečkama, menu zabalím skriptem, takže s vypnutým je ok a je to...
Také je řešení použít skript (fuj) v hlavičce a do noscriptu dát styl, který to vše nechá viditelné, případně malinko přeformátované.
Celkem je to piplačka, ale vcelku málo kódu...

[38] Vložil(a): Pitrsonek, 2004-03-24, 10:49 Solo | MuteČtenáři: ---

A jak lze PIXIho reseni vyuzit v generovani menu z databaze? Kdyz ve zdrojaku CSS musi definovat <ul id="sub1"> ... <ul id="subn">. Prijde mi to krkolomne...

[39] Vložil(a): Jan Dvořák, 2004-03-24, 17:18 Solo | MuteČtenáři: ---

Vybalovací menu JS+CSS ...:::> http://monpage.lman.net/Pages/hovermenu/menu-final/menu.html
Bez JavaScriptu se zobrazí rozbalené...

[40] Vložil(a): t603, 2004-03-31, 13:19 Solo | MuteČtenáři: ---

Viceurovnove (libovolneurovnove) menu pomoci JavaScriptu a CSS chodici v MS IE a Mozille na

http://mail.taskforce.cz/twinning/sf/en/

Rozbaluje se, sbaluje se, meni + na - a naopak, rozbali se a sbali se cele, je to dynamicky generovane z SQL databaze pomoci PHP, ale ve finale je to jen JS a CSS.

Stepan

[41] Vložil(a): mircy, 2004-04-01, 21:34 Solo | MuteČtenáři: ---

Není mi jasné, proč zatracovat JavaScript, dokáže spoustu super věcí, ve spolupráci s CSS !
Pokud jde o rozbalovací menu pro jiné prvky než odkazy, kvůli tomu mrkvosoftímu zmetku to stejně nejde v CSS dělat.
Jinak mi ale připadsá, že přívrženci CSS neschopní se JavaScriptu pořádně naučit, na JavaScript nadávají asi tak, jako ti, kdož tvoří webdesign tabulkami na CSS.

[42] Vložil(a): pixy [web], 2004-04-01, 22:51 Solo | MuteČtenáři: ---

ad [41] > Já si myslím, že Javascript umím zatraceně dobře, vůbec na něj nendávám, mám ho dokonce rád - a přesto si myslím, že přenášet maximum práce z JS na CSS je dobrý nápad.

Když nic jiného, tak dynamické akce prováděné prostřednictvím CSS jsou jakožto "hardkodované" rychlejší, úspornější a efektivnější než interpretovaný Javascript.

A druhá výhoda "přesunu zodpovědnosti na bedra CSS" je kontextuálnost. CSS je na rozdíl od JS kontextuální a dynamickou změnou jedné třídy můžete změnit celé široké okolí prvku či celou stránku.

[43] Vložil(a): Dan [web], 2004-04-06, 13:08 Solo | MuteČtenáři: ---

TO Pixy:

Díky moc za návod na zajímavé menu. Zkusil jsem ho použít na adrese http://lesopol.soharo.cz a funguje perfektně. Jenom v IE 5.5 mám problém. V IE 5.5 toto menu se načítá jako otevřené a pak se "stáhne", ale rámeček kterým je menu ohraničené zůstává v původní velikosti.

Byl bych vděčný za jakékoliv "nakopnutí", které by mě posunulo k řešení tohoto problému.

Díky

Dan

[44] Vložil(a): Dan [web], 2004-04-06, 13:09 Solo | MuteČtenáři: ---

TO Pixy:

Díky moc za návod na zajímavé menu. Zkusil jsem ho použít na adrese http://lesopol.soharo.cz a funguje perfektně. Jenom v IE 5.5 mám problém. V IE 5.5 toto menu se načítá jako otevřené a pak se "stáhne", ale rámeček kterým je menu ohraničené zůstává v původní velikosti.

Byl bych vděčný za jakékoliv "nakopnutí", které by mě posunulo k řešení tohoto problému.

Díky

Dan

[45] Vložil(a): Spikee, 2004-04-10, 17:24 Solo | MuteČtenáři: ---

[24] <- docela zásadní informace

[46] Vložil(a): Mordae [web], 2004-04-14, 07:03 Solo | MuteČtenáři: ---

if(document.getElementById){
   var el = document.getElementById ("menu").getElementsByTagName("div");
   for(var i = 0; i < el.length; i++){
      el[i].onmouseover = function(){this.className = "hover";};
      el[i].onmouseout = function(){this.className = "";};
   }
}
(...původně od Anne Van Kersteren...)

[47] Vložil(a): Mordae [web], 2004-04-14, 07:05 Solo | MuteČtenáři: ---

Viz předchozí:
Žádná htc komponenta není nutná, navíc byste jí stahovali třeba 100x...

[48] Vložil(a): Jirka, 2004-05-19, 20:43 Solo | MuteČtenáři: ---

Díky moc za návod na zajímavé menu. Javascriptu vůbec nerozumím a tak bych se chtěl zeptat na možnost nechat určitou část menu rozevřenou. Například menu Evropa - podmenu Francie - když kliknu na odkaz Francie, načte se mi menu celé zabalené a já bych chtěl, aby Evropa byla rozbalená. Je to možné?


Váš názor

Přidat nový komentář

Váš komentář

Přidávání komentářů k tomuto příspěvku již bylo ukončeno.

Chcete-li autorovi přesto sdělit nějakou podstatnou informaci, která se příspěvku týká, kontaktujte jej e-mailem.



 RSS 0.9x  Export  RDF  Export  RSS 0.9x  Komentáře  TXT  Komentáře  XHTML 1.0  Validate  W3C  CSS 2.1  Em-web  Resizable  W4D  90% dogmatic

Vygenerováno: [stránka generována dynamicky]