DiaProjector – a jQuery diapositive slideshow plugin

UPDATE: Version 1.1 available! Sept 21, 2010
- Overlay prev/next buttons available. This option, “overlay”, is true by default.
- Some small bugfixes
- Clearer left and right keybuttons in the navigation box

Lightboxes, Liteboxes, Greyboxes and Fancyboxes, we have seen them all by now and they all work kind of well. However, they are not very original and work in pretty much the same way. If you want something new and original, yet still oldschool and simple, say hello to the latest addition to the slideshow plugins – DiaProjector.

Remember watching photos with the help of these slides? All you needed was a screen, a diaprojector machine and a ton of slides and you were in for hours of fun with your friends or family. This neat jQuery plugin is almost as fun! At least it’s trying to be, simulating the very same old fuzzy diaprojector feeling. Try it out here on our site and then download it to use on your own site. Please drop a line here when you have it running or have some questions/comments :)

DiaProjector - world's only diapositive slideshow

The plugin should work in Internet Explorer 7+, Firefox, Opera and Safari.

Sites that are using the script at the moment are:
- Monkey Agency

:)

Change permissions recursively in linux

Quite often when you are working with files and folders on a server for a web project you need to change the permissions for these files and folders. Especially if they are part of a web app and uploaded with FTP/SFTP. Most of the time the chmod command is enough, but sometimes you need to change a whole bunch of files and folders in a directory tree with different permissions for files and folders. This is easily done with the find command via a terminal over ssh.

Changes all files in my_folder to have have rw rw r (664) permission.

sudo find my_folder/ -type f -exec chmod 664 {} \;

Changes all folders (directories) in my_folder to have have rw rw r (775) permission.

sudo find my_folder/ -type d -exec chmod 775 {} \;

Check if an element exists in the DOM with jQuery

Need to check if an element exists in the page you have loaded using jQuery. It is very simple. The jQuery object encapsulates zero or more DOM elements, and allows us to interact with them in many different ways. Therefor, we can just use the length property to check if our jQuery object, that is returned by our selector query has one or several DOM elements attached to it.

Check if a specific element exists based on ID.

if($('#my-element').length) {
    // Action code goes here
}

Check if a specific or several elements exists based on CLASS.

if($('.my-element').length) {
    // Elment found
}

or

if($('.my-element').length != 0) {
    // Elements found
}

or

if($('.my-element').length > 0) {
    // Elements found
}

Remy Sharp have written an excellent post and recorded a screencast that explains this further on jQuery for Designers

Jquery image selector Facebook style

In late 2008, the guys over at emposha wrote an excellent image selector for jQuery. It works very similar to the friend chooser on Facebook. However, I wanted a way to limit the selections to only one friend/picture. With the current code there is no such possibility. So instead of complaining, I simply rewrote some lines in the script. If you want to do the same thing, this is how you do it.

Row 80-84 in “fcbklistselection.js” looks like this:

obj.click(function() {
        addToSelected(obj);                            
        obj.toggleClass("itemselected");
        obj.parents("li").toggleClass("liselected");                     
});

Replace these lines with the following:

obj.click(function() {
 
       //check if this is already selected. in that case it should be deselected
       deselect_this = false;
       if(parseInt(obj.attr("class").indexOf("selected")) > -1) deselect_this = true;
 
       //deselecting all items
       $("li .fcbklist_item").each(function(x, obj2) {
              obj2 = $(obj2);
              obj2.removeClass("itemselected"); 
              obj2.parents("li").removeClass("liselected");
              obj2.parents("li").removeAttr("addedid");
              removeValue(obj2);
              hiddenCheck(obj2);
       });
 
       //if the clicked item should be deselected, do so
       if(!deselect_this)
       {
              addToSelected(obj);                            
              obj.toggleClass("itemselected");
              obj.parents("li").toggleClass("liselected");
       }
});

To get rid of the selected/unselected, simply add “display: none;” below “#filters .selections” in the css file (fcbklistselection.css). Enjoy!

Original demo: http://www.emposha.com/demo/fcbklistselection/
Demo with our solution: http://www.codethatmatters.com/source/fcbkListSelection/

Load that DOM, please. Thank you!

Get started with 5 different JavaScript frameworks and how they handle DOM readiness.

Frequently there is talk about to check if the DOM is loaded or not when using JavaScript today. There is quite a few ways to do this and it is an interesting story to read up about the origin of “DOM ready”. We should just be thankful that we don’t have to think about this on a everyday basis and that guys like John Resig does what he does and just hands it over to us. So we can play with it and build businesses around it. Thank you all JavaScript framework creators and contributors.

There is a whole bunch of great JavaScript frameworks and libraries out there, with various specialities and pros and cons. I mainly use jQuery, Prototype and sometimes I play with YUI. jQuery and Prototype aren’t that different from each other on a high level and easy to get started with. YUI on the other hand requires a bit of more knowledge and works a bit different. Despite your choice of JavaScript framework, there is one thing that we all want to know when getting started with one. How to check if the DOM is loaded.

We’ll look at how to check if the DOM is loaded in five different JavaScript frameworks; Dojo, jQuery, MooTools, Prototype and YUI 3. First out is Dojo.

DOM readiness in Dojo
Learn more about Dojo’s addOnLoad

dojo.addOnLoad(function(){
    // The DOM is ready, lets say hello!
    say_hello();
});
 
function say_hello() {
    alert('Hello Dojo! DOM is loaded!');
}

DOM readiness in jQuery
Learn more about jQuery’s ready

$(document).ready(function () {
    // The DOM is ready, lets say hello!
    say_hello();
});
 
function say_hello() {
    alert('Hello jQuery! DOM is loaded!');
}

DOM readiness in MooTools
Learn more about MooTools DomReady

window.addEvent('domready', function() {
    // The DOM is ready, lets say hello!
    say_hello();
});
 
function say_hello() {
    alert('Hello MooTools! DOM is loaded!');
}

DOM readiness in Prototype
Learn more about Prototypes document observe and loaded

document.observe("dom:loaded", function() {
    // The DOM is ready, lets say hello!
    say_hello();
});
 
function say_hello() {
    alert('Hello Prototype! DOM is loaded!');
}

DOM readiness in YUI 3
Learn more about YUI 3’s domready

YUI().use('node', function(Y) {
 
    function init() {
        // The DOM is ready, lets say hello!
        say_hello();
    }
 
     Y.on("domready", init); 
});
 
function say_hello() {
    alert('Hello YUI 3! DOM is loaded!');
}

Simulate download speeds on your local machine with Sloppy

Sloppy provides a great way to test locally how your web site or web application works and behaves when accessed using very low bandwidth. For example via a dial up connection, mobile phone or mobile internet via 3g modem. Sloppy is easy to use, just run the java file by double clicking on it. Are you a windows user you might need to install Java. OS X and Linux users should be just fine.

Download and learn more about Sloppy on the following url:

http://www.dallaway.com/sloppy/

In todays world of broadband most web developers, web designers and people who work with the web in general doesn’t think about bandwidth as much as they should, since most of them work in countries with great infrastructure and have access to really fast internet connections. But even in countries like Sweden, Germany, France and UK where a large part of the population have access to fast broadband, there is a lot of people in these countries who doesn’t have access to broadband for one reason or another. And no, 1mb line, doesn’t count as broadband.

So this is quite an important topic, even if the days of dial up connections are long gone for most of us. The increase of accessing web services with handheld devices like mobile phones or using mobile internet via USB dongles is getting more and more popular by the minute. Not to mention the cost and ridiculous pricy data plans the operators are providing, it might be more important than ever to make highly accessible and bandwidth savvy web sites and web services.

Sloppy can be used for more than just see how fast a web site loads on a slow connection, it is also a great tool to see how JavaScript behaves and work on slow connections. Happy slow localhost surfing!

Zend Studio 5.5 in Snow Leopard

Sometimes you just have to brush off those PHP skills for some project updates or for a client that uses a PHP based platform. This was the case for me the other day. I’ve upgraded to Snow Leopard just before Christmas and the little PHP work I’ve done since then and now I’ve taken care of in TextMate.

I was not happy to see that there for some reason was a major display rendering problems in Zend Studio 5.5. I’m not a big fan of the whole Zend Eclipse thing. I have a commercial license for Zend Studio 6, but will not upgrade to Zend Studio 7. The 5.5 version is still leaner and a lot easier to use than Eclipse. Might just go over to NetBeans instead.

A quick google search showed that I was not the only one having this problem and that there was a few good solutions and explanations on why the display rendering problem occurred. There are also some other kind if problems reported here and there.

The main problem is that Apple removed Java 5 from Snow Leopard, in some ways it make sense, in other it doesn’t. The solution is easy, download the Java 5 package, put it in the right folder and change the symlinks. Open up Java Preferences and change the order in which the versions are loaded. I went with the first solution below and it works just fine. There are a few other solutions, I found those less clean, but they seem to work as well.

Solution 1 (I used this one)

http://wiki.oneswarm.org/index.php/OS_X_10.6_Snow_Leopard

Solution 2

http://daveyshafik.com/archives/721-fixing-zde-5-5-in-snow-leopard.html

Solution 3

http://chxor.chxo.com/post/183013153/installing-java-1-5-on-snow-leopard

Check for ajax requests in Pylons

In todays world of web development Ajax is taken for granted and there is a ton of good JavaScript frameworks out there that makes Ajax development quite easy and enjoyable. Together with a nice MVC framework it is even better. Each framework has its own way of detecting Ajax calls or more correctly xmlHttpRequests, which is a huge topic on its own.

For checking if a request is an Ajax request in Pylons you just use is_xhr in your controller, this is based on the fact that you are running your Pylons app as wsgi.

Make sure your importing the request class

from pylons import request

Then in your controller function you can just do

# Checks if request is a xmlHttpRequest (Ajax) and returns a def
if request.is_xhr:
 
# Code goes here
 
return render_mako_def('template_path',"def_name")

You can also return and render a full template if you need or think that works better with your function.

More information can be found at PylonsHQ Paster – Documentation – WSGI, CLI scripts

Git autocomplete in Mac OS X

I always liked that my Git installations on Unix and Linux comes with the contrib/complete/git-completion.bash script activated or easily activated. But its harder if you use the pre-built binaries for Mac OS X.

To get autocompletion to work on Mac OS X when installing the pre-built binaries do this.
UPDATE: 2013-08-07New URLs to Github. Thanks to fabb.

1. Download the completion script from Github

curl https://raw.github.com/git/git/master/contrib/completion/git-completion.bash -OL

2. Add the following to your ~/.profile or ~/.bash_profile

source ~/git-completion.bash
alias gco='git co'
alias gci='git ci'
alias grb='git rb'

3. Add the following to your ~/.gitconfig

[alias]
co = checkout
ci = commit
rb = rebase

Restart Terminal and start Tabbin’!

More Git tips that I found usefull can be found on Tim Dysinger’s blog http://dysinger.net/2007/12/30/installing-git-on-mac-os-x-105-leopard

Table row highlight on hover using JQuery

It is a shame that IE6 doesn’t support hover on html elements other than a-tag. The support can be somewhat flakey in other browsers as well. So for make this work we need to use JavaScript and preferably some kind of JavaScript library which in this case is JQuery.

Here is the script in its full glory, small and simple. It is assumed that this behaviour should be applied on all tables. You can easily modify the script to access just a single table with a specific ID or CLASS. A neater version would be to wrap the code into its own function that only is called when a certain ID or CLASS exists inside the DOM tree.

View Table row highlight example

$(document).ready(function() {
    $('tr').hover(
        function () {
            $(this).addClass('hover');
        },
        function () {
            $(this).removeClass('hover');
        }
    );
    $("tr.table-header").unbind('mouseenter mouseleave');
});