Out of the box, WordPress has the Prototype and Scriptaculous JavaScript libraries installed. Why bother manually including it in the head of your template files if you don’t need to? Well thanks to my first (and laughably simple) plug-in, you can activate it directly from the wp-admin. That’s it! Pretty simple. Be sure to let me know if you find it useful.
UPDATE:
WPINC Prototype has been added to the WordPress plug-in repository.
While going through and revamping some old code, I decided to improve upon a gallery script that I had been using for some time. It was originally written with all standard DOM methods, but now it’s been slathered with a healthy dose of Prototype.
Here is the code that makes it tick:
document.observe("dom:loaded", function() {
$('main').update('<img src="shared/images/ajax-loader.gif" width="100" height="100" alt="Ajax Loader">');
var links = $$("div#thumbs a").each(function(link, i) {
new Element('img').observe("load",function() {
if (++i == links.size()) {
$('main').update('<img src="' + links[0] + '" />');
}
}).writeAttribute('src', link);
}).invoke('observe', 'click', function(event) {
event.preventDefault();
$('main').update('<img src="' + this.href + '" />');
});
});
Not sure if it’s the most efficient or best way, but it works and it was fun to play around with. Check out this sample gallery to see it in action.
100 Layer Cake’s blog has hit the ground running and is already a resounding success. But don’t take my word for it - there are plenty of accolades posted by the site’s visitors to verify my veracious claim. What is all the fuss about you ask? In their own words:
100 Layer Cake is a unique wedding planning resource for and by thoughtful, crafty, modern women. Our vendors, projects, and weddings are hand-picked, and thoroughly researched with the hope that every single one is a truly unique addition to both your wedding and your planning process. But being discerning certainly doesn’t have to mean expensive or exclusive. Our Vendors have been carefully selected for their stellar reputation, exemplary service and impeccable aesthetic.
The trio of lovely ladies behind 100LayerCake tapped yours truly to handle the WordPress theme and customization. I’m glad they put their trust in me because it was a fun project and gave me a chance to dig in a little deeper into WordPress themes.
So without further ado, kudos gals, on a successful launch.
There are few things that are more frustrating to deal with in CSS than file inputs. You have very limited control (if any) of what you can style, even in today’s modern browsers. Designers often feel disappointed in the lack of options available for its visual appearance.
While working away on a top secret project, it was crucial to maintain consistent branding and styling throughout the site, which included custom file uploads. During our first phase, we didn’t have time to implement Flash - which would’ve been the more robust choice - so it was good ole CSS and JavaScript (with a hefty dollop of the Prototype framework) to the rescue.
As it turns out, it was a less daunting task than it seemed, thanks to people like PPK and Shaun Inman laying the ground work for us. Basically, I frankensteined the two methods together.
Here is the demo, which mimic’s Shaun Inman’s: stylized file input.
The only difference in the HTML markup from Sean’s is I’ve wrapped the file input in a div, which I did because the input must be wrapped in a block element and I am lazy, so it’s one less CSS property I had to write!
<div class="file"> <input type="file" /> </div>
Here are the simple CSS rules:
.solidhex-stylized div.file {
background: url('browse.png') no-repeat 0 0;
width: 128px;
height: 38px;
overflow: hidden;
cursor: pointer;
position: relative;
}
.solidhex-stylized div.file input {
opacity: 0;
-moz-opacity: 0;
filter:alpha(opacity=0);
height: 100%;
width: auto;
display: block;
cursor: pointer;
position: relative;
}
The real difference is in the JavaScript, since I am making hefty use of my favorite library - Prototype. Here is the code followed by explanation:
(function() {
function stylizeInput (el) {
if (!el) return;
var input = el.down('input[type=file]');
if (input) {
el.observe("mousemove", function(event) {
input.setStyle({
left: (event.pointerX() - this.positionedOffset()['left']) - (input.getWidth() - 30) + 'px'
});
}).wrap('div', {'class' : 'solidhex-stylized'});
}
}
function init () {
$$('div.file').each(stylizeInput);
}
document.observe("dom:loaded", init)
})();
The basic principles are the same. Search through the document to see if there are any divs with the class name ‘file.’ If there are, grab the file input from the matched div(s), and register a mousemove event to to move the browse button depending where the user has her mouse inside the ‘file’ div. Then, we wrap the entire ‘file’ div inside another div with the class name ’solidhex-stylized’ so all the styles necessary for the trick to work are applied.
I also wrapped it another div for one more reason: I needed to write the file name next to the button. This can be done pretty easily with more help from Prototype. Here’s an example: stylized file input with file status.
Keep in mind the latter sample is a quick ‘n dirty demo; the file updating bit could be less redundant I’m sure. You’ll also probably wont to manipulate the string value so it doesn’t get too long. The reason the first demo only has the button is that I have no way of knowing what kind of design restrictions that other people are working with, so you’ll have to tweak as needed if you’d like to use it.
For now, it’s pretty concise and works without JS or CSS being enabled, so that’s a win-win situation. It also appears to be working fine in the following browsers: IE6+7, Safari 3 and FF3.
Let me know if you find it useful! Like I said, I can’t take too much credit, I stole bits and pieces from Shaun Inman, PPK and my buddy Cedric (although he’ll be unhappy - I ported his tricks from jQuery to Prototype :p)
I realize that’s probably not the best explanation in the world, but just drop me a comment if you have any questions!
Here is the demo in zipped format: demo
Running job ads when your company is looking to hire shouldn’t be all that difficult. Think of the position you are looking to fill, which skills are required, post an ad in the appropriate place(s), and wait for the slew of unqualified resumes to hit your inbox. However, often times a company gets it wrong by asking too much. If you’re looking for a designer, list criteria that match a designer’s background. You wouldn’t expect a designer to be proficient in Java any more than you would expect your janitor to be able to cite the Magna Carta. You have to tailor your requirements to match the job title.
Let’s take a look at an actual ad being run right now. Names have been withheld to protect the innocent. Here’s the headline that leads to the ad:
Seems fairly simple and straight forward. But, if we skip the two paragraphs of sales rhetoric that open the post, we get a list of what you need to be an expert in:
That calamitous noise was the wheels coming off the cart. Generally speaking, you don’t expect a Front-End developer to be an expert in two server side languages, and one framework for a server side language. If I were an expert in all of the above, wouldn’t I be getting pretty close to Senior Developer territory? At the very least I would be a full fledged Web Developer, no longer shackling the Front-End bit to my title, which is oh so limiting.
This seems like a case of expecting too much based on the description. Sure, there are plenty of people out there who fit those criteria to a ‘T’, but they might skim over the ad because of the misleading title. There are also people who will send their resume anywhere and everywhere regardless of what the job description reads - I can’t help you there. If you run an ad asking for a PHP expert, you’ll probably get a least one ColdFusion or .NET guy. It happens.
This ad has been running for a few weeks now, which suggest that they are having trouble filling the position. It seems like it would be a good place to work, judging by the fact that it’s an ‘INCREDIBLE’ opportunity and offers ‘life-changing rewards.’ It’s been a while since I’ve applied to a job that offered to redefine the universe as I knew it, but something tells me these guys can live up to the hype.
Hopefully they find what they are looking for soon and don’t have to wade through too many grossly unqualified leads.
Although the site is displaying the wrong thumbnail, CSS Snap has featured my humble blog in its CSS gallery. It’s the thought that counts, so thank you very much! It’s always nice to get a little link love.
I’d like to wish a happy New Year to my readers, should any still exist. I hope you (yes you) celebrated in style and did yourself proud. I know I did. I would’ve thought mixing that many kinds of liquor and beer would make me throw up. Who knew?
I’ve been making a lot of tweaks to my site as of late, starting with finally getting around to adding an about page. More sections are on the way. I’ve also retooled a bit of the HTML and CSS so the site validates - that is if it weren’t for the syntaxhighlighter plugin. But hey, it’s a helluva plugin and I doubt anyone really cares that much if my CSS has some minor hiccups when run through the W3C validator. If you DO care you might want to pick up a copy of Don’t Sweat the Small Stuff and It’s All Small Stuff so you can break out of your microcosm. Maybe that can be your resolution, stop being so much of a pedant!
Speaking of resolutions, I made a few nerd-ly ones. For starters, I’d really like to learn a lot more PHP this year. I’ve been a tinkerer off and on for a few years now, but I think it’s high time I really wrap my head around it. I’d also like to build a site or two utilizing CodeIgniter. I’ve been really impressed with its lightweight size and how fast you can get up and running, given that you have a bit of background working with PHP and MVC frameworks. Should I produce or learn anything worthwhile, expect to find more writing here.
Anyone out there make any interesting resolutions or set worthwhile goals for himself/herself?
Here’s to a bright and prosperous Oh Nine.
Fluidesign has just launched our iPhone division - and the excitement is palpable. We’re making a big push to develop lots more apps this coming year now that we have a few under our belts. We’re all as nutty about the iPhone as you are, so why not contact us and get your company’s sweet app out there on the market already? We’ve got tons more ideas and we’re looking to make a big splash in oh nine. Care to join us?
After wishing a certain CEO a happy birthday today, I learned this bit of folklore regarding the cheery song we all know and love so much.
The melody of “Happy Birthday to You” comes from the song “Good Morning to All”, which was written and composed by American sisters Patty Hill and Mildred J. Hill in 1893.
Unfortunately for the Hill sisters, they never copyrighted the tune and thus were not privy to all the fabulous riches it no doubt would have brought them. Oh well. I am sure teaching students in the late 19th century was its own reward far exceeding any monetary gains they could have ever enviosioned.
via WikiPedia
Well, I FINALLY got around to re-skinning my humble blog. It’s by no means finished - in fact, I haven’t even done any browser testing - but the major step of getting something, ANYTHING up is accomplished.
I will be adding sections and tweaking the design for the next several evenings to come. If you notice anything wonky, please let me know. I would suspect there might be some unpleasantness in IE6 + IE7, and I will be extinguishing those fires when I can.
Now I have no excuse not to get back to regular posting.