Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

adjustments to read styles from the currentStyle and to defer styling…

… to CSS by default.
  • Loading branch information...
commit 032e4b0ab0f7223926be25691b0f5d18fecdcacc 1 parent 29455f7
Grady Kuhnline authored May 19, 2011
94  jquery.textshadow.js
@@ -7,15 +7,11 @@
7 7
 	
8 8
 	// create a plugin
9 9
 	$.fn.textshadow = function(value, options) {
10  
-		var values = rtextshadow.exec(value),
11  
-			x, y, blur, color, opacity;
12  
-								
13  
-		// capture the values
14  
-		x = parseFloat(values[1]); // TODO: handle units
15  
-		y = parseFloat(values[2]); // TODO: handle units
16  
-		blur = values[3] !== undefined ? parseFloat(values[3]) : 0; // TODO: handle units
17  
-		color = values[4] !== undefined ? toHex(values[4]) : 'inherit';
18  
-		opacity = getAlpha(values[4]);
  10
+		if (typeof value === 'object' && !options) {
  11
+			options = value;
  12
+			value = null;
  13
+		}
  14
+		var skipStyle = options.skipStyle || true;
19 15
 		
20 16
 		// loop the found items
21 17
 		return this.each(function() {
@@ -30,32 +26,15 @@
30 26
 				allWords(this);				
31 27
 				$copy = $elem.find('.ui-text-shadow-copy');
32 28
 			}
33  
-			
34  
-			// style the elements
35  
-			$copy.css({
36  
-				color: color,
37  
-				left: (x - blur) + 'px',
38  
-				top: (y - blur) + 'px'
39  
-			});
40  
-			
41  
-			// try to prevent selection
42  
-			$copy.each(function() {
43  
-				var copy = this;
44  
-				copy.unselectable = "on";
45  
-				copy.onselectstart = function(){return false;};
46  
-				
47  
-				// add in the filters
48  
-				copy.style.filter = [
49  
-					filter + "Alpha(",
50  
-						"opacity=" + parseInt(opacity * 100, 10),
51  
-					") ",
52  
-					filter + "Blur(",
53  
-						"pixelRadius=" + blur,
54  
-					")"
55  
-				].join('');
56  
-			});
  29
+			if (!skipStyle)
  30
+				applyStyles($elem, $copy, value);
  31
+			}
57 32
 		});
58 33
 	};
  34
+	
  35
+	//---------------------
  36
+	// For splitting words
  37
+	//---------------------
59 38
 	// function for returning al words in an element as text nodes
60 39
 	function allWords(elem) {
61 40
 		$(elem).contents().each(function() {
@@ -125,7 +104,54 @@
125 104
 		copy.appendChild(document.createTextNode(text));
126 105
 		return shadow;
127 106
 	}
128  
-				
  107
+	
  108
+	//---------------------
  109
+	// For Applying Styles
  110
+	//---------------------
  111
+	function applyStyles($elem, $copy, value)  {
  112
+		$copy.each(function() {
  113
+			var copy = this,
  114
+				style = value || $elem[0].currentStyle['text-shadow'];
  115
+				$copy = $(copy);
  116
+			
  117
+			// don't apply style if we can't find one
  118
+			if (!style || style === 'none') {
  119
+				return true;
  120
+			}
  121
+			
  122
+			// parse the style
  123
+			var values = rtextshadow.exec(style),
  124
+				x, y, blur, color, opacity;
  125
+									
  126
+			// capture the values
  127
+			x = parseFloat(values[1]); // TODO: handle units
  128
+			y = parseFloat(values[2]); // TODO: handle units
  129
+			blur = values[3] !== undefined ? parseFloat(values[3]) : 0; // TODO: handle units
  130
+			color = values[4] !== undefined ? toHex(values[4]) : 'inherit';
  131
+			opacity = getAlpha(values[4]);
  132
+			
  133
+			// style the element
  134
+			$copy.css({
  135
+				color: color,
  136
+				left: (x - blur) + 'px',
  137
+				top: (y - blur) + 'px'
  138
+			});
  139
+			
  140
+			// add in the filters
  141
+			copy.style.filter = [
  142
+				filter + "Alpha(",
  143
+					"opacity=" + parseInt(opacity * 100, 10),
  144
+				") ",
  145
+				filter + "Blur(",
  146
+					"pixelRadius=" + blur,
  147
+				")"
  148
+			].join('');
  149
+		});
  150
+	}
  151
+	
  152
+	//---------------------
  153
+	// For Colors
  154
+	//---------------------
129 155
 	// http://haacked.com/archive/2009/12/29/convert-rgb-to-hex.aspx
130 156
 	function toHex(color) {
131 157
 		// handle rgb
54  readme.md
Source Rendered
@@ -2,23 +2,30 @@
2 2
 This library is a `text-shadow` polyfill for Internet Explorer 9 and below. It uses the Microsoft proprietary [blur filter](http://msdn.microsoft.com/en-us/library/ms532979(v=vs.85\).aspx) and the [alpha filter](http://msdn.microsoft.com/en-us/library/ms532967(v=vs.85\).aspx) along with layering to closely approximate `text-shadow`.
3 3
 
4 4
 * currently only pixel units are supported
5  
-* the color must be the last property
  5
+* cutting and pasting text will result in doubled text
  6
+* the creation of the extra DOM nodes could potentially be faster
6 7
 
7 8
 # Usage
8 9
 It is recommended to use this library with a feature detection library such as [Modernizr](http://www.modernizr.com/docs/#textshadow).
9 10
 
10 11
     if (!Modernizr.textshadow) {
  12
+      // [default] allowing the styles to be applied using CSS
  13
+      $('h1').textshadow();
  14
+
  15
+      // reading the current style automatically
  16
+      $('h1').textshadow({skipStyles: false});
  17
+      
11 18
       // normal
12 19
       $('h1').textshadow('2px 2px 2px #000');
13 20
       
14 21
       // multiple shadows
15  
-      $('h1.cool').textshadow('2px 2px 2px #0f0, 4px 4px 2px #f00, 6px 6px 2px #00f');
  22
+      $('h1').textshadow('2px 2px 2px #0f0, 4px 4px 2px #f00, 6px 6px 2px #00f');
16 23
       
17 24
       // rgba
18  
-      $('h2').textshadow('2px 2px 2px rgba(0, 0, 0, 0.5)');
  25
+      $('h1').textshadow('2px 2px 2px rgba(0, 0, 0, 0.5)');
19 26
       
20 27
       // hsla
21  
-      $('h3').textshadow('2px 2px 2px rgba(0, 0, 0, 0.5)');
  28
+      $('h1').textshadow('2px 2px 2px hsla(0, 0, 0, 0.5)');
22 29
     }
23 30
     
24 31
 There is a corresponding css file that provides base styles for the new elements used. It must be included in the document as well.
@@ -32,11 +39,46 @@ There is a corresponding css file that provides base styles for the new elements
32 39
     </head>
33 40
     <body>
34 41
       ...
35  
-      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.js"></script>
  42
+      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
  43
+      <script src="jquery.textshadow.js"></script>
  44
+      <script>
  45
+      if (!Modernizr.textshadow) {
  46
+        $('h1').textshadow();
  47
+      }
  48
+      </script>
  49
+    </body>
  50
+    </html>
  51
+
  52
+For performance and flexibility reasons, its probably best to use CSS rather than JS to apply the shadow styles. Particularly when there are hover states or nested elements that need a different shadow applied. Overall the browser will perform better applying the filter properties from CSS rather than from JavaScript.
  53
+
  54
+    <!doctype html>
  55
+    <html>
  56
+    <head>
  57
+      ...
  58
+
  59
+      <style>
  60
+        h1 {
  61
+          text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.5); /* left top blur color */
  62
+        }
  63
+        h1 .ui-text-shadow-copy {
  64
+          color: #000; /* color */
  65
+          filter:
  66
+            progid:DXImageTransform.Microsoft.Alpha(opacity=50) /* RGBA alpha */
  67
+            progid:DXImageTransform.Microsoft.Blur(makeShadow=false,pixelRadius=2); /* blue */
  68
+          left: 1px; /* left - blur */
  69
+          top: 1px; /* top - blur */
  70
+        }
  71
+      </style>
  72
+      <link rel="stylesheet" href="jquery.textshadow.css">
  73
+      <script src="js/libs/modernizr-1.7.min.js"></script>
  74
+    </head>
  75
+    <body>
  76
+      ...
  77
+      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.js"></script>
36 78
       <script src="jquery.textshadow.js"></script>
37 79
       <script>
38 80
       if (!Modernizr.textshadow) {
39  
-        $('h1').textshadow('2px 2px 2px #000');
  81
+        $('h1').textshadow();
40 82
       }
41 83
       </script>
42 84
     </body>

0 notes on commit 032e4b0

Please sign in to comment.
Something went wrong with that request. Please try again.