Georg Sørtun

Hello,

I've had your site listed among the top 5 for web-resources for the last 5
months, but it's the first time I've actually downloaded one of your scripts
to work for me.

I was looking for a replacement for Paul Sowden's style switcher because my
own bunch of style sheets became a bit too heavy and hard to maintain with
only one "alternate stylesheet" at the time.
I use a kind of "dual style" with "fonts" and "columnwidth" selected
"separate" of each other, and I had to use 19 "alternate stylesheet", with
some duplications, to make it work.

I tried your site first, and found your newly updated version that reduced
the number of "alternate stylesheet" on my site from 19 to 7!
Your script is working just fine as far as I can see, but I'm a bit lost
when it comes to the "switch menu" on screen in IE5+.
----

If I use: <input type="button" value="medium text & narrow column"
onclick="changeStyle('style1','style2')"> everything works just fine.
But 20 (or more) buttons or elements do take up a lot of screen-space, so I
am trying to find other methods.

However, IE won't let me select anything if I use:
<select>
<option onclick="changeStyle('style1','style2')">medium text & narrow
column</option>
(19 more options here - and some addition to those also)
</select>

Both of the above methods works just fine in Opera7.22 & Firefox 0.8, so I
must have overlooked something in my "<option... select" when it comes to
IE.
(A google-search told me that IE will not cooperate with me on this
"<option... select", so...)
I haven't used this method for selecting anything before, thus I'm a bit
lost at the moment.

Have looked through your pages, and looked at the documentation on PPK's
site, but cannot find any good method that's cross-browser stable.
----

I am open for any alternative to this <option... select - it just looked
like a nice solution.
My old "style menu" uses image maps, and is not very adaptable. I am trying
to get rid of it anyway because it is heavy in itself and fails in Safari.
I use my old "dual style" on about 120 pages now, and would like to keep the
style switcher simple and small on screen - somewhat like the one you have
on your own pages.

As I also might put in some extra style sheets while developing pages, and
test new CSS-solutions by adding them as "alternate stylesheets" on the web
for a while, I am in need of something robust and adaptable and small for a
"switch menu".

I think your "style menu" is JavaScript-driven, thus I'm asking if you've
got something I can use as the actual "switch menu" for the "Script to swap
between stylesheets".

-----------------
Notes:
I guess this isn't new to you, but just in case:

- IE5+ can only keep track of the first 30 style sheet links.
- Opera7.22 do not accept @import in an alternate stylesheet - only in the
defaults.

I mention this because these two limitations gave me a hard time creating
the "dual style" style switching I am using now, and your script will solve
all these problems for me.
-----------------
Additional note:
I design my web pages as cross-browser stable as I can, using Opera7+,
Mozilla 1.4.1 / Firefox 0.8, Lynx2.8.5 and IE5 / IE6. Friends on the web
help me catch up on some of the problems in Safari and others on Mac-OS, but
I'm "in the dark" when it comes to fine-tuning on Mac-OS and older browsers.
-----------------


Thank you for the script, and have a nice day

Sincerely
	Georg

Mark,

>...so instead, you must use the onchange event of the
>select object:

Thank you, the above works just fine.

I did try the reduced cookie detect script, but IE6 gave some errors I
couldn't make out, so I left it out for now.
I expect that most Opera & Mozilla users update more often, so it is
probably not needed (if I understood you correct).
I'm just waiting for the 'real' Opera 7.50 myself.

I'll upgrade my international section out here on the web first (some 30
pages), and the rest thereafter (some 100 pages in Norwegian).
I might come back on something once all is tested live, in a few weeks
time - but I do not see any major problems right now.
---

One question though: are there any limits to how many style sheets I can
activate at once?
I tested with 4, and that looked alright.

3 or even 4 active style sheets at one time might help out enormously while
developing new style sheets / pages.
It is also efficient for separating my IE-styles with the MS-expressions I
use to make IE imitate proper W3C-standards.
---

>> - Opera7.22 do not accept @import in an alternate stylesheet

>interesting, but almost certainly wrong.

I have probably made some stupid mistake, but I tested all the proper W3C
rules as far as I could make them out.
I even swapped my 'default' sheets to become 'alternate', and those are 6 -
8 sheets tied together by 3-level @import and linked in as one - and it
works just fine as 'default' in all browsers I know of.
It's the same CSS-pack I have on line now - as 'default' - but it just
wouldn't work as 'alternate' in Opera 7.22.
But I guess I did overlook something, somewhere, and your style sheet
swapper removes the problem anyway.
--------------------------------------------

Comments on my methods:
I use HTML Tidy to keep my xhtml clean and doctype'd - and all my odd
Norwegian letters turned into entities.
All IE-versions is treated in quirks mode.
I style by hand, and have a lot to trim and slim for optimal performance.
My only real source for CSS is the W3C's notes, and I do a lot of testing to
make somewhat sure I've got it right.

I expect to stick to xhtml and css for quite some time, as that is a large
'style sheet' to cover (and more to come).

JavaScript is 'unknown territory' to me, and I'll wait till I can go into it
in depth. I am a bit 'obsessed' by the need to understand what I am doing,
and I don't like to cut corners.
I'm glad there are some safe sources I can turn to, so that I don't have to
make such a mess out of it on my own.
--------------------------------------------

Maybe I should have written the following in another mail, but...
In case the following is of any interest to you, it is all as free as your
stuff.

I have created some simple 'rounded corners and shapes' without images,
manipulating empty (commented) divs with css.
It looks fine to me, and some of my friends out here seems to like it too.
The markup looks awful though, as I had to stack multiple divs on top and
bottom of text-areas.
But, it loads faster than images, and can take a lot of stress in a flexible
design.
---
Read in the last ALA, in the comments about image-corners and -shapes, that
Simon Willison suggested the use of JavaScript to create html-elements for
adding shapes to areas for styling.
Sounded a bit like what I have 'created' with html and css only, so I hope
I'm not too far off by asking: is it possible to implement some JavaScript
in this?

In case you have any interest in it, I have a page out here on
[a url demostrating curved corners without images], with the whole thing.
I play with some border-shaped areas down that page just for fun, and the
text is mostly in English.
No masterpiece, but I test out new design-ideas in that section, so...

What I have in mind is some way to keep the markup cleaner and have the
necessary elements 'created' when needed for graphical enhancement, and
'hook up' styling to it in somewhat the same way I'm doing on my page - by a
separate style sheet.
Just a thought.
---------------------------------------------

Now I'll start spreading 'Script to swap between stylesheets' all over our
site.
I have a major 'copy & paste' job ahead of me, after I've trimmed the look
and feel of it a bit.

I am really grateful for the help you have given me, and it's a great
script.
I'll recommend it, and highlight my links back to you once I've got it up
and running.

Sincerely

Georg

Thank you for a whole lot of information and useful stuff in your last
reply.

-----------
I think I must have formulated one of my question a little bad, the
language-barrier probably.

My question was:
> are there any limits to how many style sheets I can
> activate at once?

And I will exemplify it to make it clearer...
I tested this:

<option value="changeStyle('font-1','column-4','background-2','lang-en')">a
combination of 4 style sheets</option>

The above worked just fine, so what I meant was: is there a limit to how
many style sheets I can select at once, in one option, and still make it
work in 'all' browsers?

A collection of real small alternate style sheets can achieve a lot in
combinations like this, far more than the number of style sheets in
themselves.
The 7 alternate style sheets I have now, are already giving me the original
20 options that I had before (with 19 alternate style sheets), and I just
want to be able to expand on that on a few pages and during development.
-----------

I have no titles on the deafult-CSS links, so they will not be deactivated
no matter what, if I have understood that part correctly. As long as the
number are lower than IE-win's limit (as I know it), all browsers should
work fine with the link set-up you showed me.
-----------

>I saw that. liked the look of it. it is kindof like my curves page, but I
like the idea of using it for corners.

I couldn't find your 'curves page', so could you please tell me where to
look for it? All these things are interesting to me, for future
improvements.
I might come back to the various options there are for creating corners with
JavaScript. Hope that's OK.
-----------

>Safari renders it beautifully (although it litters your sledgehammer page
with giant bullet points and question marks).
The information on how different mac-browsers renders my pages is extremely
useful to me.
I 'cheated' on those bullets and letters, but obviously I couldn't fool
Safari. I know how to correct that page now that I've got the facts.

I really don't know how to thank you enough for all this, as it would take
me a long time to figure it all out myself.

Once again: thank you!

Sincerely
        Georg

Mark,
I need some more help on the correct implementation of the "style swapper".
Looks like Gecko-browsers and IE-win loose my second script[2] when the old
Style Switcher is replaced with the Style Swapper[1].

Opera handles it perfectly now, and I didn't check that particular page in
any other browser before re-launch (shame on me).

The only difference that is appearent to me, is that <body> didn't have
onload / onunload[3] in the old style switcher (guess it is part of the old
external script).

I took out that onload / onunload[3] from the body itself, and both Gecko
and IE started to use the second script[2] again.
However, no cookie-function without <body onload / onunload >[3], so how do
I get my cookie back in action without loosing any other script?

Paul Sowden's old style switcher have this:
---
window.onload = function(e) {
 var cookie = readCookie("style");
 var title = cookie ? cookie : getPreferredStyleSheet();
 setActiveStyleSheet(title);
}

window.onunload = function(e) {
 var title = getActiveStyleSheet();
 createCookie("style", title, 365);
}

---
...and I guess that do the same as your <body onload / onunload >, but I'm
lost on how to implement that functionality into your script.

------------------------------------------------------------------------

This is what I have now:

HTML:
---

<script type="text/javascript" src="scripts/pageset1swapstyle.js"
language="javascript1.2"> [1]
</script>

<script type="text/javascript" src="scripts/easytoggle-i.js"> [2]
</script>
</head>
<body class="c16" onload="useStyleAgain('styleGunlaugs');"
onunload="rememberStyle('styleGunlaugs',30);"> [3]
---


Below is the second script[2] that I use to swap between language-sections.
The second script[2] work well with Paul Sowden's switcher, but now the
sections stay open and the links are followed directly.
Not a complete failure of the page, as everything show up, but this second
script[2] isn't working - except in Opera.
---
/* easytoggle.js, by Simon Willison
  modified by Mike Foster, 24Mar04, Cross-Browser.com */

var et_toggleElements = [];

if (document.getElementById && document.links) window.onload = et_init;

function et_init() {
    var i, link, id, target, first;
    first = true;
    for (i = 0; (link = document.links[i]); i++) {
        if (/\btoggle\b/.exec(link.className)) {
            id = link.href.split('#')[1];
            target = document.getElementById(id);
            et_toggleElements[et_toggleElements.length] = target;
            if (first) {
                first = false;
            } else {
                target.style.display = 'none';
            }
            link.onclick = et_toggle;
        }
    }
}

function et_toggle(e) {
    var id = this.href.split('#')[1];
    var elem;
    for (var i = 0; (elem = et_toggleElements[i]); i++) {
        if (elem.id != id) {
            elem.style.display = 'none';
        } else {
            elem.style.display = 'block';
        }
    }
    return false;
}
---


I only have one page out here with this combination / problem:
[demo url] , and the whole international
section seems to work fine for the style swapper itself.

The old combination is on several pages in the Norwegian section. this
[demo url] is typical, and is working
fine.
---
    Georg

Thank you...
I ended up creating a new version of the second script for all pages with
your style-swapper, while keeping it for those pages that are still to be
upgraded.
The <body onload... is changed for the new pages also.

It works just fine out here on the web - right now.

Thanks again
    Georg

Mark,
I hope it's alright that I ask a few more questions involving the
style-swapper that I now use on most of our site.
It works just fine as it is, but I am wondering if it can be modified to
assist on creating a truly international site.
What I have in mind is best exemplified by what I already have: "bilingual
pages".

http://***.*******.**/********/*********.**** is one of a group of pages
with content written in English and Norwegian on the same page.

These bilingual pages works fine, but the panel-switcher script from Simon
Willison, that you helped me implement, doesn't allow for site wide changes
on "preferred language". The script will always switch off all panels except
the first one in the <select language / språkvalg> I have in the mark-up.
It's a hard-coded sequence that can't be altered from CSS, as far as I know.

Some "hard-coded" testing shows that the style-swapper script can do the
same job, and much more, by including the right style sheets to alter not
only the display of these panels, but also trim details throughout the whole
page to go with each language. The important point here is to keep all
options available to visitors, while giving English visitors the English
version on pageload, and being able to provide the same "preferred language"
to Norwegian visitors.

As I might add in more language-panels and page-trimmings, I'll need the
style-swapper to remember what "language style sheet" to add in, without
having to add a complete set of style-choices to the style-swapper for each
language. There are 20 options to select from now, and even that is too many
for anything but testing. I'd like to simplify the selector(s) for the
average visitor to understand, or else they won't use these options.

Is it possible to select and remember new styles, without loosing those
already selected?
I'm thinking in levels of selection for the titles on alternating style
sheets here, something like this:

1: language: 'en','no','ge','fr'...
    - one of these has to be default, but that can be defined in the default
style sheet along with the rest.
    - any selections made on any page will then become "resistant", until
another selection is made.
    - no other levels are changed.

2: fonts: 'small','medium','large','high contrast'...
    - the default is 'medium' now, as no alternating style sheets are selected
on first visit.
    - the same as above, where only this level is changed when selections are
made.

3: layout: 'very narrow','narrow','medium','wide','very wide'...
    - the default is 'very wide' now, which means max-width of 800px on the
main column.
    - the same as above, where only this level is changed when selections are
made.

4: testing: I'd like to be able to plug in extra styles on this level.
    - maybe this level can just be extended with as many titles as I need in
each case...
    - the same as above, where only this level(s) is/are changed when
selections are made.

If the selector(s) can be kept separate like this, and the cookie carries
the selections site wide like it does now, then my international web site
can become truly international and user-friendly.

I guess using CSS to do the job, and javascript only to alternate style
sheets, is slightly slower than optimized javascript for some of the above.
I can surely live with that, as the flexibility that alternating packs of
style sheets give me is many times more powerful than most other solutions.
However, this won't work without the ability to select multiple style
sheets - as your style-swapper do - and a different selector to control it.

I think it is the position each level should occupy that is the main point
here, as I see them as separated items in one line, that can be targeted and
changed separately with a string-function. Exactly how that can be done
based on your style-swapper is far from clear to me.
As there can only be one selected option on each level/position (for the
three first levels anyway), it'll work and look very similar to what I have
site wide now, but with separated selectors for each level.

My limited understanding of javascript tells me that something along these
lines can be achieved, but I'm lost on how to code it.

Any response will be appreciated.

Sincerely
    Georg Sørtun

Mark,
I have successfully implemented the changes to the script, and the method
and appearance of my selector(s) to go with it. It took me a couple of days
to iron out my own mistakes, but now the whole thing is working just as I
wanted it to.

I'm now testing it site wide - internally on my computers - with more than
120 pages acting on the style swapper, and some 20 pages being bilingual and
some more being prepared as multilingual. Apart from Opera being a bit slow
(as expected), it all acts just fine in Opera 7.22 and 7.50, Mozilla 1.4 and
Firefox 0.8, and IE 5.0 and 6.
I'll upload more or less the whole site again in a few days time, and test
it live and look for flaws.

I will contact you about some minor details later. Some more javascript
issues around the same language-subject...

Thank you very much for all help

    Georg

Mark,
I got our site up and running a couple of days ago, with a working solution
for bilingual/multilingual pages.
Some friends out here on the web are looking into it now, and the reports so
far are reasonably good.

The style swapper is working fine as far as I can see. Opera is slow, as
expected. Moz/FF seem to do fine, and IE5+ win isn't complaining too much.
Think Safari is doing fine also - based on reports.

Got some bilingual clutter for non-javascript/non-CSS browsers to look into
on some pages, and a lot of fine-tuning to do when it comes to organizing
the site as a whole for two (and more) language-groups.

I'm not sure how it is acting for first time visitors, i.e. if the cookie is
set properly without visitors making any selections. The selector itself
isn't the most visible on screen until visitors hover over it, so some may
miss it all together. I've tied links on the entry-page to language
selection, which may help some. Clickable flags should also work fine for
most.

Thank you very much for all help

    Georg