webhelp - animations for show/hide Sidebar

diff --git a/xsl/webhelp/template/common/css/positioning.css b/xsl/webhelp/template/common/css/positioning.css
index f0f0538aece56403acb67e13160144f2f37f0ff2..1671103506d3b00cf55826309c8b431332e8dcc7 100644 (file)
--- a/xsl/webhelp/template/common/css/positioning.css
+++ b/xsl/webhelp/template/common/css/positioning.css
@@ -18,9 +18,7 @@ p, ul, ol, li { font: 10pt Verdana, Geneva, sans-serif; }
 h1 { font: 15pt Arial, Helvetica, geneva;
      color: black!important!;
 }
-h2 { font: normal 12pt Arial, Helvetica, geneva;
-       color: black!important;
-}
+h2 { font: normal 12pt Arial, Helvetica, geneva; }
 
 #header {
     background: url("../images/header-bg.png") scroll top left repeat-x #4d8c83;
@@ -36,12 +34,11 @@ h2 { font: normal 12pt Arial, Helvetica, geneva;
 }
 
 #header h1 {
-    color: #fff;
     margin-left: 310px;
     position: fixed;
     top: 10px;
     left: -15px;
-    color: black!important;
+    color: #404040 !important;
 }
 
 /*
@@ -134,7 +131,11 @@ p.breadcrumbs {
     text-align: right;
 }
 
-#content h1, #content h2 { color: black; }
+#content h1, #content h2 { 
+color: #404040 !important; 
+font-size: 170%;
+font-weight: normal;
+}
 .navfooter { bottom: 2%; }
 .highlight { background-color: #c5d3c3; }
 .highlightButton{ font-size: 0; }

diff --git a/xsl/webhelp/template/common/main.js b/xsl/webhelp/template/common/main.js
index cb71bd7d2ff28def3a403ed10975ea3fe26b9847..3a8b9a30683dad8dbce65d9cc18878cffe2493d0 100644 (file)
--- a/xsl/webhelp/template/common/main.js
+++ b/xsl/webhelp/template/common/main.js
@@ -12,6 +12,9 @@ var treesettings = {
     persist: "cookie"
 };
 
+//Turn ON and OFF the animations for Show/Hide Sidebar. Extend this to other anime as well if any.
+var noAnimations=false;
+
 $(document).ready(function() {
 
 
@@ -189,21 +192,33 @@ function syncToc() {
  */
 function showHideToc() {
     var showHideButton = $("#showHideButton");
-    var leftNavigation = $("#leftnavigation");
+    var leftNavigation = $("#sidebar");
     var content = $("#content");
+    var animeTime=75
 
     if (showHideButton != undefined && showHideButton.hasClass("pointLeft")) {
         //Hide TOC
         showHideButton.removeClass('pointLeft').addClass('pointRight');
-        content.css("margin", "125px 0 0 0");
-        leftNavigation.css("display", "none");
-        showHideButton.attr("title", "Show the TOC tree");
+       
+       if(noAnimations) {
+           leftNavigation.css("display", "none");
+           content.css("margin", "125px 0 0 0");
+       } else {
+            leftNavigation.hide(animeTime);
+            content.animate( { "margin-left": 0 }, animeTime);
+        }
+        showHideButton.attr("title", "Show Sidebar");
     } else {
         //Show the TOC
         showHideButton.removeClass('pointRight').addClass('pointLeft');
-        content.css("margin", "125px 0 0 280px");
-        leftNavigation.css("display", "block");
-        showHideButton.attr("title", "Hide the TOC Tree");
+       if(noAnimations) {
+            content.css("margin", "125px 0 0 280px");
+            leftNavigation.css("display", "block");
+       } else {
+            content.animate( { "margin-left": '280px' }, animeTime);
+            leftNavigation.show(animeTime);
+        }
+        showHideButton.attr("title", "Hide Sidebar");
     }
 }
 

diff --git a/xsl/webhelp/xsl/webhelp.xsl b/xsl/webhelp/xsl/webhelp.xsl
index 3ed09adff0a1a16e847ee3e1a2a2038052bd8ebe..527d9a6340d2160e7144914ef6760bb9893d9fe5 100644 (file)
--- a/xsl/webhelp/xsl/webhelp.xsl
+++ b/xsl/webhelp/xsl/webhelp.xsl
@@ -741,7 +741,7 @@ border: none; background: none; font-weight: none; color: none; }
                     </xsl:choose>
                 </xsl:variable>
 
-                <div>
+                <div id="sidebar"> <!--#sidebar id is used for showing and hiding the side bar -->
                     <div id="leftnavigation" style="padding-top:3px;">
                         <div id="tabs">
                             <ul>
@@ -933,8 +933,7 @@ border: none; background: none; font-weight: none; color: none; }
                     <head>
                      <link rel="shortcut icon" href="favicon.ico"/>
                      <meta http-equiv="Refresh" content="1; URL=content/{$default.topic}"/>
-                     <title><xsl:value-of select="//title[1]"/>&#160;
-                     </title>
+                     <title><xsl:value-of select="//title[1]"/>&#160;</title>
                     </head>
                     <body>
                      If not automatically redirected, click <a href="content/{$default.topic}">content/<xsl:value-of select="$default.topic"/></a>