AcidLog je experiment. Nadesignuj a naprogramuj si ho podľa vlastných predstáv. viac »

Nedávno sa mi ozval Duffy. Chcel so mnou prediskutovať možnosť vytvorenia tabuľky bez tabuľky. Inými slovami, zaujímalo ho ako posladať a oCSSkovať DIVy a SPANy tak, aby dohromady vytvorili tabuľku. Výsledkom diskusie boli dve veci:

  1. Táto ukážková tabuľka, ktorá pomocou atribútu display mení spôsob, akým sa DIVy zobrazujú a správajú. Finta je v tom, že IE akosi nechápe, čo sa po ňom chce (z toho, čo som doposiaľ zistil, tak ako-tak zvláda display: table-cell, ale nič viac).
  2. Zistenie, že je tak trochu zbytočné prerábať DIVy na tabuľku.

Trochu som však nad tým koumal (hlavne nad bodom 2) a napadla ma celkom zaujímavá vec. Ale najprv spomeniem niečo iné, aby to celé dávalo aspoň trochu zmysel:

Prednedávnom som pre prezentáciu jedného klienta robil skript, ktorý z nejakých dát vygeneroval sústavu DIVov, ktoré dohromady dávali stĺpcový graf. O niečo neskôr som robil verziu tej prezentácie pre tlač a tak som musel ten graf usporiadať do nejakej podoby pripomínajúcej tabuľku. Teraz som si na to spomenul a bod 2 bol mierne nabúraný. Aj tak mi to však pripadalo trošku nelogické a tak som myslel ďalej, až som vymyslel…

Predstavte si, že máte tabuľku. Prehliadač ju interpretuje ako tabuľku, to nie je problém dokonca ani v zastaralých rachotinách typu NN4. Máme tu však nové prehliadače, ktoré vedia robiť kúzla. Napríklad premeniť DIVy na tabuľky, ale na druhej strane aj tabuľku na DIVy. Nebudeme teda dávať DIVu display: table-cell, ale tabuľke display: block. Už vidíte kam mierim? Áno, presne tak. Vezmeme tabuľku a jej obsah, preženieme to JavaScriptom, okoreníme CSSkom a výsledkom bude stĺpcový graf. Spätná kompatibilita zaručená, verzia grafu pre tlač tiež. Doma som na tom trochu začal pracovať a vyzerá to tak, že som našiel niečo, čo ma na nejakú dobu zaujme (keď už sa to nedarí mojej práci).

Dúfam, že sa čoskoro budem môcť pochváliť funkciou graphIt().

Komentáre

a coze take robis v praci , ze ta to nebavi ?
To s tou tabulkou → graf , je super napad. Som zvedavi ci sa ti to podari a ci si bude moct clovek vyberat typy grafov ako v Excely. Cize klasicky stlpcovy , 3D stlpcovy , pie, 3D pie , bodovy, a tak.
Ale to zrejme nie :)

 

SLASH: K praci sa vyjadrovat nebudem, lebo by sa na mna Vizi hneval.
Co sa tyka typov tych grafov, tak stlpcove (horizontalne aj vertikalne) su v pohode. Nie je problem urobit ich skinovatelne pomocou CSS, takze ked si nakreslis 3D stlpceky, budes mat 3D stlpceky. Na kolacovy graf by som si musel zobrat na pomoc SVGcko, ale to uz by to bolo cele o niecom inom.
Skor teraz rozmyslam nad takymi somarinkami ako su maximalne/minimalne hodnoty, percentualne alebo hodnotove zobrazenie, legenda a pod. Cisto teoreticky by slo urobit vsetky tieto veci automaticky pretransformovanim uz existujucich standardnych HTML elementov a ja sa pokusim o to, aby to slo aj cisto prakticky…

 

PS: Ano, Slavo. Som si vedomy toho, ze keby som to robil vo Flashi, tak na kolacovy graf nepotrebujem SVG.

 

Keby len to :)
ale vo flashi by sa ten pie graf dal spravit aj s peknymi gradientmi, s simulaciou perspektivy, a tak ze by si si ten graf mohol v 3D aj otacat!!
A na nom by mohli byt animovane tlieskajuce korytnacky a suloziace Sado-Maso vevericky.

 

SLASH: Jasne… a preslo by to validatorom a k obsahu by sa dostali aj LYNXaci a slepci. Pozri sa, mne tu nejde o to, aby to bolo umelecke dielo. Ide mi o to, aby som zo standardnych HTML elementov dokazal vycarovat vizualnu prezentaciu nejakych dat, pricom hlavny doraz je kladeny na spatnu kompatibilitu a uplnu pristupnost obsahu. To je nieco, na co Flash podla mna vhodny absolutne nie je.

 

SLASH: Pokial ti ide o perspektivu, 3D grafy, gradienty, tiene a kto vie aky este bordel… ček dis aut.

 

nie je to spatne (na to ze je to v SVG)
este keby to mohlo rotovat a malo perspektivne skreslenie.. :-)
Ale v poho, na web taka uroven uplne staci.
S 3D rotaciou a perspektivnym skreslenim by zase pribudli kila skriptu a takto je to rychlejsie a vo vatsine pripadov uplne postacujuce…

 

Minule som riesil jeden problem: Ked mam v tabulke dva stlpce, tak sa logicky vyska jedneho prisposobuje druhemu. Na problem som natrafil, ked som taketo nieco chcel spravit pomocou DIVov. Da sa nejak dosiahnut, aby dva DIVy mali rovnaku vysku – co znamena, ze aby sa vyska jedneho prisposobovala vyske druheho. Napr. ak do laveho narvem tolko contentu, ze jeho vyska bude 500px, ale v pravom je contentu len na 250px chcem, aby aj ten pravy mal vysku 500px.
Ja som to nakoniec spravil cez tabulky, pretoze som nemal cas nad tym dlhsie uvazovat a rozhodla za mna „vyssia“ moc.

 

FILER: Obidva DIVy skus dat do dalsieho DIVu. Jeho vyska sa bude prisposobovat svojmu obsahu, takze cisto teoreticky, ked potom das obidvom DIVom v jeho vnutri height: 100%; tak by to malo fungovat tak ako chces.

 
To som skusal ako prve, ale nefunguje to. Existuju tri moznosti preco to nemusi fungovat:
  1. Som trupik
  2. Nie je to elementarne, a ja neviem co presne mam pouzit (float, position,…)
  3. Neda sa to spravit.
 
Trimmer 24 Jul, 22:37

Filer: a co takto Javascriptom zistit vysku vacsieho divu a tuto hodnotu priradit mensiemu? Trufam si povedat, ze toto je jedine riesenie okrem tabuliek.

 

TRIMMER: Asi ano, ale to bohuzial nie je velmi ciste riesenie. Malo by to ist urobit aj CSSkom, ale na to by sme potrebovali browser, ktory nema ziadne problemy s box modelom (a tieto problemy zatial maju v roznych podobach vsetky browsery).

 

No jo, ale dalsi problem (aspon podla mna) je ze DIVy sa renderuju uz pri nacitavani stranky, tak kedy mam spustit tu JS funkciu? Ak ju spustim pri loade, tak to nemusi zobrat spravne hodnoty, pretoze DIVy este nie su celkom vyrenderovane.
Ak sa mylim, tak ma opravte.

 

Caute ludia. Vsetci tu vravite o divoch a tak sa chcem opytat. mam taky problem,ze po stlaceni tlacitka sa mi pridavaju obrazky do divu pomocou Javascriptu. No le potom chcem tymi obrazkami hybat. na to mam JS funkciu opat, ale vlastne hybem vsetkymi obrazkami v tom dive sucasne… cize pre kazdy pridany obrazok potrebujem novy div. Neviete mi s tym helfnut, ze ako na to ?

Dikz moc

Mirec

 

MIREC: Nerozumiem otázke. Skús to popísať trochu konkrétnejšie. Alebo ukáž ukážku.

 

ukazka je na www.stvorpol.szm­.sk, tam je to vidiet ako sa pridaju obrazky do jedneho divu a potom mozem hybat s nimi. ale ja chcem pohybovat s kazdym zvlast… v tomto pripade hybem naraz so vsetkymi pridanymi. Chyba je asi ta, ze hybem s celym divom. Asi by sa to dalo vyriesit tak, ze kazdy obrazok sa prida aj so s vojim novym divom… ale to sa mi nedari nejako vyriesit…

 

MIREC23: Tak ako tam pridávaš obrázky (document.cra­teElement) si tam pridávaj aj DIVy. Tak ako inicializuješ drag'n'dropovanie na ten základný DIV, inicializuj si ho aj na jednotlivé DIVy.

Každopádne ak si si ten kód nepísal sám a nerozumieš mu, tak to aj tak nezvládneš.

 

ten kod som pisal sam a rozumiem mu. no v JS robim prvy krat. vsetko cerpam len z literatury alebo netu. Ale nikde som sa nedopracoval k tomu, ze ako spojit to ze ked pridam obrazok, tak automaticky sa k nemu vygeneruje aj jeho vlastny div s tou a tou poziciou… preto skusam aj rozne fora

 

MIREC: Keď sa element IMG vytvára takto: newImage = document.crea­teElement(„IM­G“);

Tak sa element DIV logicky vytvára takto: newDiv = document.crea­teElement(„DIV“);

Obrázok do divu už zjavne vkladať vieš: newDiv.appendChil­d(newImage);

A ten div si potom vložíš do rodičovského divu rovnako ako tam teraz vkladáš obrázok: document.getE­lementById(„i­mageDiv“).appen­dChild(newDiv)

Každopádne máš ten zdroják strašne neefektívny. Načo tam máš tri rôzne funkcie s identickým obsahom, keby ti stačila jedna s parametrom? Takto to vážne nie je napísané dobre.

 

Dakujem Ti za pomoc a aj za kritiku. Som v tom zaciatocnik takze som rad ze sa mam od koho ucit :O). Idem to vyskusat, ze ci mi to pojde :O))).

Zatial dikz moc

mirec

 

Pridaj komentár

Komentáre môžu pridávať iba prihlásení užívatelia.