jQuery Tutorials – Hide/protect mailto: links from spam bots and email harvesters #3

May 4, 2014December 27, 2014 specktator

This entry is part 3 of 3 in the series Spambot Protection

Here is a jQuery snippet that can protect email addresses from email harvesters. All you need to do is to inlcude .mail class to your “mailto:” html links like the example below.

<a href="mailto:peter_[at]_example.com"> peter_[at]_example.com </a>

1	<a href="mailto:peter_[at]_example.com"> peter_[at]_example.com </a>

jQuery(document).ready(function(){
    mailtoellements = jQuery("a[href^='mailto:']");
    mailtoellements.each(function(item){
    mailto = jQuery(this).attr('href');
    jQuery(this).attr('href',mailto.replace(/_\[\at\]\_/gi,"@"));
    email = jQuery(this).html();
    jQuery(this).html(email.replace(/_\[\at\]\_/gi,"@"));
        });
    });

jQuery(document).ready(function(){

mailtoellements = jQuery("a[href^='mailto:']");

mailtoellements.each(function(item){

mailto = jQuery(this).attr('href');

jQuery(this).attr('href',mailto.replace(/_\[\at\]\_/gi,"@"));

email = jQuery(this).html();

jQuery(this).html(email.replace(/_\[\at\]\_/gi,"@"));

});

line 2: Gather all the elements with the matched criteria line 3: Iterate on these elements line 4: on each […]

jQuery Tutorials – Hide/protect mailto: links from spam bots and email harvesters #2

March 4, 2014April 18, 2016 specktator

This entry is part 2 of 3 in the series Spambot Protection

Here is a jQuery snippet that can protect email addresses from email harvesters. All you need to do is to inlcude .mail class to your “mailto:” html links like the example below.

<a href="mailto:peter_[at]_example.com" class="mail"> peter_[at]_example.com </a>

1	<a href="mailto:peter_[at]_example.com" class="mail"> peter_[at]_example.com </a>

$(document).ready(function(){
mailto = $("a[href^='mailto:']").attr('href');
$("a[href^='mailto:']").attr('href',mailto.replace(/_\[\at\]\_/gi,"@"));
email = $('.mail').html();
$('.mail').html(email.replace(/_\[\at\]\_/gi,"@"));
});

$(document).ready(function(){

mailto = $("a[href^='mailto:']").attr('href');

$("a[href^='mailto:']").attr('href',mailto.replace(/_\[\at\]\_/gi,"@"));

email = $('.mail').html();

$('.mail').html(email.replace(/_\[\at\]\_/gi,"@"));

});

Geeks are sexy… :D @specktator

JQuery Tutorials -JQuery Wildcard Selectors

November 13, 2012December 27, 2014 specktator

<strong>JQuery</strong> is a Javascript Framework used in most of www websites. Providing easing effects, code manipulation, easy <strong>ellement <a href="http://api.jquery.com/category/selectors/" target="_blank">selectors</a></strong> and some other great stuff!
Personally is my favourite framework and i use it in most of my "web coding" cases.

I've been looking for <strong>wildcard</strong> ellement selection in <strong>JQuery</strong> framework and finally i've realized that <a href="http://jquery.com/" target="_blank">JQuery</a> uses <a href="http://en.wikipedia.org/wiki/Regular_expression" target="_blank"><strong>regular expressions</strong></a> in DOM (Document Object model).

<kbd>For example</kbd>
<kbd></kbd>
[crayon-673ed290012d9707362583 lang="js" ]$("#divEllement").html();

JQuery is a Javascript Framework used in most of www websites. Providing easing effects, code manipulation, easy ellement <a href="http://api.jquery.com/category/selectors/" target="_blank">selectors</a> and some other great stuff!

Personally is my favourite framework and i use it in most of my "web coding" cases.

I've been looking for wildcard ellement selection in JQuery framework and finally i've realized that <a href="http://jquery.com/" target="_blank">JQuery</a> uses <a href="http://en.wikipedia.org/wiki/Regular_expression" target="_blank">regular expressions</a> in DOM (Document Object model).

<kbd>For example</kbd>

[crayon-673ed290012d9707362583 lang="js" ]$("#divEllement").html();

So for wildcards this can be done.

$("#Ellem\\S*").each();

1	$("#Ellem\\S*").each();

Update: I’ve discovered that is not usable in some cases. In case you are really in trouble, you can use

$('div[id^=Ellement]:visible').something

1	$('div[id^=Ellement]:visible').something

This will work in any of these “Ellement1″,”Ellement2″,”EllementSomething” cases.[/crayon]

PS
If anyone has a better way for this, don't hesistate to mail me.

1 2	PS If anyone has a better way for this, don't hesistate to mail me.

JQuery Tutorials – Use JQuery to protect/rewrite emails from spam bots

November 13, 2012March 4, 2014 specktator

This entry is part 1 of 3 in the series Spambot Protection

This jquery snippet protects your published email addresses from being obtained from spam bots. Keep in mind that your (html)code must be in form Peter_[at]_example.com and the emails must be inside an ellement with mail class in order to let javascript replace the correct characters. Of course you can modify it as you wish ;) […]

JQuery tooltips – 6 plugins to easilly create tooltips

January 22, 2012March 13, 2014 specktator

Tooltips are used to save space in website layout design. If they are used properly then the page becomes much friendlier to our users. <a href="http://jquery.com/">JQuery</a> is a cross-browsing javasript library which gives us the ability to do things in 2-3 lines of code. Search the below Jquery plugins to find what fits to your needs. <em>Remember not to flood your site with so much tooltips. That will drag out of the website your users.</em>

<em><strong><a href="http://craigsworks.com/projects/qtip/" target="_blank">1. qTip</a></strong></em> qTip has an advance tooltip plugin with a lot of features like speech-like clouds, rounded corners and more.

Tooltips are used to save space in website layout design. If they are used properly then the page becomes much friendlier to our users. <a href="http://jquery.com/">JQuery</a> is a cross-browsing javasript library which gives us the ability to do things in 2-3 lines of code. Search the below Jquery plugins to find what fits to your needs. Remember not to flood your site with so much tooltips. That will drag out of the website your users.

<a href="http://craigsworks.com/projects/qtip/" target="_blank">1. qTip</a> qTip has an advance tooltip plugin with a lot of features like speech-like clouds, rounded corners and more.

<strong><em>2. jQuery Tools/Tooltips</em></strong> This tooltip plugin can contains any HTML element such as links, table, forms, and images. Implementing this plugin is very easy. The default effects are sliceup and toogle. However, you can easily build your own effects.
<a href="https://totallynoob.comwp-content/uploads/2013/01/jquery-tools-tooltips.png"><img class="alignnone size-full wp-image-686" title="jquery-tools-tooltips" src="https://totallynoob.comwp-content/uploads/2013/01/jquery-tools-tooltips.png" alt="" width="500" height="132" /></a>

<strong><em><a href="http://craigsworks.com/projects/simpletip/" target="_blank">3. Simpletip</a></em></strong> Simpletip allows you to create tooltips with ease on any element on the page using the power of jQuery.The tooltips can be static, dynamic, or even loaded through AJAX with a variety of different visual effects.

<a href="https://totallynoob.comwp-content/uploads/2013/01/simpletip.png"><img class="alignnone size-full wp-image-687" title="simpletip" src="https://totallynoob.comwp-content/uploads/2013/01/simpletip.png" alt="" width="343" height="129" /></a>

<strong><em>4. Orbital Tooltip</em></strong> With the Orbital Tooltip you can choose to position the tooltip on any object in a 360 degrees around it.
<a href="https://totallynoob.comwp-content/uploads/2013/01/orbital-tooltip.png"><img class="alignnone size-full wp-image-688" title="orbital-tooltip" src="https://totallynoob.comwp-content/uploads/2013/01/orbital-tooltip.png" alt="" width="500" height="178" /></a>

<strong><em><a href="http://onehackoranother.com/projects/jquery/tipsy/" target="_blank">5. Tipsy</a></em></strong> A simple tooltip based on anchor tag's title. In my opinion this simplicity will provide alternative info for an ellement while not stressing visitors eyes with colors,effects etc.

<a href="https://totallynoob.comwp-content/uploads/2013/01/tipsy.png"><img class="alignnone size-full wp-image-689" title="tipsy" src="https://totallynoob.comwp-content/uploads/2013/01/tipsy.png" alt="" width="500" height="70" /></a>

<em><strong><a href="http://nicolae.namolovan.googlepages.com/jquery.inputHintBox.html">6. jQuery Input Floating Hint Box</a></strong></em> It provides an automatic box hint in the right side of an input, when focus on that input, and disappear when focus go (blur).

2. jQuery Tools/Tooltips This tooltip plugin can contains any HTML element such as links, table, forms, and images. Implementing this plugin is very easy. The default effects are sliceup and toogle. However, you can easily build your own effects.

<a href="http://craigsworks.com/projects/simpletip/" target="_blank">3. Simpletip</a> Simpletip allows you to create tooltips with ease on any element on the page using the power of jQuery.The tooltips can be static, dynamic, or even loaded through AJAX with a variety of different visual effects.

4. Orbital Tooltip With the Orbital Tooltip you can choose to position the tooltip on any object in a 360 degrees around it.

<a href="http://onehackoranother.com/projects/jquery/tipsy/" target="_blank">5. Tipsy</a> A simple tooltip based on anchor tag's title. In my opinion this simplicity will provide alternative info for an ellement while not stressing visitors eyes with colors,effects etc.

<a href="http://nicolae.namolovan.googlepages.com/jquery.inputHintBox.html">6. jQuery Input Floating Hint Box</a> It provides an automatic box hint in the right side of an input, when focus on that input, and disappear when focus go (blur).

totallynoob.com

noobs are humans too

Tag: JQuery

jQuery Tutorials – Hide/protect mailto: links from spam bots and email harvesters #3

jQuery Tutorials – Hide/protect mailto: links from spam bots and email harvesters #2

JQuery Tutorials -JQuery Wildcard Selectors

JQuery Tutorials – Use JQuery to protect/rewrite emails from spam bots

JQuery tooltips – 6 plugins to easilly create tooltips

Hey!

It looks like you’re enjoying our content!

Coupon Code 10% OFF: pirate_jerseys

Get yours Now!

Thanks for reading! If you enjoyed this article, share it!! It makes me happier.

Thanks for reading! If you enjoyed this article, share it!! It makes me happier.

Thanks for reading! If you enjoyed this article, share it!! It makes me happier.

Thanks for reading! If you enjoyed this article, share it!! It makes me happier.

Thanks for reading! If you enjoyed this article, share it!! It makes me happier.

Hey!

It looks like you’re enjoying our content!

Coupon Code 10% OFF: pirate_jerseys

Get yours Now!