magnet header
11 March 2008

Refrigerator Magnets with CSS + JavaScript

Create refrigerator magnets with css + javascript.

After seeing The Big Word Project, I thought it was a great idea, but not certain about the longevity of sucha project. If I am going to be looking for a samurai, is this the place I am goign to look? Maybe I am jealous?! Still they present words in a great way. What comes to mind when I see it is a refrigerator magnet.

So let's create one. Here is one that both are magnets and movable. This is purely an experiment and using a beta library, so it currently only works in firefox.

the demo (and they are draggable)

Man to man is so unjust, children
You donít know who to trust
Your worst enemy could be your best friend
And your best friend your worst enemy

the asset

All you need is one image that we will apply css sliding door technique to.

magnet background

the magnet css code

Basically it's an "a" tag wrapped in a span tag, and with a little css work, and voila.

<a href="#" class="magnet"><span>i am a magnet</span></a>
.magnet 
{
	/** these are important to not conflict with a:link **/
	text-decoration: none !important;
	color: #2a2a2c !important;
	
	position: relative;	
	padding: 0 0 0 10px;
	margin:	0 1em;
	
	height: 30px;
	float: left;
	color: #000;	
	background:	
	#fff url(../i/magnet-bg.gif) top left no-repeat;
	
	font-size:	10px;
	font-weight:	 bold;
	text-decoration: none;
	letter-spacing: 1px;	
	overflow: hidden;

}

.magnet span
{
	padding: 3px 10px 0 0;
	display: block;
	height: 26px;
	background: 
	#fff url(../i/magnet-bg.gif) top right no-repeat;
}

.magnet:hover
{
	background-position:0 -30px;
	
	/** important to not conflict with a:link **/
	color:#fff !important;
}
.magnet:hover span
{
	background-position:100% -30px;
}

the javascript

Technically you don't need JavaScript as demoed above. But, it really does help to automate things, and make it draggable like a true refrigerator magnet. I am using mootools to ease the burden. Download the source code to see how, but in simple steps.

  1. Find all paragraph tags with class "magnets"
  2. Take each word in anchor and span tag
  3. Make each anchor tag draggable
  4. Create a new paragraph and insert new anchors
  5. Replace old paragraph with new one

download the source

Magnets.zip
 

it doesn’t work on ie7

2008-03-12
esteban felipe

Thanks esteban … i do know that … that’s the problem using a beta of mootools, but it’s too tempting not to use … I’ll get the mootool team on it !

2008-03-12
Daniel Bulli2

doesn’t seem to work in safari either

2008-03-12
Jason

yep, it’s still an experiment, and an experimental library. as the mootools 1.2 moves into production i am sure things will work. currently only works in firefox.

2008-03-13
Daniel Bulli2

thanks for the info and the effort! really helpful, but not too sure about it myself.

2008-07-11
James

It did not realy work for me.

2008-07-20
James

Site has been moved

nuff-respec.com is no longer being updated. Please head over to dbulli.com for new content