Hi i have built a style switcher which allows a user to preview font, background, size and color properties and update website text accordingly. T This style works well in all browsers except IE7 and below. In IE7 and below the preview part doesnt work - but the website text does update!
Can anyone spot why? here is the code:
$(document).ready(function(){
/* DEFAULT PREVIEW WHEN PAGE LOADS OR IS REFRESHED */
var type = $('#type').val();
/*$('div#preview p#text').css('fontFamily', type);*/
/* remove all classes first */
$('div#preview p#text').removeClass('Verdana');
$('div#preview p#text').removeClass('Arial');
$('div#preview p#text').removeClass('TimesNewRoman');
$('div#preview p#text').removeClass('Georgia');
$('div#preview p#text').removeClass('ComicSansMS');
/* add classes to overwrite !important in _switcher */
if (type == "Verdana") {
$('div#preview p#text').addClass('Verdana');
} else if (type == "Arial") {
$('div#preview p#text').addClass('Arial');
} else if (type == "Times New Roman") {
$('div#preview p#text').addClass('TimesNewRoman');
} else if (type == "Georgia") {
$('div#preview p#text').addClass('Georgia');
} else if (type == "Comic Sans MS") {
$('div#preview p#text').addClass('ComicSansMS');
}
var size = $('#size').val();
/*$('div#preview p#text').css('fontSize', size);*/
/* remove all classes first */
$('div#preview p#text').removeClass('small');
$('div#preview p#text').removeClass('medium');
$('div#preview p#text').removeClass('large');
$('div#preview p#text').removeClass('x-large');
$('div#preview p#text').removeClass('xx-large');
$('div#preview p#text').removeClass('_12px');
$('div#preview p#text').removeClass('_16px');
$('div#preview p#text').removeClass('_20px');
$('div#preview p#text').removeClass('_24px');
$('div#preview p#text').removeClass('_28px');
$('div#preview p#text').removeClass('_32px');
/* add classes to overwrite !important in _switcher */
if (type == "small") {
$('div#preview p#text').addClass('small');
} else if (type == "medium") {
$('div#preview p#text').addClass('medium');
} else if (type == "large") {
$('div#preview p#text').addClass('large');
} else if (type == "x-large") {
$('div#preview p#text').addClass('x-large');
} else if (type == "xx-large") {
$('div#preview p#text').addClass('xx-large');
} else if (type == "12px") {
$('div#preview p#text').addClass('_12px');
} else if (type == "16px") {
$('div#preview p#text').addClass('_16px');
} else if (type == "20px") {
$('div#preview p#text').addClass('_20px');
} else if (type == "24px") {
$('div#preview p#text').addClass('_24px');
} else if (type == "28px") {
$('div#preview p#text').addClass('_28px');
} else if (type == "32px") {
$('div#preview p#text').addClass('_32px');
}
var colour = $('#colour').val();
/*$('div#preview p#text').css('color', colour);*/
/* remove all classes first */
$('div#preview p#text').removeClass('color-black');
$('div#preview p#text').removeClass('color-silver');
$('div#preview p#text').removeClass('color-grey');
$('div#preview p#text').removeClass('color-white');
$('div#preview p#text').removeClass('color-maroon');
$('div#preview p#text').removeClass('color-red');
$('div#preview p#text').removeClass('color-purple');
$('div#preview p#text').removeClass('color-fuchsia');
$('div#preview p#text').removeClass('color-green');
$('div#preview p#text').removeClass('color-lime');
$('div#preview p#text').removeClass('color-olive');
$('div#preview p#text').removeClass('color-yellow');
$('div#preview p#text').removeClass('color-navy');
$('div#preview p#text').removeClass('color-blue');
$('div#preview p#text').removeClass('color-teal');
$('div#preview p#text').removeClass('color-aqua');
/* add classes for colour to overwrite !important in _switcher */
if (colour == "#000000") {
$('div#preview p#text').addClass('color-black');
} else if (colour == "#C0C0C0") {
$('div#preview p#text').addClass('color-silver');
} else if (colour == "#808080") {
$('div#preview p#text').addClass('color-grey');
} else if (colour == "#FFFFFF") {
$('div#preview p#text').addClass('color-white');
} else if (colour == "#800000") {
$('div#preview p#text').addClass('color-maroon');
} else if (colour == "#FF0000") {
$('div#preview p#text').addClass('color-red');
} else if (colour == "#800080") {
$('div#preview p#text').addClass('color-purple');
} else if (colour == "#FF00FF") {
$('div#preview p#text').addClass('color-fuchsia');
} else if (colour == "#008000") {
$('div#preview p#text').addClass('color-green');
} else if (colour == "#00FF00") {
$('div#preview p#text').addClass('color-lime');
} else if (colour == "#6B8E23") {
$('div#preview p#text').addClass('color-olive');
} else if (colour == "#FFFF00") {
$('div#preview p#text').addClass('color-yellow');
} else if (colour == "#000080") {
$('div#preview p#text').addClass('color-navy');
} else if (colour == "#0000FF") {
$('div#preview p#text').addClass('color-blue');
} else if (colour == "#008080") {
$('div#preview p#text').addClass('color-teal');
} else if (colour == "#00FFFF") {
$('div#preview p#text').addClass('color-aqua');
}
var background = $('#background').val();
/* remove all classes first */
$('div#preview p#text').removeClass('white');
$('div#preview p#text').removeClass('beige');
$('div#preview p#text').removeClass('yellow');
$('div#preview p#text').removeClass('rose');
$('div#preview p#text').removeClass('lavender');
$('div#preview p#text').removeClass('turquoise');
$('div#preview p#text').removeClass('green');
$('div#preview p#text').removeClass('grey');
$('div#preview p#text').removeClass('black');
$('div#preview p#text').removeClass('blue');
/* add classes for background to overwrite !important in _switcher */
if (background == "#FFFFFF") {
$('div#preview p#text').addClass('white');
} else if (background == "#FFF7EF") {
$('div#preview p#text').addClass('beige');
} else if (background == "#FFFFDE") {
$('div#preview p#text').addClass('yellow');
} else if (background == "#FFEBE7") {
$('div#preview p#text').addClass('rose');
} else if (background == "#EBEBFF") {
$('div#preview p#text').addClass('lavender');
} else if (background == "#DDFFFF") {
$('div#preview p#text').addClass('turquoise');
} else if (background == "#E3FFE3") {
$('div#preview p#text').addClass('green');
} else if (background == "#EEEEEE") {
$('div#preview p#text').addClass('grey');
} else if (background == "#000000") {
$('div#preview p#text').addClass('black');
} else if (background == "#0000FF") {
$('div#preview p#text').addClass('blue');
}
/* check if colours are the same */
warning();
/*----------------------------------------------------------------------------------------*/
/* UPDATE PREVIEW WHEN USER CHANGES PREFERENCES */
/* when user changes type */
$('#type').change(function() {
var type = $('#type').val();
/*$('div#preview p#text').css('fontFamily', type);*/
/* remove all classes first */
$('div#preview p#text').removeClass('Verdana');
$('div#preview p#text').removeClass('Arial');
$('div#preview p#text').removeClass('TimesNewRoman');
$('div#preview p#text').removeClass('Georgia');
$('div#preview p#text').removeClass('ComicSansMS');
/* add classes to overwrite !important in _switcher */
if (type == "Verdana") {
$('div#preview p#text').addClass('Verdana');
} else if (type == "Arial") {
$('div#preview p#text').addClass('Arial');
} else if (type == "Times New Roman") {
$('div#preview p#text').addClass('TimesNewRoman');
} else if (type == "Georgia") {
$('div#preview p#text').addClass('Georgia');
} else if (type == "Comic Sans MS") {
$('div#preview p#text').addClass('ComicSansMS');
}
})
/* when user changes size */
$('#size').change(function() {
var size = $('#size').val();
/*$('div#preview p#text').css('fontSize', size);*/
/* remove all classes first */
$('div#preview p#text').removeClass('small');
$('div#preview p#text').removeClass('medium');
$('div#preview p#text').removeClass('large');
$('div#preview p#text').removeClass('x-large');
$('div#preview p#text').removeClass('xx-large');
$('div#preview p#text').removeClass('_12px');
$('div#preview p#text').removeClass('_16px');
$('div#preview p#text').removeClass('_20px');
$('div#preview p#text').removeClass('_24px');
$('div#preview p#text').removeClass('_28px');
$('div#preview p#text').removeClass('_32px');
/* add classes to overwrite !important in _switcher */
if (size == "small") {
$('div#preview p#text').addClass('small');
} else if (size == "medium") {
$('div#preview p#text').addClass('medium');
} else if (size == "large") {
$('div#preview p#text').addClass('large');
} else if (size == "x-large") {
$('div#preview p#text').addClass('x-large');
} else if (size == "xx-large") {
$('div#preview p#text').addClass('xx-large');
} else if (size == "12px") {
$('div#preview p#text').addClass('_12px');
} else if (size == "16px") {
$('div#preview p#text').addClass('_16px');
} else if (size == "20px") {
$('div#preview p#text').addClass('_20px');
} else if (size == "24px") {
$('div#preview p#text').addClass('_24px');
} else if (size == "28px") {
$('div#preview p#text').addClass('_28px');
} else if (size == "32px") {
$('div#preview p#text').addClass('_32px');
}
})
/* when user changes colour dropdown */
$('#colour').change(function() {
/* get font and background colour to compare */
var colour = $('#colour').val();
var background = $('#background').val();
/* change colour */
/*$('div#preview p#text').css('color', colour);*/
/* remove all classes first */
$('div#preview p#text').removeClass('color-black');
$('div#preview p#text').removeClass('color-silver');
$('div#preview p#text').removeClass('color-grey');
$('div#preview p#text').removeClass('color-white');
$('div#preview p#text').removeClass('color-maroon');
$('div#preview p#text').removeClass('color-red');
$('div#preview p#text').removeClass('color-purple');
$('div#preview p#text').removeClass('color-fuchsia');
$('div#preview p#text').removeClass('color-green');
$('div#preview p#text').removeClass('color-lime');
$('div#preview p#text').removeClass('color-olive');
$('div#preview p#text').removeClass('color-yellow');
$('div#preview p#text').removeClass('color-navy');
$('div#preview p#text').removeClass('color-blue');
$('div#preview p#text').removeClass('color-teal');
$('div#preview p#text').removeClass('color-aqua');
/* add classes for colour to overwrite !important in _switcher */
if (colour == "#000000") {
$('div#preview p#text').addClass('color-black');
} else if (colour == "#C0C0C0") {
$('div#preview p#text').addClass('color-silver');
} else if (colour == "#808080") {
$('div#preview p#text').addClass('color-grey');
} else if (colour == "#FFFFFF") {
$('div#preview p#text').addClass('color-white');
} else if (colour == "#800000") {
$('div#preview p#text').addClass('color-maroon');
} else if (colour == "#FF0000") {
$('div#preview p#text').addClass('color-red');
} else if (colour == "#800080") {
$('div#preview p#text').addClass('color-purple');
} else if (colour == "#FF00FF") {
$('div#preview p#text').addClass('color-fuchsia');
} else if (colour == "#008000") {
$('div#preview p#text').addClass('color-green');
} else if (colour == "#00FF00") {
$('div#preview p#text').addClass('color-lime');
} else if (colour == "#6B8E23") {
$('div#preview p#text').addClass('color-olive');
} else if (colour == "#FFFF00") {
$('div#preview p#text').addClass('color-yellow');
} else if (colour == "#000080") {
$('div#preview p#text').addClass('color-navy');
} else if (colour == "#0000FF") {
$('div#preview p#text').addClass('color-blue');
} else if (colour == "#008080") {
$('div#preview p#text').addClass('color-teal');
} else if (colour == "#00FFFF") {
$('div#preview p#text').addClass('color-aqual');
}
/* check if colours are the same */
warning();
})
/* when user changes background dropdown */
$('#background').change(function() {
/* get font and background colour to compare */
var colour = $('#colour').val();
var background = $('#background').val();
/* remove all classes first */
$('div#preview p#text').removeClass('white');
$('div#preview p#text').removeClass('beige');
$('div#preview p#text').removeClass('yellow');
$('div#preview p#text').removeClass('rose');
$('div#preview p#text').removeClass('lavender');
$('div#preview p#text').removeClass('turquoise');
$('div#preview p#text').removeClass('green');
$('div#preview p#text').removeClass('grey');
$('div#preview p#text').removeClass('black');
$('div#preview p#text').removeClass('blue');
/* add classes for background to overwrite !important in _switcher */
if (background == "#FFFFFF") {
$('div#preview p#text').addClass('white');
} else if (background == "#FFF7EF") {
$('div#preview p#text').addClass('beige');
} else if (background == "#FFFFDE") {
$('div#preview p#text').addClass('yellow');
} else if (background == "#FFEBE7") {
$('div#preview p#text').addClass('rose');
} else if (background == "#EBEBFF") {
$('div#preview p#text').addClass('lavender');
} else if (background == "#DDFFFF") {
$('div#preview p#text').addClass('turquoise');
} else if (background == "#E3FFE3") {
$('div#preview p#text').addClass('green');
} else if (background == "#EEEEEE") {
$('div#preview p#text').addClass('grey');
} else if (background == "#000000") {
$('div#preview p#text').addClass('black');
} else if (background == "#0000FF") {
$('div#preview p#text').addClass('blue');
}
/* check if colours are the same */
warning();
})
/*----------------------------------------------------------------------------------------*/
/* WARN USER WHEN COLOUR AND BACKGROUND ARE THE SAME */
function warning() {
/* remove any previous warning */
$('p.warning').empty();
/* remove previosu disabled attribute from submit */
$('#submit').attr('disabled', '');
var colour = $('#colour').val();
var background = $('#background').val();
/* if colour and background are the same */
if (colour == background) {
//<![CDATA[
/* show warning */
$('p.warning').append('<p>You have selected the same font and background colour so text will not be visible. You must select a different font and background colour before you can save your accessibility preferences.</p>');
/* disabled submit */
$('#submit').attr('disabled', 'disabled');
//]]>
}
}
})