Tag Archives: Javascript/jQuery

E-mail spam protection with jQuery

Posted on by

To protect e-mails from spam robots I recommend using this technique, which will only reveal the e-mail adress for users with Javascript enabled, which is typically not the case of robots searching for e-mail adresses.

<script type="text/javascript">
jQuery(document).ready(function() {
$('a.mail').each(function() {
  e = this.rel.replace('#/#','@'); // replace #/# by @
  this.title = ''; // delete the title attribute
  this.href = 'mailto:' + e; // add mailto and href instead of rel
  $(this).html(e); // replace "Contact" by complete email address
  });
})
</script>

Of course. you have to include the jQuery library in your <head> section to make this work.

Then you can write emails like this and they will be automatically replaced by Javascript :

<a href="#" class="mail" rel="example#/#example.com" title="Please enable Javascript to get the contact adress.">Contact</a>

You may use any suite of caracters for « #/# », except $ or +, just replace them in the script AND the markup.

Alert users to update their browser via jQuery

Posted on by

Sometimes I am too lazy, too busy, not well paid enough or just not willing to make a website work in old and deprecated browsers like IE6.

However, I’d like the users to know that they could have a better experience of my sites if they’d just upgrade their browser to a newer version or to another one, more up-to-date.

That is why I like to use jQuery to tell them :

<script type="text/javascript">
jQuery(document).ready(function() {
if ($.browser.msie) { // case Internet Explorer
 var version = parseInt($.browser.version, 10);
   if(version < 7) { // all versions before IE7
     $('<div id="oldbrowser" class="alert">Please upgrade your browser to get full user experience.</div>').appendTo(document.body);
   }
 }
});
</script>

Of course you have to first include the latest jQuery library to the <head> section of your site.

The CSS to place the message at the beginning of the page:

#oldbrowser {
   position: absolute;
   top: 1em;
   left: 1em;
}
.alert {
  color: red;
}

Tsuneko Taniuchi

Posted on by

Cela fait maintenant 6 ans que la première version du site web de l’artiste Tsuneko Taniuchi a vu le jour, et il était temps de le refaire avec des images plus grandes, avec plus d’informations et sans Flash. Le voilà !

Mon envie était de créer un design sobre et simple. J’ai utilisé quelques éléments CSS3 pour ce site et il est préférable de le regarder avec un navigateur récent.

Emmanuelle Vizet

Posted on by

Pour le couple d’architectes Vizet, j’ai créé un thème WordPress sur mesure, d’après le concept et le design de Mathias Delfau. Le thème implémente diverses galeries d’images. Un espace restreint permet aux clients et aux collaborateurs de télécharger des documents les concernant.

Für das Architektenpaar Vizet habe ich ein maßgeschneidertes WordPressthema erstellt, nach einem Design und Konzept von Mathias Delfau. Das Thema enthält diverse Bildergalerien. Kunden und freie Mitarbeiter können Dokumente in einer zugangsbeschränkten Zone herunterladen.

I have created a very special WordPress theme for the website of the architect couple Vizet, follwing the concept and graphics invented by Mathias Delfau. The theme contains various image galleries. Clients and associates may download documents via a restricted area.

Custom horizontal and vertical scrollbars at a time with jQuery

Posted on by

Update 11/2011: This article is somewhat deprecated. There is now a new version of Kelvin Luck’s jScollPane that works better with WordPress and integrates vertical and horizontal scrollbars. No more CSS tweaks are needed.

A client of mine wanted to use custom scrollbars for a website. I quickly found Kelvin Luck’s jQuery plugin for modifying the browser’s scrollbar. So, jScrollPane works great for vertical scrollbars and integrates neatly with WordPress, when calling it like this from the <head> section of your WordPress site:

var $j = jQuery.noConflict();
$j(function(){
    jQuery('.scroll-pane').jScrollPane({scrollbarWidth:10});
});

However, the client also wanted the horizontal scrollbars customized…

It took me several hours to stumble upon the modification of Luck’s plugin by Threeformed, a canadian media company.
But I ran into problems integrating their plugin with WordPress’ noConflict function and had to modify all the calls to « $ », into « jQuery ». It then worked out, but I needed to be able to design it via CSS independently of the vertical scrollbars. In order to do that I added a second CSS selector, through which I was then able to design the horizontal scrollbars using other background images than for the vertical ones.
One strange thing however is that this plugin expects the element you want to add scrollbars to to be set to « float:left », otherwise it has problems calculating the initial width of the horizontal scrollbars.

You may download my modified jQuery plugins here.

Continue reading →