Goedenavond,
Ik heb een apart probleem met mijn website.
Ik heb een Javascript gemaakt, met veel hulp van een vriend, voor een website om een css-stijl te kunnen selecteren.
Er zijn 3 verschillende opties: Zaan, alternatief (jongerenversie) en mobiel.
Met php wordt de stijl bewaard, zodat je niet op elke pagina opnieuw je geprefereerde stijl opnieuw hoeft te selecteren.
Als voorbeeld hier de homepagina (html + php):
En hier is het javascript:
[JS]function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
function getCookie(c_name)
{
var c_value = document.cookie;
var c_start = c_value.indexOf(" " + c_name + "=");
if (c_start == -1)
{
c_start = c_value.indexOf(c_name + "=");
}
if (c_start == -1)
{
c_value = null;
}
else
{
c_start = c_value.indexOf("=", c_start) + 1;
var c_end = c_value.indexOf(";", c_start);
if (c_end == -1)
{
c_end = c_value.length;
}
c_value = unescape(c_value.substring(c_start,c_end));
}
return c_value;
}
function switch_style(style) {
setCookie("style", style, 90);
var body = document.getElementsByTagName("body")[0];
body.className = style;
set_up_switch(style);
}
function create_control(style) {
var styles = new Array("Zaan", "Alternatief", "Mobiel");
var controls = new Array(Zaan, Alternatief, Mobiel);
var the_spans = document.createElement("span");
for (i in styles) {
if (styles != style) {
var style_message = document.createTextNode(styles + " ");
var style_span = document.createElement("span");
style_span.appendChild(style_message);
style_span.onclick = controls;
the_spans.appendChild(style_span);
}
}
return the_spans;
}
function set_up_switch(style) {
var switch_div = document.getElementById("switch");
while (switch_div.firstChild)
switch_div.removeChild(switch_div.firstChild);
var the_control = create_control(style);
switch_div.appendChild(the_control);
var linkElement = document.getElementById("styles");
linkElement.href = style + ".css";
}
function Zaan() {
switch_style("zaan");
setCookie("style", "zaan", 90);
}
function Alternatief() {
switch_style("alt");
setCookie("style", "alt", 90);
}
function Mobiel() {
switch_style("mob");
setCookie("style", "mob", 90);
}
function current_style() {
return document.getElementById("switch").className;
}
var style_current = getCookie("style");
if(!((style_current == "mob") ||(style_current == "zaan") ||(style_current == "alt")))
{
style_current = "alt";
}
//if (document.getElementById) window.onload = set_up_switch("zaan");[/JS]
Nu het probleem.
Als ik de pagina laad (klik) doet de css-stijl het misschien voor een halve seconde, totdat hij ermee ophoudt en geen css-stijl wordt toegepast, waardoor alle elementen tegelijk worden weergegeven. Het ligt niet aan de CSS-stijl, en als het goed is ook niet aan de php-code.
Zouden jullie alsjeblieft misschien even een blik kunnen werpen op de code, mij uitleggen wat er mis is en een suggestie geven hoe ik het zou kunnen oplossen?
Alvast bedankt en met vriendelijke groet, Duc.
PS ik weet dat de website slecht is, maar dat is nu niet zo belangrijk.
Ik heb een apart probleem met mijn website.
Ik heb een Javascript gemaakt, met veel hulp van een vriend, voor een website om een css-stijl te kunnen selecteren.
Er zijn 3 verschillende opties: Zaan, alternatief (jongerenversie) en mobiel.
Met php wordt de stijl bewaard, zodat je niet op elke pagina opnieuw je geprefereerde stijl opnieuw hoeft te selecteren.
Als voorbeeld hier de homepagina (html + php):
PHP:
<!DOCTYPE html SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Gemeente Zaanstad</title>
<script type="text/javascript" src="js/dropdown.js"></script>
<?php
echo '<link id="styles" href="css/';
if(!isset($_COOKIE["style"]))
{
setcookie("style", "zaan");
echo 'zaan';
}
elseif ($_COOKIE["style"] == "zaan")
echo 'zaan';
elseif ($_COOKIE["style"] == "alt")
echo 'alt';
elseif ($_COOKIE["style"] == "mob")
echo 'mob';
else echo 'zaan';
echo '.css" rel="stylesheet" type="text/css"/>';
?>
<script src="js/switcher2.js" type="text/javascript"></script>
</head>
<body class="plain">
<img class="header" src="header.jpg" alt="1" border="0">
<img id="headeralt" src="headeralt.jpg" border ="1"/>
<div class="menubalk">
<ul id="sddm">
<script type="text/javascript" src="js/menu.js"></script>
</ul>
</div>
<div class="menubalk2">
<div id="menu">
<ul>
<li><a href="home.php" class="non_active"> <span>Home</span></a></li>
<li><a href="algemeen.php" class="non_active"> <span>Algemeen</span></a></li>
<li><a href="activiteiten.php" class="non_active"> <span>Activiteiten</span></a></li>
<li><a href="arrangementen.php" class="non_active"> <span>Arrangementen</span></a></li>
<li><a href="image_gallery.php" class="non_active"> <span>Fotogalerij</span></a></li>
</ul>
</div>
</div>
<br />
<div class="hometekst">
<h1>Welkom!</h1>
<p>Klik op een locatie voor meer informatie over die activititeit of klik <a href="algemeen.php">hier</a> voor meer informatie over deze site</p>
<p>Hieronder kunt u op de kaart kijken voor een vluchtig overzicht van de activiteiten in de gemeente.</p>
</div>
<div id="hometekstalt">
<h1>Welkom op de jongerenversie van deze website!</h1>
<p>Klik op een van de menuknoppen om naar de verschillende arrangementen en activiteiten te kijken. Of klik op <a href="algemeen.php">algemeen</a> voor meer informatie. Werp ook een blik op de kaart hieronder om te kijken wat je allemaal kunt doen in deze gemeente.</p>
</div>
<div id="hometekstmob">
<h1>Welkom op de mobiele versie van deze website!</h1>
<p>Klik op een van de menuknoppen om naar de verschillende arrangementen en activiteiten te kijken. U kunt ook op <a href="algemeen.php">algemeen</a> klikken voor meer informatie over deze website.</p>
</div>
<!-- <img class="grotekaart" src="Zaandam_kaart.jpg" border="0"> -->
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.nl/maps/ms?ll=52.454126,4.783688&spn=0.028402,0.084543&t=h&z=14&msa=0&msid=206323249808468062152.0004deb6f9e9bf6433e28"></iframe><br /><small><a href="https://maps.google.nl/maps/ms?ll=52.454126,4.783688&spn=0.028402,0.084543&t=h&z=14&msa=0&msid=206323249808468062152.0004deb6f9e9bf6433e28&source=embed" style="color:#0000FF;text-align:left">Toeristische kaart Zaanstad</a> weergeven op een grotere kaart</small>
<br />
<div id="switch">
</div>
<script>
set_up_switch(getCookie("style"));
</script>
</body>
</html>
En hier is het javascript:
[JS]function setCookie(c_name,value,exdays)
{
var exdate=new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value=escape(value) + ((exdays==null) ? "" : "; expires="+exdate.toUTCString());
document.cookie=c_name + "=" + c_value;
}
function getCookie(c_name)
{
var c_value = document.cookie;
var c_start = c_value.indexOf(" " + c_name + "=");
if (c_start == -1)
{
c_start = c_value.indexOf(c_name + "=");
}
if (c_start == -1)
{
c_value = null;
}
else
{
c_start = c_value.indexOf("=", c_start) + 1;
var c_end = c_value.indexOf(";", c_start);
if (c_end == -1)
{
c_end = c_value.length;
}
c_value = unescape(c_value.substring(c_start,c_end));
}
return c_value;
}
function switch_style(style) {
setCookie("style", style, 90);
var body = document.getElementsByTagName("body")[0];
body.className = style;
set_up_switch(style);
}
function create_control(style) {
var styles = new Array("Zaan", "Alternatief", "Mobiel");
var controls = new Array(Zaan, Alternatief, Mobiel);
var the_spans = document.createElement("span");
for (i in styles) {
if (styles != style) {
var style_message = document.createTextNode(styles + " ");
var style_span = document.createElement("span");
style_span.appendChild(style_message);
style_span.onclick = controls;
the_spans.appendChild(style_span);
}
}
return the_spans;
}
function set_up_switch(style) {
var switch_div = document.getElementById("switch");
while (switch_div.firstChild)
switch_div.removeChild(switch_div.firstChild);
var the_control = create_control(style);
switch_div.appendChild(the_control);
var linkElement = document.getElementById("styles");
linkElement.href = style + ".css";
}
function Zaan() {
switch_style("zaan");
setCookie("style", "zaan", 90);
}
function Alternatief() {
switch_style("alt");
setCookie("style", "alt", 90);
}
function Mobiel() {
switch_style("mob");
setCookie("style", "mob", 90);
}
function current_style() {
return document.getElementById("switch").className;
}
var style_current = getCookie("style");
if(!((style_current == "mob") ||(style_current == "zaan") ||(style_current == "alt")))
{
style_current = "alt";
}
//if (document.getElementById) window.onload = set_up_switch("zaan");[/JS]
Nu het probleem.
Als ik de pagina laad (klik) doet de css-stijl het misschien voor een halve seconde, totdat hij ermee ophoudt en geen css-stijl wordt toegepast, waardoor alle elementen tegelijk worden weergegeven. Het ligt niet aan de CSS-stijl, en als het goed is ook niet aan de php-code.
Zouden jullie alsjeblieft misschien even een blik kunnen werpen op de code, mij uitleggen wat er mis is en een suggestie geven hoe ik het zou kunnen oplossen?
Alvast bedankt en met vriendelijke groet, Duc.
PS ik weet dat de website slecht is, maar dat is nu niet zo belangrijk.
Laatst bewerkt: