DOM tree építés + DOM onclick feltöltése "on the fly" javascript-tel
Helló GURUK!
Légyszi ne kövezzetek meg, ugyanis total kezdő vagyok és első weboldalamat készíteném!!
Ezek ellenére beletenyereltem pár számomra durva dologba: AJAX-Javascript-CSS-DOM-CrossBrowser-XHTML...
Szóval ameddig eljutottam az megtalálható itt:
http://www.aqua.freesite.hu
Vagyis még csak az index.html-t mondanám majdnem késznek!
Sok elvárásnak kéne, hogy megfeleljen az oldal, többek között "kereső barát"-nak kellene lennie!
Az összevadászott információk alapján és az AJAX-os megkötéseket figyelembe véve minden "tudásomat" belesűrítettem a
http://www.aqua.freesite.hu/test.html
http://www.aqua.freesite.hu/data/gacsit.js
file-okba.
Amit szeretnék elérni, hogy amennyiben az index.html menüjéből hívódik meg valamelyik html file, akkor az AJAX funkció a "loadin" div-be betöltse azt, keret nélkül!!!
(Ez gyakorlatilag működik)
De majd ha élesben lesz az oldal és a gugli találati oldalán a "harmadik:-)" helyen szerepel mondjuk a futestechnika.html és rákattintanak,
akkor "onload" a gacsit.js szépen építse köré az index.html-nek megfelelő DOM fát + csapja hozzá a futestechnika.html-ben fizikailag is jelen lévő
valós tartalmat (<div id = "real">) a dinamikusan fölépített fában lévő "loadin" div-hez.
("Nagyjából" ez is megvan)
Ahol többek között elakadtam az az egyes menüpontok onclick AJAX funkciójának hozzáadása javascript-tel a DOM-hoz !!!!
Valamint az index.html-nél ie5-ben is működő css menü almenüjeinek hiánya a dinamikusan fölépített esetben. (ie7 gond nélkül földobja az almenuket, biztosan a csshover.htc-vel lehet valami)
Azért fordulok hozzátok, mert igyekeztem a lehető legtöbb infót begyűjteni minden lehetséges helyről, de nem tudok tovább lépni.
Olvastam a javascript keretrendszerekről is, de ahhoz még sokat kell olvasnom!!! :-(
Tudom, hogy nem feltétlen a legmegfelelőbb és legtisztább megoldásokat használtam, de légyszi nézzétek el.
Ha valaki tudna segíteni nagyon megköszönném!
■ Légyszi ne kövezzetek meg, ugyanis total kezdő vagyok és első weboldalamat készíteném!!
Ezek ellenére beletenyereltem pár számomra durva dologba: AJAX-Javascript-CSS-DOM-CrossBrowser-XHTML...
Szóval ameddig eljutottam az megtalálható itt:
http://www.aqua.freesite.hu
Vagyis még csak az index.html-t mondanám majdnem késznek!
Sok elvárásnak kéne, hogy megfeleljen az oldal, többek között "kereső barát"-nak kellene lennie!
Az összevadászott információk alapján és az AJAX-os megkötéseket figyelembe véve minden "tudásomat" belesűrítettem a
http://www.aqua.freesite.hu/test.html
http://www.aqua.freesite.hu/data/gacsit.js
file-okba.
Amit szeretnék elérni, hogy amennyiben az index.html menüjéből hívódik meg valamelyik html file, akkor az AJAX funkció a "loadin" div-be betöltse azt, keret nélkül!!!
(Ez gyakorlatilag működik)
De majd ha élesben lesz az oldal és a gugli találati oldalán a "harmadik:-)" helyen szerepel mondjuk a futestechnika.html és rákattintanak,
akkor "onload" a gacsit.js szépen építse köré az index.html-nek megfelelő DOM fát + csapja hozzá a futestechnika.html-ben fizikailag is jelen lévő
valós tartalmat (<div id = "real">) a dinamikusan fölépített fában lévő "loadin" div-hez.
("Nagyjából" ez is megvan)
Ahol többek között elakadtam az az egyes menüpontok onclick AJAX funkciójának hozzáadása javascript-tel a DOM-hoz !!!!
Valamint az index.html-nél ie5-ben is működő css menü almenüjeinek hiánya a dinamikusan fölépített esetben. (ie7 gond nélkül földobja az almenuket, biztosan a csshover.htc-vel lehet valami)
Azért fordulok hozzátok, mert igyekeztem a lehető legtöbb infót begyűjteni minden lehetséges helyről, de nem tudok tovább lépni.
Olvastam a javascript keretrendszerekről is, de ahhoz még sokat kell olvasnom!!! :-(
Tudom, hogy nem feltétlen a legmegfelelőbb és legtisztább megoldásokat használtam, de légyszi nézzétek el.
Ha valaki tudna segíteni nagyon megköszönném!
Nem fog menni
"Nincs kismotorra se jogsim, de szeretnék repülőt vezetni. Itt ülök a pilótafülkében és mire való a harmadik sor negyedik kapcsolója?"
Ásd bele jobban magad a témába. Én pl nem állnék neki egy ilyen feladatnak JS keretrendszer nélkül, mert több idődet el fogja venni, hogy keresztplatformossá tedd mint amennyi idő kell egy keretrendszer megtanulásához.
fanks
A hasonlatod teljesen jogos!
Melyik keretrendszert javasolnád?
JQuery
scriptaculous
A crossbrowser-séghez annyit tennék hozzá, hogy a test.html-t a következőkön próbáltam ki:
ie5 - ie5.5 - ie6 - ie7
firefox 2.0.0.14 linux+winxp
opera 9+ linux+winxp
netscape 9 linux+winxp
safari win 3.1.1
konqueror 3.5.5
lynx
www.seobrowser.com
www.operamini.com/demo
A témában említett dolgokon kívül minden ugyanúgy működik a fent említett böngészőkön!!
Az ie5, a lynx és a seobrowser persze csak a statikus tartalmat látja!
A 4.1-es opera mini viszi az ajax-ot és a javascriptes keresést is!!
keretrendszer
Egyébként biztos, hogy szükséged van IE5 támogatásra? A userek 1%-a használja. 5% alatt nemigen érdemes foglalkozni a témával hacsak nem milliós látogatószámod van :)
keretrendszer
az ie5 benne volt az ies4linux-ban, gondoltam kipróbálom!
jquery
Aztán hogy kicsit bezavarjak még :), annó a RoR a prototype-ot választotta (igaz, akkor talán még nem annyira volt kiforrott vetélytárs, illetve a prototype hasonló szellemben is készült), a Drupal jquery-t használ (ők jóval később döntöttek erről), és pont pár napja jelent meg, hogy a Zend Framework meg a dojo-t választotta, számukra az egyik fő szempont a robosztusság volt.
Üdv,
Felhő
jquery
Kösz!
További zavarok
Na így már remélem teljes a zűrzavar :)
További zavarok
Nem fog menni
valóban max bringára ülhetek a webfejlesztői tudásom alapján, de kifejtenéd bővebben??
azért nem fog menni, mert teljesen rossz irányba indultam és így nem lehet megoldani, vagy
azért, mert alpvető programozási hibákat csináltam, vagy ... ????
Nem fog menni
Nem fog menni
Nem fog menni
szal továbbra is teljesen jogos!!
mégis, had kössem még egy kicsit azt az ebet! :-)
index.html : valid XHTML 1.0 strict
am.css : valid css 2.1
ajax scriptek : Simple AJAX Code-Kit (SACK) v1.6.1 /ajaxot ismerő böngészőkkel kompatibilis/
gacsit.js : igyekeztem a W3C DOM szabványának megfelelő funkciókat használni
a csoka HTML file-ok több évesek és nem szabványosak, de azokat frissíteni kell majd a végén!
Webes technikák
bookmarkolható
oké
fanks
Én csak az oldal "vázát" csinálom, a valós tartalmat egy nálam is "amatőrebb" személy fogja karbantartani.
A frame-es megoldások hasonló problémái és egyéb dolgok miatt inkább az ajax-os megoldásnál kötöttem ki.
Így az egyes menüpontokhoz tartozó html file-okat külön, "váz" nélkül lehet szerkeszteni mondjuk egy frontpage-ben!
A keresők szvsz látják a főoldalt és követni tudják a linkeket is.
Valamint az egyes html file-ok önmagukban is valós tartalmat adnak, js nélkül persze nincs "váz"!!
Ez a seobrowser-rel és lynx-szel tesztelhető.
A history is megoldandó még, de van rá megoldás, ha jól olvastam, csak odáig még nem jutottam el.
statikus tárhely
Másik lehtőség az ismétlődő elemekhez egy saját:
http://vbence.web.elte.hu/html_include_kliensoldali.html
Használhatsz IFRAME-et a statikus dobozokhoz (ilyenkor persze a méret fix). Ez még eléggé keresőbarát módszer.
Írhatsz egy PHP szkriptet, ami végigmegy egy könyvtárban a csupasz HTML-eken, és a template közepére szúrja őket, majd a kész eredményt elmenti azonos néven egy másik könyvtárba (vagy akár direktben feltölti a szerverre).
És így tovább :)
statikus tárhely
asszem már jártam az oldaladon, de sajnos magas volt a léc, most majd még1x megpróbálom!
igen, a legmegfelelőbb az lenne, ha minden oldal statikus lenne és tartalmazná a teljes HTML kódot...
... abban bíztam, hogy jó irányba indultam!:-(
de nem sokkal elegánsabb az ajax-os megoldás????
a php-s válaszodat nem értem!
vagyis ahogy én értem, hogy ha frissül egy v. több csupasz/csonka HTML file, akkor egy perl script-tel egy template file-ba beszúrni a módosult HTML-t és más néven elmenteni, majd föltölteni a server-re!?!?!
...az eredeti/működő/lecserélendő weboldal egy totál statikus oldal.
annak a személynek aki készítette és frissíti jelenleg is az oldalt nem áll módjában és szándékában a frontpage-ben való, msword szerű HTML szerkesztésnél több nehézséget fölvállalni!!!
ez elég rendesen behatárolja a lehetőségeket!
ezért örültem, hogy találtam megoldást az ajax-os hívásokra js keretrendszer használata nélkül!!
mivel így elkerülhető lenne a total statikus oldal és ki lenne zárva, hogy pl. véletlenül kitörlődjön egy sor a HTML kódból!!
sajnos a php/perl script-es klónozás sem biztos, hogy belefér, bár csak 1 ikont kell csinálni az asztalára!?!??
az IFRAME teljesen kimaradt nekem a FRAME hatására feltehetően.
mivel az oldalnak 800x600+ osnak kell lennie, ezért gondolom a fix méretű IFRAME is kiesik???
iframe és társai
A php-s megoldás egyszerű fájlkezelés:
iframe és társai
szóval ebben az esetben a php is kiesik, igaz?
a menü szerintem viszonylag fix marad, mert jó pár éve semmit sem változott!!
a beágyazott részt (header, menü, jobb oldal, footer) úgymond fix-nek gondoltam el.
pontosabban a header background image-ek cserélődnek a böngésző ablakának méretétől függően.
a többi teljesen fixen az ablak teteje-bal-jobb-alja részén maradnának.
a csonka/csupasz HTML file-ok pedig alkalmazkodnának a loadin, illetve a content div pillanatnyi szélességéhez, ami kb.600x500-as fölbontástól fölfelé változhat, az oldal használható böngészhetőségének megtartásával.
amúgy a csonka/csupasz HTML file-oknál mindenképpen szükségem lesz egy olyan megoldásra, mint a php-s ötleted, csak perl, awk, v. sed kell hozzá, nem?
(a breadcrumb-okat sed-del klónoztam)
egy minimális header kell az utf-8 és a dom builder javascript végett.
nem feltétlenül
PHP telepíthető winre, a szkript meg parancssorból (vagy parancsionnal) futtatható.
nem feltétlenül
csak kíváncsiságból, a perl-awk-sed trio valamelyike is megteszi, nem?
jav.: parser sem kell!!
köszi a scriptet
jav2.: sh + cat hasonló lehet
bármiben...
bármiben...
megengedsz 1 összegzést??
nekem valójában a következőkre van szükségem (szerintem!):
1. XMLHttpRequest /menüpontonként/
2. DOM builder /a csonka HTML file-okhoz/
3. egy script a teljes HTML file-ok összefűzéséhez /amenyiben total statikus lesz az oldal, illetve a minimal HTML szerkezet klónozásához/
az 1.-est tul.képpen bármelyik js keretrendszerben megtalálom
2. pl. a scriptaculous-nak van kifejezetten DOMbuilder kiterjesztése
3. ezt talán megoldandottnak vehetem.
1. ezt, szerintem az ajax.js és az ajax-dynamic-content.js tökéletesen viszi, keretrendszer nélkül, ie6-tól fölfelé, full cross-browser szinten!
2. a gacsit.js szerintem 98%-ban fölépíti a DOM-ot! a 2% hiba pedig a következő:
nem tudok az index.html-nek megfelelő onclick attribútumot létrehozni a menü <a> elemeire!
valami ilyesmi kéne:
mak.setAttribute("onclick" , ajax_loadContent('loadin','sitemap.html');return false";);
vagy
mak.onclick = ajax_loadContent('loadin','sitemap.html');return false";
sajnos ezek nem jók!!!:-(((((
aztán jönne a dynamiclayout.js integrálása a gacsit.js-be! /window.onload duplikáció:-(( /
hirtelen ennyi volna
jav.: return false";
helyett
return false;
+1
AJAX helyett:
- adott egy üres oldalad, amiben van egy <div id="content"></div> - azaz a tartalom helye,
- a linkelt HTML fájl betöltése egy rejtett <iframe id="aframe" style="display: none;"></iframe> IFRAME-be,
- majd document.getElementById("content").innerHTML = document.getElementById("aframe").contentWindow.document.body.innerHTML;
+1
jav.
sehol sincs, mert rejtett :-)
Akárhol
Bár még mindig azt mondom, hogy az előre legyártás sokkalsokkal értelmesebb megoldás. Fejlesztheted ezt is azzal, hogy a csonka fájloknak csak a <body> </body> közötti részét másolod a célfájlba:
+1 iframe
gondoltam megpróbálom, amit +1-nek írtál az alábbi módon:
<div id="loadin">
<!--[if lt IE 6]><iframe src="index-in.html" id="index-in" name="index-in" style="display: none"></iframe><![endif]-->
</div>
<!--[if lt IE 6]>
<script type="text/javascript">
document.getElementById('loadin').innerHTML = document.getElementById('index-in').contentWindow.document.body.innerHTML;
</script>
<![endif]-->
amit szeretnék elérni, hogy ie6- /de js igen/ esetén töltse be az iframe-be az index-in.html-t!!
sajnos nem megy!!:-(
tudnál segíteni, hogy hol van a hiba???
jav:
közben találtam egy jQuery-s megoldást!!
$("body").prepend('<iframe id="jQuery_history" style="display: none;"></iframe>');
var iframe = $("#jQuery_history")[0].contentWindow.document;
iframe.open();
iframe.close();
iframe.location.hash = this._curHash;
talán át tudom ültetni sima dom szabványnak megfelelőre!!:-)
konklúzió
úgy tűnik, jó ha a sima, statikus oldalt össze tudom majd hozzni megfelelőre!!!:--((((
ha esetleg valaki mégis tudna az onclick-es dologra megoldást, örülne a kis májam!!!:-)
Üdv.
carrizu
lehet, hogy sikerül??
lehet, hogy sikerülni fog!!!:-)
pár nap biztosan kell!!
ha nem prob. még jelentkezek!!
jQuery /állat/
az index.html-t sikerült jQuery-vel teljesen kiváltanom!!!!!!!!!:-))
most már "totál átjött", hogy miért ajánlottátok a keretrendszereket!! :-)
ps (magamnak + rrd-nek)
...+ a saját, összetört kis lelki világom ":-)" és rrd megnyugtatására muszáj kiírnom a következőket magamból:
rrd: jártam a honlapodon és "A drágább az olcsóbb" blogod olvasása után jött a kényszeres mondandóm!
// előre szeretném kijelenteni, hogy nem suttyóskodni akarok és egyébként sem volt a válaszaidban semmi ilyen jellegű dolog!!!!!!
// sőt, ennek hatására mentem neki a keretrendszeres témának!!
ha szabad itt említeni, "kisPocok" hozzászólását érzem a legközelebb magamhoz, valamint "Baróti Róbert" -ét egy kicsit,mert bár nem tudok swf-et programozni, és első ránézésre lehet, hogy nem látszik, de az én esetemben egy "NON-PROFIT!!!" dologról van szó!!!
remélem nagyon nem rontottam a megítélésemen!!!??? //ez nagyjából költői talán?!//
Üdv.
re PS
re PS +
+ megkérdezhetem, hogy esetleg belenéztél-e a kódba??????
// cinikusság és benyalás nélkül, csupán a tény, hogy így volt, az nekem azt jelentené, hogy :-)))))) //
nem
Ha valaki azt írja, hogy totál kezdő és Ajaxszal próbálkozik egy saját JS-sel, akkor nézegetés nélkül azt írom amit neked is írtam, hogy kezd el használni bármelyik keretrendszert. Azért, mert a második, harmadik projektnél úgy is rájön az ember, hogy sokkal jobban jár így.
Szóval nem a kódodat minősítettem, mert az nem láttam.
Mellesleg ha valaki összerak egy működőképes saját kódú ajaxos alkalmazást akkor nem totál kezdő. :)
nem
asszem ebben a válaszban reménykedtem, valahol mélyen!!!!:-))))))
most már vidámabb hangulatban tudom folytatni!!!!!
azaz folytatnám, ha tudnám!!:-)(
ugye a jQuery ie6-tól működőképes???
muszáj megcsinálnom a dom builder js-t és js ver:1 + dom0 kompatibilisre kellene készíteni,
hogy ie6 és verziótársai-tól lefelé is működjön!!
"ezt találtam az oldaladon, csak még bele kell néznem:"
https://bors.hoszting.com/pipermail/wl-offlista/2006-September/008166.html
tudnál tanácsot adni, hogy merre induljak?
a legújabb verziós prototype-scriptaculous páros ie6 alatt is működik???
lehet, hogy megint előbb kérdezek, mint ahogy tájékozódnék teljeskörűen, ezért sorry!!
ie6 alatt
IE6-on működnek. De ha már elkezdted a jQuery-t akkor csinálj mindent azzal. Nem nagyon érdemes keverni a keretrendszereket. Azt meg gondold át még egyszer, hogy tényleg szükséged van-e ie6 előtti verziók támogatására.
ie6 alatt
igen ie6-on műkszik:-))) / ez valójában nagyon kell és örülök neki!!/
...de, elméletileg az oldal nagyközönsége ie6-ot és régebbi böngészőket használnak!?!
+ tul.képpen elvárás is és én magam is szeretném, hogy ie4-en és verziótársain még fusson,
igaz statikus módon! (minden oldal külön betöltődik, bármelyik linkre kattintás esetén)
/ saját, nem biztos, hogy megfelelő elképzelésem szerint, ehhez kéne egy dombuilder js!!!
a helyzetet bonyolítandó, a jQuery-vel így sikerült a bookmark+history dolgot megoldanom:
http://akarmi.hu/#vmi.html / ez gyönyörűen működik a jQuery-t támogató böngészőkön!/
de a linkek így néznek ki a html kódban ----- és a böngészőben:
<a href="vmi.html"> ----- http://akarmi.hu/vmi.html
ez azt hozza magával, hogy mind a két formában lehet hivatkozni a html file-okra,
de az első csak ie6 és fölötte működőképes, míg a második minden esetben az (kéne, hogy legyen)!!
szvsz, mivel a második formában van az index.html megírva, ezért a robot is ennek megfelelően tudja föltérképezni az oldalt!!??!! / sima <a href="vmi.html">, ezt érti a robot igazán, nem??? /
miközben írom ezt a válszt, tisztázodott bennem, hogy olyan dombuilder js kéne, ami ie6 és fölötte jQuery-vel építi föl a dom-ot,
ie6 alatt (ie4-ig) pedig W3C standard szerint! / persze ie hack-ekkel!:-( /
jól gondolom??