The DotNetNuke Control Panel is generally positioned at the top of a page (although it can be positioned anywhere). It is displayed if a user has administrative rights to a page. After the initial layout of a page, the Control Panel is not often needed, but it continues to take up valuable screen real-estate. I saw a recent discussion on this issue in the ASP.net forums, and decided that it presents an interesting U.I. challenge. (Turns out it really isn’t much of a challenge.)

At Bryan Andrews’ suggestion, I had actually developed a script modeled after the Windows Terminal Services Client collapsible admin bar some months back. The bar is visible at the top, but rolls up after a few seconds. I posted the script to the Core Team forum, but unfortunately, there was no interest.

Anyway, getting back to the Control Panel solution. I like the Terminal Services client concept and modeled my solution after it. One of my design goals was to keep things really simple and not require any external images or the like.

My solution works as follows:

1) My script block needs to be inserted into any DNN skin, replacing the existing element with id=”ControlPanel”

2) It renders the Control Panel at the top of the page (coordinates 0,0). The Control Panel is initially hidden and is represented by a 5px tall red bar.

3) Move your mouse over the bar and the Control Panel is displayed over page content. This is an important difference from the standard Control Panel as the page content remains in place and does not scroll down.

4) When the mouse cursors is moved over the red bar one more time, the Control Panel smoothly rolls up.

Here is the code. Just paste it into a DNN skin ascx file, taking care to replace the element with id=”ControlPanel” that should already be present in the file.

<!-- Begin collapsible Control panel code -->

<script language="Javascript">

var rollUp = false;
function collapseElement(objId)
{
   o = document.getElementById(objId);
   h = parseInt(o.style.height);
   if (h > 6)
       {
           h--;
           o.style.height= h + "px";
           window.setTimeout("collapseElement('" + objId + "')",5);
       }
   else
       rollUp = false;
}

<!-- End collapsible control panel code -->

nokiko asks:

I am working on some new containers and dnn enhancements. I want to know in my container which moduleid is loaded so lets say i have an ascx container and in there i have the following:

<div id=''mod_<% functiontogetmoduleidhere'">rest of container ...</div>

Is there a function or another way that in an ascx container I would know which moduleid is loaded in there.

So that way lets say i have 2 modules one one page and i want the ascx container to render

<div id="mod_36">content here</div>
<div id="mod_37">content here</div>

i would need this to imge replace techniques on my h3 tags for instance

#mod_36 h3 { background:url(announcements.gif) }
#mod_37 h3 { background:url(events.gif)}

Nik’s answer:

That’s an excellent question nokiko. In DotNetNuke 3.x, the Container class has a public, static method called GetPortalModuleBase(). This method requires one parameter — a usercontrol that is present in the container. With this knowledge, it is easy to figure out a solution. For example, most of the default DNN containers have a title defined using: <dnn:TITLE runat="server" id="dnnTITLE" />. In any of these containers, you can add the following line to display the ModuleId of the module present in the container:

<%= DotNetNuke.UI.Containers.Container.GetPortalModuleBase(dnnTitle).ModuleId.ToString() %>

You can also use the same technique to display any other Portal, Tab, Module or User property to customize the appearance of containers dynamically:

<%= DotNetNuke.UI.Containers.Container.GetPortalModuleBase(dnnTitle).PortalSettings.PortalName %>
<%= DotNetNuke.UI.Containers.Container.GetPortalModuleBase(dnnTitle).PortalSettings.ActiveTab.TabName %>
<%= DotNetNuke.UI.Containers.Container.GetPortalModuleBase(dnnTitle).ModuleConfiguration.ModuleTitle %>
<%= DotNetNuke.UI.Containers.Container.GetPortalModuleBase(dnnTitle).UserInfo.FirstName %>

If you don’t have a need for the DNN Title control in your container, that’s OK. You can add it anyway with an attribute of “Visible=false”. It is possible to achieve this result without using any skin control, however it requires a little more code and is not worth the effort in most situations.

I have been a user of Groove products since its early beta. Mostly because of my Lotus Notes roots and my firm belief that Ray Ozzie is one of the few true visionaries in the software industry. It was a pleasant surprise when an MSN SMS a few minutes ago notified me that Microsoft is going to acquire Groove Networks (story).

This is fantastic news. Groove has always been strong on collaboration, and now I expect there will be better integration with .Net. I love it when my favorite technologies converge.

How do you create a page that allows a user to select the font size?

Nik’s answer:

You can do this using CSS or Javascript or a combination of the two. Here is some sample HTML code with embedded CSS that demonstrates how it is done:

<html>
<style>

.xsmall {  font-size: 0.5em; }
.medium  {  font-size: 1.0em; }
.large   {  font-size: 1.5em; }
.xlarge  {  font-size: 2.0em; }

.fauxLink {  text-decoration: underline; cursor: hand; }

</style>

<body>
<p>This code demonstrates how to make a web page with user selectable font sizes. The trick is to use CSS with relative point sizes.</p>
<p>You can set the "font-size" CSS attribute to an "em" value. This is the value of the character box for a given font (i.e. the "M" character). Using an em value sets the font size to a relative value. For example, 1.3em is the same as 130%.</p> <p>
<span class="fauxLink" onClick="document.body.className='xsmall'">x-small</span> |
<span class="fauxLink" onClick="document.body.className='medium'">medium</span> |
<span class="fauxLink" onClick="document.body.className='large'">large</span> |
<span class="fauxLink" onClick="document.body.className='xlarge'">x-large</span>
</p>

<div>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam eu sem. In commodo. Integer id lectus a enim fermentum molestie. Donec fringilla ligula vel justo. Aliquam elementum wisi luctus lacus. Etiam leo. Duis auctor elit quis mauris. Ut elit lectus, luctus quis, rhoncus sed, lacinia in, velit. Pellentesque vulputate congue magna. Proin luctus. Pellentesque rhoncus, metus eget laoreet ornare, lacus risus mollis nibh, non interdum augue sapien nec metus. Donec sem. Vestibulum rutrum, urna non cursus tristique, tellus erat sagittis turpis, at venenatis massa massa egestas pede. Praesent ultrices malesuada nisl. Etiam ac felis eget ligula venenatis suscipit. Suspendisse ultricies lacus eu eros. Aliquam bibendum adipiscing ante.
</div>
</body>
</html>

As you can see, it is very easy to accomplish this. However, this is only half the solution. Presumably the user wants the size selection to persist so it’s a good idea to use a cookie to store their preference. Then, no matter which page they visit on your site, text will be displayed at their preferred size. Furthermore, when they return to your site at a later date, depending on the duration of the cookie, the site will automatically adjust the size.

For DotNetNuke, I created a component that does this for you (by allowing the user to select a stylesheet for the page and remembering it for future visits). This is part of the Speerio SkinWidgets suite. You can see a demo here.

I am working on a web app that consists of a treeview on the left and content on the right. The basic layout is a table with the height of the content determining the overall height of the table.

This basically means the treeview has to be scrollable, since it's possible that the table height is less than the tree height. Simple enough...put the treeview inside a DIV and change its "height" style attribute to 100%.

Works in IE6 but does not in FireFox. After Googling for hours and not finding a good solution, I devised a function to make this work. In my function, the params are the ID's of the main table and the DIV containing the treeview. The code first sets the height of the scrollable DIV to 0. This allows the main table to adjust to its normal height. Then the DIV's height is set to the same as the table height.

Works in IE6 and FireFox.

function setScrollerHeight(mainTableId, explorerScrollerId)
{ 
         var mainTable = document.getElementById(mainTableId); 
         var scroller = document.getElementById(explorerScrollerId); 
         if (!scroller) return; 
         if (mainTable.clientHeight > 0) 
         { 
                  scroller.style.height = "0px"; 
                  scroller.style.height = mainTable.clientHeight; 
         }
         else 
                  scroller.style.height = "500px"; }