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

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

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

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

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/

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!');
}

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!

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

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

To get autocompletion to work on Mac OS X when installing the pre-built binaries do this.
UPDATE: Instead of step 1 and 2 below you can get the completion script directly from Github. Thanks to Fredric.

curl http://github.com/git/git/raw/master/contrib/completion/git-completion.bash -O

UPDATE: 2011-01-03 All github.com url are now https. Thanks to Julio.

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

UPDATE: 2011-07-15 Added -L option to allow for curl to handle redirects.Thanks to michaelyoung.

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

1. Download the Git source from git-scm.com.
2. Unpack and copy the completion script git-completion.bash found in contrib/completion to your home directory.

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

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

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');
});