Expressing IT

Expressing Elsewhere!!!

expressingit — Tue, 17 Feb 2009 08:24:53 +0000

Hey Fellas!

Thanks for popping by …
ExpressingIT has started expressing else where … visit ” developer.expressionz.in“

How to include a WordPress Blog in another site

expressingit — Tue, 03 Feb 2009 06:52:59 +0000

This question crossed my mind a few times before, when I was working on sites earlier too, which used WordPress to show blogs or new kind of content in some part of the site/portal.Being a novice in PHP and around WordPress, I kept procastinating it, thinking ” this isnt my peice of cake”. Finally! this requirement came upto my nose, when started diggin around a bit for solution.
I was surprised to find that it really was easier than I actually thought it was, to display a list of headlines or the latest post on any other page outside of the WordPress-powered section, just using a little bit of PHP and the WordPress API.

Here is what to do :-
For reasons of explanation, assume that your site is http://www.inchembur.com/ and you have the news section for this site on http://news.inchembur.com/ ( which is running WordPress). Now the requirement is to show the latest post from http://news.inchembur.com/ on the home page of the main site ,i.e. http://www.inchembur.com/index.php

Step1: In your index.php add the following peice of code , Include the WordPress API file. You can add this to the top of the page you want your post to appear on.

define(‘WP_USE_THEMES’, false); // Disbable use of WordPress Theme
require>(‘/var/news.inchembur.com/wp-blog-header.php’); // Include WordPress API
query_posts(‘showposts=1′); // Get Latest Post
?>

In the above peice of include , we are getting only the single most recent post. if you want to try more variations feel free to dig into, query_posts() documentation .

Step 2: Now, In the part of the Index/Home page where you want to show the latest WordPress post from http://news.inchembur.com , use the following code. Needless to say, feel free to ad your styling divisions, spans and classes as per your design needs.

”>Read more…

Step3 : There is no Step 3 … Thats it … you are done!

OfCourse, You can try a few variations as per your requirements ( as I mentioned earlier, refer to query_posts() documentation ) . Heres some taster …

How show a specific post/page as opposed to the latest post:-
This can easily achived by altering the arguments to query_posts() to include the page ID or page slug

query_posts(‘page_id=7′);
query_posts(‘pagename=about’);

or You can control the number of posts:
query_posts(showposts=3);

Loading JavaScripts Dynamically

expressingit — Thu, 25 Dec 2008 09:54:59 +0000

Sometimes to keep the pageweight down … we have split our scripts into fragments…These javascript fragments can be loaded as and when required ( on an event or on click of a link or button etc.).

Loading Javascripts dynamically is simple and pretty straight forward as below…

<script type=“text/javascript”>
function loadNewScript(source){
var s = document.createElement(‘script’);
s.setAttribute(‘type’,'text/javascript’);
s.setAttribute(‘src’, source);
document.body.appendChild(s);
}
script>

and you can have the following call link anywhere in the body , or you can have this script “onLoad” of the document itself…

<a href=“javascript:loadNewScript(‘myDynamicScript.js’);”>Load Dynamic Scripta>

or

Mis-behaving IE8 : CSS Layout breakages (Targeting a browser version using Meta Tags in IE8)

expressingit — Thu, 18 Dec 2008 06:14:21 +0000

If you are css person, you would know the pain in getting your layouts working cross-browser. IE8 is yet another spanner in the works for us developers. Anywaz! if you hit upon this issue, Like I did yesterday, where your perfectly working CSS in IE7 (and earlier) and Firefox has suddenly started throwing tantrums in IE8 , TRY This … It nicely seemed to fix my problems for the moment ….

Using Meta declaration, we can specify the rendering engine we would like IE8 to use. So to force IE8 to render as IE7 … Insert the following Meta Tag into the head of your document:-

By default IE Meta would be:-

which would make IE8 render the page using the new standards mode.

If required, this syntax could be used to accomodate for other browsers as below:

MORE About DOCTYPES :

IF you are yet unfamiliar with the sort of animal called “Doctype” … here is some quick read
What are DOCTYPES? What are BROWSER QUIRKS & STRICT Mode?
Setting the DOCTYPE in XSL

For a more in depth understanding about DOCTYPES , try visiting these links…
A List Apart : Fix Your Site With the Right DOCTYPE!
A List Apart : Beyond DOCTYPE: Web Standards, Forward Compatibility, and IE8

Note: Though many of us HTML/CSS people have been neglecting the importance of DOCTYPE decleration in our documents , Setting the right DOCTYPE , is usually the answer to most cross browser issues.

Simple Carousel With Paging Using Mootools

expressingit — Tue, 09 Dec 2008 10:07:39 +0000

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 Source

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 Source

Simple Cross Browser Rating Script For Mootools

expressingit — Tue, 02 Dec 2008 13:20:31 +0000

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 Source

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 Source

Blinking Cursor in Firefox – Accessibility Caret Browsing

expressingit — Thu, 20 Nov 2008 13:03:18 +0000

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)

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

expressingit — Fri, 24 Oct 2008 08:35:23 +0000

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 the source files for this 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.

Now on version 2.2, with following changes:

1. There was major issue with the earlier versions ( as kindly pointed out by Wanlee -in comment #9), where setting smaller values of the ’start’ and ‘end’ made the clipping wonky. This issues has been fixed in this version .
Wanlee also made an observation that , both sliders end up with the same value and that it would be nice to make the max slider stop at the next number greater than the min slider instead of the sliders butting up together. Well! I did think of trying to do this, but now I personally feel that, they must have the same values. what say?

2. On Wanlee’s and Brian’s request , I did add the Snap and Slider Steps option …. but it is still requires some fine tuning ( which I have been trying hard) and still has soe issues… Avoid using this feature, if possible …. if you desperately need the slide step feature, do use in care … play around with the CSS and JS a bit to achive your desired results … If you find a fix , do let us know!

I have upgraded it to version 2.1, with following changes:

1. Slider uses and absolutely palced CLIPPED image ( Slider gutter range) to indicate the slider range , instead of a division with background image
2. The Min and Max Slider Knobs are restricted from crossing over each other
3. Fixed the problem wherein the Min Knob was crossing over the Max knob , only the first time around.

Advantage of this version:-Now you can have a range Image, that can indicate range with its Color too … What I mean is for eg. you could have an image with green,orange and red areas, so the selected range will indiate the nature of the range selected as well.

Disadvantage : The slider image is shown with its full width , until the complete Script is loaded.

View Version 2.1 Demo here | Download the source files Version 2

ALSO, I have left the earlier version as is , for those who require the version using division for the range indication
View Version 2.1 Demo | Download the source files for this slider

View Version 1 Demo here | Download the source files for Version 1

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

expressingit — Sun, 12 Oct 2008 08:05:38 +0000

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

views :3456

The result looks like this:-

view the demo here | Download here

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

views :1234

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

views :1234

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 (for understandability, the CSS is not been optimized)

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

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

expressingit — Fri, 10 Oct 2008 07:58:26 +0000

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 is always a child of – it can of course never be a grandchild or great-grandchild of .

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