Stijlswitch JS/php probleem

  • Onderwerp starter Onderwerp starter DucJ
  • Startdatum Startdatum
Status
Niet open voor verdere reacties.

DucJ

Nieuwe gebruiker
Lid geworden
23 jun 2013
Berichten
2
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):
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&amp;spn=0.028402,0.084543&amp;t=h&amp;z=14&amp;msa=0&amp;msid=206323249808468062152.0004deb6f9e9bf6433e28"></iframe><br /><small><a href="https://maps.google.nl/maps/ms?ll=52.454126,4.783688&amp;spn=0.028402,0.084543&amp;t=h&amp;z=14&amp;msa=0&amp;msid=206323249808468062152.0004deb6f9e9bf6433e28&amp;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:
Like other headers, cookies must be sent before any output from your script (this is a protocol restriction). This requires that you place calls to this function prior to any output, including <html> and <head> tags as well as any whitespace.
http://nl1.php.net/setcookie

Oftewel, er mag geen HTML als output komen voor de functie setcookie();

Ik zou het zo ombouwen:
PHP:
<?php
// List of styles
$styles = array('zaan', 'alt', 'mob');

// Check cookie for style
if(!isset($_COOKIE['style']) || !in_array($_COOKIE['style'], $styles))
{
    // Als er geen cookie is ingesteld of de ingestelde cookie komt niet voor in de lijst
    // dan maken we hem (opnieuw) aan
    setcookie('style', $styles[0]);
}
?>
<!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>
        <link id="styles" href="css/<?= $_COOKIE['style'] ?>.css" rel="stylesheet" type="text/css"/>
    </head>
    </head>
    <body>
    ....
    
        <script type="text/javascript" src="js/dropdown.js"></script>
        <script type="text/javascript" src="js/switcher2.js"></script>
    </body>
</html>

Dat hij na het laden niet goed loopt zit vermoedelijk in dit stukje javascript onderaan je pagina:
[js]
set_up_switch(getCookie("style"));
[/js]
Pas mijn wijziging eens toe en zet het javascript dat ik hierboven heb staan eens in commentaar om te kunnen controleren of de juiste stylesheet wordt ingeladen via de cookie.

Verder krijg ik momenteel deze melding in mijn Chrome inspector:
Code:
Failed to load resource: the server responded with a status of 404 (Not Found) http://www.students.science.uu.nl/~3961915/zaan.css
Controleer dus ook of de verwijzingen naar bestanden kloppen.
 
Laatst bewerkt:
Werkt helaas niet. Als ik deze wijziging doorvoer, verdwijnt de stijlselector onderaan de pagina, en wordt er helemaal geen css-stijl meer toegepast, ipv een stijl voor een seconde.
Het rare is: eerst deed deze code het gewoon wel, maar daarna, toen ik de php en js-code verschillende pagina's toepaste, toen ging hij raar doen.
Het ligt ook niet aan de verwijzingen, want die heb ik goed gezet en toen werkte het nog steeds niet.

Edit:// Het probleem is blijkbaar alleen op de home-pagina. Pagina's als algemeen.php en activiteiten.php doen het wel gewoon. Inclusief stijlen. (die stijlen zijn overigens nog niet af)
 
Laatst bewerkt:
Hmm het punt met mijn code is dat hij bij de eerste check controleert of de cookie bestaat, zo niet gaat hij hem aanmaken alleen moet dus eerst de pagina ververst worden wil die cookie bekend zijn.

Dat kan afgevangen worden op deze manier:
PHP:
<?php
// List of styles
$styles = array('zaan', 'alt', 'mob');
 
// Check cookie for style
if(!isset($_COOKIE['style']) || !in_array($_COOKIE['style'], $styles)) {
    // Als er geen cookie is ingesteld of de ingestelde cookie komt niet voor in de lijst
    // dan maken we hem (opnieuw) aan
    setcookie('style', $styles[0]);
    $style = $styles[0];
    
} else {
    $style = $_COOKIE['style'];
}
?>
<!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>
        <link id="styles" href="css/<?= $style ?>.css" rel="stylesheet" type="text/css"/>
    </head>
    </head>
    <body>
    ....
    
        <script type="text/javascript" src="js/dropdown.js"></script>
        <script type="text/javascript" src="js/switcher2.js"></script>
    </body>
</html>

Het feit dat je niet over een melding spreekt (Undefined index ...) doet mij vermoeden dat er geen error_reporting aanstaat op de server.
Regel dat dus eerst zodat je PHP-meldingen te zien krijgt, dat debugt makkelijker ;)
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan