jQuery Random Color Changer
So I had a lot of time on my hands today, and we were trying to figure out a good color palette for one of our customer service portals. Since I'm not in the least bit a designer we decided to wait for one of the Graphic Designers to take a stab at it, only problem with that is they were out to lunch. So someone gave me the idea to play around with the colors and make them change from time to time. I wasn't feeling particularly ambitious so I scoured the internet for a good jquery solution to randomly select colors and change background colors based on those that were randomly generated.
below is what I came up with:
/* -- jQuery Colourific */ /* -- v 1.0 - January 2008 */ /* -- by ben watts (http://www.benwatts.ca/sandbox/jquery-colourific/) */ //$(document).ready $(function(){ setupColourific(); }); // setupColourific function setupColourific(){ var elements = new Array(); elements[0] = $("td.Upload"); // the element that's changing elements[1] = $("td.Notes"); elements[2] = $("td.LoanTitle"); elements[3] = $("td.hdr"); elements[4] = $("body#body"); for(i = 0; i < elements.length; i++){ changeColour(elements[i]); } window.setInterval( function(){changeColour(elements[0]);}, 1000); window.setInterval( function(){changeColour(elements[1]);}, 1500); window.setInterval( function(){changeColour(elements[2]);}, 2000); window.setInterval( function(){changeColour(elements[3]);}, 2500); window.setInterval( function(){changeColour(elements[4]);}, 3000); } // changeColour function changeColour(e){ // random values between 0 and 255, these are the 3 colour values var r = Math.floor(Math.random()*256); var g = Math.floor(Math.random()*256); var b = Math.floor(Math.random()*256); // puts the hex value inside this element (e is a jquery object) //e.text(getHex(r,g,b)); // change the text colour of this element e.css("background-color", getHex(r,g,b)).fadeIn(); } // intToHex() function intToHex(n){ n = n.toString(16); // eg: #0099ff. without this check, it would output #099ff if( n.length < 2) n = "0"+n; return n; } // getHex() // shorter code for outputing the whole hex value function getHex(r, g, b){ return '#'+intToHex(r)+intToHex(g)+intToHex(b); } |
Obviously you'll need to change the selectors to something relevant for your purposes. It's probably not something you want to use on a regular basis but would make a great april fools day joke, or if you feel like a ceasure go ahead and mess with the time interval.
I can't take full credit for this script, the original can be found at This site
Print This Post
Firefox 3.6 Released – and a css fix for it.
Firefox 3.6 dropped today, and I jumped on board and installed it immediately. Then to my surprise, shock, and horror, my favorite Firefox CSS fix failed. a:focus{ -moz-outline: none;} no longer works in 3.6. I tried google-ing (futile effort on the day of the release might I add) for a solution and nothing. But fear not, I played around and found one.
instead of a:focus { -moz-outline: none; } you use a:focus { outline: none; }. Seems that they no longer require a Firefox only declaration (although you may want to use both -moz-outline and outline so that less-than 3.6 users still don't see those fun dotted boxes).
Print This Post
Table Style Training
Today we had a very good lesson on the correct way to style and set up good looking tables. Just as a quick recap, I'll post highlights from the html and css here, as well as the original audio from the training session (40ish minutes).
Here is an example of a table well thought out and coded correctly. Notice the use of classes to facilitate the css in controlling the visual flow of the table.
<table class="standard-table" cellspacing="0"> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> <th>Column 4</th> </tr> <tr class="lightrow"> <td width="60">Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> </tr> <tr class="darkrow"> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> </tr> <tr class="lightrow"> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> </tr> <tr class="darkrow"> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> </tr> <tr class="lightrow"> <td>Value 1</td> <td>Value 2</td> <td>Value 3</td> <td>Value 4</td> </tr> </table> |
Also note, that WordPress absolutly destroys any layout and aligns everything to the left (argh!) Anyway, pressing on, here is a From Table, again well thought out and designed correctly.
<table class="form-table" cellspacing="0"> <tr> <td rowspan="2" class="description">Name:</td> <td><input type="text" value="" /></td> </tr> <tr> <td><input type="text" value="" /></td> </tr> <tr> <td class="description"> </td> <td><input type="text" value="" /></td> </tr> <tr> <td class="description">City:</td> <td><input type="text" value="" /></td> </tr> <tr> <td class="description">State:</td> <td><input type="text" value="" /></td> </tr> <tr> <td class="description">Zip Code:</td> <td><input type="text" value="" /></td> </tr> </table> |
Now if you find yourself wishing you could see the original files, well you can. Simply grab them from here. Also, if you happen to have your "Bulletproof Web Design" by Dan Cederholm handy you can flip to page 153 and start reading there. I'd also post some css, but the post is getting rather lengthy as is so just grab the zip file to see the fully stylesheet.
And now the part you've been waiting for ...
The audio from the training.
Audio clip: Adobe Flash Player (version 9 or above) is required to play this audio clip. Download the latest version here. You also need to have JavaScript enabled in your browser.
Print This Post