liquid css, css reload

Door frank op 14-09-2007 04:14

1.571 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

Tommy Masschelein

14-09-2007 09:26

Antwoord 1 :
Dit zal je wss door javascript moeten laten gebeuren iets als :


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

en vraag 2 snap ik nog niet :-)
Het is nog vroeg

winkie

14-09-2007 09:31

vraag 1: check www.csszengarden.com
daar doen ze het met een puik php-dingetje, kan je gewoon van de site plukken.

vraag 2: het kan eigenlijk niet zo goed met alleen css, met tables kan het wel. de reden daarvoor is dat zulke site ontwerpen oud en achterhaald zijn (niemand centreert zijn site meer in het midden omdat de meeste sites gewoon scrollable zijn). maar Jan Koehoorn weet daar vast wel een work-around voor.

Tommy Masschelein

14-09-2007 09:33

winkie op die csszendgarden refresh de pagina toch ?
Dat wil ie helemaal toch niet ...

- wes -

14-09-2007 09:35

sommige mensen weten gewoon niet wat goed voor ze is :)

winkie

14-09-2007 09:37

@tommy

Oh ja... Ach, misschien was het ook wel bedoeld als 'stap in de goede richting'.

Tommy Masschelein

14-09-2007 09:40

Nou ja dan moet je mijn scriptje maar eens testen :-)
Dat werkt toch gewoon.... moet je enkel je background color niet aanpassen :P
anders zie je voor 1s een witte achtergrond

Jan Koehoorn

14-09-2007 09:45

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);

	}

}

Robert Deiman

14-09-2007 09:56

vraab 2:

Ervan uitgaande dat je een div hebt die 100% hoog en breed is, waarin je een div id="centered" maakt


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>RobertDeiman.net - Photo Gallery - <?php echo $title ?></title>
<script type="text/javascript" src="popup.js"></script>
<style type="text/css">
body,html{
	height:100%;
	margin:0px;
	}
#centered{
	
	position:relative;
	height:500px;
	width:600px;
	top:50%;
	margin:-250px auto auto auto;
	background-color:#982418;
	}
</style>
</head>
<body>
<div id="centered">Blablablablablabal blablabla blablabla blablabala blablaba blablabal blablabla blablabla</div>
</body>
</html>

Bovenstaande is in ieder geval al getest in FF2 en IE7, staat keurig in het midden.

frank

14-09-2007 12:13

[quote='Tommy Masschelein schreef op 14.09.2007 09:26']Antwoord 1 :
Dit zal je wss door javascript moeten laten gebeuren iets als :


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

Thanks! Kan ik de geladen stylesheet ook laten onthouden? Door bv een id mee te geven? Of zijn daar ook andere opties voor?

Tommy Masschelein

14-09-2007 14:46

uhm hoe bedoel je met laten onthouden ? :-)
Op php gebied of op javascript gebied

Reageren

Inloggen om te reageren