The essence of the script is as follows: it shows a welcome message for regular commentators.

How it works

It’s very simple. Script checks whether the required fields Name/E-mail are filled and performs the following:

• If a visitor of your blog at least once left a comment, next time he will see a “Welcome back, %username%!” message at the comment form.
• The Name/E-mail/URL fields will hide, there will be only comment field.
• Commentator can change his data by clicking on “Edit” link.
• If visitor has disabled JavaScript in his browser, he will see the full comment form.

For working the script it’s necessary to satisfy the two conditions:

1. Cookies must work in visitor’s browser.
2. WordPress must remember a previously entered data in comment form.

Always be sure that the second condition is satisfied, otherwise there will no sense in connecting the script. I know what some WordPress plugins can prevent to output entered data in the comment form.

Examples

1. If you at least once left a comment on this blog, you will see “Welcome back” message near the comment form.
2. Also you can see an example on a separate page:

How to use it

1. Find in the comments.php file of your theme the code of a name, e-mail and URL fields and wrap them into the <div id="authorData"></div> container.

   I’ll show an example with default WordPress theme.

   Before:

   <p><input type="text" name="author" id="author" value="<?php echo esc_attr($comment_author); ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> />
   <label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label></p>
    
   <p><input type="text" name="email" id="email" value="<?php echo esc_attr($comment_author_email); ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> />
   <label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?></small></label></p>
    
   <p><input type="text" name="url" id="url" value="<?php echo esc_attr($comment_author_url); ?>" size="22" tabindex="3" />
   <label for="url"><small>Website</small></label></p>

   After:

   <div id="authorData">
     <p><input type="text" name="author" id="author" value="<?php echo esc_attr($comment_author); ?>" size="22" tabindex="1" <?php if ($req) echo "aria-required='true'"; ?> />
     <label for="author"><small>Name <?php if ($req) echo "(required)"; ?></small></label></p>
    
     <p><input type="text" name="email" id="email" value="<?php echo esc_attr($comment_author_email); ?>" size="22" tabindex="2" <?php if ($req) echo "aria-required='true'"; ?> />
     <label for="email"><small>Mail (will not be published) <?php if ($req) echo "(required)"; ?></small></label></p>
    
     <p><input type="text" name="url" id="url" value="<?php echo esc_attr($comment_author_url); ?>" size="22" tabindex="3" />
     <label for="url"><small>Website</small></label></p>
   </div>

2. Connect the following jQuery script to your site (and also don’t forget to connect the jQuery framework, if it still isn’t connected):

   (function($) {
   $(function() {
    
     var author = $('#author').val();
     if( author !='' && $('#email').val() !='' ) {
       $('#authorData').hide();
       $('#authorData').before('<div id="welcome">Welcome back, <strong>' + author + '</strong>! <a href="#">Edit &raquo;</a></div>')
       $('#welcome a').toggle(
         function() {
           $('#authorData').show(300);
           $(this).html('Minimize &raquo;');
           return false;
         },
         function() {
           $('#authorData').hide(300);
           $(this).html('Edit &raquo;');
           return false;
         }
       );
     }
    
   });
   })(jQuery)

3. That’s all.

I think the commentators of you site will appreciate this feature ;0)

As a result I have made pretty FeedBurner counter using only CSS3, and in this post I want to tell you, how to create such a counter on your site.

I made a demo with different colors of counter. Look at it.

We will display the digits as text, therefore we’ll need a WordPress plugin, which able to do this. I very like FeedBurnerCount plugin and I recommend to use it for our FeedBurner counter.

HTML + PHP code

HTML code of a counter including the PHP code of the FeedBurnerCount plugin will looks like this:

<div id="feedcount"><div id="counter"><?php echo fbc_count() ?></div><div id="readers">readers</div></div>

CSS styles

Now we will design a counter using CSS. I will show an example on orange counter.

Main styles looks like this:

#feedcount {
  display: inline-block;
  text-align: center;
  padding: 2px 4px 1px 1px;
  font: bold 11px/14px Arial, sans-serif;
  overflow: hidden;
  color: #FFF;
  background: #FC8205;
  border: 1px solid #F25805;
  *width: 85px; /* only for IE6 and IE7 */
}
#readers {
  float: right;
  padding: 1px 0 0;
}
#counter {
  float: left;
  padding: 1px 3px 0;
  margin: 0 5px 0 0;
  font-size: 13px;
  position: relative;
  top: -1px;
  color: #333;
  background: #FDC077;
  border: 1px solid #F25805;
  border-right-color: #FEE0BC;
  border-bottom-color: #FEE0BC;
}

We’ll get such a counter:

Figure 1

Now we add little bit of CSS3 styles to make the counter more glamorous. Firstly it’s rounded corners:

#feedcount {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

Secondly it’s inner and outer shadow:

#feedcount {
  -moz-box-shadow: inset 0 0 2px #FFF, 1px 1px 1px rgba(0,0,0,0.15);
  -webkit-box-shadow: inset 0 0 2px #FFF, 1px 1px 1px rgba(0,0,0,0.15);
  box-shadow: inset 0 0 2px #FFF, 1px 1px 1px rgba(0,0,0,0.15);
}

And the end result will look like:

Figure 2

As you can see, it’s very easy to make sexy FeedBurner counter in any color just changing several CSS styles.

What About Browsers?

Of course, the shadows and rounded corners will work only in modern browsers: FireFox, Safari, Chrome, Opera. In Internet Explorer we’ll see a counter like on figure 1. One more thing – unfortunatelly, inset box-shadow not yet working in Safari.

Compared with the opacity CSS property (which also makes a translucent background), RGBa does not makes the contents of a HTML element semi-transparent.

As well as other CSS3 properties, (like box-shadow, border-radius), all the modern browsers (FireFox, Safari, Chrome, Opera) excellent supports the RGBa property, but only not Internet Explorer.

However, there is a simple way to make cross browser RGBa support, i.e. even in IE, moreover in all popular versions: IE6, IE7 and IE8.

RGBa CSS3 Definition For Modern Browsers

It looks like this:

.style {
  background: rgba(255,204,000,0.5);
}

In this example we are using RGB format of this color: #FFCC00, and apply the 50% opacity.

RGBa Support For Internet Explorer

The following code emulates the RGBa in IE6, IE7 and IE8:

.style {
  background: transparent;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7FFFCC00,endColorstr=#7FFFCC00);
}

RGBa represented here as a hex code and looks like #AARRGGBB, where the AA is the alpha value in hex format.

This code for Internet Explorer I recommend to put in a separate file and connect to the site with conditional comments.

A you can see, everything is simple.

Lastly, I want to advise you the RGBa CSS Generator for Internet Explorer. Enough to specify the RGBa definition in the form, and you will get IE version of RGBa.

Requires WordPress version: 2.3 or higher.

You can see an example on a current site.

Plugin features

• Live comment preview, which does not take that extra space on the page.
• Simple HTML-editor (instructions on using the editor are on the plugin options page).
• You can customize comment preview block as you wish. You can display: comment author name, avatar (static or dinamic using gravatar.com), comment date and time, comment text. All this can be designed with CSS.
• You may don’t connect plugin’s CSS file (optional) if you wish to reduce number of queries to your server.
• Plugin’s JS and CSS files are connected only on the pages with comment form.

Download

Attention: knowledge of CSS and HTML may require for using a plugin.

Donation

If you enjoy this plugin, you can thank me and leave a small donation.

Donation

Installation

1. Upload jquery-comment-preview folder to the /wp-content/plugins/ directory.
2. Activate the plugin through the ‘Plugins’ menu in admin interface of WordPress.
3. Play once with the width parameter of #jquery-comment-wrap, #jquery-comment-preview and #comment_preview identifiers (which are in the jquery-comment-preview.css file) to fit the width under your design.
4. If it’s necessary, you can customize options in admin interface at the Options → jQuery Comment Preview page.
5. If it’s necessary, you can edit other CSS styles for comment preview block in the jquery-comment-preview.css file.
6. That’s all.

HTML code of preview block

The plugin creates the following structure of HTML code for the preview block (this may be useful in the design through CSS):

<div id="jquery-comment-wrap">
  <div id="jquery-comment-preview">
    <div id="html-editor">
      <a>button</a>
      <a>button</a>
      ...
    </div>
    <div id="preview-tab">Preview</div>
  </div>
  <textarea name="comment"></textarea>
</div>

If nothing works

1. Make sure that you use the appropriate version of WordPress, which is required for a plugin work.

2. Make sure that the header.php file of your theme has the following code:

   <?php wp_head(); ?>

   If not, insert it before the </head> tag.

3. If the first 2 points are not solved the problem, give details in comments to this post.

Version history

During this 2 years I gained my experience in jQuery and created my own jQuery Tabs Script completely from scratch. And I want to share it with you in this post.

I call it an universal, because it lets to create an unlimited number of tabbed blocks with an unlimited number of tabs, while the contents of the script remains unchanged (script size is only 0.4 kilobytes).

jQuery Tabs Script code

In my opinion, I’ve made a miniature and pretty jQuery script for a tabs:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

(function($) {
$(function() {
 
  $('ul.tabs').each(function() {
    $(this).find('li').each(function(i) {
      $(this).click(function(){
        $(this).addClass('current').siblings().removeClass('current')
          .parents('div.section').find('div.box').hide().end().find('div.box:eq('+i+')').fadeIn(150);
      });
    });
  });
 
})
})(jQuery)

HTML code for the script

It very similar on a structure of HTML code of another jQuery tabs solutions, which I was seen:

1
2
3
4
5
6
7
8
9
10
11
12

<div class="section">
  <ul class="tabs">
    <li class="current">First Tab</li>
    <li>Second Tab</li>
  </ul>
  <div class="box visible">
    Content of the first block
  </div>
  <div class="box">
    Content of the second block
  </div>
</div><!-- .section -->

Requied CSS for this HTML

1
2
3
4
5
6

.box {
  display: none;
}
.box.visible {
  display: block;
}

The .box class hides all tabbed blocks by default, but the .visible shows the desired block.

P.S.. Yes, perhaps I invented the wheel, but i get great pleasure from this process and simultaneously improve my experience in jQuery, and I don’t think this is so bad.