CSS herladen in meerdere frames dmv link

[Verwijderd]

Hallo,

Ik zit met het volgende probleem:

Ik ben bezig met een website met 3 frames. Het is de bedoeling dat zodra er op een link wordt geclick, er een ander css bestand wordt aangeroepen zodat de opmaak van de hele site verandert.

Ik weet dat het (met javascript) mogelijk is op een 'platte' pagina zonder frames maar mijn vraag is dus of het ook mogelijk is bij gebruik van meerdere pagina's in een frameset.

[Willem]

Lijkt me wel, maar gewoon een andere .html file met in de head een andere CSS aanroep?
Snap niet zo goed wat hier nu je probleem is..

[faabman]

Verwijderd schreef op 21 October 2003 @ 10:57:
Ik weet dat het (met javascript) mogelijk is op een 'platte' pagina zonder frames maar mijn vraag is dus of het ook mogelijk is bij gebruik van meerdere pagina's in een frameset.

als je weet dat het met javascript mogelijk is op één platte pagina, dan kan je dat toch ook toepassen op de drie frames?? daarvoor moet je dan waarschijnlijk andere elementen aanroepen...

[OkkE]

Het lijkt mij ook wel mogelijk. Je kunt toch idd ipv de 'platte' pagina de 'URL' van je frame oproepen? Zoals je ook zou doen als je in 2 frames tegelijk de pagina wilt veranderen.

(...Lamaar.....)

[ Voor 50% gewijzigd door OkkE op 21-10-2003 11:07 ]

[Verwijderd]

Het is niet de bedoeling elke pagina 2 keer te maken met alleen een andere stylesheet verwijzing.

hier heb ik een linkje gevonden met een voorbeeld op een platte pagina:

http://www.alistapart.com/stories/alternate/

Ok andere elementen aanroepen. welke en hoe dan?

[TwoR]

Je kan toch met PHP bijvoorbeeld even een variabele meegeven en dan op die manier de CSS kiezen ???

[Verwijderd]

Ja precies, in mijn geval zou ik dan ASP sessie variabelen gebruiken maar de klant heeft geen webhosting met ASP ondersteuning vandaar...

[TwoR]

Ondersteunt de provider dan ook geen PHP ??

[Willem]

En het zou met ASP niet kunnen
Verdiep je eens in die materie, lijkt me niet geheel on-nuttig...

En als je een site hebt die dat voor mekaar krijgt, waarom zoek je niet in de source daarvan? Als je dat gewoon afkijkt ben je al een eind verder...

/edit
TwoR: Hij zegt toch: ASP. En hier gaat de discussie niet echt om.

[ Voor 13% gewijzigd door Willem op 21-10-2003 11:22 ]

[Verwijderd]

neen. lame he

[Willem]

d03d.. lijkt me niet echt dat je je enigzins hebt verdiept in mogelijkheden van het een en ander. Hier al eens goed gelezen? : [rml][ JS/CSS] een meervoudige stylesheet switcher mogelijk?[/rml]

[OkkE]

TwoR schreef op 21 October 2003 @ 11:17:
Je kan toch met PHP bijvoorbeeld even een variabele meegeven en dan op die manier de CSS kiezen ???

Als je PHP op je server kunt draaien ja. En als je genoeg kennis hier voor hebt idd. Maar waarom gelijk server side als het ook clientside kan?

Ontopic:

Ik denk dat je als eerste eens moet kijken in de source van die pagina; daar staat o.a.

<link rel="alternate stylesheet" type="text/css" media="screen" title="bigtype" href="/nucss3.css" />

En dan staat er ook een styleswitcher.js in; waar o.a. dit in staat:

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

Ik denk dat je hier al wel iets verder mee komt... Het is helemaal niet zo moeilijk.

[Verwijderd]

Ik heb de source al meerdere keren bekeken.
Mijn vraag was dacht ik toch vrij simpel: Hoe 'switch' ik de stylesheet in 2 of meer pagina's tegelijk (frames) in plaats van alleen maar 1 pagina.

doormiddel van de buttons:

code:

<FORM><INPUT onclick="setActiveStyleSheet('default'); return false;" type=button value="default"></FORM>
<FORM><INPUT onclick="setActiveStyleSheet('bigtype'); return false;" type=button value="alternative"></FORM>

wordt de volgende javascript functie aangeroepen:

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

Ik ben zelf meer thuis in ASP, niet echt in Javascript. Ik zou dus zelf niet weten hoe ik dit stukje script zo zou kunnen aanpassen zodat het werkt voor meerdere frame pagina's

sorry dat ik mischien net echt duidelijk ben maar ik zit op dit moment ook een beetje met mn handen in mn haar.

[Woudloper]

Als je overigens meer thuis bent op het gebied van ASP (VBScripting neem ik aan), dan kan je wellicht eens bij dit artikel op evolt kijken. Hier staat namelijk beschreven hoe je een Styleswitcher implementeert met behulp van ASP..

[Verwijderd]

Ok, ik ben eruit. Het is inderdaad heel erg simpel.

code:

<FORM><INPUT onclick="setActiveStyleSheet('default'); PARENT.RIGHTRAME.setActiveStyleSheet('default'); return false;" type=button value="default"></FORM>
<FORM><INPUT onclick="setActiveStyleSheet('bigtype'); PARENT.RIGHTRAME.setActiveStyleSheet('bigtype');  return false;" type=button value="alternative"></FORM>

En uiteraard moet in het andere frame ook de javascript en de stylesheets bijgesloten worden.

Twas dus gewoon dezelfde functie aanroepen maar dan met parent.framenaam ervoor

[ Voor 14% gewijzigd door Verwijderd op 22-10-2003 10:36 ]

[Woudloper]

rlm :: mooi dat je eruit bent. Nog een klein puntje... Mocht je het 1 en ander juist (volgens XHTML) willen implementeren dan moet de TAG's allemaal in smallcaps worden vermeld...

[jordz.]

Hoi, ik weet dat dit een heel oud topic is maar dit is het enige wat ik kan vinden met precies hetzelfde probleem.

Ik gebruik voor mijn site ook de stylesheet switcher. Ik weet bijna niks van javscript (kan wel een beetje java), maar het is met toch gelukt om het te implenteren. Alleen werkt het niet in meerdere frames. Alleen in de pagina waar er op geklikt is. Graag alleen javascript gebruiken voor de rest niks. Ik heb dit gebruikt: http://www.alistapart.com/articles/alternate/

Hier is de code ik wil dus zeg maar in de frames: "inhoud", "logo" (daarvan is de code hieronder) en het frame "menu". Ik hierboven gezien dat het ook met parent.framenaam kan maar dat werkt niet. Weet iemand hoe je meerdere frames kunt veranderen met 1 link? alvast bedankt!

HTML:

<html>
<head>
        <title>nog vervangen</title>
        <link rel="stylesheet" type="text/css" href="css/style1.css" title="standaard">
        <link rel="alternate stylesheet" type="text/css" href="css/style2.css" title="tweede">
        <script type="text/javascript" src="styleswitcher.js"></script>
        
</head>

<body class="body.logo">

        <a href="#" 
        onclick="setActiveStyleSheet('standaard'); 
        return false;">Style 1</a><br>

        <a href="#" 
        onclick="setActiveStyleSheet('tweede'); 
        return false;">Style 2</a>

</body>
</html>

[André]

Je zult voor alle frames de functie moeten aanroepen, en eventueel de functie iets aanpassen:

code:

function setActiveStyleSheet(title, freem) {
   var i, a, main;
   for(i=0; (a = top.frames[freem].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;
     }
   }
}

<a href="#" 
        onclick="setActiveStyleSheet('standaard', 'menu'); setActiveStyleSheet('standaard', 'inhoud');  
        return false;">Style 1</a><br>

Dit is 'uit de losse pols' dus ik heb het niet getest. Ook zou je de functie zo kunnen veranderen dat hij automatisch alle frames doorloopt.

[ Voor 22% gewijzigd door André op 18-10-2004 14:39 ]

[jordz.]

Bedankt! Ik heb dit gedaan maar het werkt nog steeds niet:

code:

function setActiveStyleSheet(title, frame) {
  var i, a, main;
  for(i=0; (a = top.frames[frame].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;
    }
  }
}

&

<html>
<head>
        <title>nog vervangen</title>
        <link rel="stylesheet" type="text/css" href="css/style1.css" title="standaard">
        <link rel="alternate stylesheet" type="text/css" href="css/style2.css" title="tweede">
        <script type="text/javascript" src="styleswitcher.js"></script>
        
</head>

<body class="body.logo">

        <a href="#" 
        onclick="setActiveStyleSheet('standaard','logo'); 
        setActiveStyleSheet('standaard','menu');
        return false;">Style 1</a><br>

        <a href="#" 
        onclick="setActiveStyleSheet('tweede','logo'); 
        setActiveStyleSheet('tweede','menu');
        return false;">Style 2</a>

</body>
</html>

Misschien moet je net als bij title ergens aangeven welke frame het is? Dat denk ik maar ik heb het geprobeerd boven net als bij title "frame=" te zetten maar dat werkte niet. Kan je me aub nog verder helpen?

[ Voor 21% gewijzigd door jordz. op 18-10-2004 15:26 ]

[André]

Welke foutmelding geeft hij dan? Wat doet hij wel en wat niet?

[jordz.]

Hij laadt het niet in de extra frames. De frame wanneer in het geladen wordt wel. Hier is de site waarmee ik bezig ben is misschien wel makkelijk: http://home.tiscali.nl/jordzz/ Let er voor de rest niet op, ik begin er pas aan

edit:
Het enige verschil van style 2 is dat het de achtergrond zwart wordt, dat heb ik gedaan voor testen.

[ Voor 21% gewijzigd door jordz. op 18-10-2004 15:40 ]

[André]

Het komt door je dubbele frameset, jij hebt 3 frames:

code:

top.frames['logo']
top.frames['inhoudindex'].frames['menu']
top.frames['inhoudindex'].frames['inhoud']

Je kunt dat verhelpen door er 1 frameset van te maken of de functie te veranderen:

code:

function setActiveStyleSheet(title, frm) {
  var i, a, main;
  for(i=0; (a = frm.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;
    }
  }
}

&

<html>
<head>
        <title>nog vervangen</title>
        <link rel="stylesheet" type="text/css" href="css/style1.css" title="standaard">
        <link rel="alternate stylesheet" type="text/css" href="css/style2.css" title="tweede">
        <script type="text/javascript" src="styleswitcher.js"></script>
        
</head>

<body class="body.logo">

        <a href="#" 
        onclick="setActiveStyleSheet('standaard', top.frames['logo']); 
        setActiveStyleSheet('standaard', top.frames['inhoudindex'].frames['menu']);
        return false;">Style 1</a><br>

        <a href="#" 
        onclick="setActiveStyleSheet('tweede', top.frames['logo']); 
        setActiveStyleSheet('tweede', top.frames['inhoudindex'].frames['menu']);
        return false;">Style 2</a>

</body>
</html>

[ Voor 132% gewijzigd door André op 18-10-2004 15:43 ]

[jordz.]

Hij doet het!! Hartstikke bedankt !!

[jordz.]

Ik heb nog een klein vraagje:
Als je een pagina veranderd hebt, werkt alles. Maar als je dan de pagina veranderd in het frame "inhoud" dan pakt hij weer de standaard css. Ik had gelezen op de site http://www.alistapart.com/articles/alternate/ dat dat met cookies te maken heeft. Maar het script zou automatisch cookies moeten maken maar dat werkt dus niet. Zou iemand aub willen helpen?

[André]

Dat komt omdat er standaard in je broncode een stylesheet staat, dus bij elk bezoek pakt hij die. Nu kun je eventueel in een cookie opslaan als mensen een andere style gekozen hebben. Dan kun je bij het laden van de site kijken welke stylesheet gebruikt moet worden.

En hoe je zoiets met cookies doet is in den treure behandeld hier op GoT