Basic jQuery div rotator

js - huuah — Fri, 26 Mar 2010 21:54:24 +0000

So – how do one make a simple rotations function in jquery? There are many ways to do this, so I will just demonstrate one of them here:

Example code for the jQuery DIV rotator:


Item 1
Item 2
Item 3
Item 4

And this will output 4 divs as shown here:

Item 1

Item 2

Item 3

Item 4

Nothing exciting about this, really. So – lets add the forward and backward button for the shifting of visible divs.

Make the items rotate

Go Left


Item 1
Item 2
Item 3
Item 4


Go Right

There is now added 2 buttons/divs/textsfield – a left one and a right one. All we have to do, is make the buttons change which div is visible. The easy way to do this, is by changing the class name of the div and with CSS control the visibility and format.

To register a click event on the left and right buttons, we have to use the click()-function in jQuery.

That can look like this:

Javascript:

     // trigger the mouse click even
     $(".goleft").click( function(e) {
        // get the current active element
        var $active = $(".active");
        // get the previous element or, if no previous then get the last item in the focusitem-class.
        var $next = $active.prev().length ? $active.prev() : $(".focusitem:last");

        // set the visibility of the active and notactive classes.
        $active.removeClass('active');
        $active.addClass('notactive');
        $next.addClass('active');
        $next.removeClass('notactive');
    });

CSS:

Item 1
Item 2
Item 3
Item 4

Result:

Go Left

Item 1

Item 2

Item 3

Item 4

Go Right

How it works

The jQuery rotation code gets activated as soon as a user clicks the buttons. It find the active element, and the next or previous element corresponding to which buttons is activated and the toggles the active and notactive classes on the focusitems.

Complete jQuery code:

(document).ready(function() {

    $(".goleft").click( function(e) {
        var $active = $(".active");
        var $next = $active.prev().length ? $active.prev() : $(".focusitem:last");

        $active.removeClass('active');
        $active.addClass('notactive');
        $next.addClass('active');
        $next.removeClass('notactive');
    });

    $(".goright").click( function(e) {
        var $active = $(".active");
        var $next = $active.next().length ? $active.next() : $(".focusitem:first");

        $active.removeClass('active');
        $active.addClass('notactive');
        $next.addClass('active');
        $next.removeClass('notactive');
    });

});

Complete CSS for the above example:

.active {
    display: block;
    width: 100px;
    float: left;
}
.notactive {
    display: none;
}

.goleft, .goright {
    cursor: pointer;
    width: 100px;
    float: left;
    border: 1px solid;
}

Now what?

For more fancy display that my example shows, try putting some images ind the focusitem and make some nice arrows for the go left and right buttons. The usability of the rotator will improve a lot, by making some easy layout adjustments.

Obvious expansions for this kind of rotator would be a more fancy shift/glide between active divs or perhaps loading each element with Ajax, but this is intensionally not covered in this post.

Including Javascript or CSS in your TYPO3 template

js - huuah — Thu, 08 Oct 2009 20:46:40 +0000

Have you ever had the need for inserting extra stylesheet or javascript files in your TYPO3 template? I am used to having a TemplaVoila setup, which has the nice feature of mapping part of the header as part of the template, but this is not really that flexible when using extension template and etc.

An easy way of controlling this, is to setup the javascript and css files from the template configuration. There are some different ways of doing this and I will demonstrate two of them here.

The template configuration examples should be self-explainable, so I will not comment them futher:

Javascript option 1 – headerData:

page.headerData.230 = TEXT
page.headerData.230.value =

Javascript option 2 – includeJS:

page.includeJS {
  file1 = fileadmin/myjavascript.js
  file1.type = application/x-javascript
  file2 = fileadmin/myjavascript2.js
}

CSS option 1 – headerData

page.headerData.231 = TEXT
page.headerData.231.value =

CSS option 2 – includeCSS

page.includeCSS {
  file1 = fileadmin/stylesheet.css
}

CSS option 3 – page.stylesheet

page.stylesheet = fileadmin/stylesheet.css

Hope this tip can be helpful. Please notice that the CSS option 3 only enables you to set 1 stylesheet, where the other examples support multiple files.