liquid css, css reload

Door frank op 14-09-2007 04:14

1.570 views

Ik heb eigenlijk 2 vraagjes:
Hoe kan ik ervoor zorgen dat ik door het aanklikken van een link een nieuw css file laad zonder dat de pagina opnieuw hoeft te refreshen. Volgens mij is dit mogelijk!

vraag 2:
Hoe kan ik een div in de hoogte van de pagina centreren? Doel is dat wanneer de pagina op een groter scherm bekeken wordt er aan de onderkant en aan de bovenkant van de contentdiv 2 nieuwe div's zichtbaar worden met visuele aanvulling op de contentdiv... (is het nog duidelijk?)

alvast bedankt

frank

14-09-2007 14:49

Tommy Masschelein schreef op 14.09.2007 14:46
uhm hoe bedoel je met laten onthouden ? :-)
Op php gebied of op javascript gebied

het liefst op een dusdanige wijze dat ik geen variabelen terug vind in de adresbalk. Dat zal dus neerkomen op javascript. (als ik goed zit)

Tommy Masschelein

14-09-2007 15:43

Nou ja hoeveel wil je er laten onthouden...
als je weer naar de vorige wilt switchen kan je bv doen


<script type="text/javascript">
var new_style = 'style2.css';
function Change_Style() {
    document.getElementById('stylesheet').href = new_style;
    if (new_style == 'style.css') {
         new_style = 'style2.css');
    }else{
         new_style = 'style.css');
    }
} 
</script>

<a href="#" onclick="Change_Style()">Klik mij</a><br />

Zo kan je de hele tussen 2 stylen switchen...
eventueel kan je er een switch constructie van maken en 3,4.... styles laten doorlopen

frank

14-09-2007 15:49

Tommy Masschelein schreef op 14.09.2007 15:43
Nou ja hoeveel wil je er laten onthouden...
als je weer naar de vorige wilt switchen kan je bv doen
...

Zo kan je de hele tussen 2 stylen switchen...
eventueel kan je er een switch constructie van maken en 3,4.... styles laten doorlopen

dat snap ik

ik heb inmiddels de volgende code werkzaam:


<script type="text/javascript">
function change_style(n) {
  if(n == 2) {
     document.getElementById('style').href = "styles/extramenu/in.css";
	 return;
  }
  if(n == 1) {
     document.getElementById('style').href = "styles/extramenu/out.css";
	 return;
  }
}
</script>

Maar wanneer ik naar een ander menu item ga op de website wil ik dus ook de geladen stylesheet behouden.

de website is: http://www.frank-raterink.nl/2

onderaan heb ik een vakje wat ingeklapt kan worden of niet... hij springt steeds weer open als ik van item verander...

Tommy Masschelein

14-09-2007 15:52

hum ja dan kan je mss eens proberen met :


<html>
<head>
<title>Bleh</title>
<head>
<script type="text/javascript">
function Add_Style(stylesheet_file) {
    document.getElementById('stylesheet').innerHTML += stylesheet_file;
}
</script>
<div id="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css"  />
</div>
</head>
<body>
<a href="#" onclick="Add_Style('style2.css')">Klik mij</a><br />
...

[edit]
Nja vergeten de <link rel ........ bij te voegen :-)
Gebruik jan zijn functie dan maar...
[/edit]

frank

14-09-2007 16:06

Tommy Masschelein schreef op 14.09.2007 15:52

hum ja dan kan je mss eens proberen met :


<html>
<head>
<title>Bleh</title>
<head>
<script type="text/javascript">
function Add_Style(stylesheet_file) {
    document.getElementById('stylesheet').innerHTML += stylesheet_file;
}
</script>
<div id="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css"  />
</div>
</head>
<body>
<a href="#" onclick="Add_Style('style2.css')">Klik mij</a><br />
...

niet getest maar moet normaal wel werken

zou dat ook moeten werken met mijn stukje javascript? want ik krijg het niet aan de praat

Tommy Masschelein

14-09-2007 16:13

function addStyleSheet(relPath) {

	if(document.getElementsByTagName("head"))

	{

		var head = document.getElementsByTagName("head")[0]; 

		var newStyle = document.createElement("link");

   		newStyle.setAttribute("type", "text/css");

		newStyle.setAttribute("rel", "stylesheet"); 

		newStyle.setAttribute("href", relPath); 

		head.appendChild(newStyle);

	}

}

Jan zat goed. Gebruik jan zijn functie maar :)
gewoon gebruiken als
<a onClick="addStyleSheet('stylemap/style.css')">New style</a>

frank

14-09-2007 16:25

het in- en uitklappen van mn kadertje (onderin op www.frank-raterink.nl/2) werkt hartstikke goed!

Maar ook hier floept ie weer gewoon open als ik naar een ander menu item ga!

Mn head is nu:


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<link href="styles/1.algemene-opmaak.css" rel="stylesheet" type="text/css" />
<link href="styles/kleur/blauw.css" rel="stylesheet" type="text/css" />
<link href="styles/2.tekstopmaak.css" rel="stylesheet" type="text/css" />
<link href="styles/extramenu/in.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
function addStyleSheet(relPath) {

    if(document.getElementsByTagName("head"))
    {
        var head = document.getElementsByTagName("head")[0]; 
        var newStyle = document.createElement("link");
           newStyle.setAttribute("type", "text/css");
        newStyle.setAttribute("rel", "stylesheet"); 
        newStyle.setAttribute("href", relPath); 
        head.appendChild(newStyle);
    }
} 
</script>

</head>

de link ziet er zo uit:


<a onClick="addStyleSheet('styles/extramenu/in.css')" onMouseover="this.style.cursor='pointer'" >uitklappen</a>

Reageren

Inloggen om te reageren