klauskjeldsen.dk » Web Development

CSS/Less: Truncate Text with CSS (ellipsis)

Klaus Kjeldsen — Fri, 23 Mar 2012 09:29:57 +0000

A cross-browser example of truncating a single line of text using only CSS.

Cross-Browser Support: IE 6+, Safari 4+, Firefox 7+, Opera 11+ and Chrome 10+:

.truncate {
   text-overflow: ellipsis;
   display: inline-block;
   vertical-align: top;
   white-space: nowrap;
   overflow: hidden;
   width: 150px;
}

If you use a CSS pre-processor like Less, a mixin like this could be quite handy:

.truncate-line(@width: 100%) {
   text-overflow: ellipsis;
   display: inline-block;
   vertical-align: top;
   white-space: nowrap;
   overflow: hidden;
   width: @width;
}

Enjoy!

No related posts.

Browsers ability to make users adopt new versions

Klaus Kjeldsen — Sun, 20 Nov 2011 22:22:33 +0000

I recently came across these charts showing different browsers ability to make users adopt the new versions. As you can see this works very well for the Google Chrome browser having automatic updates:

Chrome

FireFox is getting better at this also, though it seems many users stick with the 3.6 version:

FireFox

However, Internet Explorer is really lost here, we see also no user adoption of the newer browser versions. COME ON, MICROSOFT!!

IE... WTF!!

Sources: arstechnica.com / netmarketshare.com

No related posts.

JavaScript and jQuery Tools For Web Application Development

Klaus Kjeldsen — Thu, 23 Jun 2011 10:56:07 +0000

Nice slide serie making an overview of different JavaScript framework for your web application.

Tools For jQuery Application Architecture (Extended Slides)

View more presentations from Addy Osmani

Source:
http://addyosmani.com/toolsforjqueryapparchitecture/
&
http://addyosmani.com/blog/tools-for-jquery-application-architecture-the-printable-chart/

W3C Geolocation API (HTML5)

Klaus Kjeldsen — Sun, 24 Oct 2010 07:48:06 +0000

I have fiddled a little bit with the W3C Geolocation API and made the below demo on how to detect the user’s location within a browser. The demo uses HTML5 and the Google Maps API V3, which is designed to load faster, especially on mobile browsers such as Android-based devices and the iPhone.

See demo in fullscreen here: W3C Geolocation API Demo – you can also see this demo on your iPhone.

Feel free to comment, if you have any experience on geolocation…

As an alternative it is also posible to use the Google Gears Geolocation API, see code example here: Google Maps Javascript API V3 – Basics

Currently, several ways exist to detect the user’s location within a browser. None of these methods are part of the Google Maps API; instead, they are common industry standards.
Newer browsers are starting to support the W3C Geolocation standard. This standard is part of HTML5 and will likely become the de-facto standard going forward. All applications that wish to perform geolocation should support this standard.
Some browsers with Google Gears can use Google Gears Geolocation API. Since widespread support for the W3C standard is still forthcoming, checking for Gears is a good fallback mechanism.
Some browsers use IP addresses to detect a user’s location, though this provides only a very rough estimate.
Source: code.google.com

Additional Google Maps resources:

Marker Clusterer – Too Many Markers!
Google Maps Marker Icons

No related posts.

bbPress One Forum Only – Permanent Redirect

Klaus Kjeldsen — Fri, 10 Sep 2010 20:28:14 +0000

Problem:

bbPress supports multiple forums by default, and does not include options to support a only a single forum.

Solution (redirect hack):

Replace the contents of your template’s front-page.php with this code to permanently redirect the forums site to your preferred single forum. “http://www.example.com/forums/forum-slug” must be the direct URL to the single forum you want to show:

< ?php
header("HTTP/1.1 301 Moved Permanently");
header("Location: http://www.example.com/forums/forum-slug");
exit;
?>

This will permanently redirect users from the frontpage to the specific forum.

Change bbPress Installation URL Path

Klaus Kjeldsen — Fri, 10 Sep 2010 19:50:59 +0000

Problem:

You have installed bbPress using the default url, i.e. http://www.example.com/bbpress/, and now you want move your bbPress installation to e.g. http://www.example.com/forums/

Solution:

Make a copy the of the “bbpress” folder and name it “forums”.
In the bbPress administration “Settings > General” change the bbPress address (URL) to the new url “http://www.example.com/forums/”.
Open the .htaccess file in the root of the new bbPress location “/forums”, and replace “bbpress” with “forums”.
Save the .htaccess file, and reload page using the new url, i.e. http://www.example.com/forums/.
The page is now moved.
Clean up and delete the old “/bbPress” folder.

The Poker Players WordPress Theme – iPoker

Klaus Kjeldsen — Tue, 08 Apr 2008 20:52:04 +0000

UPDATE: The iPoker theme has been changed a lot lately, and I have actually also decided to change the name of it. Now, it goes under the name “myPoker”. The new myPoker WordPress Theme is available here very soon. Let my known if you like the new look better?

The iPoker WordPress Theme is perfect choice for poker players with the desire of telling the world about their winnings, poker freerolls, great hands, bad beats, etc. If you have a poker site powered by WordPress, you should try this new theme.

The theme is enabled with WordPress Widget support in both the left and right column, making it very flexible to place your sidebar content using widgets. The WordPress Blog Search is also enhanced with Ajax Live Search featuring searching while writing. The theme is of course developed both with valid XHTML and CSS according to W3C Standards

DONATE

The theme will be improved continuously, and if you are using the theme you are more than welcome to comment on the theme – opinions, bugs, improvements and new ideas are always welcome…

If you take this theme into use, you are advised to make a donation due to support and further development of the theme, and as in poker the donations are, of course, no limit donations!

In advance, thank you for donating!

DOWNLOAD

The theme is licensed under the CC 3.0 license.

Download iPoker WordPress Theme (.ZIP) [784Kb]

KNOWN ISSUES

The theme uses transparent PNG images, which are not supported in Internet Explorer 6.0 and earlier version of this fabulous browser.

CONTRIBUTION

What made this theme easier to make…

Sponsored Link:

CSS, PHP, flash and AJAX charts

Klaus Kjeldsen — Fri, 27 Jul 2007 08:28:17 +0000

A collection of usable CSS, PHP, Flash and Ajax charts are listed at roScripts, which might come in handy, if graphical representation of data is needed. The illustration shows a PlotKit chart…

Sponsored Link:

No related posts.

Free Web Icon Packs

Klaus Kjeldsen — Fri, 20 Jul 2007 19:01:41 +0000

This is a collection of recommend and freely available quality icon packs.

IconFinder

Mixed free icons…

FAMFAMFAM
FAMFAMFAM provide several icon sets, where the Silk icons are the most notable. The sets contains more than 700 16x16px smooth graphic icons. Flags and a Mini icons are also available.

– is a smooth, free icon set, containing over 700 16-by-16 pixel icons in strokably-soft PNG format. Containing a large variety of icons, you’re sure to find something that tickles your fancy. And all for a low low price of $0.00. You can’t say fairer than that.

Everaldo

Everaldo provide an icon pack called Crystal containing a large quantity of icons available in many sizes from 16×16 to 128×128 pixels. Other free icons are available from Yellow Icon and Icon Base.

Currently, the Crystal Project, has more than 1300 icons in six different sizes, divided into the following categories: Actions, Apps, Files Systems, Devices and Mime Types.

Tango
Tango provide an icon sets aimed at GNOME and KDE, however, I find them usable for web use as well, they are available i three sizes, and notably they are also available in SVG format, and therefore scalable.

We have designed a basic set of desktop icons that follow the style guidelines. The set has been created as a proof of concept for the style, but works rather well as a replacement for the base theme under GNOME and KDE.

nuoveXT 2
The nuoveXT 2 contains a large amount of icons, other free icons are also available at IconDesigns.

Welcome to IconsDesigns. Here you will find some of the best free icon themes for Mac OS X, Linux and Windows.

Please leave a comment, if you can recommend other icon packs or sets.

Avoid HTML form spam using CSS

Klaus Kjeldsen — Thu, 19 Jul 2007 08:43:40 +0000

An approach of avoiding HTML form spam is using CSS. Non-human spammers usually fills out every input field in a form and submit it, and to overcome this kind of spam you must be able to differ between real human form submits and non-human spam. A technique to distinguish between non-spam and spam is using CSS; the basic idea is to make an extra dummy input text field in your form, and using CSS to make it invisible to the real human users. Thereby, if a post is sent to your php script handling the request and this extra text field contains information, you know that the submit must be spam, and the script can ignore the post.

Here is a small example form:


Name:


Comment:

The human text field is used for detecting spam, you might call it something else than “human”, however this should be hidden by using CSS such that it is not visible for the user on the webpage. This can be achieved add the following to your CSS file:

#human {
visibility:hidden;
display:none;
}

The solution is as you see very to implement and proves to be effective.

Additional notes:

Using JavaScript to hide the dummy input text field is also an option. E.g. using a JavaScript Framework like Prototype.js it can be done with one line of code:

$('human').hide();

More information on hiding elements using prototype.js.

TYPO3: Making a simple menu as an unordered list in XHTML

Search Engine Optimization

Klaus Kjeldsen — Sun, 13 May 2007 12:53:54 +0000

Oscar has posted a statement on search engine optimization.

Search Command History in Terminal

Redirect domain from www on Apache

Klaus Kjeldsen — Tue, 17 Apr 2007 18:52:44 +0000

First locate the virtual host configuration file for Apache related to the domain, on FreeBSD it should be here:

cd /usr/local/etc/apache/vh

Now add following in between the begin and end

RewriteEngine on                                                                                
RewriteCond %{HTTP_HOST} ^www\.(.*)                                                            
RewriteRule ^/(.*)$ http://klauskjeldsen.dk/$1 [R=301]

bbPress One Forum Only – Permanent Redirect

Overview of TextMate shortcuts

Klaus Kjeldsen — Sat, 31 Mar 2007 09:18:06 +0000

At wishingline.com a nice overview of TextMate shortcuts can be downloaded as desktop wallpaper, the Adobe Photoshop source files is also available.

JavaScript Verification Tool

Klaus Kjeldsen — Tue, 20 Mar 2007 13:10:27 +0000

JSLint is a very handy web-based JavaScript verification tool that identifies errors and warnings in your code, which otherwise can be hard to locate. JSLint can also be integrated into TextMate by installing a bundle from BundleForge called JavaScript Tools.

Install bundle using SVN in terminal:

cd ~/Library/Application Support/TextMate/Bundles
svn export http://bundles.bundleforge.com/trunk/bundles/JavaScript%20Tools.tmbundle/

When the SVN repository is exported, reload bundles in TextMate (Bundles > Bundle Editor > Reload Bundles) and now you can use JSLint directly on your JavaScript files in TextMate. By pressing CTRL-SHIFT-V a pop-up window with the validation result will appear, and another nice feature is when you save, a small tool-tip will appear at the cursor showing the number of errors and warning, if any.

Another useful altenative to TextMate when dealing with JavaScript is the Aptana IDE, the editor has code assist on JavaScript, HTML, and CSS languages, FTP/SFTP support and a JavaScript debugger. It’s available both for Mac and Windows.

JavaScript and jQuery Tools For Web Application Development