login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Loop door relative div en pas afbeeldingen in static div dynamisch aan.

Offline JeffreyR - 27/04/2013 10:08 (laatste wijziging 29/04/2013 11:48)
Avatar van JeffreyRNieuw lid Hey allemaal. Dit is de eerste keer op dit forum. Ik heb deze vraag als op stackoverflow gesteld, maar nog geen antwoord opgekregen. Misschien kan iemand hier me helpen.

Ik heb 1 relative div met id 'loopdiv'. In deze div zitten allemaal absolute div's. In elke absolute div zit een afbeelding met de <img> tag. Samen maken ze een mooie website layout.

Ik kan al de positie en grootte veranderen van de divs, maar de afbeelding in de divs lukt met niet. De code met uitleg is hieronder te zien:

http://www.plaatscode.be/142185/

Staat de goede methode hierboven al tussen? Dan kan het zijn dat ik een fout heb gemaakt met testen. Zo nee, wat is wel goede methode?

Alvast erg bedankt! 

1 antwoord

Gesponsorde links
Offline Martijn - 29/04/2013 17:05 (laatste wijziging 01/05/2013 13:48)
Avatar van Martijn Crew PHP Ik begrijp niet helemaal wat je doen wilt Gebaseerd op het 'loop' in loopdiv, ga ik uit dat je een soort slideshow wilt maken. Wat je nu doet met JS, is alle divs top+left: 0 geven en alle images 20 bij 20px.

Ik ga dus even verder op dat je een slideshow wilt, in dat geval zit je er redelijk naast 

Een goede manier:
CSS:
- #Loopdiv krijgt position relative, met een width+height+ overflow:hidden;
- #Loopdiv div{} krijgt position absolute, top+left:0, z-index: 1;

Nu staan al je 'slides' op dezelfde plek over elkaar heen.
JS:
- tel aantal slides, zet deze in een globale variabel (dus een var slideCount buiten functies plaatsen)
- Maak een start waarde aan, aannemelijk de eerste (maar zo kun je een random maken): var CurrentSlide = -1; // de slide die je wilt als startslide, -1
En dan een stukje code omdat dat makkelijker is dan verwoorden

  1. var slideCount = loopdiv.getElementsByTagName('div').length;
  2. var CurrentSlide = -1; // startslide -1
  3. setTimeout(function(){
  4. // Hier code dat we willen doen:
  5. if(CurrentSlide >=0){
  6. div[CurrentSlide].zIndex=1; // Zet huidig active slide op normale z-index
  7. // Ga naar volgende slide
  8. CurrentSlide++;
  9. //Indien laatste slide bereikt, terug naar de eerste:
  10. if( CurrentSlide == slideCount ){ CurrentSlide = 0;}
  11. // Zet deze slide nu vooraan
  12. div[CurrentSlide].zIndex=10;
  13. }
  14. }, 1000); // Doe dit elke x (nu 1000) millisec

LET OP! Dit is even een snelle schets, kan zijn dat het net even anders moet, en het zou ietsje handiger kunnen met wat meer variabelen, maar dit is duidelijk genoeg denk ik
Gesponsorde links
Je moet ingelogd zijn om een reactie te kunnen posten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.18s