Expressing IT

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

In Firefox… sometimes you might have noticed that  the cursor starts blinking on the screen. It might happen when you click on any element on the page , a division or an image etc. This Blinking Cursor in the browser window is actually an ACCESSIBILITY Feature of FireFox called ‘caret browsing’. This features  allows/enables  users to select text on the page with the keyboard ( Which we normally tend to do with the use of our mouse).

Well! if you donot want this feature … simple press “F7” to toggle it to false  and vice-versa ( if you want it ON).  You could also  type “about:config” in the address bar (type in “caret” in the filter box) and simply double click to change the option “accessibility.browsewithcaret” from “true” (turn caret browsing ON) to “false” ( turn caret browsing OFF)

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 11927 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.

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).

SOLUTION:
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;
text-align:center;
height: 140px;
width:140px;
position: relative;
overflow: hidden;
float:left;
margin:0px 10px 0px 0px;
}
.obj_container {
display: table-cell;
vertical-align: middle;
#position: absolute;
#top: 50%;
#left:50%;
}
.obj{
#position: relative;
#top: -50%;
#left:-50%;
margin:0px auto 0px auto;
}

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

The result looks like this:-

view the demo here | Download Source Files (Downloaded 454 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

TOP Align CSS
.obj_container_top {
display: table-cell;
vertical-align: top;
#position: absolute;
#top: 0%;
#left:50%;
}
.obj_top{
#position: relative;
#top: 0%;
#left:-50%;
margin:5px auto 0px auto;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:10px;
color:#cccccc;
}

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

The result looks like this:-

BOTTOM Align CSS
.obj_container_bottom {
display: table-cell;
vertical-align: bottom;
#position: absolute;
#bottom: 0%;
#left:50%;
}
.obj_bottom {
#position: relative;
#bottom: 0%;
#left:-50%;
margin:5px auto 0px auto;
}
HTML: -
<div class=”outer_container” >
<div class=”obj_container_bottom” >
<div class=”obj_bottom” > <img src=”image1.jpg”/><br/>views :1234 </div>
</div>
</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 454 times) ..for understandability, the CSS is not been optimized

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

CSS for Non-IE Browsers : Its no news to CSS developers that , CSS Child Selectors like the example below, doesnt seem to work in IE. 

e.g. div > span { some css } , that means “when a span element is a child ( and NOT  a grandchild or great grand child etc.) of a division element” .

But we used this CON to our advantage. Historically, the child selector has been used to hide CSS commands from IE. Simply by placing html>body in front of any CSS command IE will ignore it:

html>body .foo {CSS commands go here;}

This works because <body> is always a child of <html> – it can of course never be a grandchild or great-grandchild of <html>.

Now that IE7 understands the child selector, you have to insert an empty comment tag in directly after the greater than sign. IE7 will then not understand this selector (who knows why!?) and will therefore totally ignore this CSS command:

html>/**/body .foo {CSS commands go here;}

If haven’t already seen these before, have a read through the following as well

• Conditional Comments : For your IEs Only -Part Duex
• CSS hack: Javascript, CSS, HTML for Firefox only
• For your IEs Only

As usual, one of the many some strange problems with IE and this one must ranks in TOP 10 of IE Quirks.

PROBLEM STATEMENT (This was my problem, maybe you have similar misbehaviors):
I have many DIV’s in the page with class “sectionhead” , which is nothing but title of a section on the page. So I have some style looking like this

.sectionhead{font-size:18px; background:#cfcfcf; padding:5px;}

The div is a light grey bar with some black text. What happens in IE is some of these section headers are displayed ok, but some are invisible, UNTIL, you scroll the page or click something on the page etc. Sometime they tend to disappear when you click the ‘alt’ key when you page down or scroll with the scroll bar. They sometimes seem to reappear when you reload (f5) the page. I short a perfectly simple DIV with some simple style behaves BAD.
What could cause such an erratic behavior? Well! Frankly, NO IDEA!!!

POSSIBLE SOLUTION:
Again don’t ask me why, but in many instances this problem tends to vanish when you add position:relative to the mis behaving elements style, like this

.sectionhead{font-size:18px; background:#cfcfcf; padding:5px; position:relative }

Weird but what to say? God Bless me from IE!

AND DO SHARE WITH US, IF YOU HAD SIMILAR PROBLEMS.

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

Please let us have your comments and feedback …

PROBLEM STATEMENT:
I ran into this a problem regarding textareas in XSLs.  In simple words, the problem arises when you have a blank <textarea> tag, then it will collapse it to <textarea />.
i.e. if you had something like the following in your XSL and the XML data for the TEXTAREA value, returns nothing…

<textarea name=’description’ ><xsl:value-of select=”DESCRIPTION”/></textarea>

As browsers don’t recognise this, it will cause the rest of the form HTML to run into the text area.

POSSIBLE SOLUTIONS:

In the XSL, add a non-breaking-space ( ) after the xsl:value tag.BEWARE, to take care of this extra space you added, during client side validations of this field.

<textarea  name=’description’ ><xsl:value-of select=”DESCRIPTION”/> </textarea>

Or
<xsl:value-of select=”concat (DESCRIPTION,’ ‘)”/>

Or
Insert a <xsl:value-of select=”@unknown” /> tag pointing to an unknown attribute. This will force the PHP XSLT parser to generate an opening and closing text area tag, even if it has nothing in between.

Or
Insert a <xsl:text> field containing a space to force a closing tag.

However, though the above mentioned solutions might seem to fix the problem, I am still not convinced that they are right and best ways to fix it. If there is any other better way of fixing this quirk, Please do let us know.

Every time I have to do a XSL:IF or XSL:WHEN test, I have go back to the reference books. I never seem to remember them. Thought there would be more out there, just like me, who would rather prefer to have all of them, possible, at one place, ready to be referred when needed.

For those who are new … Syntax for XSL:IF

<xsl:if test=”expression”>
<!– Content: template –>
</xsl:if>

The xsl:if/xsl:when Test Collection
The conditions below are all simple and self explanatory. So I believe it won’t need much explanation

<xsl:if test=”position()=last()-1″>
This if the last but one element in the list!
</xsl:if>

<xsl:if test=”SALARY > 5000″>
The salary of this person is greater than Rs. 5000
</xsl:if>

<xsl:if test=”count(JOBS) > 3″>
There are more than 3 jobs in this list!
</xsl:if>

<xsl:if test=”(@DEPT = ‘SALES’) or (@JOINYEAR = ’1997′)”>
       This person is from sales department OR his Year of Joining is 1997
</xsl:if>

<xsl:if test=”EXPERIENCE”>
       This person have atleast one EXPERIENCE child element.
</xsl:if>

<xsl:if test=”@HOBBY”>
    The person has a hobby attribute.
</xsl:if>

The same text conditions could be used for XSL:CHOOSE/XSL:WHEN as well

xsl:choose

XSLT’s  xsl:choose instruction is similar to xsl:if but has a few key differences:
• One xsl:choose element can test for more than one condition and add different nodes to the result tree based on which condition is true. 
• An xsl:choose element can have a default template to add to the result tree if none of the conditions are true. (Compare xsl:if, which has no equivalent of an “else” condition.)
• The xsl:choose element has specific subelements that are necessary for it to work, while you can put any well-formed elements you want inside of an xsl:if element.

<xsl:choose>
<xsl:when test=”boolean-expression”>
   Do something when this boolean-expression is TURE
</xsl:when>
<xsl:otherwise> Do something else </xsl:otherwise>
</xsl:choose>

Well , I must say, not such an usefull piece of science, but if you are a Web Developer, might come handy , someday ( or will it?). Here is small bookmarklet, which allows to edit the web page for any site .
And Sorry!  You can save the results on your local machine only.

javascript:document.body.contentEditable=’true’; document.designMode=’on’; void 0