[JS] CSS kiezen op basis van *

[Verwijderd]

hoi, ik ben mijn site aan het vernieuwen en dit is het resultaat. Nu is de site goed te bekijken met resolutie van 1280x..... en groter, maar bij resolutie kleiner dan 1280x..... komt er een horizontale schuifbalk en alles staat niet op zijn plaats.( Ik heb de site al eens omgebouwd naar 1024x.... maar dan trekt het op niets in grotere resoluties, het is veel te klein.) Ik zou dit willen oplossen door een javascript dat de resolutie van de gebruiker achterhaalt endan de gepaste stylesheet geladen wordt. Echter is dit makkelijker gezegt dan gedaan want ik heb al een optie dat de gebruiker zelf zijn (layout)stylesheet kan kiezen. Dus is het mogelijk dat wanneer de gebruiker op mijn site komt de gepaste stylesheet te laden op basis van de verkregen resolutie. En wanneer de bezoeker zelf een layout kiest op de layout pagina dat het javascript dan het gepaste stylesheet laad ook op basis van de resolutie en deze dan opslaat als in een cookie ?
Ik kom er niet uit ben geen java expert

HTML: index.php

<link rel="stylesheet" type="text/css" href="ffstyle.css" title="normaal">
<link rel="alternate stylesheet" type="text/css" href="clouds.css" title="clouds">
<link rel="alternate stylesheet" type="text/css" href="redrock.css" title="redrock">
<link rel="alternate stylesheet" type="text/css" href="gras.css" title="gras">
 
<script type="text/javascript" src="styleswitcher.js"></script>

aparte javascript

JavaScript: 1

// JavaScript Document
 
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);

Pagina layout kiezen

HTML: layout.php

        <a href="#" onclick="setActiveStyleSheet('normaal'); return false;"
title="De normale lettergrootte">Normaal</a>
 
&nbsp;<a href="#" onclick="setActiveStyleSheet('clouds'); return false;"
title="De normale lettergrootte">clouds</a>
 
&nbsp;<a href="#" onclick="setActiveStyleSheet('redrock'); return false;"
title="De normale lettergrootte">Redrock</a>
 
&nbsp;<a href="#" onclick="setActiveStyleSheet('gras'); return false;"
title="De normale lettergrootte">Gras</a>

[Juup]

Mooie site! Een paar tips:
- Het taaltje heet Javascript, geen Java
- Als je #venster een breedte geeft van 80% ofzo dan kun je daar alles op schalen en dan hoef je niet zo moeilijk te doen met verschillende resoluties. Als je nu ook je background image centreert staat het geblurde stuk altijd op de goeie plek.

[Verwijderd]

oké ik zal dat eens proberen, alvast bedankt

edit: het lijkt blijkbaar niet te werken
ik heb venster op width:80%
en de background div op margin-left:auto; en margin-right:auto; gezet

edit: ow sorry ik had background-position:center moeten nemen... excuses

die achtergrond gaat goed nu alleen het scherm nog fixen

[ Voor 93% gewijzigd door Verwijderd op 24-06-2008 22:08 ]

[Verwijderd]

@jaaap, hartelijk bedankt !!!! de site wordt nu mooi weergegeven. Dat ik daar niet opgekomen ben, ik zou het veel te ingewikkeld maken waarschijnlijk nog te weinig kennis op script gebied
Toppie !!!

bedankt voor het compliment trouwens

[ Voor 9% gewijzigd door Verwijderd op 24-06-2008 22:13 ]