liquid css, css reload
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
Dit zal je wss door javascript moeten laten gebeuren iets als :
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
<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 />
...
<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
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.
Dat wil ie helemaal toch niet ...
Oh ja... Ach, misschien was het ook wel bedoeld als 'stap in de goede richting'.
Dat werkt toch gewoon.... moet je enkel je background color niet aanpassen :P
anders zie je voor 1s een witte achtergrond
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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);
}
}
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);
}
}
Ervan uitgaande dat je een div hebt die 100% hoog en breed is, waarin je een div id="centered" maakt
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!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>
<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.
Gewijzigd op 01/01/1970 01:00:00 door Robert Deiman
Tommy Masschelein schreef op 14.09.2007 09:26:
Antwoord 1 :
Dit zal je wss door javascript moeten laten gebeuren iets als :
Thanks! Kan ik de geladen stylesheet ook laten onthouden? Door bv een id mee te geven? Of zijn daar ook andere opties voor?
Dit zal je wss door javascript moeten laten gebeuren iets als :
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
<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 />
...
<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?
Op php gebied of op javascript gebied
Tommy Masschelein schreef op 14.09.2007 14:46:
uhm hoe bedoel je met laten onthouden ? :-)
Op php gebied of op javascript gebied
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)
als je weer naar de vorige wilt switchen kan je bv doen
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<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 />
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
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
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:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<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>
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...
Gewijzigd op 01/01/1970 01:00:00 door frank
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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 />
...
<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...
Nja vergeten de <link rel ........ bij te voegen :-)
Gebruik jan zijn functie dan maar...
Gewijzigd op 01/01/1970 01:00:00 door Tommy Masschelein
Tommy Masschelein schreef op 14.09.2007 15:52:
hum ja dan kan je mss eens proberen met :
niet getest maar moet normaal wel werken
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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 />
...
<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
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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);
}
}
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>
Gewijzigd op 01/01/1970 01:00:00 door Tommy Masschelein
Maar ook hier floept ie weer gewoon open als ik naar een ander menu item ga!
Mn head is nu:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<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>
<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:
Code (php)
1
<a onClick="addStyleSheet('styles/extramenu/in.css')" onMouseover="this.style.cursor='pointer'" >uitklappen</a>