{curlybracket} » Javascript/jQuery

E-mail spam protection with jQuery

rike — Fri, 08 Jul 2011 15:38:25 +0000

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.

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

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

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

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

rike — Fri, 08 Jul 2011 15:27:24 +0000

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 :

Of course you have to first include the latest jQuery library to the 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;
}

LeitaProd

rike — Mon, 16 May 2011 22:04:49 +0000

LeitaProd est une jeune boîte de production de films publicitaires et de reportages parisienne.

Hands up! Studio de graphisme

rike — Sun, 20 Feb 2011 12:12:54 +0000

hands up ! est un studio de graphisme à Paris dont je fais partie en tant que responsable du développement web.

Giorgos Tsikalakis

rike — Mon, 15 Nov 2010 12:56:17 +0000

Site-galerie pour le peintre grec Giorgos Tsikalakis.

Tsuneko Taniuchi

rike — Thu, 20 May 2010 16:40:00 +0000

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

rike — Thu, 18 Mar 2010 22:25:30 +0000

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

rike — Sat, 27 Feb 2010 21:07:50 +0000

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 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.

I am calling the plugin the following way :

var $j = jQuery.noConflict();
var originalSizes = new Array();
$j(function(){
    jQuery('.scroll-horizontal-pane').jScrollHorizontalPane({scrollbarHeight:10});
});

The corresponding CSS could look something like this :

.jScrollPaneContainer {
    position: relative;
    overflow: hidden;
    z-index: 1;
    outline: none;
}
.jScrollPaneTrack {
    position: absolute;
    cursor: pointer;
    right: 0;
    top: 0;
    height: 100%;
    width: 10px;
    background: url(track-vertical.jpg) repeat-y;
}
.jScrollHPaneContainer .jScrollPaneTrack {
    left: 0;
    bottom: 0;
    right: auto;
    top: auto;
    width: 100%;
    height: 10px;
}
.jScrollPaneDrag {
    position: absolute;
    background: url(cap-vertical.jpg) repeat-y;
    cursor: pointer;
    overflow: hidden;
}
.jScrollHPaneContainer .jScrollPaneTrack {
    background: url(track-horizontal.jpg) repeat-x;
}
.jScrollHPaneContainer .jScrollPaneDrag {
    background: url(cap-horizontal.jpg) repeat-x;
}