Frontendplace Blog

Sharing Frontend developing ideas

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.

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 | Comments Off

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 | Comments Off

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 | Comments Off

problem with positioning absolute element inside padded container in FF

Posted by info on July 29th, 2011

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

Posted in Scripting | Comments Off

Lions is here …do you miss windows/download folder

Posted by info on July 23rd, 2011

First look on safari on Lion is great. Especially the new features for developers when you choose Inspect Element.
But then searched for the window/download folder menu option but it wasn’t there anymore.. but looked further and there it was in the corner of the safari window.. (look for the arrow down icon). But when you have removed the icon from the toolbar by customize toolbar.. than you have to set it back first or else you are not able to view the download progress.

Posted in 3D Tutorials | Comments Off

EXC_BAD_ACCESS error saving Office documents

Posted by info on May 5th, 2011

Yesterday I updated my old Dual Core mac to snow leopard. This was the last computer in the house with still 10.5 OSX
and got this crash every time I tried to save a document in all office2008 or office2011 documents:

Microsoft Error Reporting log version: 2.0

Error Signature:
Exception: EXC_BAD_ACCESS
Date/Time: 2011-05-05 06:52:12 +0200
Application Name: Microsoft Word
Application Bundle ID: com.microsoft.Word
Application Signature: MSWD
Application Version: 12.2.3.091001
Crashed Module Name: libobjc.A.dylib
Crashed Module Version: unknown
Crashed Module Offset: 0x00005ed4
Blame Module Name: libobjc.A.dylib
Blame Module Version: unknown
Blame Module Offset: 0x00005ed4
Application LCID: 1033
Extra app info: Reg=en Loc=0×0409
Crashed thread: 0

Looked at internet what to do.. did everything by removing off course the whole office package with all the prefs, application support files, receipts. But nothing helped. I allready thought I had to reinstall my whole system.
Finally I tried to disable other utilities. And it worked again. The culprit was “Default Folder”. Disabling Default folder and all office apps would save again. Enabling it and I get the same crash. (my version of DF was 3.0.6 because that was the last version I used before updating the system) I already had the newest version installed on my laptop (4.3) and never got problems. So updated ( last version is now 4.3.10) and everything worked again :-). Later I thought off course that is why I did not update before. Because at the time I first got snow leopard the new version of default folder was not yet out and I loved this utility so much that I did not wanted to update before.

Posted in Uncategorized | Comments Off

Creating a progressbar with jQuery and CSS3

Posted by info on March 27th, 2011


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

Posted in Scripting | Comments Off

img2base64

Posted by info on February 21st, 2011

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;
}
}
?>

Posted in Scripting | Comments Off

Prototype.js what to know about hasClassName and addClassName

Posted by info on February 11th, 2011

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.

Posted in Scripting | Comments Off

Cinema 4D does not quit when little snitch is enabled

Posted by info on November 20th, 2010

For those people who are using little snitch on the mac in combination with Cinema 4D can have the problem that cinema 4D doesn’t quit and you have to force quit this application. But when you stop little snitch, C4D will quit again. So probably C4D wants to talk home somehow and little snitch prevents this I think. Or there is an other conflict with these programs. I have allowed all communication from C4D but still C4D won’t quit as long as little snitch is active.

Posted in Uncategorized | 1 Comment »