login  Naam:   Wachtwoord: 
Registreer je!
 Forum

Willekeurige achtergrond in Div

Offline Zwaregast - 22/08/2009 02:30 (laatste wijziging 22/08/2009 02:41)
Avatar van ZwaregastNieuw lid Ik probeer met behulp van JavaScript een willekeurige achtergrond weer te geven in mijn div. Hij wilt echter het gedeelte vanaf 'document.getElementById' niet uitvoeren. Dit is wat ik heb:

Head:
javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <script language="JavaScript">
  2.  
  3. var theImages = new Array();
  4.  
  5. theImages[0] = 'foto1.jpg';
  6. theImages[1] = 'foto2.jpg';
  7.  
  8. var j = 0;
  9. var p = theImages.length;
  10. var preBuffer = new Array();
  11. var i =0;
  12. for (i = 0; i < p; i++){
  13.    preBuffer[i] = new Image();
  14.    preBuffer[i].src = theImages[i];
  15. }
  16.  
  17. var whichImage = Math.round(Math.random()*(p-1));
  18.  
  19. document.getElementById("header").style.backgroundImage = "url('" + theImages[whichImage] + "')";
  20.  
  21. </script>


Body:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  1. <div id="header"></div>

12 antwoorden

Gesponsorde links
Offline tictac_php2 - 22/08/2009 04:26
Avatar van tictac_php2 Nieuw lid <div id="header"></div>

<?php

$element_1 = rand(1, 2);
if($element_1 == 1)
{
echo("<STYLE TYPE=\"text/css\"> #header { background: url(foto1.jpg) top left no-repeat; } </style>");
} else {
echo("<STYLE TYPE=\"text/css\"> #header { background: url(foto2.jpg) top left no-repeat; } </style>");
}
?>


Kan mooier hoor maar moetk ff nadenken
Offline Esli - 22/08/2009 12:10
Avatar van Esli PHP interesse
tictac_php2 schreef:
<div id="header"></div>

<?php

$element_1 = rand(1, 2);
if($element_1 == 1)
{
echo("<STYLE TYPE="text/css"> #header { background: url(foto1.jpg) top left no-repeat; } </style>");
} else {
echo("<STYLE TYPE="text/css"> #header { background: url(foto2.jpg) top left no-repeat; } </style>");
}
?>


Kan mooier hoor maar moetk ff nadenken


Het lijkt me wel véél eenvoudiger PHP te gebruiken ipv JS. JS kan men trouwens nog altijd vaak uitzetten, PHP niet.
Offline Zwaregast - 22/08/2009 13:58
Avatar van Zwaregast Nieuw lid Bedankt voor je reactie, maar ik wil het gebruiken voor mijn blog op blogspot.com en die ondersteunt geen php.
Offline tictac_php2 - 22/08/2009 14:51
Avatar van tictac_php2 Nieuw lid Geen ondersteuning van PHP ?

ff denken dan


omdat je eerst doet:

document.getElementById("header").style.backgroundImage = "url('" + theImages[whichImage] + "')";

en dan laad je de div met het id Header:


gaat gewoon niet als jij niet weet wat header is dan zal jij dat ook niet kunnen veranderen.

Zo simpel is het ;)

hulp nodig ?



javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. <script language="JavaScript">
  2. function DOMMEzooi() {
  3. var theImages = new Array();
  4.  
  5. theImages[0] = 'foto1.jpg';
  6. theImages[1] = 'foto2.jpg';
  7.  
  8. var j = 0;
  9. var p = theImages.length;
  10. var preBuffer = new Array();
  11. var i =0;
  12. for (i = 0; i < p; i++){
  13.    preBuffer[i] = new Image();
  14.    preBuffer[i].src = theImages[i];
  15. }
  16.  
  17. var whichImage = Math.round(Math.random()*(p-1));
  18.  
  19. document.getElementById("header").style.backgroundImage = "url('" + theImages[whichImage] + "')";
  20. }
  21. </script>


<div id="header">KOP DICHT</div>
<script language="JavaScript">DOMMEzooi();</script>

Je gaat zien het werk dan wel

Maar niet eerst proberen een div aan tepassen als hij nog niet geladen is.

Bestaat mooier oplossingen maar ben sinterklaas niet. Als je het lief vraagt werk ik het wel uit
Offline henver - 22/08/2009 16:03
Avatar van henver HTML gevorderde @tictac: Je hebt gelijk, maar om het toch overzichtelijk te houden kan je best de javascript in de head laten staan:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. window.onload = function(){
  2. }
Offline StyxLabs - 01/09/2009 00:18
Avatar van StyxLabs Nieuw lid De oplossing van henver is inderdaad de juiste manier. Omdat je je javascript in de head van je document hebt staan gaat de browser er van uit dat de elementen die je wilt gebruiken al bestaan. Deze moeten echter natuurlijk nog geladen worden. Hierdoor is het gebruik van window.load of window.ready een essentieel onderdeel.

Om volledige crossbrowser ondersteuning te geven zou ik nog wel even haakjes om het geheel zetten van henver z'n voorbeeld, op deze manier:

javascript code - Bekijk de code zonder highlighting - Klap code in 
  1. window.ready = (function((){
  2.    // je code hier.
  3. });
Offline Richard - 01/09/2009 13:20
Avatar van Richard Crew algemeen Eh, StyxLabs, je verkondigt onzin. De beste manier om JavaScript in te laden is *onderaan* de pagina, vlak voor de </body>. Daarnaast snap ik niet hoe je aan window.ready komt, dat bestaat helemaal niet.
Offline StyxLabs - 15/09/2009 11:30 (laatste wijziging 15/09/2009 11:32)
Avatar van StyxLabs Nieuw lid Je hebt gelijk, mijn fout. Ik bedoelde window.onload (of document.ready). Ik haalde ze even doorelkaar  

En wat je zegt over javascript onderaan de pagina te laden, is geen goed idee. Als het om kleine scripts gaat als deze is het natuurlijk geen probleem, maar als je wat groter gaat werken (neem even een voorbeeld uit iets waar ik mometeel mee bezig ben: sc.styxlabs.com) dan is het toch echter beter om in externe bestanden te werken en gewoon met window.onload of document.ready te werken.
Offline Richard - 15/09/2009 11:31
Avatar van Richard Crew algemeen document.ready bestaat ook niet, dat bestaat vaak in JS libraries (bijv. jQuery: $(document).ready()), niet in de DOM zelf.
Offline StyxLabs - 15/09/2009 11:32
Avatar van StyxLabs Nieuw lid - zie m'n edit.

Enkele browsers ondersteunen document.ready ook op de DOM manier, maar is inderdaad niet officieel ondersteund.
Offline Richard - 15/09/2009 11:34
Avatar van Richard Crew algemeen Je begreep blijkbaar niet wat ik bedoel: externe scripts net zo goed, vlak voor de </body> inladen. Ze blokkeren vanaf daar de browser, dus je hebt dan al een visuele fallback, en het laden van het script duurt niet lang. Scripts blokkeren de interface namelijk omdat ze de DOM kunnen aanpassen, daar moet de browser op wachten.
Offline StyxLabs - 15/09/2009 11:40
Avatar van StyxLabs Nieuw lid Ahh.. Ja, nu je het zo zegt... Dat zou inderdaad wel eens handig kunnen zijn. Zo leer je ook nog eens wat 
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.194s