So it’s been a long time since I’ve posted, and there has been so much going on in my life. I’ve moved to New York City to work with Sony BMG making websites for rockstars. I gotta say, it’s been a HUGE change for me. My calm, collected country life where I lived all alone in the woods with the ability to go camping in my back yard was replaced by the hustle and bustle of New York City, staying in a studio apartment next to the Empire State building.
... read onI was working on a select all feature today and just wanted to share this with the world. (a.k.a. keep it for later)
$(document).ready( function() {
$('a#select_all').click( function() {
$('input:checkbox').each( function() {
this.checked = !this.checked;
});
return false;
});
});
The first item to note is that jQuery created pseudo classes for input.
$('input:checkbox');
...
$('input:textbox');
... etc.
The second item to note, which I thought was ingenious, was setting the value of the checkbox to the inverse of it’s current value.
this.checked = !this.checked;
Works great and it’s short and sweet. Who loves jQuery?
... read onI’ve create a new background image today and think I’ll make a shirt out of it. It pretty much summarizes my day today. You can get this background image in 800x600 or 1024x768. If you want it in another size just let me know. For those of you who don’t understand it, be glad. For those of you who do, ‘nuff said.
... read onI recently had a friend ask me how to be able to give CCK fields more user-friendly class names so that they could be styled a little easier. I actually needed to do this myself with a project at work, so I had time to really sit down and figure out a good way to do this.
The Content Creation Kit (CCK) is a great way to add different fields to any particular content type within Drupal. When you first start learning Drupal, you’ll see that it ships with two main content types: Page and Story. The fields that these two content types have by default are the Title and the Body. These are respectively a single line text field, and a multi-line text field of which you can choose an input format. This is great and very useful for basic content, but what if I would like another text field other then just Title and Body? CCK allows you to add this. But instead of trying to explain the power and awe of CCK here, please take a look at the CCK handbook where this is explained in much greater detail.
Now adding CCK fields to a content type is all fine and dandy, but what if I want to make them look better by perhaps changing around the order in which they appear when viewed, or perhaps target that specific element with my CSS in order to specify the exact look and feel of the content it holds? This is where you want to start theming. However, sometimes theming in Drupal can be a pretty complex concept to grok at first. Not because it is very hard, but because without any stepping stones to how theming actually works, you can very easily fall into a dangerous quagmire of code, arrays and objects that you have no idea are even available to you.
This is where Jeff Robbins of the Lullabot crew has come to our rescue with a great module called Content Templates (contemplate). I believe this module is an incredible stepping stone in learning how to bridge the gap that exists between CCK and the way CCK fields are presented (themed). Installing this module will add a new menu item under Content Mangement in your Administration panel called ‘Content templates’, and also a templates tab inside of your ‘Content types’ page of your Admin section. Once you create a template for any given content type, you can effectually customize the look and feel of not just the content type’s node view (labeled Body in contemplate), but also the Teaser and the RSS!
BUT WAIT, THERE’S MORE! Each fieldset (teaser, body, and rss) has not just a text field to edit the template in, but also inserts a default view of what Drupal spits out, ready to edit. And if that isn’t exciting enough for you, there is (IMHO the most useful feature of this module) a rich text-field next to that which lists every object available to you for templating! There’s even some neato javascript that allows you to click on an object and insert the php to print that object into the template field. This is just good stuff man. Fun times. Act now while supplies last. Void where prohibited.
Finding such a gem is really very great, but the excitement starts to wear off after about an hour of trying to template a complete content type inside of that teeny, tiny, little box. Even the javascript insertion of the box next to it begins to feel like a sticky piece of candy that’s lost it’s flavor. I’d like to take this opportunity to mention that the devel module provides you with a feature quite similar to this little javascript flavored object reference box, but unless you’re already very familiar with how to work with these field objects in PHP, the devel module is next to useless. So, again as a stepping stone, the contemplate module really comes in handy for referencing what objects are available to theme, and will give you a little insight as to how to work with them in PHP.
So what do we do about the teeny, tiny, little text box that we’re supposed to put all of our theming code into? Well, fortunately Drupal’s main theming engine, phptemplate, has already taken care of this. Listen carefully now, ‘cuz this is important and I don’t want to lose you now. We’ve already come so far. Each content type can have it’s very own template file within your theme.
You can actually accomplish this very easily. The first step is to create a file within your theme directory named node-content_type.tpl.php replacing content_type with the machine readable name you’ve given your content type. So if your content type is named forum, you’ll want the file to be named node-forum.tpl.php. For almost all of my work lately I’ve been using a theme called zen. It’s written by the Lullabot crew once again, and is probably the best theme out there to teach you anything about a theme. This theme has a file that is a custom themed content type already specific to the forum module. The file is node-forum.tpl.php. I’ve used this on multiple occasions as a template on how to start a new custom theme file for a content type. If you use this file, you’ll notice that, among other things, it prints out the $content variable. All of our CCK fields can be found inside of this variable, along with the default theming of them that you find in the contemplate module’s teeny, tiny, little box for the template code. So you can take the code that is generated by default in the contemplate module, and insert all of that where you see the $content variable being printed in the tpl file. From there, you can do all of your editing in the editor of your choice without having to strain your back trying to bend closer to your monitor to see what’s inside of the teeny, tiny, little box.
... read onFollowing my recent post on my rolechanger module, I started delving into how to provide functionality with the resulting dropdown box that the module provides. I wanted to provide all functionality through javascript and have included a rolechanger.js file for this purpose. However I found a few quirks while working with jQuery and the select element.
I started out with a .change() on the select element and drilled down through the .children() looking for [@selected]. However, thought this worked fine in IE, Firefox did not pick this up at all. I saw in the jQuery issues that this had been fixed, but evidently not for the release that ships with Drupal. Here’s the resulting code for the IE portion:
// ie doesn't pick up the option.click, so we'll have to use the select.change
$('#edit-role-changer').change(function(){
// get rid of select box
$('#edit-role-changer').hide();
// show the chosen role as static text
// NOTE: FF doesn't pick up [@selected]
$('#role').html($(this).children("[@selected]").text()).show();
// provide a change link
$('#role-change-back').show();
});
Firefox was actually a little easier to code for, since I found that it would pick up a .click() on the option element. So the resulting code for Firefox is this:
// provide action for an option change
$('#edit-role-changer option').click(function(){
// get rid of select box
$('#edit-role-changer').hide();
// show the chosen role as static text
$('#role').html($(this).text()).show();
// provide a change link
$('#role-change-back').show();
});
Since Firefox does pick up the .change() function that is on the select element that is used for IE, I then had to do a browsers detection, which jQuery makes simple as pie with $.browser. Here is the resulting full code:
// see which browser we're working with
if ($.browser.msie) {
// ie doesn't pick up the option.click, so we'll have to use the select.change
$('#edit-role-changer').change(function(){
// get rid of select box
$('#edit-role-changer').hide();
// show the chosen role as static text
// NOTE: FF doesn't pick up [@selected]
$('#role').html($(this).children("[@selected]").text()).show();
// provide a change link
$('#role-change-back').show();
});
}
else {
// provide action for an option change
$('#edit-role-changer option').click(function(){
// get rid of select box
$('#edit-role-changer').hide();
// show the chosen role as static text
$('#role').html($(this).text()).show();
// provide a change link
$('#role-change-back').show();
});
}
Happy jQuerying!
... read on