Archive for the ‘ Downloads ’ Category

Simple Carousel With Paging Using Mootools

Tuesday, December 9th, 2008 By Nikhil

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]
Mootools Carousel With Paging

View Demo | Download Mootools Carousel With Paging Version 1.0 (Downloaded 2505 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);

.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

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

Mootools 1.2

View Demo | Download Mootools Carousel With Paging Version 1.0 (Downloaded 2505 times)

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

Simple Cross Browser Rating Script For Mootools

Tuesday, December 2nd, 2008 By Nikhil

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 977 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 );

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 977 times)

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

Mootools Slider With Two Knobs (Double Pinned Slider) with Range Indicator

Friday, October 24th, 2008 By Nikhil

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 17793 times)
mootools double pinned slider

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.

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

Vertically (and horizontally) Center Aligning Content in a DIV using CSS

Sunday, October 12th, 2008 By Nikhil

Before we had to deal with CSS to create our page layouts, aligning some content inside a table cell seemed just child’s play. Simply set the “align” or “valign” property of the table to have the alignment of your choice, piece of cake!
With CSS layouts, though we have “vertical-align” property for the elements, it doesn’t seem to be as simple as the “align” or “valign” properties. To be more specifiic the “vertical-align” never seems to solve any of your problems, especially if are write a piece of cross-browser CSS.

Without the use of HTML Tables, THE PROBLEM of centering on object, be it an image or some text within a containing division, has probably been every UI/CSS developers nightmare at some point. This problem further extrapolates your worries of aligning, if the object to be centered is dynamic in nature, i.e. when its height is variable(unknown height).

Though there is no known straight forward solution that would work across the range of browsers we have to deal with, the solution that I have tried to arrive at does seem to work in the few browsers that I have tried it in ( IE6, IE 7, FF).

In browsers like Mozilla, Opera and Safari, The strange behaving “vertical-align” property can be brought to its senses, simply by setting the “display” property of the containing division to “table-cell” (display: table-cell).

The problem still remains with IE family of browsers, who, yet do not seem to understand what to with the “table-cell” property and ignorant as they are, they just ignore it. The solution given below, though simple, ads a few more DOM elements to your HTML to make things happen.

The CSS and HTML looks like this
.outer_container {
display: table;
height: 140px;
position: relative;
overflow: hidden;
margin:0px 10px 0px 0px;
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#position: relative;
#top: -50%;
margin:0px auto 0px auto;

<div class=”outer_container” >
<div class=”obj_container” >
<div class=”obj”> <img src=”image1.jpg”/><br/> views :3456 </div>

The result looks like this:-


view the demo here | Download Source Files (Downloaded 715 times)

Understanding the solution:
For the browsers that understand display: table and display:table-cell properties, it seldom needs any explanation. For IE, with the use an IE specific hack (hash hack), we absolutely position the object container (obj_container) in half of the available height. Then object(obj) within is position relatively and is moved up by half of its height … Well! I seem to understand the look the on your face, but It works. Try it!
The above techniques are combined to give us the above cross browser solution.

The CSS can be easily modified as below to achieve, vertical-align:top or vertical-align:bottom

.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#position: relative;
#top: 0%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;

<div class=”outer_container” >
<div class=”obj_container_top” >
<div class=”obj_top” > <img src=”image1.jpg”/><br/> views :1234 </div>

The result looks like this:-


.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
.obj_bottom {
#position: relative;
#bottom: 0%;
margin:5px auto 0px auto;

<div class=”outer_container” >
<div class=”obj_container_bottom” >
<div class=”obj_bottom” > <img src=”image1.jpg”/><br/>views :1234 </div>

The result looks like this:-


view the demo here | Download here

Horizontal centering of the object simply achieved with the margin property , by setting the margin-left and the margin-right to auto

Seems like ages, since I was trying to find a reasonable solution to this alignment problem. But now with this solution, I feel at little peace.

With a hope that someday

  • vertical-alignment property in CSS will work like it does inside a table cell, WITHOUT having to beat much around the bush
  • At least, setting margin –top:auto and margin-bottom:auto, will give as the same result as with margin-left and the margin-right set to auto
  • The Browser wars will be over some day.
  • There will just ONE Browser for ALL.

Download the CSS and HTML of the above solution here (Downloaded 715 times) ..for understandability, the CSS is not been optimized

PS: And by the way, those are thumbnails of some pictures I have clicked… :)

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

Simple, Lightweight, Cross Browser Lightbox for your webpage

Friday, October 3rd, 2008 By Nikhil

Not that there are only a few LIGHTBOX’s that you can find when you google. The issue with most of the lightboxes that I found was that they all seemed to use one or the other heavy weight JAVASCRIPT frameworks like JQUERY, PROTOTYPE, MOOTOOLS and the likes. They are all cool and swanky looking. But If your requirement is “BUT I WANT A SIMPLE AND LIGHTWEIGHT LIGHTBOX SCRIPT FOR MY SITE”, then here it is;

Some nice features of this lightbox

  1. Very light
    a. 4kb of Scripts when packed (8 kb unpacked)
    b. 2 kb of CSS
    c. Few lines of HTML for the lightbox container
  2. Simple to understand and implement
  3. Can have multiple Lightboxes on the same page.
  4. The same lightbox container is used to show, different content (which is separately included as hidden divisions in the page), depending on the link/option that is clicked.
  5. Automatically centers itself, taking into consideration all factors such as, Window height and width (screen resolution), page scroll amount and the height of the contents of the lightbox
  6. Tested in IE 7 & FF

View Demo |
Download Lightbox Source Zip (Downloaded 2346 times)

Using the Lightbox[Files in the zip file]

jo.js , jo_pack.js[packed version] :- a simple set of JAVASCRIPT OBJECTS [JO], which contains element, window and document positioning scripts. You can open JO.JS if you wish to get your hands dirty with some Advanced Javascripting, creating abstract functions, extending element properties and such. If you not too much in Javascripting , Leave it alone.

lightbox.js, lightbox_pack.js[packed version]:- Contain light box manager scripts. If you are page designer , also responsible with implementing the lightbox on the page, you need to understand the LightBoxManager . LightBoxManager basically contains just two functions showLightBox and closeLightBox.

lightbox.css :- If you know CSS , you can play around with lightbox.css to customize the look-n-feel lightbox.css

index.html: Sample implementation of the lightbox with two different content

lb_underlay_bkg.png :- This is light/simi transparent image that is used the background for the lightbox underlay [Underlay is the layer below the lighbox, which prevents the user from clicking any other entity on the page, while the lightbox is open]. You can use any image or even a solid color for this purpose, depending upon the page design and the requirement.

icon_lb_close.gif : – The image for close lightbox handle on the top right of the light box. Can use any image as per design

View Demo |
Download Lightbox Source Zip (Downloaded 2346 times)

Please let us have your comments and feedback …

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

Download This Faux Positioned WordPress Template

Monday, August 11th, 2008 By Nikhil

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 372 times)

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

 Subscribe to ExpressingIT RSS
get ExpressingIT News by Email Subscribe to ExpressingIT by Email
 Follow Me on Twitter