Frontendplace Blog

Sharing Frontend developing ideas

  • Adds

a Blog for frontend Webdevelopers

This frontendplace aims to offer web development and 3D modelling tutorials, tips and tricks. Written by a web-developer and multimedia consultant who is passionate about web standards, webdevelopment and 3D visualisation.

regular expresion dutch telephonenumbers

Posted by info on April 16th, 2012

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})$

Posted in Scripting | No Comments »

Difference between fireEvent and onclick in internet explorer

Posted by info on February 10th, 2012

I came up to a difference between firing events in internet explorer and firefox, Chrome, safari etc.
In Internet explorer 8 you can fire events like onclick, onmouseover etc with the method fireEvent with javascript. In other browsers you can use dispatchEvent for this and in some other libraries like Prototype you can use triggerEvent or trigger in jQuery.

When you fire an event in the standard browsers (FF,CHR etc) a submit on a form is triggered and a document.location change is triggered when an “click” event is called. And when you don’t want this to happen you should call preventDefault() to cancel the default action of the button or anchor (submitting or redirecting to an other page). But…. in IE8 I see that when calling fireEvent(‘onclick’) only the onclick listeners that are added to the buttons or anchors are triggered but NOT the default actions. So there will be no submitting or redirection when calling fireEvent(‘onclick’). But when you call the general click() function all the onclick event listeners will be triggered INCLUDING the default action. So try it yourself in this example with internet explorer.

See example on http://www.frontendplace.nl/bb/wp-content/uploads/2012/02/fireEvent-Method-Sample.html

Posted in 3D Tutorials | No Comments »

bug report: attributes becomes Uppercase in Dreamweaver xml file

Posted by info on January 11th, 2012

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;">
]>

Posted in Scripting | 1 Comment »

Re-activate one finger click-and-drag gesture in Lion

Posted by info on December 31st, 2011

When I installed Lion over my old snow leopard versioned system I kept the trackpad settings. I used to use the one-finger gesture in Lion a lot. But when installing a clean Lion default it doesn’t come with the same one finger click-and-drag gesture that used to be in Snow Leopard, and instead the user has an option of enabling a three finger drag gesture through the system preferences. This post shows you how to re-enable the one finger drag gesture. So you are able to use the same settings as before on your older system.


To enable one finger drag, go to System Preferences, click on Universal Access, and then the Mouse & Trackpad tab. Now click on the “Trackpad Options…” button available at the bottom of this screen. Enable the second option, which is named “Dragging” and select the desired draging behaviour from the drop down list
After this you should be able to do one finger click and dragging just like in good old Snow Leopard.

Posted in Other tutorials | No Comments »

Vlookup and concat in excel

Posted by info on December 4th, 2011

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

 

Posted in Scripting | No Comments »

Must know for css developers

Posted by info on November 17th, 2011

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/

Posted in Scripting | No Comments »

Streaming from your mac on the ACRyan media box

Posted by info on November 6th, 2011

When you want to stream your video from your mac to the RyanHD box you need to add the shortcut to your computer to the network in the RyanHD box. if you are on the network tab press menu on your remote then choose ADD. Add the IP number of your computer and your password and username. Now you can try to connect to your computer, search the directory on the computer for the music or videos and play it on you ryan HD media streamer.(it may be necessary to add the domain name in the settings too (mine was fritz.box)
When you have a Apple Time capsule you have to look up the IP adres from your timecapsule (I found the IP in the fritz box settings). In the Shop the seller told me I could not store and stream video from my time machine and the box was not designed for that. Only to make backups. But with the ryan HD already full I could also use the 2 TB Data partition from my timecapsule as extra storage and stream my media from there and have a better and extra wireless at home.

Posted in Other tutorials | No Comments »

Truncate text with ellipsis example with xslt

Posted by info on September 13th, 2011

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>

Posted in Scripting | 12 Comments »

Example select All checkbox with prototype

Posted by info on July 30th, 2011

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 :

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js"></script>

Then add these line.. I Hope they will explain themselves

Event.observe(window, 'load', function() {
	var select_all_boxes = $$('.checkbox_group');

	select_all_boxes.each(function(el) {

		var checkboxes = el.select('input[type="checkbox"]:enabled');
		var select_all_box = checkboxes.shift(); // throw out select all box
		select_all_box.observe('click', function() {
			checkboxes.each(function(e) {
				e.checked = select_all_box.checked;
			});
		});
		select_all_box.checkYourBoxes = function(){
			var allSelected = true;
			checkboxes.each(function(e) {
				if(e.checked == false){
					allSelected=false;
					throw $break;
				}
			});
			this.checked = allSelected;
		}
		checkboxes.each(function(e) {
			e.observe('click', function(e) {
				select_all_box.checkYourBoxes();
			});
		});
	});
});

 

Posted in Scripting | No Comments »

Changing iCal theme in OsX-Lion

Posted by info on July 30th, 2011

I am a big fan of Lion but the iCals leather look feels not in place…The first thing I did when starting to use iCal in Lions was looking where in the settings I could change the theme.. but no luck there.

If you want to change the theme of the leather look of Os Lions iCal look further..

Y can look in the package (right click the app but be sure you copy it before you mess up the package.. better still use the copy to modify the app).

There you see the folder resources and inside the images:

/Contents/Resources/LeatherTile.png
/Contents/Resources/LeatherTileFullscreen.png
/Contents/Resources/CanvasTopTile.png
You can change this picture like for instance:
and
to create something like:
Or  more leather grey like this
without torn paper: For those who want to be creative.. the yellow highlights on the buttons can use some retouching too…
to create this look:
I found today a site where y can download the old iCal theme here: http://macnix.blogspot.com/2011/07/change-mac-os-x-107-lion-ical-skin-to.html

Posted in Other tutorials | No Comments »