For the dutch telephone numbers is a list of prefixes defined (see http://statisch.detelefoongids.nl/static/nl_NL/netnummer.html) and the place of the – and spaces is defined in a NEN description 2132.(http://taaladvies.net/taal/advies/tekst/53/)

If you also want to check for the correct prefixes in your form validation here is a sample expression that checks this all: (this doesnt backtrack the existence of first added “(” to validate “()” pair) and uses ungreedy grouping for better performance.

^\(??0(?:(?:(?:10|13|15|20|23|24|26|30|33|35|36|38|40|43|45|46|50|53|55|58|70|71|72|73|74|75|76|77|78|79)\)??\s??\-??\s??\d{3}\s??\d{2}\s??\d{2})|(?:111|113|114|115|117|118|161|162|164|165|166|167|168|172|174|180|181|182|183|184|186|187|222|223|224|226|227|228|229|251|252|255|294|297|299|313|314|315|316|317|318|320|321|341|342|343|344|345|346|347|348|411|412|413|416|418|475|478|481|485|486|487|488|492|493|495|497|499|511|512|513|514|515|516|517|518|519|521|522|523|524|525|527|528|529|541|543|544|545|546|547|548|561|562|566|570|571|572|573|575|577|578|591|592|593|594|595|596|597|598|599)\)??\s??\-??\s??\d{2}\s??\d{2}\s??\d{2})$

This is a problem that maybe only I came across but you never know if somebody else found this too:

When creating an XML file and use an element with attribute “href” the attribute becomes “HREF” with capitals when somewhere in de XML the content of a node has   entity in it. An other entity like & doesn’t show this “feature”.
This only applies when you have set the Code Format preference: Default attribute case to lowercase and have checked Overwrite case of attributes.

This only occurs on attributes and elements that are listed in the tag libraries under Advanced Formatting and the attribute case are set to “default”.
It seems that Dreamweaver doesn’t respect the default setting set by the checkbox Default attribute case.

Steps to reproduce bug:
1. create XML file
2. enter node: <link href=”/mypath”>Example&nbsp;text</link>
3. save the file
4. open the file again in dreamweaver
Results:
<link HREF=”/mypath”>Example&nbsp;text</link> and dreamweaver reports no change in the document.
Expected results:
<link href=”/mypath”>Example&nbsp;text</link>

By adding the following at the top of your XML (under the <?xml version=”1.0″ encoding=”UTF-8″?> ) the problem is solved for Dreamweaver:

<!DOCTYPE FirstElementName [
<!ENTITY nbsp "&#160;">
]>

Rationale:

I want to find all the objects where a specific part is used in a list of objects and show the objectlist so I know in which objects the part is used.
For example I have this table
B 1
A 2
B 3
B 4

how to display the B result like this
B 1;3;4 whereas the vlookup only return 1 value

Solution: use this macro in excel.

' Lookup_concat module
' This module vertical search all occurrences of a string in a column and
' return the values from a cell in an other column in the same
' row separated with a given separator string.
'
' ©2011 www.frontendplace.nl
'
' Requirements:
' A table sorted on the column where the Search_in_col string is
'
' Usage:
' lookup_concat(value to search{Cell|String}, search column{Range}, returned value column{Range}, seperator{String})
'
' Example:
' lookup_concat(A4,'ReferenceSheet'!$B$1:$B$100,'ReferenceSheet'!$A$1:$A$100,";")
'
' Return value:
' found values separated with separator string defaulted with ","
Function Lookup_concat(Search_String As String, Search_in_col As Range, Return_val_col As Range, ByVal Seperator As String)

Dim lRowIndex As Long
Dim strResult As String
Dim strSep As String

If Len(Seperator) = 0 Then strSep = ", " Else strSep = Seperator

For lRowIndex = 1 To Search_in_col.Count
    If InStr(1, Search_in_col.Cells(lRowIndex, 1), Search_String) Then
        If Len(strResult) = 0 Then
            strResult = Return_val_col.Cells(lRowIndex, 1).Value
        Else
            strResult = strResult & strSep & Return_val_col.Cells(lRowIndex, 1).Value
        End If
    End If
Next

Lookup_concat = Trim(strResult)

End Function

Example

The new world needs frameworks for quick responsive web designs for multiple devices.

There are several frameworks that use sass or less css.
Here are some links for reading:

http://twitter.github.com/bootstrap/
http://www.anotheruiguy.com/2011/10/from-sass-to-less-and-right-back-with-sass/
https://github.com/paulmist/responsive.less
http://semantic.gs/
http://axle.dalesande.com/
http://compass-style.org/

This is an example I made for truncating text of an introduction text to a specified amount of characters. And add a “more” link. This is an update were I put the example in it too.

A new node variable is created and this node can be processed with the general xslt that processes the individual nodes inside this new created node.

see also http://p2p.wrox.com/xslt/75076-truncate-text-including-tags.htm

and see examples here:

http://www.frontendplace.nl/bb/wp-content/xslttruncate/example.xml

http://www.frontendplace.nl/bb/wp-content/xslttruncate/simpletruncate.xsl

With xslt transformation this file is generated:

http://www.frontendplace.nl/bb/wp-content/xslttruncate/testartikel.html
Example:

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet exclude-result-prefixes="xs xlink art" version="2" xmlns:art="http://www.frontendplace.nl/article/version_1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="html" encoding="UTF-8"/>

    <!--
        Name: simpletruncate
        Author: Ron Jonk
        Date: 02-08-2011
        Version: 1.3
        
        Description:
        This template truncates the text of the introductie node until a maximum characters are reached. When the text is truncated
        an ellipsis is added to the truncated text. When the text is smaller than the maximum no ellipsis is added
        at the end of the introductie text a link wil be added
        
        Parameters:
        * limit (optional) number of characters to limit by. Default 250 characters
        * suffix (optional) the suffix character string to use when the text is truncated. Default '...'
        * url (compulsary) the url on the 'more' link

    -->

    <xsl:template match="art:article">
        <xsl:param name="url" select="'.'"/>
        <xsl:param name="truncate" select="200"/>
        <h3>
             <a href="{$url}">
                <xsl:value-of select="art:title"/>
             </a>
        </h3>
        <div class="introduction">
            <xsl:apply-templates mode="truncateTree" select="art:article.info/art:introduction">
                <xsl:with-param name="limit" select="$truncate"/>
                <xsl:with-param name="suffix" select="'...'"/>
                <xsl:with-param name="url" select="$url"/>
            </xsl:apply-templates>
        </div>
    </xsl:template>

    <xsl:template match="art:introduction" mode="truncateTree">
        <xsl:param name="limit" select="250"/>
        <xsl:param name="suffix" select="'...'"/>
        <xsl:param name="url"/>

        <!-- copy introduction node to redesign the content and later process this copy-->
        <xsl:variable name="truncatedNode">
            <xsl:copy-of select="*"/>
        </xsl:variable>

        <!-- create new truncated node -->
        <xsl:variable name="truncatedNodeTree">
            <xsl:apply-templates mode="truncate" select="$truncatedNode/*">
                <xsl:with-param name="limit" select="$limit"/>
                <xsl:with-param name="suffix" select="$suffix"/>
                <xsl:with-param name="url" select="$url"/>
            </xsl:apply-templates>
        </xsl:variable>

        <!--process new created truncated introduction tree with the general xslt-->
        <xsl:apply-templates select="$truncatedNodeTree/*"/>

    </xsl:template>

    <!-- process each node -->
    <xsl:template match="*" mode="truncate">
        <xsl:param name="limit"/>
        <xsl:param name="suffix"/>
        <xsl:param name="url"/>

        <xsl:variable name="preceding-strings">
            <xsl:copy-of select="preceding::text()"/>
        </xsl:variable>

        <!-- precedingchar: number of characters up to the current node -->
        <xsl:variable name="precedingchar" select="string-length(normalize-space($preceding-strings))"/>

        <xsl:if test="$precedingchar < $limit">
            <xsl:element name="{name()}">
                <xsl:copy-of select="@*"/>
                <xsl:apply-templates mode="truncate">
                    <xsl:with-param name="limit" select="$limit"/>
                    <xsl:with-param name="suffix" select="$suffix"/>
                </xsl:apply-templates>
                 <!-- only add link at end of first element this is the first node inside introductie-->
                <xsl:if test="position()=1">
                    <xsl:text> </xsl:text>
                     <art:link class="actionLink" xlink:href="{$url}" xlink:title="More">More </art:link>
                </xsl:if>
            </xsl:element>
        </xsl:if>
    </xsl:template>

    <!-- process each text node -->
    <xsl:template match="text()" mode="truncate">
        <xsl:param name="limit"/>
        <xsl:param name="suffix"/>
        <xsl:variable name="preceding-strings">
            <xsl:copy-of select="preceding::text()"/>
        </xsl:variable>

         <!-- precedingchar: number of characters up to the current node -->
        <xsl:variable name="precedingchar" select="string-length(normalize-space($preceding-strings))"/>

        <xsl:if test="$precedingchar < $limit">
             <!-- totalchar: number of characters including current node -->
            <xsl:variable name="totalchar" select="$precedingchar + string-length(.)"/>

            <xsl:choose>
                <xsl:when test="$totalchar > $limit ">
                     <!-- truncate until limit reached -->
                    <xsl:value-of select="substring(., 1, ($limit - $precedingchar))"/>
                    <xsl:value-of select="$suffix"/>
                    <xsl:text> </xsl:text>
                </xsl:when>
                <xsl:otherwise>
                     <!-- dont have to truncate text -->
                    <xsl:value-of select="."/>
                </xsl:otherwise>
            </xsl:choose>
        </xsl:if>
    </xsl:template>

    <xsl:template match="art:link">
         <!-- check all attributes  -->
        <xsl:element name="a">
            <xsl:attribute name="href">
                <xsl:value-of select="@xlink:href"/>
            </xsl:attribute>
            <xsl:attribute name="title">
                <xsl:value-of select="@xlink:title"/>
            </xsl:attribute>
            <xsl:if test="@xlink:show='new'">
                <xsl:attribute name="rel">external</xsl:attribute>
            </xsl:if>
            <xsl:copy-of select="@id|@class"/>
            <xsl:apply-templates/>
        </xsl:element>
    </xsl:template>
</xsl:stylesheet>

and xml file:

<?xml version=”1.0″ encoding=”UTF-8″?>
<article xmlns=”http://www.frontendplace.nl/article/version_1.1″ xmlns:xlink=”http://www.w3.org/1999/xlink” condition=”website” xml:lang=”nl”>
<title>Lorem Ipsum text</title>
<article.info>
<introduction>
<alinea>At vero eos et accusamus et <strong>iusto odio dignissimos</strong> ducimus qui blanditiis praesentium <strong>voluptatum deleniti atque</strong> corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</alinea>
</introduction>
</article.info>
</article>

–

Here is an example how to program a checkbox that controls multiple other checkboxes. And when one checkbox gets unchecked this box also reset itself to represent the overall setting of the boxes.

Here is the code example.

First load the prototype lib :

It looks like firefox does something strange when positioning an absolute positioned elements inside an element with padding. The left and top position is not the left and top position of the container but the left and top of the container including the padding.

Is this a bug or a feature in FF?

see example at: http://jsfiddle.net/wobbegong/RWws8/

safari

Firefox

For a client I had to create a progress bar to show the progress of several tasks. Here is an example I made to create the progress bar visually.

You can see it work here

First the html:

<p class="progress">
      <a  href="#" title="50% finished" >50%</a>
</p>

The rest is scripting and css:
In steps:

1. get all the anchors inside the paragraphs with class =”progress”:
   

   $('.progress a')

2. get the innerHTML and set the width of the anchor to the percentage you find:
   

   $('.progress a').attr("style", function () {
   	return "width:" + $(this).html();// same as this.innerHTML;
   });

See the example for the css. I used one background image, box-shadow and border-radius to make it fancy.

That is basically it. But you can off course make it fancier with colouring and animation like this:

$('.progress a').each(function(){
	// get percentage
	var innerText = $(this).html();
	$(this).attr("style", "width:0%");
	$(this).animate({width:innerText}, 'slow');
	// don't animate then use this $(this).attr("style", "width:"+innerText);
	var percentage = parseInt(innerText,10);
	if(percentage) {
		percentage = Math.round(percentage/25)*25;
			switch (percentage) {
				case 0: background = 'red'; break;
				case 25: background = 'orange'; break;
				case 50: background = 'yellow'; break;
				case 75: background = 'yellowgreen'; break;
				case 100: background = 'green'; break;
				default: background = 'red';
			}
		}
		else background = 'red';
		//var  rgb = "rgb(80%,"+(100 - percentage)+"%,"+(100- percentage)+"%)";
		var color = (percentage > 50 || percentage < 25)? "#FFF" : "#666";
		$(this).css("background-color", background);
		$(this).css("color", color);
	});

Lately I stumble more and more on stylesheets that include base64 references to smaller images to prevent an extra html access and have to deal with the server latency. Mainly because I think that developers choose to NOT support IE6 and 7 anymore. You can use this syntax to add a base 64 encoded reference inside your email signature or inside a stylesheet like this: (see http://en.wikipedia.org/wiki/Data_URI_scheme )
As image source


<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABGdBTUEAALGP C/xhBQAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9YGARc5KB0XV+IA AAAddEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIFRoZSBHSU1Q72QlbgAAAF1J REFUGNO9zL0NglAAxPEfdLTs4BZM4DIO4C7OwQg2JoQ9LE1exdlYvBBeZ7jq ch9//q1uH4TLzw4d6+ErXMMcXuHWxId3KOETnnXXV6MJpcq2MLaI97CER3N0 vr4MkhoXe0rZigAAAABJRU5ErkJggg==" alt="Red dot" />


or inside CSS


ul.checklist li.complete { margin-left: 20px; background:
url('data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAABlBMVEUAAAD/
//+l2Z/dAAAAM0lEQVR4nGP4/5/h/1+G/58ZDrAz3D/McH8yw83NDDeNGe4U
g9C9zwz3gVLMDA/A6P9/AFGGFyjOXZtQAAAAAElFTkSuQmCC')
top left no-repeat; }


With this short piece of php script in your server you can create the base 64 string by passing the reference to the image as an ‘img’ query string. For example http://www.mysite.com/img2base64.php?img=logo.png

<?php

$file = $_GET[‘img’];

if(!file_exists($file)){

die(“File not found”);

}

else {

if($fp = fopen($file,”rb”, 0)){

$picture = fread($fp,filesize($file));

fclose($fp);

$path_info = pathinfo($file);

$extension =  $path_info[‘extension’];

// base64 encode the binary data, then break it

// into chunks according to RFC 2045 semantics

$base64 = chunk_split(base64_encode($picture));

echo  ‘<img title=”original image ‘ . $_GET[‘img’] . ‘” src=”data:image/’.$extension.';base64,’ . $base64 .

‘”  /> base64 string : ‘ . $base64;

}

}

?>

Prototype.js v1.7 and before replaces and detects classnames using a regular expression without escaping special characters like “+”. So when you check or add a classname with a + character in the string you get a different result than you’ll expect. For example we use the classname for adding validation rules. Checking startDateElement.hasClassName(“before-today+1y”) will always return false, even if the string token is part of the classname. The addClassName function uses the hasClassName function before it adds the extra string. So this will result in always adding the string even if it is already there and you end up having two strings the same inside the total classname string.