Skin/theme swap

Theme-swap functionality will be done via a better-looking ` at the top of the page, but for right now, it's just thrown on the button. The theme preference should persist through page refreshes through the use of cookies.

I'm going to do five different themes, each in two different sizes, since the site is very bad in 800x600 and still quite bad in 1024x768.

Let me know if it breaks or simply doesn't work. I've noticed a bug that happens once in a blue moon, but I think that's because the browser might be doing parallel work and one script gets too far ahead of the other. I'll have to research it more, but I think it's good enough right now to ask for opinions.

The page will eventually display via for those that don't have JavaScript turned on but for right now, it'll just display a message that says:


Please turn JavaScript on!

How it works:



• Non-JavaScript page is displayed with

• If JavaScript is enabled, it loads the theme-preference from cookies.

• JavaScript then applies the preferred theme via AJAX fetching the appropriate theme (skin[x].html) and the content of the page ([page_name.html]).

The code isn't perfect yet, and I'll definitely have to remove the use of another person's image as the background for the second skin, but it's almost done. About half of the code deals with merely re-positioning the elements when the window is resized. For the sake of brevity, some code is not shown. I apologize for its length.

index.html:

 
window.onresize = function() { setContentPositions(); setJSMenuPositions(); }
$('html').addClass('js');
 

 
$().ready(function() {

getThemeInfo();

AJAX_LoadResponseIntoElement("mybody", "skin1.txt", function() {
  AJAX_LoadResponseIntoElement("contentdiv", "index.txt", initPage);
  });

if (themeSelect>1) { themeSwapNoInc();}

});

funcs.js:

``
function getThemeInfo()
{
themeSelect=checkCookie();
}

function themeSwap()
{
themeSelect++;
if (themeSelect>2 || themeSelect y_lbound) {

This may just be me nit picking.

But using this approach I can see getting very very messy.
If you decide to have say 40 theme's. That's a heck of a lot of javascript!
and especially if you decide that you are going to support things like mobile or tablet.

You are changing the look of your page using javascript.
You would be better off in my opinion to have:

in your html have

  Theme One
  Theme Two

then in your javascript have

$('#theme').change(function(){
    var link = '..\css\themes\{name}.css';
    link = link.replace('{name}', $(this).val());
    $('#themesheet').attr('href', link);   
});

This way you are only changing the css sheet instead of coding in the style changes for every theme.

StackExchange Code Review Q#403, answer score: 6