Web Development | The Net Impact Roadmap

Making a Simple Web-Based Pop-Up Help Window

November 14th, 2008 by kcouch

or… How to Mimic a .chm File on a Website

Most people are familiar with the typical help window used in windows applications. However, most people may not know how to create web-based help for a website. The following example and instructions will allow you to mimic this type of functionality using a pop-up on a website.

To see the full example: Open the help window

or you can download all the files as a zip file.

The Summary:

This implementation uses all basic HTML and JavaScript. The main file (index.html) uses a link to open a pop-up window (help.html) which contains one <table> with two <td> cells. The left cell has a collapsible tree that is built using an unordered list which has JavaScript <a> links. The right cell has only an <iframe> that will have its src attribute set to different files based on which link in the tree is clicked. Each help section has its own HTML file and each of these files can have many topics.

The Details:

index.html

This main file just shows how to make a link to open a pop-up window with our desired window style.

<a href=”#” onclick=”OpenHelp()”>Help</a>
<script type=”text/javascript”> function OpenHelp() { window.open(“help.html”,“Help”, “height=540,width=820,status=no,toolbar=no,menubar=no, location=no”); }</script>

help.html

This is the file which defines the tree layout for the groups, subgroups and links.

The links in each <li> use JavaScript so that it is possible to move to a specific topic in any help file.

The first parameter is the exact name of the help file and the second parameter is the specific topic to scroll to.

<div style=”overflow:auto; height:500px; width:270px;“> <ul class=”aqtree3clickable”> <!– FIRST TYPE OF LINK –>
<li><a href=”javascript:LoadPage(’NoSubTopics’);”>No Sub Topics</a></li>
<!– SECOND TYPE OF LINK –> <li><a href=”#”> </a><span onclick=”javascript:LoadPage(’WithSubTopics’);” class=”clickable”>With Sub Topics</span> <ul> <li><a href=”javascript:LoadPage(’NestedTopics’, ‘First’);”>First Topic</a></li> <li><a href=”javascript:LoadPage(’NestedTopics’, ‘Second’);”>Second Topic</a></li> <li><a href=”javascript:LoadPage(’NestedTopics’, ‘Third’);”>Third Topic</a></li>

</ul>

</li> …

A few more notes about things going on in here:

The main <div> with style=”overflow:auto;” will make the left pane of the pop-up window have a vertical scrollbar if needed when the topic tree is taller than the window height.

The list (<ul> and <li> tags) must be built as shown because of what the JavaScript and CSS expect.

NestedTopics.html

This file has the content of the help. If there are multiple topics in this file that will be linked to independently, the following must be done:

Include helptopic.js and be sure to use <div id=”main”> around all of the content paragraphs.

Each topic must be given a unique id attribute.

helptopic.js

This JavaScript file should be included in content files that have multiple topics that will be linked to independently. The code is wrapped in a function and not called until the page is called in order to make sure all page elements have been created before attempting to access them. The included comments should explain the rest.

window.onload = startup; function startup(){
   // add some height to the page so lower anchors can show at the top
   var main = document.getElementById(“main”);
   main.style.height = main.scrollHeight * 2 + 20;
   // get the topic out of the querystring
   var topic = location.search.substring(1);
   // if we have topic, scroll down to it
   if (topic != “”)
      document.body.scrollTop = document.getElementById(topic).offsetTop;
}

Extra tidbits:

IE7 will still show an address bar due to its security rules. (Only visible when not running on a local machine.)

aqtree3clickable.js and aqtree3clickable.css

I grabbed these 2 files from this site: http://www.kryogenix.org/code/browser/aqlists/. They convert an unordered list into a nice collapsible tree. Note: I modified the .css file with new graphic links and some different styles.

Marketing with a Microsite

July 28th, 2008 by ssawall

Microsites can be a great opportunity to market events, promote new products or services, or support an advertising campaign. A microsite is a marketing driven website designed to deliver a particular message to a targeted audience. Microsites are generally fewer pages than a company’s primary website, but often microsites can be just as complicated to create as a traditional website because there is often more user interaction through forms and surveys designed to capture user feedback specific to the campaign.

One advantage of creating a microsite is that they make tracking conversions much easier because statistics can be gathered separately or tracked through links into your main website and flagged as a result of the marketing campaign. For example, we recently designed a marketing microsite with TricorBraun for a new ad campaign they are running called “Call TricorBraun.” The advertisements in this campaign directed visitors to a unique URL www.calltricorbraun.com where the marketing microsite was set-up. A unique URL is another advantage of a marketing microsite because all traffic can be directed to a URL that is specific to your campaign or event. This URL should be easy to spell and remember so that individuals who see your ads or hear about your product or event can find your site easily. The Call TricorBraun microsite was designed in the image and likeness of the print ad, so that visitors associated the site with the advertisement. A microsite gives you the flexibility to try a layout and design that may differ from your main site, but may be more conducive or specific to what you are promoting on your microsite. The Call TricorBraun microsite design also included survey and contact fields to collect customer data. Upon completing required fields the user was directed to a specific landing page on the primary TricorBraun website depending on survey responses.

Marketing microsites can range in size from one landing page to a couple of landing pages and a contact form, survey or order entry form depending on how much information you want to collect. As a general rule, a marketing microsite should be fairly concise. Remember this isn’t your main website. This website only needs to have information that is pertinent to the marketing campaign. Because this website is built for a marketing campaign or event it will also have a much shorter life span, so once your event is over the microsite has served its purpose.

Web Design Guide: Easy ASP.net Options

May 19th, 2008 by Steve Thomas

Previously, we looked at several open source content management systems that are widely used. Those are great options unless you have a Microsoft server. If that is the case, what are your options?

Here are two options for you to look into:

Dot Net Nuke

Dot Net Nuke is an open source dot net content management system, and like the other content managements systems, has some nice add-ons. Dot Net Nuke has an easy-to-use interface, but it can be buggy when you try to implement your own custom design. Still, it is extremely popular and has lots of ability if you are constrained by or are sticking to the benefits of a dot net machine. The most current release of this freeware like many others is sometimes referred to as the “bleeding edge”. Tackling new releases is not for the unskilled or time constrained developer.

Master Pages

My limited personal knowledge of the technology that goes into master pages, server side includes and the like prevents me from going into further detail about how these technologies work in that respect. We can always engage the tech team here at TNI for that dialog. The point is that implementing master pages is an easy way to save yourself a headache in the future.

The overriding concept and purpose behind master pages is simple: Create one “master page” that controls the border of your web page and only fill-in the middle, content portion of the page individually. Content management systems allow you to do much of the same thing, but with master pages you have the ability to edit actual static page files. For any web site with more than a few pages, this is a great option.

The rate of change required for a website to be considered “current” continues to dictate a shorter and shorter refresh cycle. Because of the need for fresh content and in other ways, up-to-date site features, more and more businesses of all sizes are looking to web solutions like the two above in order to allow new information, graphics and even pages to be created by someone other than the IT team or Webmaster that will still reflect the same brand strategy and maintain the standards in place throughout the rest of the site. Making website updates with relatively the same ease as a blog post looks like a highly desired attribute that businesses will increasingly have on their checklist.

Significant contribution to this post by S Trachtman.

Making a Simple Web-Based Pop-Up Help Window

Marketing with a Microsite

Web Design Guide: Easy ASP.net Options

Blogroll

Recent Posts

Meta

Archives