OLDIFS=$IFS

I forgot to set it back at the end of my one-liner, which caused some problems for me. I tried checking another server to see what the default is, but if you just run the command

# echo $IFS
#

you see that you just get a blank line. The way to show all non-printing characters is to pipe the output into cat with a couple of switches.

# echo "$IFS" | cat -vTE
 ^I$
$
#

The switches stand for the following:

-v, –show-nonprinting

use ^ and M- notation, except for LFD and TAB

-T, –show-tabs

display TAB characters as ^I

-E, –show-ends

display $ at end of each line

**Note -t can be substituted for -vT; -e can be substituted for -vE

So our output above, indicates that the default setting for the $IFS variable is: a space, followed by a tab, followed by a new line character.

Once I had this information, it was very easy to then reset the $IFS variable back to it’s default. While trying to set this, I had problems with the tab (for some reason it wasn’t registering) so I just wrote it as ‘^I’. Once set, run the

echo "$IFS" | cat -vTE

command again to verify and make sure it matches the output above and you’ll be all set.

I was working on a new web design last night early this morning I found myself struggling (probably more than I should have been) with creating tabbed content switcher (hover over one element changes the content of another). I knew the right way to go was jQuery, and I wanted to avoid downloading a plugin as that would likely end up with more code and another HTTP request to the server. As I was working on the content switcher, I had one of those “Let’s try this and see what it does” moments (those tend to work all to often for me). It turned out that it did half of what I needed, so I removed another line and voila! I had my content switcher. So without further ado, here it is.

The Story

This project was a site I took over from another developer. My responsibilities were to finish the project and clean things up. The previous developer went 95 yards, I needed to put the ball in the end zone. For legal reasons, I can not show a screenshot of the full comp unfortunately. I initially was just going to clean up code and fix validation, CSS, and jQuery. However, I quickly realized that would end up making it harder. So I decided to rewrite the HTML and CSS and duplicate the look and feel of the previous version. An added benefit to rewriting the code my own way, in addition to being more familiar with the code and all the CSS hooks, is that I could focus on reducing code bloat and cut down on the amount of images being used to help deliver a better performing site to the client. Here is a look at the tabs themselves. Hovering over each tab changes the content below:

The HTML

My first goal was to create the tabs and still make them SEO friendly by having all the content actually in the markup, and not added/removed as needed. The markup for the tabs are as follows:

     <div id="main_middle">
      <ul>
       <li id="tab-1"><a href="#" class="active_tab">Tab 1</a></li>
       <li id="tab-2"><a href="#">Tab 2</a></li>
       <li id="tab-3"><a href="#">Tab 3</a></li>
       <li id="tab-4"><a href="#">Tab 4</a></li>
       <li id="tab-5"><a href="#">Tab 5</a></li>
      </ul>
      <p class="active_tab_content">Content 1 - Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p>Content 2 - Mauris ornare suscipit lacus eget lobortis. Vestibulum quis purus metus, sed condimentum magna.</p>
      <p>Content 3 - Nunc et turpis laoreet mi dapibus pulvinar. Nunc a facilisis mauris. Nulla facilisi. Morbi sed volutpat elit. Cras varius sollicitudin mi at imperdiet.</p>
      <p>Content 4 - Ut a consectetur quam. Nulla ut consequat metus. Nunc molestie erat sit amet tortor faucibus elementum. Praesent eu luctus nulla.</p>
      <p>Content 5 - Proin porttitor mattis erat eget ullamcorper. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
     </div>

As you can see, the HTML is only 14 lines long: a container element, an unordered list, and paragraph elements (one for each tab). This is a far cry from the 47 lines of HTML with divs nested 3 deep the previous developer was using. Additionally, the container has an id as well as each tab, plus a class for the active tab and paragraph and that’s it. This can be done without the id’s, I have them in there for CSS sprite functionality. The active_tab class is not required, again it’s something I use for my sprites.

The CSS

Here is the pertinent CSS to making this work. I have a bunch extra for my sprites, but that’s beside the point:

#main_middle ul li {
 display: -moz-inline-stack;
 display: inline-block;
 zoom: 1;
 *display: inline;
 text-align: center;
 vertical-align: text-top;
}

#main_middle ul li a {
 display: block;
 width: 100%;
 height: 100%;
}

#main_middle p {
 background: url(../images/tab_content_bg.png) 50% 0 no-repeat transparent;
 display: none;
}

#main_middle .active_tab_content {
 display: -moz-inline-stack;
 display: inline-block;
 zoom: 1;
 *display: inline;
}

#main_middle ul #tab-2 a { /* Example of Sprite Usage */
 background-position: -95px 0;
}

#main_middle ul #tab-2 .active_tab { /* Example of Sprite Usage  */
 background-position: -95px -79px;

The display/zoom lines is for cross-browser inline-block display. The code for the anchor elements simply sets them to a block the full size of the list item parent. Next, all paragraph elements are hidden and only the one with the “active_tab_content” class is displayed. The background is set for all the paragraph elements, although I could’ve just as easily set it for just the display content only.

Here is my sprite so you get the idea of what I’m doing with that code:

The jQuery

The biggest problem I was encountering while writing the jQuery was that when the user stops mousing over the tabs, the last tab moused over should remain visible, and not revert back to the “active_tab” and “active_tab_content” tab.

$(function() {
 $("#main_middle ul li a").each(function(index) {
  $(this).hover(function() {
   $("#main_middle ul li a").each(function() { $(this).removeClass("active_tab"); });
   $("#main_middle p").each(function() { $(this).removeClass("active_tab_content"); });
   $(this).addClass("active_tab");
   $("#main_middle p:eq("+index+")").addClass("active_tab_content");
  });
 });
});

The jQuery code loops through each of the anchor elements and assigns a hover function to them. The first thing this hover function does is loops through all anchors (tabs) and all paragraphs (tab content) and removes the classes. It then adds the “active_tab” class to the current tab and the “active_tab_content” class to the respective paragraph. It does this through the use of indexes. One each pass through the anchors, the current element index is passed through the function and then used to select the paragraph with the equivalent index via the eq selector. And that’s it. My mistake that I kept running into, was assigning second function to the hover() to activate on mouseout. This function was removing the classes that were being added. This was my moment of brilliance luck when I removed that code by chance and everything worked.

See the code in action here

You can use this code to make as many tabs as you need. Just make sure you have as many paragraph elements as you do list elements and that the content for list item 1 corresponds with the content for paragraph 1. I used inline tabs, but this can easily be done with vertical tabs as well, the logic is still the same. Feel free to copy/use this code for your own purposes. Share a link to your implementations in the comments below and/or how you would have done this differently. Comments are welcome and enjoyed.

array=( ${array[@]-} $(echo "$variable") )

The code above reads as follows:

array=( ….. ) : Set your array variable named, appropriately enough: array.

${array[@]-} : Read all variables from the array array. The hyphen at the end prevents an “unbound variable” error when -u or -o nounset is set and array is an empty array. This is useful for appending the first value to an empty array in the event that one of the aforementioned flags is set.

$(echo “$variable”) : Add the variable $variable to the array through the use of command substitution $(…) by reading the output of echo “$variable” as the input value for the array. The reason for command substitution is that if you try it without the $(…), bash will read echo and “$variable” as separate entries into the array instead of just the value of $variable

This option is useful for dumping large tables. It forces mysqldump to retrieve rows for a table from the server a row at a time rather than retrieving the entire row set and buffering it in memory before writing it out.

(source: MySQL :: MySQL 3.23, 4.0, 4.1 Reference Manual :: 4.5.4 mysqldump — A Database Backup Program)

Your full command should look something like this:
$ mysqldump -u user -p password -q database > outfile.sql

.htaccess
Options Indexes
httpd.conf
<Directory /your/domain/directory/>
Options Indexes
</Directory>

If you have a valid index file and you’re still getting the 403 Forbidden error, next check for an .htaccess file as the directives in there could likely be causing problems. The easiest way to check this is to rename your .htaccess file to something else like .htaccess.backup. Check your site now. If you no longer get the error, you know it’s something in your .htaccess file.

If you have a valid index file and no .htaccess file and you still have the 403 Forbidden error, one last thing to check is the permissions on the public_html directory of your domain. This directory should be set to 755 permissions (rwxr-xr-x) to enable web browsing. The world user needs read and execute permissions for web users to be able to access your site. You will also want to make sure that the files themselves that are being accessed have the proper permissions on them, typically 644 for files (rw-r–r–), unless they are CGI files (Perl, Python, Ruby) which need to have execute permissions and shoud be set to 755 (rwx-r-xr-x).

These are the most common issues that can cause a 403 Forbidden error on your website and should be able to resolve 99% of 403 errors you see.

From - Mon Jun 22 15:43:01 2009
X-Account-Key: account6
X-UIDL: UID52-1242085352
X-Mozilla-Status: 0001
X-Mozilla-Status2: 00000000
X-Mozilla-Keys:
Received: (qmail 11994 invoked from network); 22 Jun 2009 15:42:58 -0700
Received: from smtpauth01.prod.mesa1.secureserver.net (64.202.165.181)
by ip-97-74-114-123.ip.secureserver.net with SMTP; 22 Jun 2009 15:42:58 -0700
Received: (qmail 12509 invoked from network); 22 Jun 2009 22:42:57 -0000
Received: from unknown (172.21.44.241)
by smtpauth01.prod.mesa1.secureserver.net (64.202.165.181) with ESMTP; 22 Jun 2009 22:42:57 -0000
Message-ID: <4A4008F1.8020205@desertwebdesigns.com>
Date: Mon, 22 Jun 2009 15:42:57 -0700
From: Mark Stoecker <webmaster@desertwebdesigns.com>
User-Agent: Thunderbird 2.0.0.21 (Windows/20090302)
MIME-Version: 1.0
To: admin@poundbangwhack.com
Subject: Test Email
Content-Type: text/plain; charset=ISO-8859-1; format=flowed
Content-Transfer-Encoding: 7bit

When troubleshooting email delays, the first thing you want to do is get all your times in the same time zone. Some servers will timestamp based on their current time, some will timestamp based on GMT. It will be easier to read if they are all the same timezone. In the example above, there are 6 timestamps we need to be concerned with, 2 of which are in GMT.

After getting all your times sorted out, the next thing you want to do is follow the delivery path (from bottom to top). Each server that the message passes through will stamp it. The tricky thing about reading the Received: lines is that they list first the sender, then the recipient: Received: from smtpauth01.prod.mesa1.secureserver.net (64.202.165.181)
by ip-97-74-114-123.ip.secureserver.net with SMTP; 22 Jun 2009 15:42:58 -0700 As you can see here, the message was received from smtpauth01.prod.mesa1.secureserver.net by ip-97-74-114-123.ip.secureserver.net. If this gets confusing, just rearrange it to make it easier: Received by ip-97-74-114-123.ip.secureserver.net from smtpauth01.prod.mesa1.secureserver.net Now it makes a bit more sense.

So if we were to take the critical delivery points in the chain, fix the timestamps, rearrange the delivery notices, and re-order the server stamps so it reads top-to-bottom like we do, our headers would read something like this:Date: Mon, 22 Jun 2009 15:42:57 -0700
Received: by smtpauth01.prod.mesa1.secureserver.net (64.202.165.181) from unknown (172.21.44.241) with ESMTP @ 22 Jun 2009 15:42:57 -0700
Received: (qmail 12509 invoked from network) @ 22 Jun 2009 15:42:57 -0700
Received: by ip-97-74-114-123.ip.secureserver.net from smtpauth01.prod.mesa1.secureserver.net (64.202.165.181) with SMTP @ 22 Jun 2009 15:42:58 -0700
Received: (qmail 11994 invoked from network) @ 22 Jun 2009 15:42:58 -0700
From - Mon Jun 22 15:43:01 2009 If you compare the two “headers” carefully, you will see that all I did was change the timestamps to MST, swap the “Received From” and “Received By”, and ordered them top-to-bottom instead of bottom-to-top. Looking at the headers now, there was obviously no delay in this message. However, had one of the timestamps been off by 30-40+ minutes, looking at the headers this way will help us determine where the delay is. We would know that when the message came in late at one step, the server it came from is having the problem.

There are plenty of other uses for reviewing mail headers that are too numerous to count in this post. However, if you’re email is not delivering in a timely manner, this will help you track down the cause. Once you get the hang of reading email headers, you’ll be able to read them as they’re printed without having to rewrite them.

The input parameters are as follow:

• if: Input File – force dd to read from the file specified, in this case /dev/zero (or /dev/urandom) instead of standard input
• of: Output File – force dd to write to the specified file instead of standard output
• bs: Byte Size – force dd to use the specified amount of bytes at a time for both input and output (in this case 1 MB at a time)
• count: Count – tell dd to copy the specified number of input blocks at a time (in our case 10 blocks of 1 MB)

Important Note: If you don’t know what you’re doing, you can do some serious damage with the dd command with the wrong parameters specified, such as erase an entire disk partition. The above commands are provided for informational purposes only. I am not responsible for any damage done by executing such commands incorrectly on your system. If you are unsure about executing this command, please, by all means, verify the information provided before executing it.

Phillip made a very easy function (posted below) that allows you to insert code for multiple Adsense units into your blog theme’s functions.php file and then call it with the comment-style tag <!–Adsense1–> (a la <!–more–>). After modifying the functions.php file, you only need to modify the single.php file to call the function in order to get return the Ads.

The beauty of the function is not only that you can create additional adsense units and call which specific one you need, but that if you happen to place your <!–Adsense1–> code before the <!–more–> tag or within the post excerpt, it will be read as a regular HTML comment since the index.php or archive.php files do not recognize <!–Adsense1–> as a WordPress tag.

Check back on my blog or subscribe to my feed as I plan on turning this function into a WordPress plugin to streamline the installation and use even more.
——————
Edit your theme’s functions.php file by appending the following lines to the end of the file. Your functions.php file is located at /wp-content/themes/[your theme name]/functions.php. If you do not have a functions.php file, you can create one with this code (make sure you replace your Adsense Code)

function get_the_content_with_formatting ($more_link_text='', $stripteaser=0, $more_file='')
{
   $content = get_the_content($more_link_text, $stripteaser, $more_file);
   $content = apply_filters('the_content', $content);
   $content = str_replace(']]>', ']]>', $content);
   return $content;
}

function AddGoogleAds ($content)
{
$Adsense1_1 = <<<ADSCODE1
<script type="text/javascript"><!--
google_ad_client = "pub-9999999999999999";
google_ad_slot = "0000000000";
google_ad_width = 250;
google_ad_height = 250;

//-->
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
ADSCODE1;

$Adsense2 = <<<ADSCODE2
<script type="text/javascript"><!--
google_ad_client = "pub-9999999999999999";
google_ad_slot = "1111111111";
google_ad_width = 336;
google_ad_height = 280;

//-->
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>ADSCODE2;

$content = str_replace(array('<p><!--Adsense1--></p>','<!--Adsense1-->'),$Adsense1,$content);
$content = str_replace(array('<p><!--Adsense2--></p>','<!--Adsense2-->'),$Adsense2,$content);
return $content;
}

(source: Philip Ze)

After you have made the above changes, make the following changes to your single.php file, again in your theme’s directory. Find the line with the tag the_content(parameters) and replace it with the content below:

<?php
   $cont = get_the_content_with_formatting();
   $cont = AddGoogleAds($cont);
   echo $cont ;
?>
<?php /* the_content('(more)'); */ ?>

Again, to insert your ads into your post content, place the tag <!–Adsense1–> or <!–Adsense2–> into your content. You can continue adding more Adsense units to your functions.php file following the same templaye as what is currently there.

I had initially posted instructions on how to change the default Qmail port. However, an associate of mine pointed out the fallacy in my instructions. Changing the default Qmail port will prevent email from being delivered to your server as foreign mail servers will try to connect to your server on port 25 and if you change it, you won’t be able to receive email. I completely forgot about that little side effect when I posted this and have thus changed this post to only show how to configure an alternate port for Qmail.

A couple days ago I wrote about how to troubleshoot an email server when it isn’t working. This post isn’t necessarily follow-up to that, but more of a corollary. One of the things I didn’t mention in that post is what to do if you are running an email server and your ISP does not allow outgoing connections over port 25, the standard SMTP port. Many ISP’s have this policy to cust down on Spam sent through their servers, mine included. So when I tried to connect to my email the other day through Mozilla Thunderbird, I ran into a problem. I knew what I had to do. I had to configure Qmail to use an alternate port.

The first thing you will need to do is locate the service script for your email service. In my case, since I use Qmail with Plesk, my script was located at /etc/xinetd.d/smtp_psa. You will most likely have another one for SMTP over SSL named smtps_psa (or something close to). Next, you need to see what ports your server is currently listening on so you do not assign it to the same port as another service and cause problems. To do that, run the following command
netstat -tulpn | grep tcp That will show all current running services, the port their using, and filter out TCP only (so as not to see duplicate ports in the UDP section. You will be concerned with the column labeled “Local Address” as that will show the IP (0:0:0:0 or ::: means all IPs) and the port in use. Pick a random port number not in use for your SMTP configuration. I chose 2525.

How to configure Qmail to use an alternate port

To configure an alternate qmail port, you will need to first copy the default smtp service file to create an alternate configuration. I did this with the following code cp /etc/xinetd.d/smtp_psa /etc/xinetd.d/smtp_alt_psa You will then need to open your alternate service file and configure the alternate service name. Using a text editor of your choice (I like vi), type vi /etc/xinetd.d/smtp_alt_psa The first line should look something like service smtp That line will need to be changed so we don’t have two services with the same name. Hit i to enter insert mode and change the first line to read service smtp_alt Hit Esc, type :wq to write and quit.

We now need to edit the /etc/services file to set the port. Make sure the service name you use matches the service name you entered in the alternate configuration file above. I added these lines right below the original SMTP lines. Hit i again for insert mode and write in the two following lines smtp_alt 2525/tcp mail
smtp_alt 2525/udp mail Your /etc/services file should look something like this smtp 25/tcp mail
smtp 25/udp mail
smtp_alt 2525/tcp mail
smtp_alt 2525/udp mail Hit Esc, type :wq to write and quit. Now restart your email service. Again, here was my code to do that service xinetd restart Run the netstat -tulpn | grep tcp command again to verify that your email service is now listening on port 25 and 2525.

That’s all there is to it. You should now be able to connect through your email client to your server on your alternate port. Questions? Comments? Problems? Post them below and I’ll do my best to help out.

For more help on using the vi/vim text editor, visit our Linux command line cheat sheet with extensive information on using vi.