Archive for the ‘CSS’ Category

Styling radio buttons

Monday, December 21st, 2015

Hide/replace radio buttons


[type="radio"] {
  border: 0; 
  clip: rect(0 0 0 0); 
  height: 1px; margin: -1px; 
  overflow: hidden; 
  padding: 0; 
  position: absolute; 
  width: 1px;

[type="radio"] + span {
  display: block;

/* the basic, unchecked style */
[type="radio"] + span:before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  vertical-align: -0.25em;
  border-radius: .5em;
  border: 0.15em solid @base-gray-medium;
  box-shadow: 0 0 0 0.1em @base-gray-medium;
  margin-right: 0.75em;
  transition: 0.5s ease all;

/* the checked style using the :checked pseudo class */
[type="radio"]:checked + span:before {
  background: red;
  box-shadow: 0 0 0 0.1em @base-gray-medium;

/* never forget focus styling */
[type="radio"]:focus + span:after {
  content: '\0020\2190';
  font-size: 1.5em;
  line-height: 1;
  vertical-align: -0.125em;

Handlebars template markup:

<script id="dealer-list-template" type="text/x-handlebars-template">
	<label for="dealer{{id}}" class="col-xs-10 dealerItem">
		<input type="radio" value="{{title}}" name="dealers" id="dealer{{id}}">
			<span class="dealerTitle">{{title}}</span>
			<span class="dealerAddress">{{address}}</span>
	<div class="col-xs-2 distance">{{distance}}</div>

Foundation 5 Framework Animate Accordion (multiple, with dynamic AJAX content using reflow, and also nested)

Monday, January 27th, 2014

Out of the box there is no animation on these.  I tried for a CSS3 transition but couldn’t get one. If anyone finds one do tell. Anyhow, my current project has 3 accordion levels, the main off-canvas accordion, a second one loaded dynamically via AJAX into the main content area, and third level of accordions nested in each of the 2nd level accordions.

First, I gave them each an id, so that I could address them easily and individually:

<dl class=”accordion firstLevelAccordions” data-accordion> (in the ‘off-canvas’ left)

<dl class=’accordion secondLevelAccordions’ data-accordion> (in the main content right section, content thereof loaded dynamically via AJAX)

<dl class=’accordion thirdLevelAccordions’ data-accordion> (this one nested inside the secondLevelAccordions)

After the dynamic content load, Foundation makes you reflow to find/activate the new content:


The initialization of each accordion (you could merge these into one function, or parameter-ize the class piece, but for simplicity’s sake, this works just fine):

$(function(){ // onready

// first level off-canvas menu accordions
$(document).on(“click”, “.firstLevelAccordions > dd:not(‘.active’) > a”, function (event) {
$(“.firstLevelAccordions >”).removeClass(‘active’).children(“.content”).slideUp(1000);

$(document).on(“click”, “.firstLevelAccordions > > a”, function (event) {
$(“.firstLevelAccordions >”).removeClass(‘active’).children(“.content”).slideUp(1000);

// second level article list/detail accordions
$(document).on(“click”, “.secondLevelAccordions > dd:not(‘.active’) > a”, function (event) {
$(“.secondLevelAccordions >”).removeClass(‘active’).children(“.content”).slideUp(1000);

$(document).on(“click”, “.secondLevelAccordions > > a”, function (event) {
$(“.secondLevelAccordions >”).removeClass(‘active’).children(“.content”).slideUp(1000);

// third level nested accordions
$(document).on(“click”, “.thirdLevelAccordions > dd:not(‘.active’) > a”, function (event) {
$(“.thirdLevelAccordions >”).removeClass(‘active’).children(“.content”).slideUp(1000);

$(document).on(“click”, “.thirdLevelAccordions > > a”, function (event) {
$(“.thirdLevelAccordions >”).removeClass(‘active’).children(“.content”).slideUp(1000);


jQuery .hover change div background-position example

Wednesday, November 16th, 2011

example for reference:

backgroundPosition: ‘0px 0px’
}, function(){
backgroundPosition: ‘0px 30px’

CSS !important override

Tuesday, February 1st, 2011

A rule that has the !important property will always be applied no matter where that rule appears in the CSS document.


p { color: #ff0000 !important; }

CSS text-transform

Tuesday, February 1st, 2011


also consider:

CSS pseudo elements & pseudo classes

Tuesday, February 1st, 2011

CSS Pseudo Elements

Adds content after an element

Adds content before an element

Adds a style to the first character of a text

Adds a style to the first line of a text


Posted on 5 Oct 2009, 17:00 – Category: CSS

Pseudo Classes

Adds a style to an element that is activated

Adds a style to an element that is the first child of another element

Adds a style to an element that has keyboard input focus

Adds a style to an element when you mouse over it

Adds a style to an element with a specific lang attribute

Adds a style to an unvisited link

Adds a style to a visited link

CSS em

Tuesday, February 1st, 2011

h1 {font-size:2.5em} /* 40px/16=2.5em */
h2 {font-size:1.875em} /* 30px/16=1.875em */
p {font-size:0.875em} /* 14px/16=0.875em */

I always like to have a nice simple AJAX example on hand, you never know…

Tuesday, July 27th, 2010



<script type=”text/javascript”>
function showHint(str)
if (str.length==0)
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
{// code for IE6, IE5
xmlhttp=new ActiveXObject(“Microsoft.XMLHTTP”);
if (xmlhttp.readyState==4 && xmlhttp.status==200)

<p><b>Start typing a name in the input field below:</b></p>
First name: <input type=”text” onkeyup=”showHint(this.value)” size=”20″ />
<p>Suggestions: <span id=”txtHint”></span></p>



// Fill up array with names

//get the q parameter from URL

//lookup all hints from array if length of q>0
if (strlen($q) > 0)
for($i=0; $i<count($a); $i++)
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
if ($hint==””)
$hint=$hint.” , “.$a[$i];

// Set output to “no suggestion” if no hint were found
// or to the correct values
if ($hint == “”)
$response=”no suggestion”;

//output the response
echo $response;

CSS link rollover class change

Monday, March 8th, 2010

<a onMouseOver=”this.className=’on'” onMouseOut=”this.className=’off'” href=”10_9_08 MEETING.mp3″>October 9, 2008</a>

Inline Javascript CSS properties

Monday, March 1st, 2010

Inline Javascript CSS properties

dash replaced by capital


style=”color:#FFFFFF text-decoration:underline;”