tumblr counter

In this post I will continue on from the Dynamic Banner post and add a floating toolbar to the top right of the page. In this example I’m going to add the Excel icon and a Email icon.

1. Icon Selection

In this example we need an excel icon and an email icon. More importantly, the icons/images need to be royalty free or you will need to purchase the right to use the icons. I find this website to be very useful because most of the images are royalty free, clean and they come in different scaled sizes. In this blog post we’re using 32×32 size which is a nice clickable size for icons. Use the search function to find the icons you would like to use on your site.

2. Download the icons
You will need to download the icons and host them on a productionised webserver. I typically use the OBIEE Production webserver and package up images into a custom WAR file. The important thing to remember is that these images will be requested by the users’ browser each time the page refreshes so to ensure the images are up and working it’s recommend to upload them onto a solid productionised webserver.

3. Adding the toolbar to the banner

<div id="my_banner" style="top:0px; left:0px; position: absolute; z-index=11; visibility=show; right=0px;">
<table cellspacing="0" style="text-align: left; vertical-align: middle; background-color: rgb(24, 24, 24); height: 70px; width:expression((width1 = window.innerWidth?document.body.clientWidth:document.documentElement.clientWidth) + 'px'); padding: 0px; white-space: nowrap;" class="SectionTable"><tr><td>&nbsp;</td></tr></table>
<div id="my_banner_title"><font color="#FFFFFF"; style="top:20px; position:absolute; font-size:26px; text-align:center; margin-left:auto; margin-right:auto; left:0px; right:0px; width:expression((width1 = window.innerWidth?document.body.clientWidth:document.documentElement.clientWidth) + 'px');">Main Menu</font>

<div id="my_logo" style="top:1px; left:1px; position: absolute; z-index=14; visibility=show;">
<img src="http://www.wilson-is.com/blog/wp-content/uploads/2011/07/logo.png" height=68 border=0></div>

<div id="my_toolbar" style="top:20px; right:10px; position: absolute; z-index=14; visibility=show;">
<img src="http://www.wilson-is.com/blog/wp-content/uploads/2011/07/excel.png" border=0>
<a href="mailto:testme@wilson-is.com"><img src="http://www.wilson-is.com/blog/wp-content/uploads/2011/07/email.png" border=0></a>

The Excel icon doesn’t have an event associated to it so it’s just an image at this stage. I will add functionality (onclick) events to it in a later post. I’ve added a simple “mail to” on the email icon.

From an end-user perspective having a handy toolbar on each page gives them comfort and stability. They know that by clicking on the email icon they can send their message to the correct team quickly. In a large scale environment there could be different teams servicing different dashboards so by using this dynamic toolbar you can direct the emails to the correct teams seamlessly. This way the users don’t need to go off digging around to find a contact person/team etc. It’s important to maintain them on the dashboard and retain their attention. We don’t want to lose them in a sea of Intranet pages do we?! 😉

I will look at adding an “onclick” event to the Excel icon in my next post.

No Comment.

Add Your Comment