[JS] complete <div> vervangen met een andere

[Verwijderd]

Heey jongens,

Ik ben bezig met een website voor een vriend en daar wil ik iets speciaals in. Bovenaan de pagina moet wat informatie komen over wat hij precies doet, maar dat moet je door middel van een eenvoudig linkje weg kunnen klikken.

Ik werk met <div>'s, dus ik wil eigenlijk twee <div>'s elkaar laten vervangen door op een link te klikken.

Dit heb ik op dit moment:

wel content:

code:

<div id="welcontent">
hier staat dus content enzo. Maar deze moet weg kunnen door op dit <a href="#">linkje</a> te klikken.
</div>

geen content:

code:

<div id="geencontent">
nu is de content weg, maar er blijft nog wel een <a href="'#">linkje</a> over om het terug te plaatsen.
</div>

Ik heb dus twee compleet andere div's.
De bedoeling is, dat wanneer je op het linkje in de div 'welcontent' klikt, dat de hele id="welcontent" verdwijnt en dat daar de id="geencontent" voor in de plaats komt en vice versa.

Ik heb al diverse scripts geprobeerd, waaronder het showhide-layer scriptje van Macromedia Dreamweaver, maar ik krijg geen resultaat. Ondanks dat ik echt denk dat dit heel simpel moet zijn

Wie heeft een idee hoe ik dit het beste op kan lossen?

Thanks!

[BtM909]

Dan doe je het toch niet goed. Ik mis in bovenstaande nou juist het stuk wat niet werkt. Waarom plaats je juist de relevante code niet in je post. Nu wordt het wel heeeeel lastig om je verder te helpen op het punt waar je tegen je problemen aan liep.

Simpelste truuk is een container om beide elementen gooien. Dit element position: relative; meegeven. De bovenstaande twee elementen absoluut positioneren (op elkaar dus) en met een JS die ene of de andere zichtbaar maken door de CSS style aan te passen.


Volgens mij zijn dit wel genoeg tips en hints om tot een oplossing te komen.

[ Voor 23% gewijzigd door BtM909 op 20-04-2006 11:53 ]

[André]

Het simpelste is om de outerHTML van de div te vervangen, maar mooier is om met DOM methodes de child te verwijderen en een nieuwe div te appenden

[Swaptor]

André's oplossing is inderdaad programmatisch de mooiste oplossing aangezien je dan de schoonste html krijgt.
BtM909's opmerkingen over het zichtbaar maken van een div is waarschijnlijk de eenvoudigste en meest toegepaste oplossing, overigens ook degene waar ik zelf voor zou gaan, aangezien ik niet de grootste javascript-held ben.

[BtM909]

André schreef op donderdag 20 april 2006 @ 11:53:
Het simpelste is om de outerHTML van de div te vervangen, maar mooier is om met DOM methodes de child te verwijderen en een nieuwe div te appenden

De vraag is in hoeverre beide wel content zijn en niet alleen voor presentatie-purposes om en om zichtbaar worden gemaakt

[Verwijderd]

Bedankt voor de snelle reactie, maar ik zal eventjes voor de duidelijkheid alles even er echt in gooien

Ik heb dus 2 verschillende div's, zoals ik al zei.

<div> 1:

code:

<div id="balk">
  <div id="positie"><div><a href="#" title="Sluit deze balk">-</a></div></div>
  <div id="intro">
    <h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras tempor euismod est.</h1>
      <p>Nunc ultrices tortor at dui. Fusce vel nibh. Phasellus quam. Curabitur posuere. Ut justo ligula, ornare vitae, hendrerit eget, sodales quis, est.      Maecenas vehicula. Nunc id felis id arcu convallis tristique. Aliquam nec sapien.</p>
        <ul>
          <li>Hier is plaats voor een kleine opsomming</li>
          <li><a href="#">Wellicht met een linkje?</a></li>
        </ul>
  </div>
  <div id="project">
     <a href="#" title="Meer informatie over dit project">[img]"inc/img/projecten/0101.gif"[/img]</a>
     <div id="screen">
       <div><a onclick="return foto(this)" href="inc/img/projecten/0101.gif" title="Screenshot 1">1</a></div>
       <div><a onclick="return foto(this)" href="inc/img/projecten/0102.gif" title="Screenshot 2">2</a><span>[img]"inc/img/projecten/0102.gif"[/img]</span></div>
       <div><a onclick="return foto(this)" href="inc/img/projecten/0103.gif" title="Screenshot 3">3</a><span>[img]"inc/img/projecten/0103.gif"[/img]</span></div>
       <div class="breed"><a href="#" title="Meer informatie over dit project">Meer informatie</a></div>
  </div>
</div>

<div> 2:

code:

<div id="geenbalk">
  <div id="positie"><div><a href="#" title="Open deze balk">+</a></div></div>
</div>

Zoals je ziet staat bovenaan elke div een link in de vorm van een minnetje of een plusje. Door op het minnetje te klikken wil ik graag dat dus de div 'balk' wordt vervangen door 'geenbalk'.

In de balk staat een kleine beschrijving van de verdere pagina en een paar screenshots van een project dat hij gedaan heeft, hij ontwerpt gebouwen en dit moet zijn visitekaartje worden naar bedrijven toe om hem aan te nemen .

Een container om beide elementen gooien begrijp ik niet helemaal ik ben pas net bezig met webstandaarden en vond dat ik er al behoorlijk uit kwam met dat css gedoe alleen dat javascriptje wat ik nu wil blijkt wat lastig.

Weet niemand of ik ergens een voorbeeldje kan halen? Op alistapart.com kon ik zo snel niets vinden.

Hoop dat jullie wat meer hebben aan de volledige code.

[WormLord]

Je kan ook gaan werken met style.display van de div'jes. En dan met name de waardes "none" en "block". Je hebt geen container voor je div'jes nodig om dit voor elkaar te krijgen.

[crisp]

André schreef op donderdag 20 april 2006 @ 11:53:
Het simpelste is om de outerHTML van de div te vervangen, maar mooier is om met DOM methodes de child te verwijderen en een nieuwe div te appenden

Welke browsers ondersteunen er allemaal outerHTML?

[Verwijderd]

WormLord schreef op donderdag 20 april 2006 @ 12:29:
Je kan ook gaan werken met style.display van de div'jes. En dan met name de waardes "none" en "block". Je hebt geen container voor je div'jes nodig om dit voor elkaar te krijgen.

Heb je hier misschien een bron van? Of wellicht een klein voorbeeldje?

crisp schreef op donderdag 20 april 2006 @ 12:36:
[...]

Welke browsers ondersteunen er allemaal outerHTML?

Dat wordt helaas alleen maar ondersteund door IE 4.0 en hoger. Dat is dus niet iets wat ik wil

[ Voor 31% gewijzigd door Verwijderd op 20-04-2006 12:40 ]

[Verwijderd]

Wellicht dat je hier wat mee kan: http://moofx.mad4milk.net/

[Verwijderd]

Verwijderd schreef op donderdag 20 april 2006 @ 12:38:
Dat wordt helaas alleen maar ondersteund door IE 4.0 en hoger. Dat is dus niet iets wat ik wil

Niet bepaald een browser om rekening mee te houden lijkt me toch, of begrijp ik iets nu niet?

[RobIII]

Verwijderd schreef op donderdag 20 april 2006 @ 12:57:
[...]

Niet bepaald een browser om rekening mee te houden lijkt me toch, of begrijp ik iets nu niet?

Je begrijpt iets niet: Helaas surft het (overgrote) deel van de "internetpopulatie" nog met IE en is IMHO IE dus wel degelijk een browser om rekening mee te houden. Firefox, Opera, Safari enzovoorts zijn tegenwoordig ook belangrijk, maar dat neemt niet weg dat IE nog steeds het (overgrote) marktaandeel bezit.

[BtM909]

RobIII schreef op donderdag 20 april 2006 @ 12:59:
[...]

Je begrijpt iets niet: Helaas surft het (overgrote) deel van de "internetpopulatie" nog met IE en is IMHO IE dus wel degelijk een browser om rekening mee te houden. Firefox, Opera, Safari enzovoorts zijn tegenwoordig ook belangrijk, maar dat neemt niet weg dat IE nog steeds het (overgrote) marktaandeel bezit.

Het ging treador waarschijnlijk om IE4.0

[WormLord]

Verwijderd schreef op donderdag 20 april 2006 @ 12:38:
[...]


Heb je hier misschien een bron van? Of wellicht een klein voorbeeldje?
[...]

Nee, maar Google wel.
Ik had eigenlijk verwacht dat je dat zelf ook wel had geprobeerd .

[Verwijderd]

Het is me gelukt..

Heb hetvolgende geschreven:

code:

function mySetStyleDisplay (myDiv, myStyle){
if (document.all){
obj = document.all(myDiv);
obj.style.display = myStyle;
} else if (document.getElementById) {
obj = document.getElementById(myDiv);
obj.style.display = myStyle;
} else {alert (Err_Browser);}
}

function myShow(myDiv){
mySetStyleDisplay (myDiv,'');
}

function myHide(myDiv){
mySetStyleDisplay (myDiv,'none');
}

en dan de links:

code:

<a href="#" onclick="javascript:myShow('balk'); myHide('geenbalk'); return true;" title="Open deze balk">+</a>

bedankt voor alle hulp jongens!

[crisp]

Verwijderd schreef op donderdag 20 april 2006 @ 20:54:
Het is me gelukt..

Heb hetvolgende geschreven:

code:

function mySetStyleDisplay (myDiv, myStyle){
if (document.all){
obj = document.all(myDiv);
obj.style.display = myStyle;
} else if (document.getElementById) {
obj = document.getElementById(myDiv);
obj.style.display = myStyle;
} else {alert (Err_Browser);}
}

function myShow(myDiv){
mySetStyleDisplay (myDiv,'');
}

function myHide(myDiv){
mySetStyleDisplay (myDiv,'none');
}

Niet gedacht anno 2006 nog eens document.all te zien. Mijn advies: don't bother; IE4 is dood en latere versies doen het prima met getElementById

en dan de links:

code:

<a href="#" onclick="javascript:myShow('balk'); myHide('geenbalk'); return true;" title="Open deze balk">+</a>

a) geen javascript: pseudo-protocol gebruiken in event-handlers
b) geen anchor-element gebruiken als het geen link is

[Zoefff]

Heel quick & dirty dus iets als dit:

JavaScript:

function showIntro() {
    document.getElementById('intro').style.display = 'block';
    document.getElementById('balk').style.display = 'none';
}
function hideIntro() {
    document.getElementById('intro').style.display = 'none';
    document.getElementById('balk').style.display = 'block';
}

HTML:

<div id="balk">
    <p>
        <a href="#" onClick="showIntro();">Laat intro zien</a>
    </p>
</div>
<div id="intro" style="display:none;">
    <p>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus id enim gravida magna mollis aliquet. Donec in dui vel dolor porttitor vulputate. Ut leo ligula, rutrum vel, posuere ut, tempor non, erat. Quisque sit amet augue vel metus fringilla auctor. Phasellus tellus lectus, blandit at, pellentesque at, mollis ut, turpis. Donec nulla. Cras non quam. Nulla molestie, quam eget tempus interdum, risus nibh pellentesque odio, nec fringilla odio lectus posuere dolor. Aliquam erat volutpat. Suspendisse tincidunt volutpat erat. Mauris sagittis metus eu lorem rutrum bibendum. Cras ornare. Ut vehicula eros ut mauris. Integer non leo quis elit ultrices aliquet. Donec vehicula eleifend orci. Vestibulum velit. Fusce in urna sed ante condimentum elementum. Nunc neque. Nullam bibendum, nulla a ullamcorper viverra, arcu nunc cursus massa, at auctor diam massa in nunc.
        <a href="#" onClick="hideIntro();">Verberg intro</a>
    </p>
</div>

Dat is natuurlijk veel netter te doen, met bijvoorbeeld maar 1 functie die alles regelt. Maar het idee is duidelijk denk ik

[crisp]

offtopic:
wat hebben sommige mensen toch met eventhandlers en camelcasing in HTML? Alle attributen doen ze keurig netjes lowercase, behalve eventhandlers. Ik mag dan in ieder geval hopen dat er geen XHTML DTD bovenaan staat

[Zoefff]

Oh. Ik dacht dat het in XHTML júist met 'camelcasing' moest

Sorry crisp, zal het niet meer doen