Expressing IT

With a variety of Carousels out there , many for Mootools as well, I still decided to write my own Carousel Class, for some good reasons
1. Wanted a paging feature ( to be able to jump a particular slide/step in the carousel).
2. Wanted freedom with placement of the LEFT and RIGHT buttons/links , where ever I please.
3. More control over the Slide Steps.

I did manage to create a new Carousel , with the above features …as below … Feel free to suggest any modifications you would require!!!

My Example looks like this…[View Demo]

View Demo | Download Mootools Carousel With Paging Version 1.0 (Downloaded [download#9#hits] times)

1. Carousel Paging

You can easily add the paging to your carousel, simply by setting the paging flag, which is last parater passed while creating the instance of the MooCarousel to true( want paging) or false( donot wanting paging).

var carousel1 = new MooCarousel(‘carousel1_wrapper’,’carousel1_items_container’, ‘carousel1_moveleft’, ‘carousel1_moveright’, c_ns,c_sss, true); //ns= number of slides , sss = slide step size

And ofcourse you can change the look-n-feel of these paging achors as you please by modifying their CSS.

.carousel_paging {text-align:right; margin:5px 10px 0 0;}
.carousel_paging .current, .carousel_paging .page{ outline:none; width:15px; height:15px; line-height:15px; text-align:center; display:block; float:left; background:#D8D8EB; margin:0 1px 0 0; text-decoration:none;}

.carousel_paging a:hover, .carousel_paging .current{background:#4D4D9B; color:#ffffff;}

Well! there is a small issue though, The paging anchors if set, then it will get generated always after the Carousel component. I wanted to make it dynamic as well, but then just to keep the Script for blowing out of proportions, I decided to skip it.
But you know a little Javascript , you could easily modify the paging generation code in the MooCarousel class to please your needs.

2. Customising the Left & Right Icons

You can change the PLACEMENT, IMAGES or any displat property of the Left and Right Buttons simply by playing around with the CSS. to be able to change the placements of the Left and Right buttoms was the actual reason for me to right my our Carousel Class.
Since this MooCarousel Class, accepts the id’s of these buttons, you can actually place these buttons anywhere on the page, if you please… it does not have to be in the element hierarchy, as in my example.

var carousel1 = new MooCarousel(‘carousel1_wrapper’, ‘carousel1_items_container’,‘carousel1_moveleft’, ‘carousel1_moveright’,c_ns,c_sss,true);

CSS
.carousel_container_l, .carousel_container_r{margin:50px 0 0 0 ; position: relative;width: 23px;height:20px; float:left; cursor:pointer; }

.carousel_container_r{background-position: 0 -38px; }

.carousel_container_l{background-position: 0 -58px; }

 

3. Customising Slide Steps

WHAT DO I MEAN MY CUSTOMISING SLIDE STEPS?
Most Carousels slide the full with of the visible window. So say you had four items (like in my sample above), it will slide all the four items. With this Carousel Component, You pass the number of slides and the step size of your choice.

var carousel1 = new MooCarousel(‘carousel1_wrapper’, ‘carousel1_items_container’, ‘carousel1_moveleft’, ‘carousel1_moveright’, c_ns,c_sss, true);
c_ns= number of slides , c_sss = slide step size

Also, in my example1 I have calcuted the slide step size, based on logic where , I know number of items , width on each item and the margins that have given after each item in my CSS.

/*For Carousal 1 */

var c1_w = 92; // Carousal Item Width

var c1_n = 10; // Total Number of Comparision Carousal Items

var c1_pp = 4 // Number of Comparision Carousal Items perpage

var c1_marginFactor = 51;

var c1_sss = c1_w * c1_pp ; //sss = slide step size

var c1_ns = parseInt(((c1_w * c1_n)/c1_sss) + .5); //ns= number of slides

c1_sss += c1_marginFactor ; //sss = slide step size , 51 for margins

Requirements: Mootools 1.2

View Demo | Download Mootools Carousel With Paging Version 1.0 (Downloaded [download#9#hits] times)

MooRating is a simple ( cross browser , of course as it uses the power of the MooTools library) , lightweight and excellent Mootools based rating solution. It is not termed as “Star Rating”, simply because, the rating image could be as you choose ( I have provided Stars, Bars and Hearts with the download, but you can create your own variety and just drop it in).

How does it looks like :

	Mootools Rating with different images View Demo
	Mootools Rating with Percentage valuesView Demo
	Mootools Rating with Fractional valuesView Demo

Download Mootols Star Rating Script (Downloaded [download#8#hits] times)

Rating data: Whole Number, Decimal or Percentage
Currently the script is designed to show the rating data as whole values (1,2,3,4,5), in decimals (1.24, 3.45 etc) or in percentages( 12%, 55% etc) . The choice to show data in any of the mentioned formats can be set simply by changing some flag values within the javascript( moorating.js)
Basically there are two e two flags to play with, for displaying values in the format of your choice…

var inpercent = false; // Set this flag to true , if you require percentage values to be displayed
var isFractional = false // Set this to true, if you want fractional values like 1.24, 1.25, 4.56 rather than 1,2 …5

And I dont think there is any explanation required for this. Moreover. The script is very simple. If you know a little javascripting, you could modify the script to get any sort of value displayed. For eg if you wanted three decimal places to be displayed … just tweak the script as below …

if(isFractional){if(x<=5 || x >=0) moostartval[i].innerHTML= formatNumber(x,3);} // 2 is changed to 3
else{moostartval[i].innerHTML= Math.round(x);

Updating Rating Value:
I havent bothered writing any AJAX scripts for updating the Ratings value, because I know from my experience that NOT ALWAYS do it intend to update the RATING as soon as the user rates something. You are free to do whatever you want with the rated value , Update it using AJAX or Submit it or Set a hidden form field value , to be submitted with the entire form etc.

function updateRating(id, rating) {
//alert(id + ” , ” +rating );
// DO WHATEVER WITH THE RATING
}

There is function in the javascript called “updateRating”. This function has been passed the the ID of the Rating Div, to identify as to which ratings ( if there are more that one ratings on the page) was updated and the value of the rating [updateRating(id, rating)]. You could choose to whatever you want with these values , as i mentioned earlier.

Rating Image: Stars, Hearts , Bars or anything you please
Changing the rating to any of the above types( stars, hearts etc) is very simple. Just create an image similar to the one provided and drop it in. Remember , if you change the name of the image, do make necessary changes in the CSS file , see below.

.moostar { margin:0px;padding:0px; overflow:hidden; width: 84px; height: 20px; float: left; background: url(‘stars.gif’) repeat-x; }
.moostar span { float: left; margin:0px;padding:0px; display: block; width: 84px; height: 20px; text-decoration: none; text-indent: -9000px; z-index: 20; }
.moostar .curr { background: url(‘stars.gif’) left 25px;}

Most ratings widgets use star and half-star images with mouse over events on each star. Moo Ratings uses a simple sprite image as a background image to achieve the required visual effects with a very low overhead.

Requirements: Mootools 1.2
Download Mootols Star Rating Script (Downloaded [download#8#hits] times)

I had been looking for a double pinned slider (slider with two knobs , minimum and maximum) using mootools. Though , I did find a few  well done double pinned slider in the mootools forum, The only problem was that all these sliders  dint have the selected range marker.  Finally! I decided to  create my own. Well! I did use the original code  and modify it to have a slider background that indicated the range selected visually, as in my example below. The BLUE areas indicates the range of value chosen.

View Version 2.2 Demo | Download Mootools Double Pinned Slider Version 2.2 (Downloaded [download#12#hits] times)

You can very easily change the look and feel of the  range indicator ( in blue in the above example), slider knob, the slider track by modifying the slider.css as required.

Do drop me a comment if you find it useful.

If you are one of those guys (like me), who often check the CSS of well made HTML page , to get inspired or whatever, then you might have noticed that we have used FAUX Positioning (as already mentioned in my earlier article We are using Faux Absolute Positioning : A Brilliant CCS Layout)

We did some good work on this template , so thought it would nice to share it …. Download This WordPress Theme (downloaded [download#1#hits] times)