Never been to DZone Snippets before?

Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

About this user

Alan Coleman www.alancoleman.co.uk

« Newer Snippets
Older Snippets »
Showing 11-20 of 20 total

Adding a value to an input box with XSL

The XSL attribute has a name that refers to an attribute in the html tag that it follows. In this case, value. The content within the the xsl tags will be assigned to that attribute.

      <input type="text" name="sharesLook" onclick="this.value=''" >
      <xsl:attribute name="value">Content</xsl:attribute>

will output

      <input type="text" value-"Content" name="sharesLook" onclick="this.value=''" >

Javascript commands from 'a' tags rather than buttons

In this instance the relevant form is called 'search_form'. This is specified in the a tag version because it's not an input and as such cannot have submit or reset associated with it.

    	<input type="submit" value="Search" onclick="javascript:return text_validate()" />
   	<input type="reset" value="Reset" />
    	<input type="button" value="Show All News" onclick="javascript:return showAll();" title="Show all news button." />

Could be shown as:

        <a class="blockbutton" title="Search" href="javascript:document.search_form.submit();" onclick="javascript:return text_validate();">Search</a>	
	<a class="blockbutton" title="Reset" href="javascript:document.search_form.reset();">Reset</a>
	<a class="blockbutton" title="Show All News" href="javascript:showAll();">Show All News</a>



Okay, as pointed out by Blonkm this is bad for usability. A better way of doing things would be like this:

<script type="text/javascript">
  function doSubmit(){    
        document.getElementById("whatever").submit();
        return true;   
     }   
</script>

<a href="#" onclick="doSubmit();return false;" title="Search">Link</a>

Conditional comment

From the microsoft website. Better than browser sniffing, the content within the tags will be shown if the condition within [] is met, in the this case IE, but you could also use IE 7 for example
  <!--[if IE]>
    Content
  <![endif]-->

  <!--[if lt IE6]> //lower than IE6
    Content
  <![endif]-->


and the XSL version

  <xsl:comment>[if IE 7]&gt;
    Content &lt;![endif]</xsl:comment>


Simple xsl test position statement for constraining number of records

This statement will constrain the number of records displayed to 4
<xsl:if test="position() &lt; 4">
   Records
</xsl:if>

Simple XSL When statement

Checks to see if 'Stuff' has returned any data. If not then displays 'No data available'. If 'Stuff' has returned data then moves onto otherwise. Use <xsl:when test="stuff = !'' "> to swap the when around.

<xsl:choose>
 <xsl:when test="stuff = '' ">
  <div>No data available</div>
 </xsl:when>
 <xsl:otherwise>
  <div><xsl:value-of select="stuff_alternative"/></div>
 </xsl:otherwise>
</xsl:choose>

Formatting the time in XSLT

This takes the known variables of hour and min, in 24 hour clock format, and turns it in to 12 hour am/pm format.

      <xsl:choose>
        <xsl:when test="hour &lt; 12"><xsl:value-of select="hour" />:<xsl:value-of select="format-number(min,'00')" /> AM</xsl:when>
        <xsl:when test="hour = 12"><xsl:value-of select="hour" />:<xsl:value-of select="format-number(min,'00')" /> PM</xsl:when>
        <xsl:when test="hour &gt; 12"><xsl:value-of select="hour - 12" />:<xsl:value-of select="format-number(min,'00')" /> PM</xsl:when>
      </xsl:choose>

Formatting the date

If your date comes in raw format like this (I think it's called a Timestamp) 2006-10-22 12:45:21. Then it can be formatted as such.

	$date = date('l j F\, Y \// g:i A', strtotime($date));


Would display:

Sunday 22 October, 2006 // 12:45 PM

I got this off the Textdrive forum and was also sent to the PHP manual here:

http://us3.php.net/date

xsl variable with firefox workaround

xsl variable with firefox workaround. This instance takes a previously defined width as ($Width) 255px and applies it to a div.

<xsl:variable name="x">;width:<xsl:value-of select="($Width) - 10"/>px</xsl:variable>
<!-- same variable for Firefox -->
<xsl:variable name="y">width:<xsl:value-of select="($Width) - 15"/>px!important</xsl:variable>

<div id="z>
 <xsl:attribute name="style">
  <xsl:value-of select="$y" />
  <xsl:value-of select="$x" />
 </xsl:attribute>
</div>

The resulting HTML will look like this:

<div id="z" style="width:240px!important;width:245px">

When producing XHTML output with XSL files, you have to use

The method="xml" is needed if you want XHTML valid output, "xhtml" is not a valid parameter.

The encoding="us-ascii" is needed if you want pound, euro, nbsp and any other html entities to show up correctly.

<xsl:output method="xml" omit-xml-declaration="yes" encoding="us-ascii"/>

An alternative to the Input Type = "Submit" button

The standard HTML element for users to submit a form is the <input type="submit"> button. Though it is possible to change the formatting of the standard grey button to a certain degree, you can't utilise rollover states.

If you want greater control over the design of the submit button, then an alternative is to use an anchor link, with a Javascript function to submit the form. The format is as follows:


<a href="javascript:void(document.[form name attribute].submit())">[Link text]</a>

eg: <a href="javascript:void(document.frmForm.submit())">Submit this Book Review to us!</a>



You can then utilise style classes the same as you would for any other anchor link.

If you need to do some JavaScript form validation, then simply replace the submit call with the name of your JavaScript function to validate the form, and move the submit call to the end of the form validation function code.

« Newer Snippets
Older Snippets »
Showing 11-20 of 20 total