jquery

Make a HTML list in to a simple news ticker/scroller with jQuery

The same customer that featured in my last blog wanted a aggregator block turned in to a vertical news ticker/scroller. The block contained a total of 20 items of which three should show. I wanted something lightweight and simpel that I could add to the theme.

I found a good solution on the web that I simplified a bit and wrapped up for use with Drupal. There is two parts to this ticker/scroller. First part is a jQuery script that removes the first list item and add it to the bottom with some nice animations.

Make images into a background-image so Firefox -moz-border-radius will work

Firefox -moz-border-radius doesn’t work on images unfortunately. Using -webkit-border-radius however works well on images in Safari and Chrome etc.

A recent customer wanted images on there site to have rounded corners. They where ok with it not working in Internet Explorer 8 and older but really wanted a fix for Firefox. Here follows one solution with jQuery I hacked together. It seems to work ok.

Spice up your Drupal 6 site search field with a bit of jQuery and CSS

The search field is an important part of almost any web site today and it deserve some attention. Especially if you have implemented some really good search like Apache Solr (see How to set up Apache Solr search for Drupal 6 on a Debian GNU/Linux server).

This is an update to an older post on the same subject but for Drupal 5. This new version is for Drupal 6 and adds jQuery 1.3+ compatibility plus some nice CSS for Firefox.

If you use Safari, or any other Webkit browser, the spiced up search field looks like a standard Mac OS X search field:

Safari search field example

With the help of some CSS I made the spiced up Firefox search field look somewhat similar:

Firefox search field example

All this is done with JavaScript and CSS on the original Drupal search form ensuring graceful degradation. If you turn of JavaScript all that happens is that you get the standard search field and button.

Here follows the code I use to implement this here on xdeb.org.

Spice up your Drupal 5 site search field with a bit of jQuery

Updated version of this post: Spice up your Drupal 6 site search field with a bit of jQuery and CSS

Notice the search field here on xdeb.org? If you have JavaScript turned on you get the enhanced version with a nice placeholder/hint that disappears when you click in the field. The search button is hidden also, I assume everyone just hit return to to the search anyway so it just take up space.

If you use Safari, or any other Webkit browser, the search field is even more enhanced. Here how it looks for you who don’t use a Webkit browser.

Safari search field example

Aside from looking gorgeous, it adds value in terms of an enhanced user-experience. It works just like any other search field on Mac OS X. If you just want the nice Safari search field, take a look at http://drupal.org/project/safarisearch.

All this is done with JavaScript on the original Drupal search form ensuring graceful degradation. If you turn of JavaScript all that happens is that you get the standard search field and button.

Here follows the code I use to implement this here on xdeb.org.

Subscribe to jquery