CSS Style Switcher, alternate stylesheets, and external javascript libraries

CSS Style Switcher, alternate stylesheets, and external javascript libraries

My customer has given me a requirement to implement a "style sheet switcher", similar to what we have done at http://www.aarpsavings.com The customer can click one of three image links to change the active style sheet. The reason for this is to enlarge the default text size for the older people who visit this web site. The code to implement this was borrowed from http://alistapart.com/stories/alternate/

My problem is the following:

I need to "add" three additional <link> tags in the <header> which is generated when the code is compiled.

I have tried doing some javascript with onload to "insert" the links into the generated document; but I can't seem to get it to work. So my question is ..

Is there a way via javascript to insert additional tags into the header (short of manually editing the .aspx after each publish)


Ideally I would REALLY like the ability have a freeform text area (like the eSpace javascript, and web page javascript) where we could specify additional header tags. Benefits of this would be not only this stylesheet switch ability, "printer compatible" stylesheets, but also adding multiple external javascript libraries. I believe this is important as we all start getting into more and more Ajax type operatons and effects.

What are your thoughts, and would anyone else find these operations useful?

Hi Ken,

For your immediate problem the best solution would be to copy the js linked file contents to the eSpace javascript. I would probably try to encapsulate this functionality in a specific eSpace, so that it can be shared by multiple applications.

As for printer compatible stylesheets you can use the @media rule.

You might also want to know that modern web browsers will accept link tags in the body, so you can use an unescaped expression.

But you are right, linking to external files and being able to modify the header of a page are indeed valid requirements, and will be addressed in a future release.

Tiago Simões
Also, to add a file to your eSpace you can use the omlresources utility found on Service Studio directory.
You can use it like this: >OmlResources.exe -oml youreSpace.oml -add customJS.js
Tiago Simões
Hi, Ken. I've done some experimentation on this area.

I've come to 2 important conclusions:

1. If you're using some JS functions onload from a external file, which is being added dynamically onload, it sometimes fails. Apparently, there are some race conditions involved. The solution is to paste the JS source directly into the eSpace Javascript box. Not as pretty, but it does the job.

2. If you want to add additional tags to the <head>, be sure to put the source code, to dynamically add the tag, in the eSpace Javascript. From what I remember, it will not work anywhere else.

I hope it helps.
Hi Ken,

For the CCS Style Switcher, my sugestion is to insert code within the BODY to switch the CSS:
<link href="<your alternate css>" type=""text/css"" rel=""stylesheet"" />
<SCRIPT language="javascript">
document.styleSheets[0].disabled = true; // disable OutSystems main CSS

I recommend you to insert this code as an unescaped expression, within a web block that you use in all your application pages (like the header or footer).

This works on IE and Firefox. The solution was inspired on http://www.howtocreate.co.uk/tutorials/javascript/domcss.
Tiago - Can I assume that this actually adds the contents of the file to the OML, and when published will put the filename.js in the running directory? So, if the javascript needs to be updated in the future, I would edit a copy of the javascript and "add" it again? The biggist benefit I see for this method is that the javascript is now somewhat under (outsystems) source control.



Yes, you are right - it works exactly as you are describing.

Tiago Simões
(Only just after submitting I noticed this thread was very old and HttpRequestHandler probably even didn't exist back then. But maybe my reply still comes in handy, so I'll just leave it...)

Hi Ken,

Isn't the easiest way to do this to use the HttpRequestHandler extension?
This extension has a method called 'AddStyleSheetTag'. Just put this in the screen preparation to add a custom stylesheet.
You can find the extension (and more info) at:

Kind regards,