Code Snippets

Send us your code snippets and we’ll share them with other agencies here. Anyone have code snippets they want to share? Golden nuggets of code that other departments may want to use? Send them to us.

  • Forms Without Tables
  • Tab Panel Module

Note: Code Snippets are submitted by our webmaster user group members. We do not test or provide support of this code.

Forms Without Tables

Submitted by: California Architects Board

Accessible well organized forms using CSS instead of tables.

/* forms */

div.form-container {

margin: 10px;

padding: 5px;

background-color: #FFF;

border: #EEE 1px solid;

}

p.legend {

margin-bottom: 1em;

}

p.legend em {

color: #C00;

font-style: normal;

}

div.errors {

margin: 0 0 10px 0;

padding: 5px 10px;

border: #FC6 1px solid;

background-color: #FFC;

}

div.errors p {

margin: 0;

}

div.errors p em {

color: #C00;

font-style: normal;

font-weight: bold;

}

div.form-container form p {

margin: 0;

}

div.form-container form p.note {

margin-left: 170px;

font-size: 90%;

color: #333;

}

div.form-container form fieldset {

margin: 10px 0;

padding: 10px;

border: #DDD 1px solid;

}

div.form-container form legend {

font-weight: bold;

color: #666;

}

div.form-container form fieldset div {

padding: 0.25em 0; }

div.form-container div.commissioner label, div.form-container span.commissioner {

margin-right: 10px;

padding-right: 10px;

width: 300px;

display: block;

float: left;

text-align: left;

position: relative;

}

div.form-container label, div.form-container span.label {

margin-right: 10px;

padding-right: 10px;

width: 150px;

display: block;

float: left;

text-align: right;

position: relative;

}

div.form-container label.error, div.form-container span.error {

color: #C00;

}

div.form-container label em, div.form-container span.label em {

position: absolute;

right: 72px;

font-size: 120%;

font-style: normal;

color: #C00;

top: 55px;

}

div.form-container input.error {

border-color: #C00;

background-color: #FEF;

}

div.form-container input:focus, div.form-container input.error:focus, div.form-container textarea:focus {

background-color: #FFC;

border-color: #FC6;

}

div.form-container div.controlset label, div.form-container div.controlset input {

display: inline;

float: none;

}

div.form-container div.controlset div {

margin-left: 170px;

}

div.form-container div.buttonrow {

margin-left: 180px;

}

div.form-container p.question {

font-weight:bold;

}

div.form-container ol li {

margin-top:20px

}

Tab Panel Module

Submitted by: Alcohol and Drug Program

Modifies the JavaScript of the tab panel module to make any tab panel stay selected (as the default item) when mouse out. The original tabpanel.js file looks like this:

function tabpanel_mouseover(node)

{

var panel_1_width = document.getElementById(“tabpanel_1_sublist”).offsetWidth; // Needed for IE

document.getElementById(“tabpanel_1”).className = “”; // De-activate default item

node.className = “tabpanel_default”; // Activate the hovered item

if (panel_1_width) {

if (document.getElementById(“tabpanel_2_sublist”))

document.getElementById(“tabpanel_2_sublist”).style.width = (panel_1_width – 2) + “px”; // Needed for IE

if (document.getElementById(“tabpanel_3_sublist”))

document.getElementById(“tabpanel_3_sublist”).style.width = (panel_1_width – 2) + “px”; // Needed for IE

}

}

function tabpanel_mouseout(node)

{

node.className = “”; // De-activate this item

document.getElementById(“tabpanel_1”).className = “tabpanel_default”; // Activate default item

}

First we comment out the tabpanel_mouseout function, so that the hovered tab will stay as the default. Then, at the beginning of the tabpanel_mouseover function, we de-activate every tab before activating the hovered tab as the default. Here’s how it looks:

function tabpanel_mouseover(node)

{

var panel_1_width = document.getElementById(“tabpanel_1_sublist”).offsetWidth; // Needed for IE

document.getElementById(“tabpanel_1”).className = “”; // De-activate default item

document.getElementById(“tabpanel_2”).className = “”; // De-activate default item

document.getElementById(“tabpanel_3”).className = “”; // De-activate default item

node.className = “tabpanel_default”; // Activate the hovered item

if (panel_1_width) {

if (document.getElementById(“tabpanel_2_sublist”))

document.getElementById(“tabpanel_2_sublist”).style.width = (panel_1_width – 2) + “px”; // Needed for IE

if (document.getElementById(“tabpanel_3_sublist”))

document.getElementById(“tabpanel_3_sublist”).style.width = (panel_1_width – 2) + “px”; // Needed for IE

}

}

function tabpanel_mouseout(node)

{

// node.className = “”; // De-activate this item

// document.getElementById(“tabpanel_1”).className = “tabpanel_default”; // Activate default item

}

0 Comments

Submit a Comment