Replace Default Field Values with Labels

Lots of times, it makes sense to pre-populate a form field with some text to guide the user. Usually you see this when space is limited, and the site tries to use the field’s value as a label. However, the field’s value isn’t the label— it’s the value. We see this often when a form has little real estate available to it, or sometimes when the designer doesn’t want to clutter up the interface with extra text. Continue reading “Replace Default Field Values with Labels”

Creating a Tabbed Interface with CSS and jQuery

Here’s a piece I put together recently for a client who wanted a tabbed interface on one of their pages. My goal in doing it was to make it as accessible and semantic as possible. One requirement I gave myself was to NOT use redundant elements (like one list for the tabs, and another for the content).
Continue reading “Creating a Tabbed Interface with CSS and jQuery”

Some Fixes for the UVM Web Template

Using Javascript, here are a couple of fixes we came up with for issues regarding the UVM web template:

  1. Linking a banner graphic back to your site’s home page
    If your site uses a graphic for the the banner image (instead of the standard block of color), it’s nice to offer your users a way back to your site’s home page by allowing them to click on your banner. This is especially true if you’re not using a departmental logo.

    Here’s how we did it with some basic Javascript:

    function bannerLink() {
    
    	var home = "http://www.uvm.edu/ctl";
    	
    	document.getElementById("banner").onclick = function() {
    		window.location = home;
    	}
    	document.getElementById("global").onclick = function() {
    		window.location = home;
    	}
    }
    

    First, we set a variable for our site’s home:

    var home="http://www.uvm.edu/ctl";

    Then we set up onclick event handlers for each of the elements in question, “banner” and “global”:

    document.getElementById("banner").onclick = function() {
    	window.location = home;
    }
    document.getElementById("global").onclick = function() {
    	window.location = home;
    }

    Place that bannerLink() function in a .js file so you can link to it from each page and then call it using an onload handler of the body.

  2. Styling the footer below the main menu
    Did you ever notice how even though you might have set a background color for the footer of your site, the footer bar below the menu doesn’t change? Again, using some basic Javascript, we can change that:

    function setFooter() {
    	var bkgd = "#DE9442";
    	document.getElementById("footer").style.background = bkgd;
    }
    

    First we’ll set a variable to hold the color (this is the orange of the CTL site footer), and then set the footer background to be that color.
    Stash the setFooter() function in your .js file and call it with a body onload handler.

We actually combined the above functions into one init() function so that we could do multiple things when the page loads.