SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Addict
    Join Date
    Aug 2005
    Posts
    254
    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');
    		       //]]>
    		  
    	       }
    	  }
    
    		
    	  
    })

  2. #2
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ 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

  3. #3
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,861
    Mentioned
    25 Post(s)
    Tagged
    1 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="^$">

  4. #4
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ 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


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
  •