Linken van div naar div

[merrlin]

Ik probeer een website te maken die bestaat uit 3 divs, top, links, rechts.
Vanuit het linker deel (menu) wil ik via een link een externe html pagina laden in de rechter div (main).

Met frames zou het zijn target="naam rechter frame" Vanuit een div lijkt het vrijwel onmogelijk, tenzij je een javascript en/of Ajax/Perl/php/etc gebruikt.

Op andere sites wordt deze vraag ook regelmatig gesteld, helaas zonder een werkend antwoord. Iemand hier enig idee?

Vanzelfsprekend kan ik de links zo maken dat de gehele pagina herladen wordt, maar dat is niet mooi en kost ook teveel bandbreedte.

[Bram77]

Een Div is inderdaad geen iframe. Met AJAX is het heel eenvoudig. Misschien daar eens in duiken. Krijg je geen spijt van (javascript+php/ASP dus)

[ Voor 9% gewijzigd door Bram77 op 15-12-2006 09:09 ]

[Tanuki]

AJAX en document.getElementById('mijndiv').innerHTML (maar dan de DOM variant, volgens mij .nodeValue). =)

EDIT: Oh, spuit 11.

[ Voor 42% gewijzigd door Tanuki op 15-12-2006 09:10 ]

[t-x-m]

Je zult er vast geen spijt van krijgen om te weten wat AJAX is, maar ik betwijfel of dat wel een goede oplossing is.
Gezien je aangeefd dat je op dataverkeer let ga ik er van uit dat je veel bezoekers hebt? Want normaal gesproken valt dat dataverkeer wel mee hoor(een pagina refresh betekend niet dat alle plaatjes ed. opnieuw worden gedownload van je server, die staan in de lokale cache!).

AJAX is in jouw geval denk ik geen wonder middel hoor! Het is namelijk niet bedoeld voor navigatie, het is zoekmachine onvriendelijk en je moet maar hopen dat de browser van je bezoeker het begrijpt.

Als je ècht niet wilt dat de hele pagina refreshed zou ik gaan voor een iframe, hoe lelijk dat ook is.

[ Voor 9% gewijzigd door t-x-m op 15-12-2006 09:13 ]

[Verwijderd]

Wat je wil moet inderdaad met JavaScript. Je kunt niet iets dynamisch willen laden zonder frames of de DOM te gebruiken. Ajax is dan een goede keuze voor een situatie als deze, aangezien niemand tegenwoordig echt meer frames wil.

edit: spuit 12

[ Voor 4% gewijzigd door Verwijderd op 15-12-2006 09:14 ]

[RM-rf]

merrlin schreef op vrijdag 15 december 2006 @ 09:07:
Ik probeer een website te maken die bestaat uit 3 divs, top, links, rechts.
Vanuit het linker deel (menu) wil ik via een link een externe html pagina laden in de rechter div (main).

Met frames zou het zijn target="naam rechter frame" Vanuit een div lijkt het vrijwel onmogelijk, tenzij je een javascript en/of Ajax/Perl/php/etc gebruikt.

Wat je hier wilt gebruiken is een IFRAME en geen DIV, een DIV kent geen mogelijkheid om zomaar 'content in te laden....

Sommigen gebruiken nog wel de optie om de content via een hiden IFRAME te laden en deze onload dan te transferen naar een in de pagina geplaatste DIV (voordeel daarvan is dat je dan je CSS-styles centraal kunt houden).
een andere optie is om dit bv via XMLHttpRequest te doen (dat is de eerder genoemde 'AJAX'-techniek)

Op andere sites wordt deze vraag ook regelmatig gesteld, helaas zonder een werkend antwoord. Iemand hier enig idee?

Vanzelfsprekend kan ik de links zo maken dat de gehele pagina herladen wordt, maar dat is niet mooi en kost ook teveel bandbreedte.

'mooi' is dan ook zo ongeveer de allerzwakste, nl. zeer subjectieve reden om iets op een bepaalde manier werkend te laten krijgen, 'mooi' is an sich namelijk niet nuttig en gebruiksvriendelijk ...
probeer hiervoor een objectief criterium te bedenken.

het nadeel van extensieve scripting om bepaalde effecten te bereiken, is dat het een site cveelal ook enorm 'breekbaar' en minder toegankelijk maakt ...
de kans is groot dat er in speciale situaties des te meer onoverkomelijke fouten ontstaan, bv als mensen browsen met standaard scripting uit (ikzelf heb bv de noscript-extentie in Firefox, waarbij ik per site kan toewijzen of ik scripting toesta, dat doe ik enkel bij een minmaal aantal sites die ik regelmatig bezoek, een site die zonder scripting niet navigeerbaar is, valt dan al per direkt af)

Bovendien zogrt zo'n oplossing er mogelijk voor dat je site misschien niet meer geindexeerd kan worden door Google en andere zoekmachines, ook een effect dat de meesten niet graag zien.

[ Voor 3% gewijzigd door RM-rf op 15-12-2006 09:19 ]

[t-x-m]

Was overigens een vergelijkbaar topic over, vorige week:
Hele site herlaad i.p.v. alleen pagina in layer

edit:
Wat zeg ik, eergister

[ Voor 14% gewijzigd door t-x-m op 15-12-2006 09:21 ]

[Bram77]

Als je wilt kan ik je op weg helpen met Ajax. Natuurlijk is er altijd discussie over wat het meest efficient is, maar het blijft een van de meest interessante ontwikkelingen van de afgelopen twee jaar wat webscripting betreft. Als je eenmaal weet hoe het werkt zijn er opeens een heleboel nieuwe mogelijkheden.

[Cartman!]

Bottomline uit het andere topic: gewoon je pagina herladen. Browsers hebben al lang cache en als je je site netjes code dan zie je alleen je content verversen (net zoals t.net zoals in t andere topic al werd aangehaald). Succes.

[merrlin]

Het staat voor mij nu vast dat het inderdaad niet mogelijk is vanuit een div een andere div te linken/laden. Scheelt een boel puzzelwerk. :-)

Ik heb besloten voor de Ajax oplossing te gaan en kwam al vrij snel een script tegen dat precies dat kan doen wat ik in het eerste bericht aangaf.

Voor de mensen die tegen hetzelfde probleem aanlopen of gewoon nieuwsgierig zijn, ik heb deze Ajax oplossing gebruikt: http://www.dynamicdrive.com/dynamicindex17/ajaxcontent.htm

Bedankt voor alle tips, uitleg, etc. kan nu weer verder bouwen!

[Janoz]

Voor de mensen die tegen dit probleem aanlopen raad ik liever aan om gewoon normaal html te gebruiken. Dit soort ajax toepassingen vind ik persoonlijk altijd grote onzin. De reden waarom het vaak wordt gedaan is 'omdat de ontwikkelaar het wel een grappige gimmick vindt'. Dat je site vervolgens erg javascript afhankelijk wordt, niet meer te bookmarken is en er ook geen linkje meer is die je via mail of msn naar een vriend kunt sturen met 'Kijk eens wat interessant' vergeten ze dan even.

[Verwijderd]

Houd er wel rekening mee dat sommige browsers dit niet ondersteunen, dat je javascript moet hebben en google de pagina's niet kan indexeren. Als dit niet zo'n probleem is dan succes

Het beste zou zijn om naast de ajax site een soort van schaduw site te runnen.
Een vorobeeld van links kan dan het volgende zijn:

code:

<a href="nieuws.html" onclick="loadPageAjax();">nieuws</a>

in loadPageAjax kijk je of de gebruiker ajax ondersteunt, zo ja load de pagina middels Ajax (en return false, om de link druk te cancellen), zo nee dan niks (dan doet de browser de href). Deze links werken ook goed zonder javascript en google kan ze lezen

edit:
Overigens heeft Janoz groot gelijk wat betreft bookmarks en link copieren

[ Voor 7% gewijzigd door Verwijderd op 15-12-2006 15:47 ]

[Spockz]

Janoz schreef op vrijdag 15 december 2006 @ 15:40:
Voor de mensen die tegen dit probleem aanlopen raad ik liever aan om gewoon normaal html te gebruiken. Dit soort ajax toepassingen vind ik persoonlijk altijd grote onzin. De reden waarom het vaak wordt gedaan is 'omdat de ontwikkelaar het wel een grappige gimmick vindt'. Dat je site vervolgens erg javascript afhankelijk wordt, niet meer te bookmarken is en er ook geen linkje meer is die je via mail of msn naar een vriend kunt sturen met 'Kijk eens wat interessant' vergeten ze dan even.

En om dit te verhelpen moet je je site zo bouwen dat hij ook gewoon te browsen is zonder JS. Dus je laat JS zelf er lekker voor zorgen dat als je ergens op klikt dat er dan een js script gestart wordt en dat je niet naar een andere pagina gaat.
(Hopelijk is het duidelijk als ik het zo zeg.)

edit:
* Spockz moet eens refresh klikken voordat hij post.

[ Voor 3% gewijzigd door Spockz op 15-12-2006 15:55 ]