Sitecore Fetch Squad

I wanted to have a go at writing a jQuery plug-in. I also wanted to shrink the screen space that some of my blogs took up. So I wanted plug-in that allowed me to shrink a blog entry with a link at the bottom to expand the blog to see the full article.

To download the plug-in click ExperimentsInCode.jQuery.ExpandableElement.js (3.45 kb)

The result was a tool that allowed me to shrink any element to a set size that can then can be expanded, for example:

The code to get this to work is pretty simple:

$j('#expanderExample1').expandable({
length:50
});

The plugin allows the following parameters to be passed:

		    function(obj) {
			    $(obj).animate({
			        fontSize: "2em"
			    });
			}
			

            function(obj) {
			    $(obj).animate({
			        fontSize: "1em"
			    });
			}
			

To change the default animation we just need to pass in the animationOn and animationOff functions:

The code to get this animation to work is:

$j(function(){
    $j('#expanderExample2').expandable({
        length: 50,
        animateOver: function(obj) {
            $j('#expanderExample2 ~ div > .expandable_link').css("position", "relative");
            obj.animate({
                "fontSize": "2em",
                "left": "+=50px"
            });
        },
        animateOff: function(obj) {
            obj.animate({
                "fontSize": "1em",
                "left": "10px"
            });
        }
    });
});

The most important line is:

 $j('#expanderExample2 ~ div > .expandable_link').css("position", "relative");

This needs to be added before the animation is played so that the move left command will work. If you don’t set the position value the text stays where it is. I have to select a sibling and then the link because the expander code creates a container item around the element that needs to be expanded and then adds a link as a child of the new container. This diagram shows you how the elements end up:

    Container
        |-> Your Element
        |-> More Link Container
            |-> More Link

There are still some bits that I am not happy with. In particular having to pass a parameter into the animateOver and animateOff functions. I would prefer to use $(this) within the function but I can’t work out how to make it work. I am calling the animations with the following:

        $(link).stop();
        $(link).each(options.animateOver($(link)));
    

It would be nice to do something like:

        $(link).stop();
        $(link).each(options.animateOver());
    

The function would then assume that $(this) would be the link object.

One important part of the code which I had to work on when I started to write the post was the effect of nested expandable elements. Nesting caused the whole thing to fall over, so I added the following code to ensure on the correct link was selected. This to me doesn’t seem like the best solution but it works:

        //this ensures that nested expanders don't clash
        var linkAry = $(".expandable_link", newContainer);
        var link = null;
        for (var i = 0; i < linkAry.length; i++) {
            if ($($($(linkAry[i]).parent().get(0)).parent().get(0)).html() == $(newContainer).html()) {
                link = $(linkAry[i]);
            }
        }
    

I have plans to expand on this basic functionality; maybe make it so that you can expand both the width and height.Sometimes it also produces excess white space but that is for later, for now I should go and have breakfast.