Live Character Count in jQuery Example

No Comment - Post a comment

This simple jQuery example will show you how to set up 'live' character count and how to display results as paragraph tooltip.

First, we need simple HTML file.

livetest.html

<html>
<head>
<script src="jquery-1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="script.js"></script>
<style type="text/css">
p {
border: 1px solid;
padding: 2px 10px 2px 10px;
}
</style>
</head>
<body>
<p>Europe, Germany, Berlin</p>
<p>Europe, Great Britain, London</p>
<p>America, New York</p>
</body>
</html>


I don't want to complicate my life with external css file, because I only need two attributes, border and padding to visually display different paragraphs.

Now, let's see how we can set 'live' character count on paragraphs.


$('p').live('mouseover', function() {

// calculate number of characters in paragraph
var chnum = $(this).text().length;

// show it as tooltip
$(this).attr('title', chnum+' characters in this paragraph.');

});


You can see I don't use bind() jQuery function, but instead I use live. Main difference is that live() will attach our mouseover event to every paragraph created in the future, not only existing ones like bind() will do.

I wanna show you this important difference, so I'll attach click event to paragraph which will append new paragraph with random number of characters after clicked one. Here is entire file.

script.js

$('p').live('mouseover', function() {

// calculate number of characters in paragraph
var chnum = $(this).text().length;

// show it as tooltip
$(this).attr('title', chnum+' characters in this paragraph.');

});

$('p').live('click', function() {

// create random string with max length 40
var rn = Math.floor( Math.random()*40 );
var rs = '';
for(i=0; i<rn; i++) {
rs += Math.floor( Math.random()*9 );
};

// create new paragaph and append it
$('<p> - new paragraph added '+rs+'</p>').appendTo($(this));
});


Hope this will be useful to someone.

King size portfolio / photography template

No Comment - Post a comment

This theme designed by Denoizzed comes with fullscreen image / video background. There are five gallery types included plus bonus one page AJAX version.



I should also mention that contact form has basic spam protection, which is great. This theme incorporates many free libraries like jQuery, Cufon and lots of awesome plugins like prettyPhoto, Galleria jQuery plugin,FancyBox and ColorBox.

Template is new, published just few days ago, but already has 5 star rating and very positive comments. Live preview is available.

Best Free Web Color Picker

No Comment - Post a comment

When it comes to usefulness, some web applications are better than others. For designers, ColorExporer is one of the best free online applications available.


First of all it's 100% free, no hidden catch and you don't even need to register. You can choose to do so if you want to secure your palettes and make them available across multiple computers.

Advanced color picker is base of ColorExplorer application. You can also upload image from your computer and create palette based on that image.

Exporting your colors palette is fast and easy (and free), with just single click. You can export to Adobe Swatch Exchange format .ASE, Adobe Photoshop .ACO, PNG image or simple Text file.


For me, this is major time saver, cause I don't need to PrintScreen my newly created color palettes on other 'cool' online color pickers ;)

ColorExplorer has many more awesome features to check out. Also help screencasts are available for beginners and advanced users. Enjoy.

Get rewarded for your web surfing

2 comments - Post a comment

Do you get rewarded for your web browsing? And I don't mean rewarded like pay-per-visit scheme where you get paid 0,0001 cents per website but rewarded by website owner with reputation patch you always craved for? If not, than it is most likely you haven't heard about OneTrueFan.



With OneTrueFan you are in position to integrate their JavaScript bar into your website or blog and to track your fans or see what they visit and find new interesting content.

You can sign in with your Twitter or Facebook account or download browser add-on and share with others links, images, videos etc. OneTrueFan is good way to meet new people and build your own fans community.

TechCrunch said that OneTrueFan is like "Foursquare for websites", great description.