Umbraco template issues

Question

Hi fellow Umbraco users,

I'm currently building my first umbraco website and since I'm completely new to umbraco I've already ran into a problem which I'm sure is pretty straight-forward to do.

That said, I'm by no means a beginner when it comes to building sites that run on a (open source) CMS as I've been using Joomla! since it was called Mambo.

Anyway, the site I'm building is here: my site

What I want to do is to have some content in the white box that changes when you mouseover/hover one of the menu items. Also that content has to stay "active" when you've clicked on a link (i.e. if you click on "Profile" I need to highlight the Profile menu item with the gray color and the white boxs content needs to be what would be related to the Profile menu item.

How do I go about this? What would be the best practice when it comes to showing multiple content on a site? I've watched the video about multiple Content Place Holders, but I never really got it to work. I can't get a page to display in the NavigationPlaceHolder (the placeholder I put in the white box), but thats because the actual page is Frontpage.aspx and not WhateverIsInThenavigationPlaceHolder.aspx. If I go to the mysite.dk/WhateverIsInTheNavigationPlaceHolder.aspx it shows up fine.

What have I missed here? :)

Thanks in advance! If my question is not clear in some ways, please tell me and I will try to explain it better.

All the best,

Bo

Answer 1

It's a little confusing what you're asking with seeing your implementation, but here is a shot at what I might do:

Rather than trying to do this through the templating system, I'm pretty sure you want to create a user control to add to your page template. (Add it in the template as a macro.) I would use and XSLT control here with this as the basic output:

<xsl:variable name="subContentNodes" select="$currentPage/node[@nodeTypeAlias='yourContentNodeType']">

<ul id="content-items-nav">
    <xsl:for-each select="$subContentNodes">
        <li><a href="#subnode-{@id}"><xsl:value-of select="data[@alias='pageBody']" disable-output-escaping="yes" /></a></li>
    </xsl:for-each>
</ul>

and then later

<div id="content-items">
    <xsl:for-each select="$subContentNodes">
        <div id="subnode-{@id}"><xsl:value-of select="data[@alias='pageBody']" disable-output-escaping="yes" /></div>
    </xsl:for-each>
</div>

It looks like you're already including jQuery on your page, so I would then add a script to handle the clicking:

$("#content-items-nav a").bind("click", function(e) {
    e.preventDefault();
    var contentDiv = $(this).attr('href');
    $("#content-items div").hide();
    $(contentDiv).show();
    $(this).addClass("active");
});

Hope that helps you some. I found there is quite a learning curve to umbraco, but it is quite powerful when you get into it.

(Note: I haven't syntax checked any of the code)