Five Useful Coding Techniques for Building a Dynamic Website

The ideal web experience for the average Internet user is one that feels both intuitive and interesting. The best websites create the sense that the future is now, and that users already know how it works. This creates a bit of excitement and makes users want to revisit a webpage simply because it's fun to browse and navigate. Web design is a high art, and with recent advances in coding technology and technique, it has never been easier to create websites that delight and inspire viewers.

Five Useful Coding Techniques for Building a Dynamic Website

For many amateurs who were trained on bare-bones HTML, and for many web professionals who want to learn how to build crisp, delightful, effective websites, it can be a challenge to learn how to get a particular effect. Furthermore, it can be a challenge even figuring out what sort of effects will make viewers want to come back. This list of five tried and tested coding techniques will help you build dynamic websites that bring viewers and users back for more.

Vertical Sliding Panels

If your site has information that you don't want users to have to click to a different window for, but also don't want to have it always out in the open, consider a vertical sliding panel. This lets you create a button which expands outward, like a drawer, to contain more information.

The coding for a vertical sliding panel requires an HTML frame, a CSS coding backbone, and jQuery to put it all together.

The HTML frame should consist of a div with an id of "frame" which holds all the main content (give it a div class of "content"). Then, write the HTML for the content inside the vertical sliding panel (give it a div class of "panel"), but don't include it in the "frame" div id. Finally, include a single line for the trigger button.

<a class="trig" href="#">button</a>

The CSS coding backbone centers around providing style sheets for how the sliding panel should look in a variety of circumstances when it's in the drawer or out of the drawer, when you mouseover the button, when you scroll down, etc. You write a style sheet for .panel, .panel a:visited, .panel a:hover, .panel a:visited:hover, etc., with sizes and colors and formatting and all the rest. Finally, you add CSS for the trigger button itself, for a.trig and a.trig:hover.

Putting it all together, you use jQuery code in the head part of your HTML. First, link to the jQuery source with the script command, then take the classes that you've defined, .panel and .trig, and use this code:

$(document).ready(function(){
    $(".trig").click(function(){
    $(".panel").toggle("fast");
    $(this).toggleClass("active");
    return false;
    });
});

Example

SpyreStudios

SpyreStudios

Subtle Focus and Hover Effects

One of the most pleasant things about a good website is that it feels like changes happen at a natural, easy speed. If you hover the cursor over a button, it doesn't change from green to blue instantly - instead, you see a gradual transition from one color to the other. It creates a feeling of softness and ease in the design. With CSS3, which works in all browsers except Internet Explorer, you can create buttons that subtly change in color and style when you hover the cursor over them, as well as text input boxes that subtly change in style. This basic technique can be used in many different ways to create a subtler feeling for your web design.

The standard CSS looks like:

.class { 
    background-color: 
    color:
    width:
    position:
    etc... 
} 

.class:hover {
    etc...
}

However, all you have to do is include these lines of CSS3 into your style descriptions, and when the hover function is activated, the CSS3's "ease-in" language will kick in.

-webkit-transition: background-color 500ms ease-in;
-moz-transition: background-color 500ms ease-in;
-o-transition: background-color 500ms ease-in;
transition: background-color 500ms ease-in;

You can use these subtle changes for background-color, width, color etc. as they change between .class and .class:hover.

You can also use hover effects in tandem with what is known as the CSS Sprite Technique. Without going into great detail, if you merge all your images into a single sprite, you can change an image upon mouseover simply by changing the background-position of the image to a negative number in the .class:hover style sheet. If the image you want is 50 pixels up from the starting image, the code looks like:

.class {
    background-position: 0px 0px
    width:
    etc.
}

.class:hover {
    background-position: 0px -50px
    width:
    etc.
}

You can use the ease-in function to create interesting "slot machine wheel" type effects when you mouseover, or you can just create a hover-effect to change the image.

The reason there are four lines is, the first is the CSS3 for Chrome and Safari, second is for Firefox, third is for Opera, and fourth is for future-proofing if the Internet gets its act together and makes CSS3 standard.

Example:

Duoh - Note, it won't work if viewed with Internet Explorer.

Duoh

Content Hiding and Hover

You can use the basic concept of an image rollover to hide certain content until you mouseover it. This is useful for blogs where you provide teasers for posts. The hidden content could be a link to the response stream and a suggestion to read more, and would only appear when the user had his or her cursor over a particular blog post of interest. This little detail creates a sense of dynamism to the website, because it seems as though the website itself focuses its attention on what the user is focused on.

For image rollovers, programmers use the JavaScript code for onMouseOver and onMouseOut with img tags. You can also use that code with div tags to create rollover content hiding upon mouse hover.

Simply make a separate div class to encompass the area that the mouse hover will affect the hidden or unhidden content. In the example above, a separate div class would encompass each blog post, let's call the div class "post". Write HTML for both the hidden and unhidden option, with titles like id="nonhover" and id="hover".

Then, include the standard JavaScript code for an image rollover:

<script type="text/javascript">
$('.post').mouseover(function() { 
    $('#hover').css('display', 'inline'); 
    $('#nonhover').css('display', 'none'); 
}); 

$('.post').mouseout(function() { 
    $('#hover').css('display','none'); 
    $('#nonhover').css('display', 'block'); 
}); 
</script>

Example

CSS-Tricks

CSS-Tricks

Visual Bar Graph Representations

It can be cool to dynamically create bar graphs on websites to measure things like monetary donations, comment numbers, "likes", or any other piece of information displayed to users about their overall behavior related to the content on the site. Creating a bar graph requires code to do three things: pull in a dynamically created set of numbers, organize the numbers from highest to lowest, and create horizontal or vertical bars to represent these numbers. The easiest way to do this is to create a block which is divided into lines for each category.

First, you need a dynamic set of code that orders each category from highest to lowest. Start with this code, which finds the category with the highest number. It also gives a number to each category you're looking for.

<?php 
$highest = 0;
    foreach((get_the_category()) as $cat) { 
    $ct_count = $cat->category_count; 
    if($ct_count > $highest){ 
    $highest = $ct_count; 
    } 
} 
?>

Then, get the information for each category $cat for the category names and the category counts, and give the information new names, $ct_name and $ct_count to be used in dynamic HTML creation. You also want to define the width as a variable $width based on $ct_count. Put this code inside the bar graph's div block.

<?php
foreach((get_categories(‘orderby=count&order=desc’)) as $cat) { 
    $ct_name = $cat->cat_name; 
    $ct_count = $cat->category_count;
    $width = ($ct_count * 100) / $highest;
    echo '<a href="#" style="width: .'$width'.%"> . '$cat_name'. (.'$cat_count'.)</a>'; 
} 
?>

This will go through a loop to create each bar to be the length that it's supposed to be in relation to the longest bar which will take up the whole width of the block.

Example

Engadget - Scroll down to see the Most Commented Posts box.

Engadget

Resizing Thumbnails with MouseOver Overflow

Finally, if your website has a location for images or photos, you can allow an image to "overflow" out of a thumbnail into the surrounding space. When you put your mouse over the picture, it will automatically show the full-sized picture without opening another window. This is a basic, but highly important element for any dynamic, image-based website.

With this code, the image itself isn't resized with the mouseover. The image's visible area is resized. The way to deal with visible area for any image is to use the CSS overflow property.

For each image, simply embed it in a standard a markup, so write:

<a href="#"><img src="photo.jpg"></a>

You don't have to resize the image here. You do that in the CSS, which, for a 120x150 px image with a 100x100 px thumbnail could be like:

ul#thumbnail a{
    width:100px;
    height:100px;
    line-height:100px;
    display:block;
    float:left;
    overflow:hidden;
    position:relative;
    z-index:1; 
}

ul#thumbnail a img{
    top:-20px;
    left:-50px; 
    float:left;
    position:absolute;
}

Notice that the img CSS tag has a negative top offset and left offset. You can play around with these values to get the thumbnail size you want. The overflow:hidden property makes all negative values unseen and not shown.

Use CSS to reveal the overflow upon a mouseover by including the lines:

ul#thumbnail a:hover{
    z-index:1000;
    border:none;
    overflow:visible; 
}

Example

cssglobe

CSSglobe

Conclusion

These are all just little coding techniques and details that might be useful for building dynamic websites. Some of these just look good, while others actually help create an easier navigation feel for viewers and users. Experiment on your own to see how you can use these techniques to build your own beautiful, professional sites!