Gordon's WebLog

So, what is StyleSwitcher ?

It is a system that can be implemented on a web age so that the visitor can choose a different style to the default set up by the WebMaster.

Using a default (coffee coloured) and a grey version of my stylesheet I use it to allow visitors to choose between these two different colours for my web pages at my church web site

Now I believe that there are several different ways that this can be implemented and offered to visitors. Here is one that I find very good and is available from DynamicDrive.

First of all it is necessary to download a small JavaScript file available from DynamicDrive, and upload it to the root folder of your web site.

Next place the following code in the head of your web pages (or template), below your LINK stylesheet tags.

<script src="styleswitch.js" type="text/javascript">
/***********************************************
* Style Sheet Switcher v1.1- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>

Also there is also a nice little tweak so that when the page is first displayed the current style used is highlighted.

Add the following script underneath the one above.
<script type="text/javascript"> window.onload=function(){ var formref=document.getElementById("switchform") indicateSelected(formref.choice) } </script>

Now for the fun and games of actually coding the pages.

Underneath your default style sheet something like
<link rel="stylesheet" type="text/css" href="default.css" media="screen" />
add another entry for each of the alternate stylesheets like this.
<link rel="alternate stylesheet" type="text/css" media="screen" title="colour_grey" href="grey.css" />
You will see that this is maked ALTERNATE STYLESHEET.

Right, that sets up the stylesheets, now to allow the visitor to choose a style.

I use it in the right hand sidebar of my web site and the coding is as follows.

Switch styles<br />
<form id="switchform"> <input type="radio" name="choice" value="none" onClick="chooseStyle(this.value, 60)" />Default style<br />
<input type="radio" name="choice" value="colour_grey" onClick="chooseStyle(this.value, 60)" />Grey style<br />
<:/form>

What this does is to put up a small form with two radio buttons which, when clicked, will effect a change to use the selected stylesheet, i.e the default or a grey colour.

There are other ways to implement this, see here for more details.

HAVE FUN, and do visit my church web site and try it out for yourself!

In this post I described a great new browser called Maxthon.

Well, now a new version 2 is available from http://www.maxthon.com/. Version 2 is now much improved and the following is just a short list of what's available.

It's QUICK !

Easy configuration wizard.
Tabbed browsing with undo closed tab feature.
Mouse gestures to aid navigation.
SuperSmart Acceleration.
Magic fill for forms.
Feed Reader.
Assign aliases to web pages and open them by typing the alias in the address bar.
Add Windows utilities such as notepad to your toolbar.
Full add and pop up blocking.
Web sniffer.
SuperDrag&Drop. Highlight text, drag it and Yahoo will do a search.
Screen capture with full control over what is copied.
Clean private data.
Add a skin.
Multi language.
Full support and forum.

And much, much more.

Thoroughly recommended.

We all need to take a screen dump or copy a selection from a web page at some time, don't we ?

I know I do, frequently, and I have come across two really great ways to capture a screen, or part of a screen.

UPDATE The new version 2 of the Maxthon browser (see this post and the Maxton web site similar manner to Screengrab.

First of all, I recommend these programs because they both work as add-ons in Firefox - the greatest browser around.

Screengrab sits as an icon in the status bar until required Clicking the icon enables saving the complete page or frame, the visible portion or a selection. In addition these three options may be copied rather than saved, so that the resulting image may be pasted into a graphics program.

Screengrab does just what it claims, and does it very well.

Snagit also runs as a Firefox add-on, but in addition there is a full all singing all dancing version.

The free add-on sits in its own toolbar, the full program runs as an application under Windows. Like Screengrab it enables copying of the complete page, a region or just text. The result may be saved to disk, sent by mail or simply copied to the clipboard for further processing. If the option is taken to save to disk the result opens in Snagits own graphic program for further processing before saving. Not Photoshop, but a very good attempt at providing elementary editing.

The full version has additional facilities, and includes full page copying including the preservation of links, scrolling window to PDF, time delay, an object, images only, text only and also the facility to record a screen video. Of course to get these extra facilities means that the program must be purchased, but at only US Dollars 39.95 for a single license it is money well spent.

I can thoroughly recommend both of these.

Now for something just a little bit different. I have long admired some of the css styling visible on the Internet, and have now come across a really superb way of making text stand out from the surrounding page.

Originated by Stu Nicholls of CSSPlay it really is great. Some simple css formatting produces a really nice rounded corner outline with a colored title block and normal text. Here is my own interpretation.

Copyright information. Stu Nicholls states that you may use this method on your web site without seeking his permission. However, a link back to CSSPlay would be appreciated.