Tables are back using CSS3 table with jQuery Hover Effect

Create a CSS3 Table with jQuery Hover Effect

Tables are essential in representing organized data yet somehow they’re relatively left behind in the design department. That’s why it is always a welcome treat to come across tutorials like this one from Catalin Rosu.

Table Create a CSS3 Table with jQuery Hover Effect

Shared via Blog Freakz – Web Design and Web Development

Get Rid of Email Spam with jQuery Spamless

Get Rid of Email Spam with jQuery Spamless

by: Marvin

Protect your learn web design site against email spam with this lightweight and very useful jQuery plugin called jQuery Spamless. The plugin is designed by web developers at Design Chemical , which prevents spam from entering your blog, thus making your blog posts and blogging activity hassle-free. What it does is to convert indistinct email addresses which are hard to detect by spam harvesters into human-readable content in the browser.

The jQuery plugin has several options which you can customize according to the security level and allows you to control how you would want to write the email.

1.       Customize the characters you want to use to replace “@” symbol and “.” symbol in the domain name.

2.       Increase your web site security by choosing whether to convert the reversed text which is its default setting into a huma- readable email address.

3.       It detects automatically href text if used in an email link and converts it.

4.       It gives you the option to convert confusing email addresses into a mailto links.

Here’s how to use the plugin:

1.       Add this plugin to the head of your document.

<script type='text/javascript' src='js/jquery.dcspamless.1.0.js'></script>

2.       Email HTML

You can use the jQuery Spamless plugin in several ways. For the default settings – reverse text and “.” Symbol in the domain name changed by “(dot)” and “@” symbol changed by ”(at)”, email can be entered as mailto link or as text inside HTML tag.

If you use a mailto link, it will detect the link automatically.

Use this HTML to add the email “email.address@domain.com”:

Mailto link:

<a href="mailto:moc[dot]niamod[at]sserdda.liame" class="email">Contact Us</a>

Text:

<span class="email">moc[dot]niamod[at]sserdda.liame</span>

3.       Initialize the plugin

jQuery(document).ready(function($) {

$('.email').dcSpamless();

});

You can change the email spam settings.

Below is the plugin default.

var defaults = {

    reverse: true,  // select whether the email text is reversed

    splitDomain: '[dot]', // characters used to replace '.'

    splitName: '[at]', // characters used to replace '@'

    mailto: true    // select whether to add mailto link for text

};

Overriding the default options.

You can override the default options by passing an object into the plugin upon initialization.

$('.email').dcSpamless({

    reverse: false,

    splitDomain: '//',

    splitName: '/',

    mailto: false                                                                          

});

                               

How To Randomly Display Ads Using jQuery

How To Randomly Display Ads Using jQuery

Let’s say that you have a bunch of ads on your web site and you want to make sure that it doesn’t show one ad more often than the others. Well, here’s a nice jQuery code that will let you display them in random order.

shuffleAds: function(arr) {   for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);   return arr; }

Although I haven’t tried it yet myself, this code might also be used to show random articles to instead of the usual related posts to your blog readers. Why would you want to randomly show posts? For one thing, it is to let your readers know that your site isn’t limited to just one theme or particular niche.

Anyway, here’s an alternative code you could use for randomizing your posts.

function randsort(c) {     var o = new Array();     for (var i = 0; i < c; i++) {         var n = Math.floor(Math.random()*c);         if( jQuery.inArray(n, o) > 0 ) --i;         else o.push(n);     }     return o; }

Or perhaps you’d rather use this jQuery Shuffle plugin instead (from jsfromhell.com):

/*  * jQuery shuffle  *  * Copyright (c) 2008 Ca-Phun Ung <caphun at yelotofu dot com>  * Dual licensed under the MIT (MIT-LICENSE.txt)  * and GPL (GPL-LICENSE.txt) licenses.  *  * http://yelotofu.com/labs/jquery/snippets/shuffle/  *  * Shuffles an array or the children of a element container.  * This uses the Fisher-Yates shuffle algorithm <http://jsfromhell.com/array/shuffle [v1.0]>  */ (function($){     $.fn.shuffle = function() {         return this.each(function(){             var items = $(this).children().clone(true);             return (items.length) ? $(this).html($.shuffle(items)) : this;         });     }     $.shuffle = function(arr) {         for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);         return arr;     } })(jQuery);

Now here’s a great example of applying the code for randomizing ads:

//Function to display ads on the jQuery Blog and shuffle (function($) {    var displayAds = {        ads: {            1: {                 title: "jQuery UI Widgets for PC, Mobile and Touch devices",                 href: "http://www.jqwidgets.com",                 img: "jqwidgets.png"            },            2: {                 title: "jQuery Chop Slider 2.0 - The most eye catching image slider on the internet!",                 href: "http://www.idangero.us/cs/",                 img: "idangerous.jpg"            },            3: {                 title: "Sauce Labs - Online Cross Browser Testing",                 href: "http://www.saucelabs.com/scouthome?utm_source=banner&amp;utm_medium=flat&amp;utm_campaign=all+all+banner+jquery4u",                 img: "sauce-labs.jpg"            },            4: {                 title: "Diamond Slider - Ken Burns Effect &amp; Unlimited Transitions",                 href: "http://www.diamond.billykids-lab.net/",                 img: "diamond-slider.jpg"            },            5: {                 title: "AJAX Zoom - jQuery Dynamic 2d/360 Degrees Zoom with ipad support.",                 href: "http://www.ajax-zoom.com",                 img: "ajax-zoom.jpg"            }        },        signupAd: {            title: "Advertise here",            href: "http://www.jquery4u.com/advertise/"        },        shuffleAds: function(arr)        {           for(var j, x, i = arr.length; i; j = parseInt(Math.random() * i), x = arr[--i], arr[i] = arr[j], arr[j] = x);           return arr;        },        load: function()        {            $('#shuffle-ads').hide();            var adContainer = $('#jq4u-sidebar-ads').empty(), adsArray = Array();            /* construct ads */            $.each(this.ads, function(i,v)            {                 adsArray.push('<a rel="nofollow" target="_blank" href="' + v.href + '"><div class="jq4uadbox"><img title="' + v.title + '" alt="' + v.title + '" src="http://www.jquery4u.com/images/ads/' + v.img + '"></div></a>');            });            /* shuffle ads in random order */            adsArray = this.shuffleAds(adsArray);            /* output ads */            $.each(adsArray, function(i,v)            {               adContainer.append(v);            });            /* add the signup ad */            adContainer.append('<a href="' + this.signupAd.href + '"><div class="jq4uadvertisebox">' + this.signupAd.title + '</div></a>');            /* show shuffle button */            adContainer.append('<a href="#" id="shuffle-ads">Shuffle</a>');            $('#shuffle-ads').live('click', function(e)            {               e.preventDefault();               displayAds.load();            });            $('#shuffle-ads').show();        }    }    $(document).ready(function() {       displayAds.load();    }); })(jQuery);

Hope a lot of you will benefit from this tutorial and learn web design. Have a good day, everyone!

KEITH FRIAS sees himself as an artist whose talent is in a state of coma, and a tech gadget freak who also loves to dabble in photography.