Javascript code werkt niet wanneer de pagina refresh'd

Status
Niet open voor verdere reacties.
R

Remi321

Gebruiker
Lid geworden
2 mrt 2010
Berichten
179
http://pastebin.com/8CFh2PUK

Dat stukje code staat in de HTML van mijn header. Zodra ik mijn systeemtijd verander, en de pagina ververs, krijgt de pagina niet de juiste achtergrondkleur van de CSS. Maar, als ik een nieuw tabblad open en de pagina daarin open, krijg ik wel het gewenste resultaat!

Snap hier niet veel van, hoe komt dit?
 
Als je eens op ctrl+shift+J drukt (firefox, chrome, etc.) dan krijg je het foutenconsole. Daar staat iets van
return not in function
Klik om te vergroten...
Ofwel: je hebt waarschijnlijk wat code lopen knippen en plakken?

Anyway, het kan een stuk netter:
In je <head>, zet dit:
HTML: 
<link id='stylesheet' href='themes/evening.css' rel='stylesheet' />

net VOOR je </body> close tag, zet zoiets:[JS]
<script>

var hour = new Date().getHours(),
shandle = document.getElementById('stylesheet');

if(hour >= 0 && hour < 6)
{
shandle.href = 'themes/night.css';
}else
if(hour >= 7 && hour < 12)
{
shandle.href = 'themes/morning.css';
}else
if(hour >= 18 && hour < 23)
{
shandle.href = 'themes/evening.css';
}else{
shandle.href = 'themes/noon.css';
}

</script>[/JS]
of zet het netjes in een los .js bestand :)​

:thumb:
 
Helaas, zelfde resultaat. Opzich werkt het, maar ik ben genoodzaakt een nieuwe tab te openen om de gewijzigde achtergrond ook daadwerkelijk te zien.

En copy paste is het niet, das mijn gewoonlijke scripting stijl in LUA haha :P
 
probeer de pagina eens te verversen met ctrl+F5. Zonder de ctrl doet 'ie een quick refresh en dat update niet altijd alles op je pagina (JS enzo heeft wel eens de neiging niet opnieuw te worden uitgevoerd) :thumb:



[edit]
ah, zo. Nou, in JS mag je alleen returnen vanuit een functie. Er is geen mogelijkheid om de executie te 'stoppen' buiten functies - je kan de flow aanpassen met control structures (if/else, enz.)
 
Laatst bewerkt:
Ook CTRL+F5 heeft niks opgeleverd helaas, had ik tevens ook al geprobeerd :P En inderdaad, het lijkt erop dat JS geen zin geeft om opniew uitgevoerd te worden. Is hier iets aan te doen? Misschien een ander type script of whatever? M'n PHP code werkte volledig, helaas is PHP serverside en niet clientside.

En met het returnen: Ah, dat is nieuw voor mij. Weet ik dat ook weer haha :P
 
Well, met PHP kan je ook mooi de style echo'en - dan werkt het, zelfs als mensen Javascript uit hebben staan. Nadeel is dat het de tijd van de server gebruikt ipv. die van de client (hoewel dat op te lossen is met wat xhr magie)

PHP: 
<?php

   function echoStyleSheet()
   {
      $hour = date('G');   // het uur

      if($hour >= 0 && $hour < 6)
      {
         echo "<link rel='stylesheet' href='styles/night.css' />";
      }else if(...)
      {
      /*
         etc...
      */
      }
   }

?>
En dan op de plek waar je je stylesheet wilt hebben, in de <head> ergens:
PHP: 
<?php

   echoStyleSheet();

?>


:thumb:
 
Dus dat script, gebruikt met PHP, toch de tijd van de client?
 
Nope.

PHP is een server-side taal. Ofwel:
1. je vraagt een PHP pagina op aan de server
2. server parsed de PHP code en stuurt deze terug naar de browser
3. je ontvangt de HTML data van de server​
Zoals je ziet wordt PHP eerst geparsed. Alle data die je gebruikt in PHP is server-side, je kan niets* opvragen van de client




*behave dingen als de user-agent string, maar dat is niet het punt omdat deze niet de client tijd heeft
 
Maar zoals ik al zei, serverside met PHP enkel lukt het me wel. Serverside javascript is dan een beetje overbodig imo, en ik wil het clientside..
 
Well,

je kan 't in een functie gooien en een interval zetten om de minuut ofzo. Dan checkt 'ie elke minuut of het al een andere style moet zijn, zo ja, dan verandert 'ie m.

HTML: 
<link id='stylesheet' href='themes/evening.css' rel='stylesheet' />

[JS]

function checkStyle()
{
var hour = new Date().getHours(),
shandle = document.getElementById('stylesheet');

if(hour >= 0 && hour < 6)
{
shandle.href = 'themes/night.css';
}else
if(hour >= 7 && hour < 12)
{
shandle.href = 'themes/morning.css';
}else
if(hour >= 18 && hour < 23)
{
shandle.href = 'themes/evening.css';
}else{
shandle.href = 'themes/noon.css';
}
}

setInterval(checkStyle, 60000); // 60000 = 60 * 1000 ms = 60 seconden = 1 minuut
[/JS]
 
En hou zou dat wel werken terwijl refreshen niet werkt dan? Want ik snap het princiepe hierachter niet zo goed..

EDIT: De achtergrond is veranderd op een punt dat ik niet oplette. Nu verander ik mijn systeemtijd, wacht al bijna 3 minuten, gebeurt niks. Van pagina veranderen daarintegen wel. Heel apart.
Zonet weer mijn systeemtijd normaal gezet, veranderd het wel. Nou, ben tevreden met het resultaat haha, vind het wel goed zo :P

Bedankt!

EDIT2: oh, probleem niet verholpen. Nadat mijn systeemtijd weer goed was, veranderde de achtergrond, maar zodra ik een andere pagina bezocht pakte hij weer de verkeerde. Mocht je het met eigen ogen willen zien, here you go:
http://sugarsweetcandy.comyr.com/www/
 
Laatst bewerkt:
Nou, ik snap niet waarom een refresh niet zou werken. Ik denk dat het iets van een cache issue is ofzo. Heb je toevallig een live pagina?

Daarnaast, als het elke minuut checkt dan zal de style ook daadwerkelijk veranderen als je nog op de pagina zit, zonder iets te doen. Dus zonder refresh.



:thumb:
 
Heh, toen je had ge'edit had ik al gepost :)


setTimeout callt de functie niet gelijk, maar pas na de tijd opgegeven. Dus ook bij een refresh wacht 'ie eerst 1 minuut en dan pas check ie de huigige stijl. Je kan dit zo oplossen: na de setTimeout(...); de functie een keer aanroepen:

[JS]checkStyle();[/JS]


:thumb:
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan