Style Sheet Switcher (v1.0) - How to modify two frames or page in same time

**MooCan** · 05-30-2006, 05:21 PM

Question about Style Sheet Switcher (v1.0)
from: http://www.dynamicdrive.com/dynamici...etswitcher.htm

First of all thanks for your great site.
I' m a very very very french newbie in javascript and CSS.

I would like to know if it's possible to use Style Sheet Switcher for example inside Fold-out external menu (external menu file edition) and when you switch your Styles Sheets inside your menu if you could apply this CSS change to your main page in the same time ?

Thanks
PS: I hope my english is not so bad!

**jscheuer1** · 05-31-2006, 08:03 AM

Your link to the script here on DD is broken, please post it again.

What you are asking for is probably possible. I would know better if I could see the page, please post a link to it.

**MooCan** · 05-31-2006, 03:37 PM

Hi,

Excuse me, here is the good link:
- Style Sheet Switcher (v1.0)
http://www.dynamicdrive.com/dynamici...etswitcher.htm

- Fold-out external menu (external menu file)
http://www.dynamicdrive.com/dynamici...ideinmenu4.htm

I have tried to make a JavaScript to refresh two frames or two pages (windows.location.refresh or windows.location.replace) after choosing and apply CSS Styles but search again. I Try too with innerHTML mthode too.

Thanks for your help in advance
MooCan

**MooCan** · 05-31-2006, 04:00 PM

I have choose to use the Style Sheet Switcher (v1.0) with a drop/drown select menu and I have added yesterday evening a little modification : an "apply" button .

I have modified from :
<form id="switchform">
<select name="switchcontrol" size="1" onChange="chooseStyle(this.options[this.selectedIndex].value, 60)">
<option value="none" selected="selected">Default style</option>
<option value="blue-theme">Blue Theme</option>
<option value="brown-theme">Brown Theme</option>
</select>
</form>

to :
<TABLE style="width:400px;" cellspacing="0" cellpadding="2">
<TR>
<TD align="left" valign="middle" class="smalltxt" width="59">Theme:</TD>
<TD form id="thememgrform" align="center">
<select name="switchcontrol" size="1" tabindex="1">
<option value="Black" selected="selected">Black</option>
<option value="3D Light">3D Light</option>
<option value="3D Dark">3D Dark</option>
</select>
</form>
</TD>
<TD align="right">
<input name="thememgrbutton" type="button" value="Apply..." onClick="chooseStyle(document.getElementById('switchcontrol').options[document.getElementById('switchcontrol').selectedIndex].value, 60)" tabindex="2">
</TD>
</TR>
</TABLE>

Why:
I would like When the user choose a CSS style in the drop down menu, this style will not be applied immediately and in place a preview picture of the style will appeared in the same page (another div) and after chosing and appliying style with button launch the refresh with new style.

Thanks for all !
MooCan

**jscheuer1** · 05-31-2006, 05:23 PM

A stylesheet already applies to the entire page. Just include all of the styles that you want used in the alternate stylesheet, no need to apply it twice unless you have two separate pages. If you want a preview, use an additional alternate stylesheet(s) that only have changed styles for the preview area.

**MooCan** · 05-31-2006, 06:55 PM

Hi,

That's what I have ...

1- First HTML Page with in first JavaScript:
- Index.html
- Fold-out external menu (external menu file) JS

2- Second HTML Page with in second JavaScript:
- Menu.html
- Style Sheet Switcher (v1.0) JS

3- Details
A- The Index.html create a slide in/out menu with Fold-out Menu JS
B- Fold-out Menu JS call an external HTML page which is my second one (Menu.html) that is embedded in the current page (index.html)
C- The Menu.html include the CSS Switcher JS to change Style for theses 2 html pages

In fact I don't know how and if it's possible but ...
when I choose an alternate Style in my Menu.html all is right this one is applied to the menu.html but is not applied too to the Index.html page in the same time so maybe in a second time with an automatic refresh.

Thanks for your help again
MooCan

**jscheuer1** · 05-31-2006, 07:36 PM

You need to also have:

Style Sheet Switcher (v1.0) JS

on the index.html page and you need to have the aternate styles linked to it as well (the <link rel="alternate stylesheet" etc . . > tag(s)). Then when you do this on the child page (menu.html):

Code:

onClick="chooseStyle(document.getElementById('switchcontrol').options[document.getElementById('switchcontrol').selectedIndex].value, 60)"

Make it like so:

Code:

onClick="chooseStyle(document.getElementById('switchcontrol').options[document.getElementById('switchcontrol').selectedIndex].value, 60);parent.chooseStyle(document.getElementById('switchcontrol').options[document.getElementById('switchcontrol').selectedIndex].value, 60)"