enhanced scrollable cursor functionality

ghepting · Jul 31, 2013 · caa1014 · caa1014
1 parent fdfb3eb
commit caa1014
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 10 deletions.
diff --git a/index.html b/index.html
@@ -15,7 +15,8 @@
 	body {margin:0; padding:20px; font-family: 'Average Sans', sans-serif; font-size:16px; font-weight:normal; line-height:1.5; background:#589283; color:#fff; text-shadow:2px 2px 2px #3F6558;min-width:540px;}
 	a, a:link, a:visited {color:#fff;text-decoration: none;border-bottom:1px dashed #3F6558;-webkit-transition:border-color 0.3s ease-in;}
 	a:hover, a:focus {border-bottom:1px dashed #fff;}
-	h1, h2, h3 {text-align:center; padding: 0 0.1em;}
+	h1, h2, h3, p {text-align:center;}
+	h1, h2, h3 {padding: 0 0.1em;}
 	h1[data-scrollable] { line-height: 1.85; }
 	.heading {margin-top:0.25em;font-family:'Pacifico', sans-serif; text-shadow:0.1em 0.1em 2px #3F6558;}
 	.subheading {font-weight:normal;}
@@ -49,9 +50,10 @@
 </head>
 <body>
 <h1 class="heading responsive" data-compression="8">Responsive Text</h1>
-<h2 class="subheading responsive" data-compression="25" data-min="14" data-max="40">A jQuery plugin to set font sizes responsively based on its' container width. Use responsiveText.js to have scalable headlines, build <a href="https://github.com/ghepting/jquery-responsive-tables">responsive tables</a> and more!</h2>
+<h2 class="subheading responsive" data-compression="25" data-min="14" data-max="40">A jQuery plugin to set font sizes responsively based on its' container width. Use jQuery responsiveText to have scalable headlines, build <a href="https://github.com/ghepting/jquery-responsive-tables">responsive tables</a> and more!</h2>
 <h3 class="button responsive" data-compression="25" data-min="30" data-max="50"><a href="https://github.com/ghepting/jquery-responsive-text">Download on Github <span class="download"></span></a></h3>
 <h1 class="heading responsive" data-scrollable="1">Scrollable Responsive Text</h1>
+<p class="responsive" data-scrollable="1" data-max="80">Scrollable Responsive Text</p>
 <div class="devices">
 	<div class="thunderbolt device">
 		<div class="case">

diff --git a/jquery.responsiveText.coffee b/jquery.responsiveText.coffee
@@ -49,15 +49,17 @@ class ResponsiveText
       'overflow': 'hidden'
       'text-overflow': 'ellipsis'
       'white-space': 'nowrap'
-      'cursor': 'e-resize'
-    $(@el).hover (=>
+    $(@el).hover =>
       @difference = @el.scrollWidth - $(@el).width()
       @scrollSpeed = @difference if @difference > @scrollSpeed
       if @difference > 0
+        $(@el).css('cursor', 'e-resize')
         $(@el).stop().animate
           "text-indent": -@difference
         , @scrollSpeed
-    ), =>
+        , =>
+          $(@el).css('cursor', 'text')
+    , =>
       $(@el).stop().animate
         "text-indent": 0
       , @scrollReset

diff --git a/jquery.responsiveText.js b/jquery.responsiveText.js