Alternating column colors with jQuery

By Tim Priebe on January 4, 2010 at 7:04 pm in Design, Technical, css, html

jquery-tablesWe recently had one of our designers create a table design for a client with alternating column colors. Instead of laughing at her and not coding it, we instead decided to use a little jQuery goodness to get it taken care of.

We included the following code in our document’s head, using the Google jQuery implementation:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3.2");

google.setOnLoadCallback(function() {
$("table tr td:nth-child(even)").addClass("even-column");
$("table tr th:nth-child(even)").addClass("even-column");
});
</script>

So that’s the code that gives every other table cell, including header cells, the class of even-column. Now we can style those cells however we’d like.

In our case, a little CSS transformed the table pictured below on the left into the table on the right.

screen-shot-2010-01-04-at-64457-pm screen-shot-2010-01-04-at-64510-pm

Of course, putting the following in our google.setOnLoadCallback function will do something similar for rows.

$("table tr:nth-child(even) td").addClass("even-column");

This would result in the following:

screen-shot-2010-01-04-at-64554-pm

While this could have been solved by actually hard-coding the table’s cells with the even-column class, we are using Wordpress on this site. This means the client could add their own table on down the line, having no idea what a class is, much less to add a specific one to every other cell in every row of the table. Plus, that would be a lot of work.

Demo of Wordpress Plugins 1/3

By Tim Priebe on December 16, 2009 at 6:32 am in Technical, Video

Recently at a local Wordpress Users’ Group, I discussed some of our favorite Wordpress Plugins here at T&S Web Design. Check out part 1/3 below, with Contact Form 7. Parts 2 & 3 coming soon…

Tip for IE6 fixes in Dreamweaver

By Tim Priebe on November 27, 2009 at 5:03 pm in How-To, Technical, css

Dreamweaver and conditional IE6 CSSIf you’re a Dreamweaver user and you try to make sure your sites work in Internet Explorer 6, this tip is for you.

When using Dreamweaver templates, one of the things that Dreamweaver does well is automatically correct paths for you. This is extremely helpful, because you don’t have to worry about what directory you’re in when linking to files.

So you might link to a style sheet in your template Templates/main.dwt like this:

<link href="../_css/reset.css" rel="stylesheet" type="text/css" />

Then, when you look at a file index.php one directory up, it looks like this:

<link href="_css/reset.css" rel="stylesheet" type="text/css" />

Or, in a file /misc/news/index.php, it looks like this:

<link href="../../_css/reset.css" rel="stylesheet" type="text/css" />

Internet Explorer 6 often requires several CSS fixes to get your website to look like it does in other browsers. The method I personally prefer (and that we use at T&S) is a separate CSS file for IE6 that’s applied only when IE6 is used.

Here’s what that looks like:

<!--[if lte IE 6]>
<link href="_css/ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->

The only problem when using this technique in Dreamweaver-based sites is that Dreamweaver sees the entire thing as an HTML comment, and therefore does not update the CSS file’s path when it’s in a different folder. So it might work in some files, and not in others.

If your files are PHP files, there’s a workaround. You can use the following code:

<?php echo "<!--[if lte IE 6]>\n"; ?>
<link href="_css/ie6.css" rel="stylesheet" type="text/css" />
<?php echo "<![endif]-->\n"; ?>

And there you go. Now Dreamweaver will skip over the PHP code, and will assume that the IE6 stylesheet is just a normally linked stylesheet. Your browser will interpret the code correctly, but Dreamweaver will still update the path for you.

Firebug in IE

By Sean Sanders on October 20, 2009 at 6:50 am in Development, Technical, css, html

firebug-logoI’m Sean Sanders, one of the relatively new programmers here at T&S. Our former programmer Nick Little blogged previously about tools to help with web development, and one of those tools I find incredibly useful is the Firebug plugin for Firefox. There are some situations when having the ability to look at the CSS in other browsers the way you can in Firefox is helpful.  This is especially true with IE. Because of the way IE chooses to (not) display CSS rules, we often have to create style sheets just for IE to make it display our sites properly. A few days ago I found myself in a situation where I was trying to debug a site in IE7 and wanted to figure out exactly which rules were being applied. I looked into seeing if there was a way to use Firebug in IE.

What I found was a short bit of Javascript the people behind Firebug had written to be able use some of Firebug’s functionality in other browsers. They call it Firebug Lite.  This isn’t the full addon for Firefox, so you can’t change CSS on the fly the way you can in Firefox, but it’s still useful for being able to see how the rules you’ve created are getting applied. The following is the script for adding it to your website:

<script type=”text/javascript”
src=”http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js”></script>

Also, for ease of use I wrote a bit of PHP to quickly turn the Firebug Lite script on and off.

<? if ($_GET['firebug']=="1") { ?>
<script type="text/javascript" src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js"></script>
<? } ?>

Now all you have to do is view the webpage normally when you don’t want to see the Firebug information, and add the parameter ?firebug=1 to the end of the url if you want to turn on Firebug. (Or, if there are already URL parameters, &firebug=1) I mentioned IE earlier, but if you are having trouble with your website in other browsers, such as Safari or Opera, it works equally well.

Free One Page Website Workshop

By Tim Priebe on July 18, 2009 at 10:39 am in Technical, Workshops, freebies

Laptop in Field - One Page Website WorkshopJoin us for this free workshop! In an hour and a half, learn how to create a website and get it online.

We’ll be providing attendees with several one page website templates to choose from. Then you’ll learn how to fill in your template with actual content.

Once your one page website is ready, we’ll show you how to purchase a domain name and hosting, so your website has a place to live online.

Finally, we’ll look at testing and uploading the final website.

We’d love to see you at this event. If you think you might come, please RSVP through our One Page Website Workshop event page on Facebook.

Display the top level category in Wordpress

By Tim Priebe on July 16, 2009 at 12:00 pm in Development, How-To, Technical

Wordpress LogoThe is just a quick Wordpress code snippet for those Wordpress programmers or code dabblers out there.

Recently we needed a page in Wordpress to display the top parent page title rather than the current page’s title as the heading on the page. Here’s the code we used to accomplish that:

<?
$currPost = $post;
while ($currPost->post_parent) {
  $currPost = $currPost->post_parent;
}
$title = get_the_title($currPost);
?>

<h2>[ <?php echo $title; ?> ]</h2>

Manipulating Wordpress strings that print directly

By Tim Priebe on July 13, 2009 at 9:00 am in Development, How-To, Technical, html

Disclosure: This post is for tech-inclined Wordpress users, who like to code, or even do it out of necessity. If that doesn’t interest you at all, or you have no idea what I’m talking about, feel free to ignore this post.

We’re big fans of Wordpress around here. Unfortunately, many of Wordpress’s functions directly print out text and HTML instead of returning a string that can be manipulated directly.

Fortunately, there is a way around that limitation, ob_start. You can feel free to read the  documentation of ob_start, but the short version is that it buffers your output temporarily so you can save it as a string and manipulate it before outputting it.

Let’s look at an example. We’ve added some meta data to a post to display some dates and locations on a page. (Click to enlarge)

Wordpress meta data

Now let’s look at the code.

<?php the_meta(); ?>

The above code outputs the following HTML:

<ul class='post-meta'>

<li><span class='post-meta-key'>July 14, 2009:</span> Marketing Rxpo</li>

<li><span class='post-meta-key'>July 7, 2009:</span> Client Mixer</li>

</ul>

We want two changes. First, we don’t want the colon (:) after the date. Second, we want the spans to have a class of Date instead of post-meta-key. With the code as is, Wordpress just displays the info, with no way to change it. So let’s use ob_start instead:

<?php
ob_start();
the_meta();
$out = ob_get_clean();
$out =  str_replace(':</span>', '</span>', $out);
$out =  str_replace('post-meta-key', 'Date', $out);
echo $out;
?>

Here’s the output we get now:

<ul class='post-meta'>
<li><span class='Date'>July 14, 2009</span> Marketing Rxpo</li>
<li><span class='Date'>July 7, 2009</span> Client Mixer</li>
</ul>

Naturally, any string manipulation that can be done in PHP can be performed, this is just a simple example.

Clear out some apps: your dock will appreciate it

By Emily Spirek on June 26, 2009 at 4:50 pm in General, Technical

People always find it humorous to make fun of me for the excessive amount of applications on my Mac’s dock. Despite the torture,  I have always justified each application’s position because I use every one on a daily basis. Finally, Dave (the other designer), came to my rescue and showed me a wonderful tool that clears my dock. All you need to do is add your most used applications to your Finder window, and you’re golden. Here’s what it looks like:

picture-20

And here’s how it’s done: navigate to your Applications folder in Finder, and drag the desired app next to the “search” field. Hold it there until it gives you the green + symbol and drop it. And you’re done! If you want to open a file in that particular app, just drag the file over the icon and it’ll open right up! No more right-clicking to “open with” a certain application.

If these applications aren’t in use, it frees up your dock and no one will have a reason to make fun of you. And, if you have quite a few windows open, your dock doesn’t squash to a microscopic blob.

Min-height, Min-width, & IE6

By Nick Little on September 17, 2008 at 6:30 am in General, Technical, css

There is a way to get elements in IE6 to have a min-height and a min-width. However, both require hacks that isolate IE6 from other browsers. We’ll start with the easy one.

Min-height can be achieved in IE6 by using a conditional HTML comment and the height CSS property. It turns out that Microsoft decided that the height CSS property in IE6 and below should actually be the minimum height. We can put this inside a style tag in the HTML comment after the initial CSS. This way all other browsers will not see the CSS.

<style type="text/css">
  .minheightclass { min-height: 100px; }
</style>
<!--[if lte IE 6]>
<style type="text/css">
  .minheightclass { height: 100px; }
</style>
<![endif]-->

Make sure that the element with the min-height does not have overflow: auto. It will not work in that case. You will need to override the overflow in the IE6 conditional comment in order for it to work.

Min-width in IE6 is a little bit trickier and it requires javascript to be enabled. We will still use the conditional HTML comment, but we will have to add a Microsoft proprietary CSS expression. A CSS expression allows some javascript code to dynamically determine the value of a CSS property. We will apply the expression to the width property.

<style type="text/css">
  .minwidthclass { min-width: 350px; }
</style>
<!--[if lte IE 6]>
<style type="text/css">
  .minwidthclass { width: expression(this.clientWidth > 350 ? "100%" : "350px"); }
</style>
<![endif]-->

Be careful when using this hack as it can cause the browser to lock up if you get the values wrong.

Keeping N’sync with Apple Mail

By Nick Little on September 3, 2008 at 6:30 am in Email, Mac, Technical

One of the most difficult and annoying things to set up in a small business is email. There are so many different options that it can be frustrating to even attempt to configure email. What’s the difference between IMAP and POP3 anyways? I’ve seen people just type in their email address and it works. Why doesn’t mine work like that? I will attempt to answer some of those questions in this post.

There are three main email retrieval protocols in use:

  • Exchange - This is a proprietary mail protocol used by Microsoft to receive email from an Exchange Server. Support for this protocol is heavily integrated into Outlook. It is the easiest to set up. Simply enter your email address and password and Outlook takes care of almost everything else for you. In addition to easy set up, the Exchange protocol allows an Outlook client to be connected constantly to the Exchange Server, so any email received by the server when almost instantly be sent to the user. This means that you will know you have an email the instant it has been received.
  • IMAP - IMAP stands for “Internet Message Access Protocol.” It is very similar to the Exchange protocol, with the exception of the set up. It, like the Exchange protocol, allows messages to be retrieved the instant they are received, but it is harder to set up. In addition to email and password, you will need to know the mail server, your username to connect to the server, and whether or not the server uses SSL.
  • POP3 - POP3 stands for “Post Office Protocol version 3.” It is very different from the other two. It requires just as much information to set up as IMAP, but it does not maintain an active connection to the server. Meaning that it only checks every few minutes to see if any new mail has been received. Another limitation of POP3 is that it doesn’t allow messages to be marked as read on the server. Meaning that if you check your email with an email client on one computer, read, and delete some email messages and then you check it using a different computer, you will have to go through the same messages you went through before. This is extremely annoying, even more so the more computers you check the email with. The one advantage to this is that every computer will always have every email you received.

The one problem with IMAP is that it every email that you delete is deleted from the server. Most people want to have one copy of every email they have received for reference. The problem is that many mailboxes limit the size of the mailbox so that once it is full they can no longer receive new messages (POP3 doesn’t have to worry about this, since most email clients are set to remove the message from the server after a few days). To get around this we need to have a way to move old email off the server and into a different folder. This can be done in almost every email client using offline folders. I will show you how to do it in Apple Mail.

The first thing you will need to do is create a folder to store the old messages. Click Mailbox -> New Mailbox… and add the mailbox to On My Mac. Once the mailbox has been added, create a rule (Preferences -> Rules -> Add Rule) that will move old mail into it when it was received or sent a certain number of days ago. Under “Perform the following actions” select that you want to move the message to your new folder.

This archiving method allows you to get all the advantages that come with IMAP (not having to delete every junk email from your work computer, home computer, and iPhone, individually) along with the advantages of POP3 (being able to keep all your email messages in case you need to reference them later). It also keeps the number of emails in your inbox way down, depending on how many days you choose to wait before archiving your messages.

Older Posts »