Archief - javascript met DIV's

onslieke · 8 apr 2009

Hey,

wij moeten als project voor webtechnologie een site maken. Men pagina's bestaan uit verschillende DIV's op zo'n manier:

Code:

// al de zever die erboven hoort

<div id="header">
	  	  hier staat de header
</div>	
			
			
<div class="leftcol">
			<div class="menuitem">
				<a href="index.html" > Home</a>
				</div>
			<div class="menuitem">
				<a href="Kalender.html" >Kalender</a></div>
</div>

<div class="midcol" id="pagina"  style="text-align:center">
		
			<p>  De kalender met wedstrijden en trainingen 2009 </p>

</div>

// al de zever die eronder hoort

der besta zoiets als druk.innerHTML = txt; maar ik wil wat ik met men javascript wil laten afdrukken, in 1 bepaalde div laten afdrukken (namelijk die me class midcol) niet in een nieuwe pagina

Can you help me?
xxx
sorry voor moest het meer bij xhtml hore

onslieke · 9 apr 2009

tis gelukt

de script tussen de div-tags schrijven was goe genoeg

volgens onze leerkracht mocht da alleen ma in den <header>. Blijkbaar mag da wel

j design · 10 apr 2009

Is het niet dat ge me JS naar u bepaalde class kunt zoeken en dan innerHTML ofzo.
Sorry als het compleet fout is. Me=JSnoob

document.getElementById('Zet hem hier uw ID').innerHTML = "HTML";

adrianhates · 10 apr 2009

j design zei:
Is het niet dat ge me JS naar u bepaalde class kunt zoeken en dan innerHTML ofzo.
Sorry als het compleet fout is. Me=JSnoob

beter zo

Code:

document.getElementById('Zet hem hier uw ID').appendChild(document.createTextNode('HTML'));

j design · 11 apr 2009

En hoe moet je dan een stuk html invoegen die je klaar hebt staan in een andere file.
Een beetje zoals de include functie van php.
Het is belangrijk dat bij het lezen van de bron de JS er staat en niet de html.

Dus zoals je bij php include kunt doen, dan staat er in de bron wel degelijk dat deel html.
Maar op de manier dat je hebt aangehaald moet het ook mogelijk zijn maar dan dat er enkel de JS staat?

Hopelijk ben ik duidelijk genoeg

Dus een JS dat een stuk html in een bepaalde div van de pagina toont zonder effectief in de bron te zetten.

adrianhates · 11 apr 2009

ajax ofzo? die pagina gewoon terugsturen in de response en dan als textnode of innerHtml in uw div plakken..

miss niet zoon goede manier van werken.. Kzie ni direct in waarom je die html niet gewoon in je pagina zou zetten na je footer en met een display:none

Curahee Q · 11 apr 2009

Je menu is wel fout opgebouwd alsk dat even mag aanhalen. Raar dat nog niemand dat vermeld heeft. Je gebruikt daarvoor veel te veel div's, een menu wordt op volgende manier opgebouwd:

HTML:

<ul>
               <li><a href="#">Link 1</a></li>
               <li><a href="#">Link 2</a></li>
</ul>

UnD3RD0G · 11 apr 2009

adrianhates zei:
beter zo

Code:

document.getElementById('Zet hem hier uw ID').appendChild(document.createTextNode('HTML'));

Ik kan mij vergissen maar ik denk dat InnerHTML de enigste Xbrowser functie is die werkt om de inhoud van elementen aan te spreken... niet 100% zeker tho...

Gurdt · 11 apr 2009

adrianhates zei:
ajax ofzo? die pagina gewoon terugsturen in de response en dan als textnode of innerHtml in uw div plakken..

miss niet zoon goede manier van werken.. Kzie ni direct in waarom je die html niet gewoon in je pagina zou zetten na je footer en met een display:none

is da nie iets dat ge dan asynchroon uwen site gaat kunnen laden? kan da ik volledig mis ben ze ma kdenk dit:

als ge een webpagina laadt, laadt ge da karakter per karakter, en uw process staat gwn als 1 thread tussen uw andere processen, met ajax (asynchronious javascript and xml) kunt ge bepaalde dingen laden in meerdere threads - denk ik

adrianhates · 11 apr 2009

Gurdt zei:
is da nie iets dat ge dan asynchroon uwen site gaat kunnen laden? kan da ik volledig mis ben ze ma kdenk dit:

als ge een webpagina laadt, laadt ge da karakter per karakter, en uw process staat gwn als 1 thread tussen uw andere processen, met ajax (asynchronious javascript and xml) kunt ge bepaalde dingen laden in meerdere threads - denk ik

waarom zoude uw site asynchroon laten laden.. das toch belachelijk..?

Das 2 dinge doen terwijl er maar 1 nodig is.

OT : zet gewoon die div onderaan uw pagina met ne display:none;
haalt die div op met javascript en hang die als child aan de div waar ge tem wilt en zet display:block.. kheb da ni getest , maar kben er zeker van da da zou lukken

adrianhates · 11 apr 2009

UnD3RD0G zei:
Ik kan mij vergissen maar ik denk dat InnerHTML de enigste Xbrowser functie is die werkt om de inhoud van elementen aan te spreken... niet 100% zeker tho...

innerHTML is puur voor tekst volgens mij.. als ge een nieuw element aanmaakt , moet da naar mening altijd DOM's gewijs:

Code:

var par = document.createElement('p');
document.body.appendChild(par);
par.InnerHTML('tekstje blablablabla');

net als elementen aanspreken

Code:

document.getElementById of getElementsByTagName

Gurdt · 11 apr 2009

adrianhates zei:
waarom zoude uw site asynchroon laten laden.. das toch belachelijk..? Das 2 dinge doen terwijl er maar 1 nodig is.

OT : zet gewoon die div onderaan uw pagina met ne display:none;
haalt die div op met javascript en hang die als child aan de div waar ge tem wilt en zet display:block.. kheb da ni getest , maar kben er zeker van da da zou lukken

ge kunt zo een grote site opdelen en die delen asynchroon laden he
een computer werkt ook zo, uwe browser bv verdeelt zen taken, bijvoorbeeld 2 threads per pagina (voor tekts en voor afbeeldingen) en ene voor de interface.
(verder draaien op uw systeem nog andere processen die verder zijn ingedeeld in threads)

en als gij zo een extra thread gaat aanmaken, gaat da gwn sneller gaan.

zie het zo: ge krijgt 1 slaafke ter beschikking:
synchroon -> ge laat da slaafke uwe pagina laden, inhoud-A en daarna inhoud-B
asynchroon -> ge laat da slaafke uw kleine pagina laden en daarna stuurt da slaafke nog een vriendje voor inhoud-A en die gaat zelf inhoud-B halen, dus uw pagina zou sneller laden, ma kweetnie hoe fel ge da merkt natuurlijk

adrianhates · 11 apr 2009

Gurdt zei:
ge kunt zo een grote site opdelen en die delen asynchroon laden he
een computer werkt ook zo, uwe browser bv verdeelt zen taken, bijvoorbeeld 2 threads per pagina (voor tekts en voor afbeeldingen) en ene voor de interface.
(verder draaien op uw systeem nog andere processen die verder zijn ingedeeld in threads)

en als gij zo een extra thread gaat aanmaken, gaat da gwn sneller gaan.

zie het zo: ge krijgt 1 slaafke ter beschikking:
synchroon -> ge laat da slaafke uwe pagina laden, inhoud-A en daarna inhoud-B
asynchroon -> ge laat da slaafke uw kleine pagina laden en daarna stuurt da slaafke nog een vriendje voor inhoud-A en die gaat zelf inhoud-B halen, dus uw pagina zou sneller laden, ma kweetnie hoe fel ge da merkt natuurlijk

zonder testen kan ik da natuurlijk niet zeker zeggen , maar een extra verbinding maken met de server zou meer tijd in beslag nemen.

Dat is als 2 pagina's openen van 50 kb
en 1 pagina van 100 kb

Uiteindelijk komt da ophetzelfde neer , maar die 2de connectie gaat u x aantal meer ms opleveren

Gurdt · 11 apr 2009

zoiets gaat ge dan ook nie gebruiken bij zulke kleine pagina's, maar bekijk het als bv google maps
die hebben aan gigabytes afbeeldingen (satelliet-foto's) die ook asynchroon geladen worden (met ajax), in dit geval laadt google maps slechts inhoud-A tot en met inhoud-G (huidige foto's) en inhoud-H tot en met inhoud-ZZZ niet (alle andere foto's)

die kunt ge dan achteraf inladen
--
andere toepassing:
een bepaalde website heeft links een huidig filmpje dat afgespeeld wordt (bv 3mb), daaronder de reacties (0.5mb) en rechts een aantal suggestiefilmpjes (1mb) (ala youtube dus)

dan kan het interessant zijn om ipv 4.5 mb ineens te laden en de gebruiker te laten wachten, eerst het filmpje te laden (de gebruiker kan beginnen kijken) en later (asynchroon) de rest

Obliv` · 11 apr 2009

Gurdt zei:
is da nie iets dat ge dan asynchroon uwen site gaat kunnen laden? kan da ik volledig mis ben ze ma kdenk dit:

als ge een webpagina laadt, laadt ge da karakter per karakter, en uw process staat gwn als 1 thread tussen uw andere processen, met ajax (asynchronious javascript and xml) kunt ge bepaalde dingen laden in meerdere threads - denk ik

Ja, dat is ongeveer half en half correct. Mbv AJAX kan je inderdaad asynchroon meerdere taken tegelijkertijd uitvoeren.

Het werkt ongeveer zo: je maakt een XMLHttpRequest object aan, je geeft aan welke actie uitgevoerd moet worden en je geeft een callback mee die moet worden uitgevoerd wanneer je request voltooid is.

De essenctie is dus dat je mbv clientside code (in javascript) een serverside action (in ASP.NET, ASP, PHP, JSP, ...) kan uitvoeren. Die actie geeft dan eventueel output in een XML-format terug aan de client. In je callback ga je dan die XML evalueren/parsen. Er is dus geen postback nodig van de volledige webpagina.

adrianhates · 11 apr 2009

Obliv` zei:
Ja, dat is ongeveer half en half correct. Mbv AJAX kan je inderdaad asynchroon meerdere taken tegelijkertijd uitvoeren.

Het werkt ongeveer zo: je maakt een XMLHttpRequest object aan, je geeft aan welke actie uitgevoerd moet worden en je geeft een callback mee die moet worden uitgevoerd wanneer je request voltooid is.

De essenctie is dus dat je mbv clientside code (in javascript) een serverside action (in ASP.NET, ASP, PHP, JSP, ...) kan uitvoeren. Die actie geeft dan eventueel output in een XML-format terug aan de client. In je callback ga je dan die XML evalueren/parsen. Er is dus geen postback nodig van de volledige webpagina.

de xml zit toch in de response header?

Obliv` · 11 apr 2009

adrianhates zei:
de xml zit toch in de response header?

Hoe bedoel je?

DieselPower · 11 apr 2009

Niemand die jQuery of Prototype gebruikt hier?

Jerre Muesli · 12 apr 2009

Jquery & Ext js ja

j design · 12 apr 2009

Om even terug in te pikken

ajax ofzo? die pagina gewoon terugsturen in de response en dan als textnode of innerHtml in uw div plakken..
miss niet zoon goede manier van werken.. Kzie ni direct in waarom je die html niet gewoon in je pagina zou zetten na je footer en met een display:none

Het is omdat er een banner wordt gebruikt met wisselende foto's die in een ul staan. Dus als ik die <li> crap allemaal apart in een file zet dan ziet, volgens mij, de bron er beter uit.
Dan heb je ipv een lange lijst enkele JS lijntjes die in een externe file zitten.
SEO? Als ik het fout heb zeg gerust. Ik ben er om te leren.

Nu je ajax vernoemt, zoiets ja. Maar ik denk dat je dat met een lijntje code kan.
(Maar dat wou ik bekomen.)
Het is niet de bedoeling een webssitestructuur op te zetten. Simpelweg een deeltje laden.

Ik kan het ook met position absolute en beneden plaatsten (code) boven tonen (css) maar vindt ik niet goed.
Dat wil ik vermijden.

DUS

document.getElementById('DivExample').innerHTML = "SOURCEFILE";

Hoe kan ik die source definiëren?

Archief - javascript met DIV's

onslieke

Legacy Member

onslieke

Legacy Member

j design

Legacy Member

adrianhates

Legacy Member

j design

Legacy Member

adrianhates

Legacy Member

Curahee Q

Legacy Member

UnD3RD0G

Legacy Member

Gurdt

Legacy Member

adrianhates

Legacy Member

adrianhates

Legacy Member

Gurdt

Legacy Member

adrianhates

Legacy Member

Gurdt

Legacy Member

Obliv`

Legacy Member

adrianhates

Legacy Member

Obliv`

Legacy Member

DieselPower

Legacy Member

Jerre Muesli

Legacy Member

j design

Legacy Member