[CSS/HTML] Stylesheet switcher, achtergrond wisselt niet? - Softwareontwikkeling

woensdag 29 december 2004 19:45

Acties:

Cheeseburger Addict

Topicstarter

Het probleem:

Ik ben bezig met een website (http://home.wanadoo.nl/dinkela/show/index.htm), en heb hiervoor 4 verschillende stylesheets gemaakt, te kiezen door een switcher (javascript).
In Firefox werkt alles prima, als ik een andere style wil klik ik gewoon en veranderd alles mooi. Zodra ik in IE dit wil proberen lukt het wel, maar wisselt de achtergrond niet mee.

Het voorbeeld:

Afbeeldingslocatie: http://img90.exs.cx/img90/5632/styleswitcher6jt.th.jpg

De html code:

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
    <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
    <meta name="author" content="Vincent Dinkela" />
    <meta name="keywords" content="design, angeloonie, art, vincent, dinkela, graphic design, photoshop, visual, display" />
    <meta name="description" content="An online album displaying the artwork I have done" />
    <meta name="robots" content="all" />
    <title>IncrediBIEL</title>

    
<link rel="stylesheet" 
type="text/css" href="css1.css" 
title="standard" />

<link rel="alternate stylesheet" 
type="text/css" href="css2.css"
title="alternate1" />

<link rel="alternate stylesheet" 
type="text/css" href="css3.css"
title="alternate2" />

<link rel="alternate stylesheet" 
type="text/css" href="css4.css"
title="alternate3" />

<script type="text/javascript" 
src="styleswitcher.js"></script>

</head>


<body id="portfolio">
<div id="container">
<div id="wrapper"><div id="extraDiv1"></div>
    <div id="intro">
        <div id="pageHeader">
            <h1>Angeloonie: Portfolio</h1>
            <h2>The artist inside</h2>
        </div>

        <div id="quickSummary">
            <p class="p1">Welcome to IncrediBIEL, your ultimate Jessica Biel resource. This site features info about Jessica, news and media such as pictures and desktop enhancements and videoclips.</p>
      </div>
    </div>
  <div id="update">
      <div id="dec242004">
            <h3><span>Update: 24-12-2004</span></h3>
            <p class="p1">blablablablablablablablablablablablablablablablablablablablablablablablablabl</p>
      </div>
  </div>
  <div id="linkList">
        <div id="linkList2">
            <div id="lselect">
                <h3 class="select">Check the latest.</h3>
                <ul>
                   <li>Latest Additions:</li>
                   <li></li> 
                   <li><a onclick="window.open(this.href,'_blank');return false;" href="images/digital%20art/art8.jpg">[img]"images/digital%20art/shot8.jpg"[/img]</a></li> 
                   <li><a onclick="window.open(this.href,'_blank');return false;" href="images/digital%20art/art7.jpg">[img]"images/digital%20art/shot7.jpg"[/img]</a></li> 
                   <li><a onclick="window.open(this.href,'_blank');return false;" href="images/digital%20art/art6.jpg">[img]"images/digital%20art/shot6.jpg"[/img]</a></li> 
                   <li><a onclick="window.open(this.href,'_blank');return false;" href="images/digital%20art/art5.jpg">[img]"images/digital%20art/shot5.jpg"[/img]</a></li> 
                </ul>
            </div>
            <div id="lmenu">
                <ul>
                    <li><a href="index.htm">Home</a></li>
                    <li><a href="jessica/jessica.htm">Jessica</a></li>
                    <li><a href="media/media.htm">Media</a></li>
                    <li><a href="news/news.htm">News</a></li>
                    <li><a href="site/site.htm">Site/www</a></li>
                    <li><a href="site/styles.htm">Style:</a>
                    <a href="#" onclick="setActiveStyleSheet('standard'); return false;">[img]"img/style1/icostyle1.gif"[/img]</a>
                    <a href="#" onclick="setActiveStyleSheet('alternate1'); return false;">[img]"img/style2/icostyle2.gif"[/img]</a>
                    <a href="#" onclick="setActiveStyleSheet('alternate2'); return false;">[img]"img/style3/icostyle3.gif"[/img]</a>
                    <a href="#" onclick="setActiveStyleSheet('alternate3'); return false;">[img]"img/style4/icostyle4.gif"[/img]</a></li>
                </ul>
            </div>
        </div>
  </div>
  </div>
</div>

</body>
</html>

De javascript code:

code:

function setActiveStyleSheet(title) {
  var i, a, main;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
      a.disabled = true;
      if(a.getAttribute("title") == title) a.disabled = false;
    }
  }
}

function getActiveStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title") && !a.disabled) return a.getAttribute("title");
  }
  return null;
}

function getPreferredStyleSheet() {
  var i, a;
  for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
    if(a.getAttribute("rel").indexOf("style") != -1
       && a.getAttribute("rel").indexOf("alt") == -1
       && a.getAttribute("title")
       ) return a.getAttribute("title");
  }
  return null;
}

function createCookie(name,value,days) {
  if (days) {
    var date = new Date();
    date.setTime(date.getTime()+(days*24*60*60*1000));
    var expires = "; expires="+date.toGMTString();
  }
  else expires = "";
  document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
  var nameEQ = name + "=";
  var ca = document.cookie.split(';');
  for(var i=0;i < ca.length;i++) {
    var c = ca[i];
    while (c.charAt(0)==' ') c = c.substring(1,c.length);
    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  }
  return null;
}

window.onload = function(e) {
  var cookie = readCookie("style");
  var title = cookie ? cookie : getPreferredStyleSheet();
  setActiveStyleSheet(title);
}

window.onunload = function(e) {
  var title = getActiveStyleSheet();
  createCookie("style", title, 365);
}

var cookie = readCookie("style");
var title = cookie ? cookie : getPreferredStyleSheet();
setActiveStyleSheet(title);

De stylesheets:

dit is de standaard css:

code:

html {
    margin: 0px;
    padding: 0px;
}

body {
    background: #F09678;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    margin: 0px; 
    padding: 0px;
    text-align: center;
}

p { 
    color: #575757;
    font-size: 10px;
    margin-top: 0px; 
    text-align: justify;
}

h3 {
    background: White url(img/style1/puce02.gif) no-repeat left;
    margin-top: 70px; 
    margin-bottom: 8px;
    font-weight: bold;
    margin-left: 5px;
}

h3 span {
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    /*color: #514A42;*/
    color: Black;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 5px;
    margin-left: 32px;
}

a:link, a:visited {
    color: #000; 
    text-decoration: none;
    text-transform: uppercase;
}
    
a:hover, a:active { 
    text-decoration: underline; 
    color: #000;
}

/* specific divs */
#wrapper {
     background: url(img/style1/bg_container.gif) repeat-y;
     width: 754px;
     text-align: left;
     margin:0 auto;
     }

#container { 
    margin: 0 auto;
    }
    
.resources {
    display: none;
}

#pageHeader {   display:none    }


#quickSummary {
    background: White;
    margin: 20px 10px 5px 10px;
    padding: 10px 10px 10px 10px;
    width: 550px;
    font-size: 10px;
}

#quickSummary p {
    color: Black;
}

.p5 {
    margin: 50px 0px 30px 40px;
    color: Black;
    font-size: 11px;
    text-transform: uppercase;
}

#preamble {
    padding-left: 10px;
}

#update {
    margin: 20px 10px 5px 10px;
    padding: 10px 10px 10px 10px;
    width: 550px;
}

#content {
    margin: 20px 10px 5px 10px;
    padding: 10px 10px 10px 10px;
    width: 550px;
}

#linkList {
    top: 0px; 
    width: 700px;
}

#linkList2 {
    position: absolute; 
    top: 0px; 
    width: 700px;
}

#lselect {
    position: absolute;
    padding: 0;
    width: 150px;
    margin: 261px 10px 5px 575px;
    font-size: 10px;
}

#lselect li a:link, #lresources li a:visited {
    color: #000;
    font-size: 10px;
    /*text-transform: uppercase;*/
    text-decoration: underline;
}

#lselect li a:hover, #lresources li a:active {
    color: #000;
    text-decoration: none;
    background-color: White;
}

#lselect a:link.c, #lselect a:visited.c {
    color: #000;
    text-transform: uppercase;
    text-decoration: none;
}

#lselect a:active.c, #lselect a:hover.c {
    text-transform: uppercase;
    text-decoration: underline;
}

#lselect ul {
    margin: 0px;
    padding: 0px;
}

#lselect li {
    background-image: url(img/style1/bglist01.gif) ;
    list-style-type: none;
    margin-left: 20px;
    padding: 4px 4px 0px 5px;
    height: 35px;
}

.select {
    display: none;
}


#lmenu {
    position: absolute;
    top: 240px;
    width: 690px;
    margin-left: 170px;
}

#lmenu ul {
    display: inline;
}

#lmenu img {
    vertical-align:text-bottom;
    }

#lmenu li {
    background: transparent url(img/style1/ico01.gif) no-repeat left;
    display: inline;
    margin: 0px 5px 0px 5px; 
}

#lmenu li a:link, #lmenu li a:visited {
    margin-left: 12px;
    color: #000;
    font-size: 9px;
    text-transform: uppercase;
    text-decoration: none;
}

#lmenu li a:hover, #lmenu li a:active {
    color: #06F;
    text-decoration:underline;
    background-color: White;
}

#extraDiv1 {
    background: url(img/style1/top.jpg) no-repeat; 
    position: relative;
    width: 748px; 
    height: 241px;
    margin: 0 auto;
    text-align: left;
    }
.accesskey {
    text-decoration: underline;
}

img {
    border-width: 1px;
    border-color:#000000;
    border-style:solid;
    }

Dit is een andere (hetzelfde als de eerdere, maar alleen de background is veranderd (dus post ik alleen dat stukje)

code:

body {
    background: #000000;
    font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
    margin: 0px; 
    padding: 0px;
    text-align: center;
}

Heeft iemand een idee hoe dit komt?

[ Voor 18% gewijzigd door Angeloonie op 29-12-2004 19:46 ]

Uplay: Angeloonie - Battletag: Angeloonie#2758 - Steam: Angeloonie

woensdag 29 december 2004 20:15

Acties:

Blaise

Bij mijn site bleven er in IE soms settings staan bij een styleswitch zonder refresh van de pagina. Waarschijnlijk is dat bij jou ook het geval.

woensdag 29 december 2004 20:23

Acties:

Angeloonie

Cheeseburger Addict

Topicstarter

Blaise schreef op woensdag 29 december 2004 @ 20:15:
Bij mijn site bleven er in IE soms settings staan bij een styleswitch zonder refresh van de pagina. Waarschijnlijk is dat bij jou ook het geval.

Dat is idd ook hier het geval. Is er een mogelijkheid om hem automatisch te laten refreshen?

Uplay: Angeloonie - Battletag: Angeloonie#2758 - Steam: Angeloonie

woensdag 29 december 2004 20:34

Acties:

iain

Full Flavor

Angeloonie schreef op woensdag 29 december 2004 @ 20:23:
[...]
Dat is idd ook hier het geval. Is er een mogelijkheid om hem automatisch te laten refreshen?

document.location = document.location; (of document.location.href = document.location.href; ben ik even kwijt)...

I used to be an atheist, until I realised I was god.

woensdag 29 december 2004 20:36

Acties:

Angeloonie

Cheeseburger Addict

Topicstarter

Mellon schreef op woensdag 29 december 2004 @ 20:34:
[...]

document.location = document.location; (of document.location.href = document.location.href; ben ik even kwijt)...

Deze snap ik niet

Waar zou dit geplaatst moeten worden?

Uplay: Angeloonie - Battletag: Angeloonie#2758 - Steam: Angeloonie

woensdag 29 december 2004 20:36

Acties:

Blaise

In de function setActiveStyleSheet(title) een location.refresh() of iets dergelijks.

Je kan ook proberen je CSS anders op te stellen, om een of andere reden werkt dat soms.

woensdag 29 december 2004 20:57

Acties:

Angeloonie

Cheeseburger Addict

Topicstarter

Blaise schreef op woensdag 29 december 2004 @ 20:36:
In de function setActiveStyleSheet(title) een location.refresh() of iets dergelijks.

Je kan ook proberen je CSS anders op te stellen, om een of andere reden werkt dat soms.

als ik in de setActiveStyleSheet deze regel zet:

code:

1	window.location.reload( true );

Dan blijft ie refreshen,

plaats ik deze bij getActiveStyleSheet of getPreferredStyleSheet dan gebeurt er helemaal niks.

Uplay: Angeloonie - Battletag: Angeloonie#2758 - Steam: Angeloonie

woensdag 29 december 2004 21:04

Acties:

iain

Full Flavor

bij je linkje voor de kleurtjes, zou het moeten werken:

HTML:

1	<a href="#" onclick="setActiveStyleSheet('standard'); location.refresh(); return false;">

I used to be an atheist, until I realised I was god.

woensdag 29 december 2004 21:26

Acties:

Angeloonie

Cheeseburger Addict

Topicstarter

Mellon schreef op woensdag 29 december 2004 @ 21:04:
bij je linkje voor de kleurtjes, zou het moeten werken:
HTML:
1
<a href="#" onclick="setActiveStyleSheet('standard'); location.refresh(); return false;">

dit lijkt te werken, maar hij refreshed alleen de content, niet de hele pagina

edit: heb de pagina incl. dit script ge-upload, dan kan je het zelf zien

[ Voor 16% gewijzigd door Angeloonie op 29-12-2004 21:28 ]

Uplay: Angeloonie - Battletag: Angeloonie#2758 - Steam: Angeloonie

woensdag 29 december 2004 21:29

Acties:

Alex)

probeer eens top.location.refresh() ipv location.refresh() ?

We are shaping the future

woensdag 29 december 2004 21:36

Acties:

Angeloonie

Cheeseburger Addict

Topicstarter

Alex schreef op woensdag 29 december 2004 @ 21:29:
probeer eens top.location.refresh() ipv location.refresh() ?

Dat werkte niet, maar wat nu wel lukte is ipv refresh "reload" te gebruiken

heb nu dit staan:

code:

1	<a href="#" onclick="setActiveStyleSheet('standard'); location.reload(); return false;">[img]"img/style1/icostyle1.gif"[/img]</a>

en het schijnt te werken in IE, bij mij in ieder geval wel.

Bedankt voor je hulp, zonder je tip was het mij nooit gelukt! $_/-\o_$

Uplay: Angeloonie - Battletag: Angeloonie#2758 - Steam: Angeloonie