DOM div verwijderen en toevoegen

[BenSw]

Hallo

Ik heb in het verleden weleens DOM Javascript geleerd, maar ik weet niet meer precies hoe dit weer werkt. Ik heb een site: users.skynet.be/fa307845/TES en bij deze wil ik bij het klikken op een button dat enkel de gele tekst div verandert, kwestie van niet de hele site te moeten reloaden. Hoe doe ik dit het best?

Ik was aan het denken var text=document.getElementById('main_text') en dan text.removeParentChild ? Is dit juist en hoe moet ik dan verder?


Kan iemand mij even op weg helpen? Bedankt alvast!


(Ik weet niet of het nodig is om mijn code hier te plakken? De div noemt main_text)


Mvg

[BenSw]

Oké, na wat prutsen ben ik al wat verder geraakt. Ik heb nu volgende Javascript code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function createDiv(){
  var newdiv = document.createElement('div');
  var divIdName = 'div'+arguments[0];
  newdiv.setAttribute('id',divIdName);
  newdiv.className= "main_text";
  /*newdiv.style.width = "412px";
  newdiv.style.height = "350px";
  newdiv.style.right = "119px";
  newdiv.style.top = "75px";
  newdiv.style.position = "absolute";
  newdiv.style.backgroundImage = 'url(".../images/main_text.png")';*/
  newdiv.innerHTML = 'this is div number '+arguments[0];
  
  var content = document.getElementById('content');
  content.appendChild(newdiv);

Ik heb nog 2 problemen:
1. Ik wil de class "main_text" toevoegen aan deze div (deze staat .main_text in css) maar dit werkt niet.
2. Ik wil eerst de bestaande div met class="main_text" (die ik in de index.html gemaakt heb) verwijderen.


Mvg

[Robin S]

Hej Ben, je schiet inderdaad al op Voor de twee dingen die je nog wil:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//1
newDiv.className = "main_text";
/* Of, voor een id:
newdiv.id = "main_text";
*/
 
//2
function removeChild(node) {
    if (node.parentNode) {
        node.parentNode.removeChild(node);
    }
}
 
var oldDiv = document.getElementById("main_text");
removeChild(oldDiv);

Let er op dat je class en id niet door elkaar gooit In CSS:

#main_text {
    /* Voor een <element id="main_text"> */
}
.main_text {
    /* Voor een <element class="main_text"> */
}

Gr. Robin

[BenSw]

Oké bedankt, dat werkt.

Verder: wanneer de webpagina laadt, heb ik een jQuery effectje zodat de div tevoorschijn komt:

1
2
3
$(document).ready(function() {
    $('.main_text').slideDown(1000);
});

Moet ik nu een andere functie schrijven voor deze nieuwe div? (Want deze is als het document geladen is als ik me niet vergis?) En hoe zou deze er dan uitzien?


En nog een tweede vraag:
Ik heb voor elke link een of meerdere div's vol met tekst. Nu is mijn vraag waar moet ik die tekst zetten? (Is dat misschien met AJAX of JSON?)




Mvg

[BenSw]

Niemand die me kan helpen?

[klaaspeter]

je vragen zijn mijn niet helemaal duidelijk. zou je de vraag wat duidelijker kunnen uitleggen.

[csshunter]

Hoi BenSw,

Antwoord tweede vraag.
Hiervoor zou de functie aangepast moeten worden:

function createDiv(divIdName){
  $(".main_text").remove();	
  var newdiv = document.createElement('div');
  newdiv.setAttribute('id',divIdName);
  newdiv.className = "main_text";
  newdiv.innerHTML = 'this is '+divIdName;
  var content = document.getElementById('content');
  content.appendChild(newdiv);
};

Er zou dan een switch ingebouwd moeten worden voor de verschillende mogelijkheden, iets als:

  if (divIdName=="home"){
      newdiv.innerHTML = '<h2>TES: Total Energy Solutions</h2>';
      newdiv.innerHTML+= '<p>Total Energy Solutions bestudeert, ontwerpt en verwezenlijkt technische installaties in gebouwen. Wij ontwerpen en formuleren duurzame oplossingen op maat voor onze klanten, maar fungeren ook als multifunctionele partner bij een effectieve implementatie of installatie.</p>';
      }

  if (divIdName=="mission"){
      newdiv.innerHTML = '<h2>Mission statement</h2>';
      newdiv.innerHTML+= '<p>Om onze opdracht uit te voeren, moeten we de behoeften van onze klanten doorgronden en hen op een kritische en innovatieve manier bijstaan met professioneel advies. We zijn het aan hen en aan onszelf verschuldigd steeds op de hoogte te zijn van de allerlaatste trends en ontwikkelingen en ons constant bij te scholen.</p>';

  if (divIdName=="wie"){
      newdiv.innerHTML = '<h2>Wie zijn wij?</h2>';
      newdiv.innerHTML+= '<p>Total Energy Solutions, kortweg TES, is een jong en dynamisch ingenieursbureau met 3 verschillende, maar complementaire specialisaties.</p>;
      newdiv.innerHTML+= '<p>Ten eerste profileren we ons als studiebureau speciale technieken. Dankzij onze opleiding als ingenieur, onze ervaring in gebouwentechnieken en onze uitvoerige productkennis kunt u voor elk project en voor elke toepassing bij ons terecht. Studies voor gebouwtechnieken zoals HVAC, sanitair, brandbestrijding, electriciteit etc. behoren tot onze kernactiviteit, zij het voor nieuwbouw of renovatie.</p>';
      newdiv.innerHTML+= '<p>Uiteraard bestaat ook de mogelijkheid slecht werkende installaties onpartijdig te evalueren om u als klant te informeren hoe het beter kan. Wij voorzien u van een actielijst, een raming van mogelijke oplossingen en verbeteringen aan de installatie.</p>';
      newdiv.innerHTML+= '<p>Ten tweede (en complementair aan onze eerste specialisatie), kunnen wij in eigen beheer de installatie zelf uitvoeren. TES heeft dan ook de mogelijkheid om het Design & Build - concept in praktijk te brengen.</p>'';
      newdiv.innerHTML+= '<p>Ten slotte kunnen wij voor u optreden als freelance projectleiding of projectcontrole. Zij het als bouwheer of aannemer, studiebureau of controlebureau, er bestaan verschillende mogelijkheden om onze expertise in te huren. Dankzij onze jarenlange ervaring als projectleider kunnen we elke project tot een goed einde brengen.</p>';
      }
... enz.!

Ook de links en images in de tab-inhouden zouden er op deze manier in moeten komen.

Maar...
De diepere reden van het op deze (ingewikkelde) manier willen maken van een één-pagina-website ontgaat me. Ik zie wel pittige nadelen:

• De tekst van de "tab-pagina's" komt niet in de html-code te staan, maar wordt steeds als variabele in de innerHTML ingelezen.
  Dat is redelijk onhandig als er iets veranderd moet worden.
• Maar erger: hierdoor is de inhoud van alle tab-pagina's behalve de eerste (die al aan staat bij openen van de site) ... niet meer door Google te vinden.
  Zie hier wat Google van de pagina('s) waarneemt: tab-inhoud met geen mogelijkheid te zien.
• Toegankelijkheid: mensen die met een text-browser (of voorleesbrowser) werken, komen ook niet verder dan het eerste tabblad. Idem dito voor wie javascript uit heeft staan.

Dus: waarom zo?

1. Waarom niet een gewone site met verschillende pagina's?
   Het niet opnieuw hoeven inladen van een vervolgpagina scheelt nauwelijks iets voor de bezoeker: alle ingrediënten (behalve de nieuwe tekst) staan al in z'n cache, en hoeven niet opnieuw gedownload te worden. De tijdwinst zal dus een fractie van een milliseconde = nihil zijn.
   Dit geeft meteen de mogelijkheid om zonder toestanden de achtergrond-afbeelding per pagina te variëren (dat zou anders ook met javascript moeten gebeuren; de bouwval-afbeelding lijkt me niet het mooiste wat TES te bieden heeft!).
2. En als het dan toch een één-pagina-site zou moeten worden, waarom dan niet alle tab-inhouden gewoon in de html-code, en met een simpel show/hide-javascriptje de goede opgetoverd?
   Als js uit staat, dan komen ze op deze manier gewoon onder elkaar: zowel toegankelijk als Google-baar.

Met vriendelijke groet,
CSShunter

PS: het javascript-menu met 12 images (6 gewone, en 6 hover-varianten) zou mooi vervangen kunnen worden door een css-hover menu met een css-sprite van 1 gecombineerd image. Dat levert wel tijdwinst voor het downloaden, het scheelt een berg overbodig script in de html, en het is ook zonder javascript te gebruiken (bij een 1-pagina-opzet kan het een bladwijzer worden naar het te tonen gedeelte).

PS-2: De background is nu een jpg van 472kB. Die kan zonder bezwaar een compressie van 25% krijgen. Dan wordt het tes-bg-nw.jpg van maar 127kB.
Scheelt even 345kB: ruim 70%!

[BenSw]

Bedankt voor de tips csshunter! Ik ga het zo doen dan.


Dan kan hier een slotje op..