Sign in Register
Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Amar 11 posts 41 karma points
    Jul 29, 2009 @ 19:19
    Amar
    0

    How to use javascript in xslt

    Hi Team,

    I have used "List subpages by level" template to create a Navigation bar. I have used css to convert the  <Li >  elements to horizontal navigation bar. I have given background color to the navigation bar. Now i have a requirement where i need to change the color of the selected tab in the navigation bar. I am able to change the color on mouse hover event but not able to change is completely.

    Please suggest me the solution. I think we could do something with javascript. If yes please copy the code for me or suggest some references.

     

     

     

    Copy Link
  • Simon Justesen 436 posts 203 karma points
    Jul 29, 2009 @ 19:40
    Simon Justesen
    1

    Have a look at this: http://our.umbraco.org/wiki/reference/xslt/extend-your-xslt-with-custom-functions

    Instead of using C#, you can use Javascript if you wish.

    Copy Link
  • Darren Ferguson 1022 posts 3258 karma points MVP c-trib
    Jul 29, 2009 @ 21:39
    Darren Ferguson
    0

    I don't believe that you can use javascript as of Umbraco 4

    Copy Link
  • Thomas Höhler 1237 posts 1709 karma points MVP
    Jul 29, 2009 @ 22:46
    Thomas Höhler
    0

    You can, e.g. I placed the following code into my search xslt for paging support:

    <script type="text/javascript">
    var content = [
    <xsl:for-each select="$results/SearchResult">
      <xsl:sort select="@createDate" order="descending"/>
     ['<xsl:value-of select="@text" />','<xsl:value-of select="@linkUrl" />']
    <xsl:if test="position() != last()">,</xsl:if>
      </xsl:for-each>
    ];

    <xsl:text disable-output-escaping="yes">
      function pageselectCallback(page_index, jq){
                    var items_per_page = 5;
                    var max_elem = Math.min((page_index+1) * 5, content.length);
                    var newcontent = '';
                    
                    for(var i=page_index*items_per_page;i &lt; max_elem; i++)
                    {
                        newcontent += '&lt;li&gt;' + content[i][0] + '&lt;/li&gt;';
                    }
                    
                    $('#SearchPagerContent').html(newcontent);
                    
                    return false;
                }
    </xsl:text>

          $("#SearchPager").pagination(content.length, {
         items_per_page:5, 
            callback:pageselectCallback
       });

    </script>

    hth,

    Thomas

    Copy Link
  • Thomas Höhler 1237 posts 1709 karma points MVP
    Jul 29, 2009 @ 22:50
    Thomas Höhler
    0

    But to have the active li marked you can do this via css and classes for the li. Or just look into the http://our.umbraco.org/projects/cogworks---flexible-navigation project

    Thomas

    Copy Link
  • wolulcmit 357 posts 693 karma points
    Jul 29, 2009 @ 22:52
    wolulcmit
    0

    Something like this?

    <style  media="all" type="text/css" >
    #nav-main li{float:left; display:block; padding:0px; margin:0px; list-style:none; border-right:1px dotted #333;}
    #nav-main li a{ display:block; float:left; background:#ccc; color:#000; padding:20px; }
    #nav-main li a:hover{background:#000; color:#fff}
    </style>

    <ul id="nav-main">
    <li><a href="http://google.com" >Google</a></li>
    <li><a href="http://yahoo.com" >Yahoo</a></li>
    <li><a href="http://bbc.co.uk" >BBC</a></li>
    </ul>

    Copy Link

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies