Oct 10 2008

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

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

no comments   |  tags: , , , | posted in Browser Quirks, CSS

Oct 4 2008

Disappearing HTML/DIV elements in Internet Explorer [IE]

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.

no comments   |  tags: , , , | posted in Browser Quirks, CSS, HTML

Oct 3 2008

Simple, Lightweight, Cross Browser Lightbox for your webpage

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

Please let us have your comments and feedback …

no comments   |  tags: , | posted in CSS, Downloads, HTML, JavasScript, UI Components

Sep 20 2008

TEXTAREA Collapse problem in XSL/XSLT


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.

no comments   |  tags: | posted in XSL

Sep 14 2008

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

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>

no comments   |  tags: , | posted in XSL

Sep 13 2008

JavaScript: Edit web page in browser

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

no comments   |  tags: | posted in JavasScript

Sep 4 2008

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

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 …

CSS
.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; }

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

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

View a wroking sample here

no comments   |  tags: | posted in CSS, HTML

Sep 2 2008

CSS hack: Javascript, CSS, HTML for Firefox only

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>

e.g.
    <comment>
         <style>
             /* Styles for FF only  */
             fieldset{border:1px solid #dddddd;}
          </style>
     </comment>

I”m happy for the moment …

no comments   |  tags: , , | posted in Browser Quirks, CSS, HTML, JavasScript

Sep 1 2008

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

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++){
     if(escape(this[i]).match(escape(str.trim()))){
       this.splice(i, 1);  break;
     }
   }
  return this;
}

So now you can do something like this…

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

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, '');
}

 
Enjoy….

2 comments   |  tags: , , | posted in JavasScript, UI Developer

Aug 13 2008

Tokenizing Delimited String inside an XSL

If your requirement is to split a node value in an XML, that contains a delimited string of value, into individual items, then you have reached the right place … have a look at the example below. If you are familiar with a little bit of XML and XSL … I don’t think you would need any explanation.
Also, this example includes usage of XSL functions like xsl:call-template , xsl:substring-before, xsl:substring-after, if that’s what you are after.

XML to be transformed (food.xml):-
Assume the task is to tokenize the string delimited by comma, in the the tag “keywords”

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="food.xsl"?>
<food>
<date>July 2008</date>
<description>All about things we eat everyday</description>
<keywords>Fruits, Vegetables, Pulses, Meat, Cereals </keywords>
</food>

XSL (food.xsl):-

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html" encoding="utf-8" doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>XSL 1.0 Delimited String Tokeniser</title>
</head>
<body>
<xsl:value-of select="food/meta"/>
<div >
<xsl:call-template name="tokenize">
<xsl:with-param name="string" select="food/keywords" />
<xsl:with-param name="delimitr" select="','" />
</xsl:call-template>
</div>
</body>
</html>
</xsl:template>
<xsl:template name="tokenize">
<xsl:param name="string" />
<xsl:param name="delimitr" />
<xsl:choose>
<xsl:when test="contains($string, $delimitr)">
<div style="border:1px solid red;">
<h3><xsl:value-of select="substring-before($string,$delimitr)" /></h3>
<xsl:variable name="data" select="substring-before($string,$delimitr)"/>
</div>
<xsl:call-template name="tokenize">
<xsl:with-param name="string" select="substring-after($string, $delimitr)" /><xsl:with-param name="delimitr" select="$delimitr" /></xsl:call-template>
</xsl:when>
<xsl:otherwise>
<div style="border:1px solid red;">
<h3><xsl:value-of select="$string" /></h3>
</div>
</xsl:otherwise>
</xsl:choose>
</xsl:template>
</xsl:stylesheet>

Resultant output HTML :-

<div>
<div style="border: 1px solid red;">
<h3>Fruits</h3>
</div>
<div style="border: 1px solid red;">
<h3> Vegetables</h3>
</div>
<div style="border: 1px solid red;">
<h3> Pulses</h3>
</div>
<div style="border: 1px solid red;">
<h3> Meat</h3>
</div>
<div style="border: 1px solid red;">
<h3> Cereals </h3>
</div>
</div>

Needless to say … just change the parameter “delimitr” to the delimiter of your choice

no comments   |  tags: , | posted in XSL

 
NDK home | Expressing IT | Expressing Palate | Expressing Penmenship | Expressing Awe | Expressing Myself