Umbraco template issues - asp.net

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><xsl:value-of select="data[#alias='pageBody']" disable-output-escaping="yes" /></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)