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

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

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