Highlight section if we click to its #anchor, plus new linkdiv styling

1 files changed, 34 insertions, 0 deletions

diff --git a/stylesheets/mal2html.xsl.in b/stylesheets/mal2html.xsl.in
index 9dc3fb9f..38a6e8e4 100644
--- a/stylesheets/mal2html.xsl.in
+++ b/stylesheets/mal2html.xsl.in
@@ -55,6 +55,17 @@
 </xsl:template>
 
 <xsl:template name="mal2html.css.custom">
+<xsl:text>
+div.linkdiv { border: none; }
+div.linkdiv:hover {
+  border: none;
+  outline: solid 1px </xsl:text>
+    <xsl:value-of select="$theme.color.blue_background"/><xsl:text>;
+  background: -webkit-gradient(linear, left top, left 80, from(</xsl:text>
+    <xsl:value-of select="$theme.color.blue_background"/><xsl:text>), to(</xsl:text>
+    <xsl:value-of select="$theme.color.background"/><xsl:text>));
+}
+</xsl:text>
 <xsl:if test="$yelp.editor_mode">
 <xsl:text>
 div.head { margin: 0; }
@@ -76,4 +87,27 @@ div.version:hover { opacity: 1.0; }
 </xsl:if>
 </xsl:template>
 
+<xsl:template name="mal2html.page.head.extra">
+<script type="text/javascript" language="javascript" src="@DATADIR@/jquery-1.4.2.min.js"/>
+<script type="text/javascript" language="javascript" src="@DATADIR@/jquery-ui-1.8.custom.min.js"/>
+<script type="text/javascript" language="javascript">
+<xsl:text>
+$(document).ready (function () {
+  if (location.hash != '') {
+    $('#' + location.hash).find('div.header').css({
+      backgroundColor: '</xsl:text><xsl:value-of select="$theme.color.yellow_background"/><xsl:text>'
+    }).animate({
+      backgroundColor: '</xsl:text><xsl:value-of select="$theme.color.gray_background"/><xsl:text>'
+    }, 8000);
+    $('#' + location.hash).css({
+      backgroundColor: '</xsl:text><xsl:value-of select="$theme.color.yellow_background"/><xsl:text>'
+    }).animate({
+      backgroundColor: '</xsl:text><xsl:value-of select="$theme.color.background"/><xsl:text>'
+    }, 4000);
+  }
+});
+</xsl:text>
+</script>
+</xsl:template>
+
 </xsl:stylesheet>