SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: Style switcher JS doesnt work in IE7 and below

  1. Aug 8, 2012 02:52 #1
    Steve100
    Steve100 is offline
    SitePoint Addict
    Join Date
    Aug 2005
    Posts
    253
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Style switcher JS doesnt work in IE7 and below

    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:

    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');
		       //]]>
		  
	       }
	  }

		
	  
})
    Reply With Quote Reply With Quote
  2. Aug 8, 2012 04:56 #2
    Markdidj
    Markdidj is offline
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I think you should look in to execCommand. It'll do all that and more with a lot less code, and basic functions work on all browsers, even <IE9
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if
    Reply With Quote Reply With Quote
  3. Aug 8, 2012 14:46 #3
    felgall
    felgall is offline
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    15,819
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Markdidj View Post
    I think you should look in to execCommand. It'll do all that and more with a lot less code, and basic functions work on all browsers, even <IE9
    execCommand doesn't work on all browsers - it only works on IE.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">
    Reply With Quote Reply With Quote
  4. Aug 8, 2012 18:17 #4
    Markdidj
    Markdidj is offline
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    execCommand doesn't work on all browsers - it only works on IE.
    Don't you ever query things yourself before giving definative answers?
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Forum Rules