Better solution to greying and hovering pager buttons.

diff --git a/root/css/style.css b/root/css/style.css
index d7c089f..d575cbb 100644 (file)
--- a/root/css/style.css
+++ b/root/css/style.css
@@ -72,6 +72,12 @@ div.pager_right_button {
   margin-left: 10px;
   background: transparent url('../images/button_right_28.png') no-repeat;
 }
+div.pager_right_button.greyed_out, div.pager_right_button.greyed_out:hover {
+    opacity: 0.25;
+}
+div.pager_left_button.greyed_out, div.pager_left_button.greyed_out:hover {
+    opacity: 0.25;
+}
 #topbanner {
        width: 100%;
 }

diff --git a/root/js/componentload.js b/root/js/componentload.js
index 42be5f6..e9cfb2f 100644 (file)
--- a/root/js/componentload.js
+++ b/root/js/componentload.js
@@ -73,17 +73,17 @@ function load_textinfo() {
 }      
 
 function show_stemmapager () {
-      $('.pager_left_button').unbind('click').css( 'opacity', '0.5' );
-      $('.pager_right_button').unbind('click').css( 'opacity', '0.5' );
+      $('.pager_left_button').unbind('click').addClass( 'greyed_out' );
+      $('.pager_right_button').unbind('click').addClass( 'greyed_out' );
       if( selectedStemmaID > 0 ) {
               $('.pager_left_button').click( function () {
                       load_stemma( selectedStemmaID - 1 );
-              }).css( 'opacity' , '1.0' );
+              }).removeClass( 'greyed_out' );
       }       
       if( selectedStemmaID + 1 < stemmata.length ) {
               $('.pager_right_button').click( function () {
                       load_stemma( selectedStemmaID + 1 );
-              }).css( 'opacity' , '1.0' );
+              }).removeClass( 'greyed_out' );
       }
 }