CSS Style switcher (styleswitcher.js)

I'm just trying to implement this for the first time, and as
far as I can tell have it set up so that it should work, but
doesn't seem to be, so I guess I must be doing something wrong
somewhere.
The page is here :
link
here
So I've uploaded the styleswicher.js file, linked to it in my
header, along with two style sheets to try it out :
<link rel="stylesheet" type="text/css" href="standard.css"
title="default"/>
<link rel="alternate stylesheet" type="text/css"
href="medium.css" title="medium" />
<script type="text/javascript"
src="/scripts/styleswitcher.js"></script>
And added in the links to the different styles in the body :
<a href="#"
onclick="setActiveStyleSheet(’default’); return
false;"><img src="smalla.jpg" alt="View this website in
standard text size" border="0" align="absbottom"></a>
<a href="#" onclick="setActiveStyleSheet('medium'); return
false;"><img src="mediuma.jpg" alt="View this website in
medium text size" border="0" align="absbottom"></a>
If anyone could let me know where I'm going wrong, that would
be great.
Cheers.

You have the src set to root relative.
<script type="text/javascript"
src="/scripts/styleswitcher.js"></script>
Try changing it to page relative:
<script type="text/javascript"
src="scripts/styleswitcher.js"></script>
Ken Ford
Adobe Community Expert - Dreamweaver
Fordwebs, LLC
http://www.fordwebs.com
"Iain71" <[email protected]> wrote in
message
news:fs2o2h$lfn$[email protected]..
> I'm just trying to implement this for the first time,
and as far as I can
> tell
> have it set up so that it should work, but doesn't seem
to be, so I guess
> I
> must be doing something wrong somewhere.
>
> The page is here :
>
>
http://www.handprintdvd.co.uk/webdesign/remap/fonts.shtml
>
> So I've uploaded the styleswicher.js file, linked to it
in my header,
> along
> with two style sheets to try it out :
>
> [HTML]<link rel="stylesheet" type="text/css"
href="standard.css"
> title="default"/>
> <link rel="alternate stylesheet" type="text/css"
href="medium.css"
> title="medium" />
> <script type="text/javascript"
>
src="/scripts/styleswitcher.js"></script>[/HTML]
>
> And added in the links to the different styles in the
body :
>
> [HTML]<a href="#"
onclick="setActiveStyleSheet(?default?); return
> false;"><img
> src="smalla.jpg" alt="View this website in standard text
size" border="0"
> align="absbottom"></a>
> <a href="#" onclick="setActiveStyleSheet('medium');
return false;"><img
> src="mediuma.jpg" alt="View this website in medium text
size" border="0"
> align="absbottom"></a>
> [/HTML]
>
> If anyone could let me know where I'm going wrong, that
would be great.
>
> Cheers.
>

Similar Messages

Help needed to create a CSS 'style-switcher' button.

Hi,
I need some help please in creating alternate style sheets for each page on a site I'm creating to enable users to change text size (i.e. small, normal and large options - sometimes, symbolized as a letter 'A' in varying sizes). The site has been built in basic format so far but I would like to add these features for the sake of usability. There are no actual problems with the site as it currently works fine, it's just this one thing I need help with.
Is this possible using post-processing methods, (which I have no problem doing) and if so could someone kindly point me in the right direction? I've searched the iWeb forum using keywords most relevant to this question and have found nothing.
Any help greatly appreciated,
Matt
MacMini G4 1.42GHZ Mac OS X (10.4.8)

Thanks varkgirl,
This works (partially): this is the page:
http://www.charitydesigns.com/odyssey/index.html
The first paragraph is not responding and at larger sizes line spacing is not in proportion to the size of the text (and is squashed), what am I doing wrong?
Hope you can assist.

Lost CSS style rendering

Help!
I've read the FAQ regarding toggling CSS styles as I've lost/inadvertanly switched off the detail in the design pane leaving me only with the code. This was the advice:
Sometimes, though, your CSS looks completely wrong or isn't displayed at all. Usually, this happens if you have accidentally turned off the display of styles, or if you have selected an option other than Screen Media Type in the View > Style Rendering submenu or the Style Rendering toolbar. Make sure Display Styles and Screen Media Type are selected (they should have checkmarks against them like this:
However, I'm running an old version - DreamWeaver MX 2004 v 7.0.1 - and it doesn't have Style Rendering etc. under the View tag. Please tell me what I must do. (Don't say upgrade!)
Thanks
Les

in a couple of pages I cannot see any text or image items in the Design View
Use the validation tools below and fix reported errors.
CSS - http://jigsaw.w3.org/css-validator/
HTML - http://validator.w3.org/
Nancy O.

CSS styles not loading on certain websites (facebook, wikipedia)

Hello,
I am running the latest ver of firefox on Windows 7
Out of nowhere certain websites such as facebook or wikipedia don't seem to load up their CSS styles. So the sites are more or less unusable.
I disabled all my plugins, restarted my laptop (its a lenovo thinkpad x220) did a CCleaner, ran a malware check, and its still happening. Javascript is enabled and I made sure page style is "Basic Page Style."
Works fine on IE.
Any ideas?

Start Firefox in <u>[[Safe Mode]]</u> to check if one of the extensions or if hardware acceleration is causing the problem (switch to the DEFAULT theme: Firefox (Tools) > Add-ons > Appearance/Themes).
*Don't make any changes on the Safe mode start window.
*https://support.mozilla.com/kb/Safe+Mode
*https://support.mozilla.com/kb/Troubleshooting+extensions+and+themes

CSS Styles Panel - Refreshing

I've recently started using Dreamweaver, and am learning
using the Tutorials on-line.
I was successfully following the CSS design tutorials,
However now, whenever I edit a document (or create a new
one), the CSS Styles panel "
unloads" and tells me that I have made changes to the code,
and "must click Refresh or press F5"
This did not happen before / yesterday.
Is there a setting somewhere which has been switched off?
This is annoying since it means that I cannot use the
predictive text features of Dreamweaver
like typing "<div " and seeing the options.
manually editing the CSS file still provides the auto-text.
Thanks,
Rem

Adendum;
It's also happens to the Tag panel, and Properties.
This even happens if no style sheet is linked
??????

Problem with Css styles not showing in live view or when i browse

I am using Mac osx 10.6 and building website with Dreamweaver CS5. Sometimes div tags i create not showing styles or rendering in live view or when I browse but showing in design view. I looked in dreamwever faq and they talk about not showing in design view to toggle the display styles. That is not the problem becuase it is check marked and I tried turning off and turning on and made no difference.I am using firefox browser.
It happened before the other day too. But all of my other pages in this site that i have created the same way building with div tags and css styles. So not sure what the problem is. Maybe someone has a suggestion here.
Johanna

<!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>Portfolio</title>
<style type="text/css"></style>
<link href="css/jbstyles.css" rel="stylesheet" type="text/css" />
<style type="text/css"></style>
</head>
<body>
<div id="wrapper">
<div id="mainnav">
    <div id="navbar">
      <ul>
        <li><a href="index.html"><br />
        </a></li>
<li>
          <ul>
            <li><a href="index.html">          Home</a><a href="about.html">About</a></li>
            <li><a href="portfolio.html">Portfolio</a><a href="contact.html">Contact</a></li>
          </ul>
        </li>
      </ul>
</div>
    <div id="contentinside">
      <div id="navbar2">
        <ul>
          <li><a href="design.html">Design</a></li>
          <li><a href="multimedia.html">Multimedia</a></li>
          <li><a href="webdesign.html">Web Design</a></li>
        </ul>
      </div>
      <div id="mm1thumb">Content for id "mm1thumb" Goes Here</div>
      <div id="mm2thumb">Content for id "mm2thumb" Goes Here</div>
    </div>
    <img src="images/multimsidebar.gif" width="212" height="615" alt="mmsdbr" longdesc="http://multimsidebar" />
<div id="footer">
    <p> </p>
    <p>Johanna Bresnahan</p>
    <p>Web & Graphic Design - http://www.johannabresnahan.com</p>
    <p> email: [email protected] ....phone....857•991•5717<br />
</p>
</div>
</div>
</div>
</body>
</html>
Here is the html code above. not sure how to attach my file so get a visual. This is the first time I have used this forum.
Johanna

Can't figure out how to rename css style in mx

Hello,
I can't figure out how to rename css style in mx. I have the
style selected in the proprety inspector. Is there supposed to be a
rename option at the bottom of the same dropdown box? There is
option to edit style and a few others in same dropdown box... but
no rename option. Please be specific... I have looked it up on the
internet... but still cant find the option.
Thanks,
PoJ

Do a Find and Replace to find name1 and replace with name2.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"computerpain" <[email protected]> wrote in
message
news:ed43p3$m9h$[email protected]..
> Hello,
> I can't figure out how to rename css style in mx. I have
the style
> selected
> in the proprety inspector. Is there supposed to be a
rename option at the
> bottom of the same dropdown box? There is option to edit
style and a few
> others in same dropdown box... but no rename option.
Please be
> specific... I
> have looked it up on the internet... but still cant find
the option.
>
> Thanks,
> PoJ
>

Cannot view css styles in design view

Is there a way to get Dreamweaver to display style in design
view when the css files are in virtual folders?
Have tried using ASP (Vbscript) snippet to write in the
server URL and using Liveview, but still doesn't display. It
appears that DW only recognizes hard coded relative links or hard
coded full URLs.
Browser displays these documents with no errors.
Please Help! I have users who will be confused attempting to
edit the documents without visible style, and need to use the
virtual folders.
Thanks.
Sean

> Is there a way to get Dreamweaver to display style in
design view when the
> css
> files are in virtual folders?
Try using Design Time Stylesheets.
Open the Design-Time Style Sheets dialog box by doing one of
the following:
1. Right-click in the CSS Styles panel, and in the context
menu select
Design-time, or
2. Select Text > CSS Styles > Design-time.
Regards
John Waller

I'm trying to get a style switcher going for my site(for the colour scheme)

I'd like to give my users the choice of changing the colour
scheme of my site (
http://chaoscoalition.net) at
will, through css style changing buttons such as the ones on the
forum's theme(
http://forum.chaoscoalition.net).
I've read many articles and tutorials on how to set up
alternate stylesheets for a webpage, but I can't quite get it
right. Every time I seem to have gotten it right, it either opens
the php file that sets the cookie, or it opens the stylesheet as
text. I want to end up with something like the forum's theme
changing module, but for the homepage.
I have 5 different versions of the page made, all as
different pages(php format), but I don't understand how to link the
buttons at the top to trigger the stylesheet change, and I don't
even knwo if it's possible to rely on a css file to change the
whole colour scheme of the page(which is image based).
It'd be great if someone could walk me through this, or offer
some tutorial that explains how to do this from scratch.
Thank you.

First, never use Fireworks or any graphics app to build HTML and CSS for you. The resulting code is rigid, fragile and only good for quick comps or prototypes to show a client. Use DW to generate actual site code.
Secondly, external stylesheets must not contain JavaScripts or X/HTML code as your green.css does. Only CSS rules and comments are allowed inside external stylesheets - like so:
/**Green CSS**/
body {
     margin:0 auto;/**this centers page**/
     padding:0;
     width: 900px;
     font-family: arial, helvetica, sans-serif;
     color: white;
     background: green; /**this is green**/
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
www.alt-web.com/

Safari 5.0.3 not loading CSS style sheets 1st time through

When I go to my ecommerce site's https payment screen, the page HTML loads OK but the formatting is missing (so the screen is really messed up). If I hit the page re-load function the page re-loads with all the formatting corrected. It behaves the same with both the Mac and Widows versions of Safari 5.0.3. The problem did not occur on earlier versions of Safari (i.e., the Mac I use for testing the site worked perfectly on the now problematic page until I upgraded to the latest version of Safari).
The problematic page works fine with all the other browsers that I have tried (IE7, IE8, Firefox, Chrome)
My guess is that it has something to do with some @import url("css style sheet") directives that are imbedded at the beginning of the master style sheet for the page.
This problem will stop all Safari 5.0.3 users from navigating our site so it is quite serious.
Any help on this issues would be greatly appreciated.

Further investigation has revealed that the following error message is being generated within Safari during the first time the that the page is loading,
"Refused to load from document base URL. URL found within request."
The <base> directive in the HTML, in this instance, is referring to a different URL than the one that the page is running from. The page with the problem is running on a remote server and back referencing to the home server for the <base> reference. This fails when the page first loads but seems to be accepted if a page-reload is done. It also works on all other browsers that have been tested.
Is this related to a security setting in the browser?

I messed up my CSS styles, should I just start over?

I've been working on a template for a couple weeks. And I changed a couple CSS styes by creating new ones. I didn't really know what I was doing, and now my template's navigation bar has disappeared and my main background has shortened up and is completely out of sync with the text. Is there anyway I can restore my original css styles or do I have to start completely over?
Thank you for your help.
EDIT:
http://img685.imageshack.us/i/dreeamweaver.jpg/
Here you can see a visual of what's happened. All of my pages are now like this. Do you think I can fix this?

when I preview it in design mode in Dreamweaver the nav bar is gone and background is shortened. How is this happening?
Viewing anything in DW's design view is not the best way to judge your website. You should always use "Preview in browser" functionality. I normally go to:
File >> Preview in browser
and select FF4 first and then IE8 (that is all I have on my machine). These two browsers will cover 90% of the user base in this world.
hth

When I try to attach my css style sheet Dreamweaver gives me an error saying that my .css file appears to be an .html file and will not attach. How do I fix this so I can attach my style sheet?

I have built a css style sheet in Dreamweaver. When I try to attach it to my html website, it prompts me that my "css file appears to be an .html file and cannot attach". I've tried removing the /* */ as suggested by other forums, but this has not resolved the issue. I was using css style sheets with no problem 2 days ago. Now I get that error message. How do I fix this so I can attach my style sheet?

What does the code of the CSS file look like?
An external CSS file needs to be written in CSS only (no html tags like <html>, <body>, <head>, etc ).
It also must have a .css file extension, if yours has a .html extension it won't work.

Using Column Value in CSS Style for Column in Report

I am trying to apply a CSS style (background color) to a column in a report based on another column.
So for the Column attributes for a specific column, I would like to be able to add this to the 'CSS Style' Field under the group, "Column Formatting":
background-color:#BKG_COLOR#;
It doesn't seem to be taking my column value, which is #daf2ea
In the CSS Style Field, if I change it to: background-color:#daf2ea - then it works.
So it doesn't seem to take my column value of #BKG_COLOR" in the CSS Style field.
Any ideas? Do I need to use the 'HTML Expression' field instead, and how would I do that?
Thanks,
John

Hi,
that's correct, custom report templates will do.
I find them sometimes quite limited, though. And I always ask myself "how would I do it without APEX", because there's often a lean jQuery solution that affords less coding.
If you employ a so called "marker class" that depends on your colour value, you could begin like in the previous answer and enter the follwing into HTML Expression:
<span class="#BKG_CLASS#">#THE_COLUMN_I_WANT_TO_SHOW#</span>
That means you would not query a plain color, but some name that can act as a CSS marker, like
select THE_COLUMN_I_WANT_TO_SHOW
, case when THE_COLUMN_I_WANT_TO_SHOW > 100 then 'hotColor' else 'coldColor' end as BKG_CLASS
from my_tableIn the page's Function and Global Variable Declaration, you'd enter
function colorMyReport () {
apex.jQuery('.hotColor').closest('td').css('background-color','#FAA');
}And under Execute when Page Loads, you enter:
colorMyReport();There's only one challenge, of course, when the report is paged via AJAX, because the script would only run once (on the first page shown).
But if this is a solution for you, I'd be pleased to show you how to overcome this. Just let me know.
Hope there is no typo in my typing, because I have to catch my train now :-)
Bye!

CSS Style Sheet Link Recursive Error?

I am trying to link a css style sheet to a new root file. When I try to link the css sheet I get an error - A recursive style import was found while trying to add Check Magazine.css. Please resolve this error by editing the file in an external text editor and try again.
What does this mean? I looked up recursive style everywhere and there is no explanation. I don't know how to fix. The answer I found on these forums mentioned an @import statement error but I dont even have any @import statemensts in my style sheet this style sheet is part of the Getting Started tutorial on this website.
@charset "utf-8";
#container{
width: 968px;
background: #FFFFFF;
margin: 0 auto;
padding-left: 10px;
padding-right: 10px;
overflow: hidden;
This is my code, can you help?

This is my index.html code, I am so lost as to what to do to get rid of this stupid error. My style sheet is not linked so of course it is useless and I have to code on both documents since the code doesnt show up automatically on the Style sheet when I add something to the index page
<!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>Check Magazine</title>
<style type="text/css">

</style>
</head>
<body>
<div id="container">
<div id="banner"></div>
<div id="main_image"></div>
<div id="left_column">Content for id "left_column" Goes Here</div>
<div id="column_container">
<div id="right_column">Content for id "right_column" Goes Here</div>
<div id="center_column">Content for id "center_column" Goes Here</div>
</div>
</div>
</body>
</html>

Drag and Drop in CSS Styles Panel

So, I am going through Dreamweaver CS5 Classroom in a Book. In lesson 6, pages 106 through109, it tells you to drag and drop rules in the CSS Styles Panel into a certain order. I can't seem to get it to work for me. Am I missing something?

What do u mean by saying this?? Drag & Drop is possible for
components example Jtree , jtable .These are placed on containers like JApplet, Applet or frame .
So the answer is yes !
there is a seprate package devoted to Drag & Drop.

CSS Style switcher (styleswitcher.js)

Similar Messages

Maybe you are looking for