Warning: Creating default object from empty value in /home/expressionz/developer.expressionz.in/blogs/wp-content/plugins/download-monitor/classes/download_taxonomies.class.php on line 156

Warning: Creating default object from empty value in /home/expressionz/developer.expressionz.in/blogs/wp-content/plugins/download-monitor/classes/download_taxonomies.class.php on line 156

Warning: Creating default object from empty value in /home/expressionz/developer.expressionz.in/blogs/wp-content/plugins/download-monitor/classes/download_taxonomies.class.php on line 156
2008 October | Expressing IT

Archive for October, 2008

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

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:-

HTML_CSS_vertical_align_vertical_middle_aligned_images

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

HTML_CSS_vertical_align_vertical_top_aligned_images

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:-

HTML_CSS_vertical_align_vertical_bottom_aligned_images

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 697 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


NOT For IE Only – CSS Child Selectors don’t work in IE

Friday, October 10th, 2008 By Nikhil

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


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


Disappearing HTML/DIV elements in Internet Explorer [IE]

Saturday, October 4th, 2008 By Nikhil

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.


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

Please let us have your comments and feedback …


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