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
 

comment

what they saidwho said it

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
DannyB

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
DannyB

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


note: you can only submit after you hit preview


nuff-respec is a weblog written by daniel bulli a senior web programmer in boston, ma.
more >

contact | resume | profile | twitter

recently :::

diversions :::

45+ Amazing Insect Shots in Photography
Insects are one of the most fascinating creatures on earth. There are more than 800, 000 species of insects in the world.
Grayscale color | Stroep Blog
This is how I create a grayscale color in actionscript 3.
Google Flash API
This is great ... google has made this easy ... stay tuned to see what i am working on ...
25 Free Mac Apps That Will Boost Your Productivity
There are many applications that can help you work faster and efficiently. Though, not many applications come cheap.
you still want more »