Archive for September, 2008

TEXTAREA Collapse problem in XSL/XSLT

Saturday, September 20th, 2008 By Nikhil


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.


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>

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

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.

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.

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

A Variety of XSL Test Conditions (Collection of XSL:IF and XSL:WHEN TEST Conditions)

Sunday, September 14th, 2008 By Nikhil

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

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 test=”SALARY > 5000″>
The salary of this person is greater than Rs. 5000

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

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

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

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

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


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:when test=”boolean-expression”>
   Do something when this boolean-expression is TURE
<xsl:otherwise> Do something else </xsl:otherwise>

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

JavaScript: Edit web page in browser

Saturday, September 13th, 2008 By Nikhil

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

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

Fixed(That remains static on window scroll) Page Blocks using CSS Only

Thursday, September 4th, 2008 By Nikhil

This post might be a good example for the phrase “Teaching grandma to suck eggs” … Cause this is just BASIC CSS Stuff. But for those , like the oblivious me, this might be a blessing in disguise. I always thought (I could loose my job for saying this), it was ONLY possible to keep some part of the HTML page content STATIC (meaning, its position remains AS IS on Window Scroll), using some smart scripts, Doing all those scientific calculations to find dynamic position, trapping Window.scroll events and setting timeouts etc.

Never thought it could as simple as this …. Here in the CSS/HTML below , I have four static blocks, one fixed to each extrimities of the page, TOP, RIGHT, BOTTOM and LEFT … needless to say … you can choose any one or more if need be …

.static{display: block; z-index: 10; color: #ffffff; overflow-x: hidden; overflow-y: hidden; position: ixed;
#contents{ margin: 100px 150px 0px 160px; border:1px solid #e6e6e6 }

#wrap-t { top: 0px; background:#33CC66;  width: 100%; height: 55px;}

#wrap-l { top: 80px; background:#FF9966; height:300px; width:150px; border:2px solid #e6e6e6;}

#wrap-b { bottom: 0px; background:#3333CC;  width: 100%; height: 55px;}

#wrap-r { top: 80px; background:#6666FF; height:300px; width:140px; border:2px solid #e6e6e6; right:0; }

<div id=”contents”> You main page contents </div>
<div id=”wrap-b” class=”static”>
  Static Content on Page  bottom
<div id=”wrap-t” class=”static”>
  Static Content on Page  Top

<div id=”wrap-l” class=”static”>
  Static Content on Page  left
<div id=”wrap-r” class=”static”>
  Static Content on Page  right

View a wroking sample here

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

CSS hack: Javascript, CSS, HTML for Firefox only

Tuesday, September 2nd, 2008 By Nikhil

Many a times we feel the need to write browser specfic hacks (though it is not a good practice, we UI developers have to resort to such evils until the great Browsers Wars comes to a truce). Earlier , I had mentioned in this article For your IEs Only, how to write a CSS snippet that would be visible to IE browsers < IE7 only.

Yesterday, I had a case, where I wanted to write some FireFox specific CSS snippets. Well! I am not sure if there is a CSS code for this but there is a HTML. THERE IS A CATCH THOUGH, this piece of HTML doesnot pass HTML validation. But , anywaz! If you are stuck badly or as such, have no-regards for validation (sometime we have to be cruel), you could use the following to declare a link to a FF only stylesheet or even just code the CSS within this block. The code is

<comment> Put your FireFox only HTML/CSS/Scripts here </comment>

             /* Styles for FF only  */
             fieldset{border:1px solid #dddddd;}

I”m happy for the moment …

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

Remove specific item from a javascript array that matches a passed string

Monday, September 1st, 2008 By Nikhil

Here’s quick way of extending the native Javascript Array Object, just to do that…

Array.prototype.removeItem=function(str) {
   for(i=0; i<this.length ; i++){
       this.splice(i, 1);  break;
  return this;

So now you can do something like this…

var animals= new Array("dog","lion","cat","tiger","elephant");

Now the animals array will contain “dog”,”lion”,”cat”,”elephant”;

 PS: And here is the String Trim Prototype too …

String.prototype.trim=function(str) {
str = this != window? this : str;
return str.replace(/^\s+/g, '').replace(/\s+$/g, '');


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