The fiber optics connections to Asia(Seacom and TEAMS) finally arrived in Kenya. Question is, what technologies are used by the websites that receive the highest hits? I decided to do some digging, and here is a quick snapshot of the results based on Alexa:

Clearly, PHP currently rules on the server side, possibly because of its cost implications and the availability of quality CMS with which it easily integrates. I expect to see more of ASP and Ruby based sites as the developer community grows.

Exploitation of available Javascript utilities is limited, with jQuery and Mootools being used to add a few effects for the menus. I would expect more sites to have AJAX to enrich the user experience using such libraries as Ext Js or even Prototype.js.

As far as the duel between Adobe Flex and Microsoft Silverlight is concerned, no front runners have emerged so far.

Máscara para campos de formulário. Permite nagevação através do teclado e pode ser inicializado através de um evento onBlur, por exemplo.

Imask

http://zend.lojcomm.com.br/imask/

FancyForm faz a substituição de checkbox por imagens. A técnica é conhecida como checkbox replacement. Apenas como citação, no caso de textos chamam de image replacement ou text replacement.

Esse script propicia formulários um pouco diferentes, mais requintados em termos de design. Fácil de configurar e usar.

Fancy Form

Site: http://lipidity.com/fancy-form/

Demo: http://lipidity.com/fancy-form/demo/

Licença: Free.

Zilele trecute am dat fără să vreau peste un articol legat de MooTools, un alt framework JavaScript. În articolul respectiv erau lăudate capabilitățile OO ale acestui framework. Se pare ca MooTools este un framework foarte orientat pe obiecte, ba mai mult, se pare că încurajează la maxim folosirea programării orientate pe obiecte (POO), lucru care m-a fascinat pe loc! Așadar, am început să răscolesc prin acest framework și am realizat că nu era nici pe departe la fel de tare ca jQuery. E drept că tot ce face jQuery se poate face și cu MooTools, însă nu la fel de repede și de ușor. Și aici au început problemele!

Mie îmi place la nebunie POO, iar jQuery se știe deja că nu oferă mai deloc suport pentru POO. Singura legătură pe care o are cu POO este funcția extend care este folosită deobicei la crearea plugin-urilor. În rest, nimic! Nu clase, nu interfețe, nu moștenire… toate se pot obține doar prin folosirea unor principii JavaScript care îți dau impresia că ai programa pe obiecte. Chiar și în JavaScript, POO este mai mult o improvizație posibilă datorită facilităților extraordinare ale acestui limbaj extrem de extensibil.

Revenind la jQuery și POO.. mi-a plăcut atât de mult MooTools din cauza acestui fapt, și m-am gândit: oare nu e posibil să amestec MooTools cu jQuery ? După îndelungi căutări, aflu că pot fi oarecum amestecate, în sensul că ești nevoit să separi codul MooTools de codul jQuery, lucru care nu mă ajută absolut deloc. Eu vreau să pot folosi cod jQuery în cod MooTools, beneficiind astfel de facilitățile OO oferite de cel din urmă. Eh, am dat și peste plugin-uri jQuery care încearcă să ofere astfel de facilități, dar sunt cam varză.

Demoralizat după atâtea căutări zadarnice, când să renunț dau peste ceva numit DUI (Digg User Interface). Se pare că cei de la Digg s-au trezit în aceeași situație în care mă aflu eu acum, iar ca rezolvare au considerat că mai bine să implementeze ei un model OO pentru jQuery, sub numele DUI. Evident, au reușit, însă nu este ce-mi doream eu. De ce ? Fiindcă este o soluție destul de rudimentară, adică oferă suport doar pentru clase, singleton, și cam atât. Eu am nevoie de interfețe, moștenire, ș.a.m.d. Ce mă fac ? Digg a spus clar că framework-urile JS OO nu s-au dovedit a fi o soluție practică.

După mai multe căutări, am dat în cele din urmă peste o librărie JS care oferă facilități OO adevărate: JS.Class. Este exact ce aveam nevoie: are suport pentru clase, interfețe, moștenire, reflexii, și câte și mai câte. În sfârșit mi-am găsit pacea! Acum mai urmează să văd ce poate face și să-l scot la un test drive

Desarrollando un proyecto web tenia que realizar las tipicas validaciones de los campos de los formularios y ya que estoy trabajando con el framework mootools tenemos una clase Form.Validator que es bastante sencilla de utilizar, pero para hacer algo mas llamativo encontre una clase que nos puede facilicar y muy facil de comprender Mootools.Floor aunque en muchos blogs encontre informacion sobre ello, siempre colocaban los mismos ejemplos de la pagina que es algo dificil de comprender si no estas familiarizado con Mootools,en esta entrada les voy a poner un ejemplo que solo tiene que copiar y pegar y claro leer la documentación de esta clase para configurar lo a su manera, pero este corre a la perfección.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Documento sin título</title>
<script language=”javascript” type=”text/javascript” src=”core.js”></script>
<script language=”javascript” type=”text/javascript” src=”more.js”></script>
<link rel=”stylesheet” type=”text/css” href=”theme/blue/formcheck.css” media=”screen” />
<script language=”javascript” type=”text/javascript” src=”lang/es.js”></script>
<script language=”javascript” type=”text/javascript” src=”formcheck.js”></script>

<script type=”text/javascript”>
window.addEvent(‘domready’, function(){
postcomment = new FormCheck(‘formular’, {
display : {
errorsLocation : 1,
indicateErrors : 2,
keepFocusOnError : 1,
closeTipsButton : 0,
showErrors : 1
}
})
});
</script>
</head>

<body>
<form class=”formular” id=”formular” method=”post” action=”#”>
<br />
<br />
<input type=”text” class=”validate['required','alpha']” />
<input type=”submit” value=”Hola” />
</form>
</body>
</html>

——————————————

Diran que es algo largo pero prefiero ponerlo así porque en todos lados sale solo trozos de código que aveces no funciona solo tiene que descargar las librerías y poner andar este ejemplo y modificar lo a su gusto.

Me enfoco en los principales framework de javascript quizas de un gran tiempo de navegacion por los foros y los diseñadores web y estos fueron los que mas usan aqui les dejo una pequeña comparacion de estos dos framework :

jQuery se enfoca en expresividad, codificación fácil y rápido, y en el DOM mientras MooTools se enfoca en extensión, herencia, legibilidad, reuso, y mantenibilidad. Si tu pones estas dos cosas en la balanza, el lado de jQuery se traduce en algo que es fácil para empezar y se ven rápido los resultados pero (en mi experiencia) se puede convertir en código más dificil de mantener o reusar (pero realmente eso está de tu lado, no es un problema de jQuery), mientras el lado de MooTools toma más tiempo para aprender y requiere que escribas más código antes que puedas ver los resultados, pero luego es más reusable y mantenible.

Para mayor información de estos framework les dejo la pagina donde hacen esta comparación aqui.

En mi caso yo uso el mootools por el hecho de que encuentro mas plugins y ejemplos, claro esto no quiere decir que no voy a saber el manejo de JQuery por si me encuentro algunos plugins para poder modificar lo para mis necesidades. Bueno aquí les dejo para que saquen sus propias decisiones de igual forma estaré publicando información de mootools en las siguientes entradas .

]]> http://funksoulcoder.wordpress.com/2009/10/20/problem-quantisation/ Tue, 20 Oct 2009 00:17:21 +0000 fusoco http://funksoulcoder.wordpress.com/2009/10/20/problem-quantisation/

I think about this a lot.

When I solve any problem through programming I always think about the generic problem I’m solving and when its sufficiently complex I try to break it down into a number of smaller, repeatable problems that have similar characteristics and can leverage much common code.

I’m currently trying to implement my my current big framework on top of Django. It’s an interesting project – it does set things up to be nice and easy. However I have concerns about how it decomposes problems.

Basically its metaphor for subdividing a web-site is to decompose it into a number of applications. An application is something that, in general, will have the following properties:

1. A URL schema (nominally defined in a urls.py)
2. A set of models that describe a set of Active Records that map onto an SQL database schema.
3. A set of views. These are basically functions that handle web requests are specific URLs.
4. A set of templates. Using Django’s template language.

Now, this is a fine set of things to provide. However I feel there are a number of problems with Django’s approach for anything that is not just a simple “helloworld” style project. Even as a novice with Web Development I ran into limitations pretty quickly (though I should point out that I have about 10 years experience with other software domains – specifically embedded C++ development tools).

The limitations that I see are as follows:

1. Lots of Magic.
   My feeling is that there is a lot of magic that Django does behind the scenes to register classes via Meta-Classes and automagically do  lots of stuff for you. It is not always clear what this stuff is and how it might interact with other non-Django code.  Its a opaque magic. I feel to some extent it violates Python’s “better to be explicit than implicit” philosophy.
2. Very Web 1.0. So much of the standard infrastructure is based around a very old stylee web where you view-edit-submit changes. And this process takes you through a series of different web pages. This is quite frustrating.
3. SQL need only apply. All the model classes are all based around the central notion of an SQL database. Whilst this is good for small projects if you need any kind of scalability then its not so good.
   Interestingly in a talk at Google I/O Guido van Rossum talks about this limitation.  It basically means you can’t use any of the “automated” Admin style functionality that Django provides.
4. Implicit Dependencies.
   The dependency structure of Django Applications is implicit in the Python code that comprises your application. To discover all the dependencies of your app you will have to trawl though all your code to figure out what they are.
5. Fuzzy Deployment Boundaries. I feel that the boundaries between development and deployment are purposefully made fuzzy via the django-admin and management tools (manage.py) that you’re supposed to use when using Django.
6. Untestable. I don’t feel that Django Apps are very testable. If we move beyond the Web 1.0 then any reasonably sophisticated application will have a bunch of JavaScript, template files and a set of Django files to provide the Python based functionality. Not to mention default CSS, images and other static content as necessary. I think the conventions for storing templates and such like along with the app are not very strong with Django.

So its getting late.

The reason I wanted to get to this phase is that I think there is a better alternative approach to doing this.

Some thinking:

• We re-use the idea as used in Trac for having Extension points and clear “kernel” of functionality to make explicit some of the Magic that the framework is doing behind the scenes. This is a common design pattern and is especially useful when we need to be able to extend a system dynamically. (obviously really, given the name).
• We strengthen the concept of an application and turn it more into something that is self-contained and can be built, tested and deployed on its own.
• We provide clear separation between build, composition and deployment phases of a application creation. These are analogous to what would be Compilation, Linking and Loading in C or C++.
• We provide a framework for implementing Web 2.0 style applications. My current feeling is that this should be based around Panels at both client and server ends. At the client, panels will be presented to users that show data and allow that data to be edited. Meanwhile, server side a “panel API” will provide support for the panel – including doing things like validating form data and sending errors back to the client, help with scrolling through large data sets, in-line tabular editing, AJAX based auto-complete support etc.
• AJAX functionality provided by MooTools.
• Testability – there should be in-built support for doing client-side unit tests of JavaScript functionality, of server-side API functionality as well as the integration of both into a coherent whole.

I will follow this up later this week with more information about what I’ve protyped and how I intend to proceed.  But the crux is that ultimately I don’t feel that the Django “application” is  particularly useful abstraction in breaking down a sophisticated web site. Lets hope I can come up with something better!

I’ve been playing around with a couple of different JavaScript frameworks today. I thought it about time as I have only really ever used jQuery at work (which I guess isn’t very strange as it’s the framework most people start out using).

I wanted to find a framework that would let me code in plain ole’ JavaScript but also eased cross-browser AJAX and FX animations.

But I also needed to make sure that my requirement of a good core API, with a modest selection of features was balanced against what is (for me) the most important aspect of a JavaScript framework… the overall filesize when minified and sent down the wire via GZIP compression.

So I did some very basic tests and this is what I found…

NOTE: All libraries are their minified versions. You’ll notice I’ve included jQuery in the list of frameworks below even though its API is so alien, but I use it so much that I thought I’d give it’s API a chance against the other more OO frameworks in the speed stakes.

MooTools 1.2.3 (reduced core build with the Fx.Slide from the ‘more’ build)

14.5k

MooTools 1.2.3 (reduced core build with AJAX features & Fx.Slide from the ‘more’ build)

15.7k

jQuery 1.3.1

18.4k

MooTools 1.2.3 (full core build)

21.2k

Ext Core 3.0

26.9k

Prototype 1.6.1

27.1k

Dojo Base 1.3.2

27.1k

Now is has to be said that I actually really like Dojo having spent most of the day playing with it. I love the feeling of it being easily scalable if the project called for it.

I also like Prototype because it’s the plainest of the frameworks and means I write the majority of my JavaScript in the core language.

jQuery is just so simple to use, and that’s regardless of it’s API which seems to have been abstracted too far from the language we know and love.

So these are just my opinions on these frameworks, I’d be interested to hear what everyone else thinks…

Course Outline:
 

• Core Java Round-up
• Introduction to Web Technologies
• Web Application Architecture, MVC
• End-to-end flow of HTTP request
• Eclipse Integrated Development Environment
• Servlets, Servlet Context, Filters
• JSP, Scriptlets, Expressions, includes, contexts
• JSP Tag Libraries, JSTL
• Struts 1.3, Introduction
• Struts Actions, Form Beans, Struts Validation
• Hibernate, OR Mapping Concepts, pooling
• JiBX, OX Mapping Concepts
• JavaScript, Element Selection, Form Submission
• JavaScript Events, Ajax, JSON
• JavaScript debugging with FireBug & Script Debugger
• Advanced JavaScript frameworks – JQuery, Mootools, ExtJS
• CSS, styles, selector, debugging with FireBug & Developer Toolbar
• Advanced tools – TamperIE, DebugBar, FireFox, ieHttpHeaders

Visit http://fortunetechnol.com/ to more about the training courses.

Flipando me he quedado con esta librería para Mootools. Tiene una serie de componentes pensados para desarrollar aplicaciones web, al mas puro estilo de cualquier sistema operativo normal.

Echarle un ojo a la demo que os va a encantar, muy recomendable.

Link: MochaUI | Demo

Pardon me, article is huge!
Day by day facebook connect becomes very popular. See facebook connect in action http://mashable.com/2009/01/12/facebook-connect-implementations/ . For the last few weeks I was searching for expressionengine facebook module/plugin/extension but failed, there is nothing. I found a site which is still underconstruction, http://fab-ee.com/ L See how popular this stuff is
http://www.google.com/#hl=en&q=expressionengine+facebook+connect&aq=f&aqi=&oq=&fp=2cca7b2e99206b9c

I assumed, you know about facebook connect, if you not – please read about this – http://developers.facebook.com/connect.php . So read and configure your facebook application on your facebook, don’t implement your code on your EE application yet –
http://wiki.developers.facebook.com/index.php/Facebook_Connect_Tutorial1

Video tutorial is here –
http://www.facebook.com/video/video.php?v=630563174283

I found an example page here -
http://www.phpfour.com/fbstream/

Finally I became interested to solve this myself and did it. Now facebook user can login and comment a article on site built using expressionengine with their facebook account. Let’s see how I did it.

Let give me you some intro what I did. I’ve created the contact form ajax driven as we need to show facebook stream publish modal box after a comment. I’ve done this using mootools. So your commenting stuffs must be ajax driven.

Then i’ve altertered the comment table, added one field fb_uid to store facebook user’s id while any facebook user comment on any article. I didn’t modified/updated comments module instead i’ve craeted an extension which will update comment table to process few fields such as fb_uid.

Later to show facebook user’s name on comment(if any), i’ve used a plugin that i created. That’s it.

Let’s go to details. First create an ajax driven comment form using Mootools(or you can use jquery or scratch ajax code if you wish) for your article. If you are in template group articles, create a different template named comments, so you have -
articles/index
articles/comments
Index template show your single article, comment form, embed comments template, And comments template shows all comments(without comment form). So your comments template will contain code like -

<div id="comments_container" class="comments">

	{exp:comment:entries weblog="{embed:weblog}" limit="25" show_expired="yes" dynamic="on"}
		{if count==1}
			<h3>Member Comments</h3>
		{/if}

		<div class="comment">
					{if avatar}
					<img src="avatar_url}" style="float:left; padding:4px;border: 1px solid gray;" title="{screen_name}'s avatar" alt="{screen_name}'s avatar" class="alignleft" />		{/if}

				<div class="authorsComment">
					<div class="datenAuthor">{comment_date format='%F %j, %Y'} <b>{url_as_author}</b> wrote:</div>
					<div class="details">
					{comment}
					</div>
				</div>
		</div>

		<div style="clear:both;"></div>

		{paginate}
			<div class="pagination">
				<span class="pagecount">Page {current_page} of {total_pages} pages</span>  {pagination_links}
			</div>
		{/paginate}

	{/exp:comment:entries}
</div>

This is pretty straight-forward. i’ve passed weblog parameter in comment entries loop. Let’s see now the article template(single entry page) –

{assign_variable:my_weblog="default_site"}
{assign_variable:my_template_group="articles"}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>{exp:weblog:info weblog="{my_weblog}"}{blog_title}{/exp:weblog:info}</title>
<meta http-equiv="Content-Type" content="text/html; charset={charset}" />

{!-- two scripts to handle ajax request --}
<script type="text/javascript" src="{site_url}js/mootools-1.2.3.js"></script>
<script type="text/javascript" src="{site_url}js/comments.js"></script>

</head>

<body>
<div>

{exp:weblog:entries limit="1"}

<h2><a href="{comment_url_title_auto_path}">{title}</a></h2>
{body}

{embed="articles/comments" weblog="default_site"}

<!-- Comment Form -->
<div id="log_res"></div><!-- error message will shown in log_res container -->

<div class="commentForm" style="width:440px; float:left;">
{exp:comment:form weblog="default_site"}

				{if logged_out}
					<div id="comment_user">
						<p>Name: <input type="text" name="name" id="name" value="{name}" size="50" /></p>
						<p>Email: <input type="text" name="email" id="email" value="" size="50" /></p>
					</div>
				{if:else}
						<input type="hidden" name="name" id="name" value="{name}" />
						<input type="hidden" name="email" id="email" value="{email}" />
				{/if}

			   <input type="hidden" name="RET" value="{site_url}/articles/comments/{segment_2}/" />
			   <input type="hidden" name="moderate" id="moderate" value="y" />

				<h3>Add your comment</h3>
				<p><textarea name="comment" id="comment" cols="50" rows="5"></textarea></p>

				{if captcha}
				<p>Please enter the word you see in the image below:</p>
				<p>{captcha}<br />
				<input type="text" name="captcha" value="{captcha_word}" size="20" maxlength="20" style="width:140px;" /></p>
				{/if}				

                			<div id="user_pref_chk">
					<p><input type="checkbox" name="save_info" value="yes" {save_info} /> Remember my personal information</p>
					<p><input type="checkbox" name="notify_me" value="yes" {notify_me} /> Notify me of follow-up comments?</p>
			             </div> 

		<input type="submit" name="submit" value="Submit" />
{/exp:comment:form}
</div>
<!-- End Comment Form -->

{/exp:weblog:entries} 				

</div>
</body>
</html>

Now create your comments.js with following contents –

window.addEvent('domready', function(){

	$('comment_form').addEvent('submit', function(e) {

		new Event(e).stop();
		var log = $('log_res').empty().addClass('ajax-loading');

			//validate form
			var error = '';
			var name = $('name').get('value');
			name= Trim(name);

			var email = $('email').get('value');
			email = Trim(email);

			var comment = $('comment').get('value');
			comment = Trim(comment);

			var successMsg = 'Your comment has been posted successfully';

			if(name=='Name' || name.length<3)
			 error = 'Name field can not be empty!<br />';

			//if(isEmailAddress(email)==false)
			  //error = 'Login first to comment on this post!<br />';

			if(comment=='Comment' || comment.length<3)
			 error = error+'Comment needs to be atleast 10 characters long!<br />';

			if(error=='')
			{

				   this.set('send', {
							method: 'post',
							onSuccess: function(responseText, responseXML) {

									$('comments_container').set('html', responseText);
									$('log_res').removeClass('ajax-loading');
									$('log_res').set('html', successMsg);
									comment.set('html','');

							},
							onFailure: function(responseText, value) {
									$('log_res').removeClass('ajax-loading');
									$('log_res').set('html', responseText);
							}

					});
				   this.send(this.action); 

			}else{
				$('log_res').set('html', error);
				$('log_res').removeClass('ajax-loading');
			}

	});

	//trim the value
	function Trim(s)
	{

	  while ((s.substring(0,1) == ' ') || (s.substring(0,1) == '\n') || (s.substring(0,1) == '\r'))
	  {
		s = s.substring(1,s.length);
	  }
	  while ((s.substring(s.length-1,s.length) == ' ') || (s.substring(s.length-1,s.length) == '\n') || (s.substring(s.length-1,s.length) == '\r'))
	  {
		s = s.substring(0,s.length-1);
	  }
	  return s;
	}

	//do email address validation
	function isEmailAddress(email)
		{
		  var result = false
		  var theStr = new String(email)
		  var index = theStr.indexOf("@");
		  if (index > 0)
			  {
				var pindex = theStr.indexOf(".",index);
				if ((pindex > index+1) && (theStr.length > pindex+1))
				result = true;
			  }
			  return result;
	} //

});// JavaScript Document

You’ll see that, i’ve added messages, another container on log_res to show the ajax load and message, so please add following styles on your css

#log_res {
	overflow: auto;
        color:#FF0000;
        clear:both;
        flow:left;
}

#log_res.ajax-loading {
	padding: 20px 0;
	background: url(spinner.gif) no-repeat center; /* your spinner image */
}

Now get mootools core latest version, put them together. Yap, now your article paqge is ajax driven. It’s time to implement facebook connect on your page. Modify your articles/index template

Currently there is a line as

<html xmlns="http://www.w3.org/1999/xhtml">

Instead put

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">

Also put the following lines just before the closing body tag –

<!-- facebook connect scripts -->
<script type="text/javascript">
  //method to update comment form
  function update_usercoment_box() { 

  var comment_user_box = document.getElementById("comment_user");
  var user_pref_chk_box =  document.getElementById("user_pref_chk");
  var fbc_login_area =   document.getElementById("fbc_login_area");

fbc_login_area.innerHTML = "<fb:profile-pic uid='loggedinuser' facebook-logo='true'></fb:profile-pic><p>Welcome <fb:name uid='loggedinuser' useyou='false'></fb:name>, You are signed in with your Facebook account.</p>"+
"<p><a href='#' onclick='FB.Connect.logoutAndRedirect(\"{exp:fetch_current_uri uri-only="yes"}\")' class='underline'>Click here to sign out.</a></p>"; 

  comment_user_box.innerHTML = "<input type=\"hidden\" name=\"name\" id=\"name\" value=\"Facebook user\" />"+
"<input type=\"hidden\" name=\"email\" id=\"email\" value=\"anonymous@facebook.com\" />";
  document.getElementById("fb_uid").value = FB.Connect.get_loggedInUser();
  user_pref_chk_box.style.display = 'none';

  // because this is XFBML, we need to tell Facebook to re-process the document
  FB.XFBML.Host.parseDomTree();
  }
</script>

<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"></script>
<script type="text/javascript">
FB.init("YOUR_API_KEY","{site_url}/xd_receiver.htm");
</script>
<!-- end facebook connect -->

You must have to create and put a file xd_receiver.htm with empty contents, see here http://wiki.developers.facebook.com/index.php/Cross-domain_communication_channel
You see, there is a function named “update_usercoment_box”, this function will be called when a user is logged in using facebook account. Now, let’s update the comment form with facebook connect login button, you articles/index template page will be something like below –

{assign_variable:my_weblog="default_site"}
{assign_variable:my_template_group="articles"}

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml"> 

<head>
<title>{exp:weblog:info weblog="{my_weblog}"}{blog_title}{/exp:weblog:info}</title>
<meta http-equiv="Content-Type" content="text/html; charset={charset}" />

{!-- two scripts to handle ajax request --}
<script type="text/javascript" src="{site_url}js/mootools-1.2.3.js"></script>
<script type="text/javascript" src="{site_url}js/comments.js"></script>

</head>

<body>
<div>

{exp:weblog:entries limit="1"}

<h2><a href="{comment_url_title_auto_path}">{title}</a></h2>
{body}

{embed="articles/comments" weblog="default_site"}

<!-- Comment Form -->
<div id="log_res"></div><!-- error message will shown in log_res container -->

 <div class="commentForm">
	<div id="addcomment_left" style="width:440px; float:left;">	

{exp:comment:form weblog="default_site"}

				{if logged_out}
					<div id="comment_user">
						<p>Name: <input type="text" name="name" id="name" value="{name}" size="50" /></p>
						<p>Email: <input type="text" name="email" id="email" value="" size="50" /></p>
					</div>
				{if:else}
						<input type="hidden" name="name" id="name" value="{name}" />
						<input type="hidden" name="email" id="email" value="{email}" />
				{/if}

			   <input type="hidden" name="RET" value="{site_url}/articles/comments/{segment_2}/" />
			   <input type="hidden" name="fb_uid" id="fb_uid" value="" />{!-- this field will updated by facebook logged in user id using javascript callback function--}
			   <input type="hidden" name="page" id="page" value="{exp:fetch_current_uri uri-only="yes"}" />
			   <input type="hidden" name="moderate" id="moderate" value="y" />

				<h3>Add your comment</h3>
				<p><textarea name="comment" id="comment" cols="50" rows="5"></textarea></p>

				{if captcha}
				<p>Please enter the word you see in the image below:</p>
				<p>{captcha}<br />
				<input type="text" name="captcha" value="{captcha_word}" size="20" maxlength="20" style="width:140px;" /></p>
				{/if}				

                			<div id="user_pref_chk">
					<p><input type="checkbox" name="save_info" value="yes" {save_info} /> Remember my personal information</p>
					<p><input type="checkbox" name="notify_me" value="yes" {notify_me} /> Notify me of follow-up comments?</p>
			             </div> 

		<input type="submit" name="submit" value="Submit" />
{/exp:comment:form}
</div>

	{if logged_out}
	<div id="addcomment_right"  style="width:240px; float:left;">
					<h2 id="commenting_options_header" style="color:#3E3E3E;font-size:1.2em; border-bottom:0;margin:0;padding:0;">Commenting Options</h2>
					<div id="fbc_login_area">
						<p>Enter your personal information to the left, or sign in with your Facebook account by clicking the button below.</p>
						<div class="dark">
								<fb:login-button size="large" background="white" length="short" onlogin="update_usercoment_box();" ></fb:login-button>
						</div>
					</div>
	</div>
    {/if}

</div>

<!-- End Comment Form -->

{/exp:weblog:entries} 				

</div>

<!-- facebook connect scripts -->
<script type="text/javascript">
  //method to update comment form
  function update_usercoment_box() { 

  var comment_user_box = document.getElementById("comment_user");
  var user_pref_chk_box =  document.getElementById("user_pref_chk");
  var fbc_login_area =   document.getElementById("fbc_login_area");

fbc_login_area.innerHTML = "<fb:profile-pic uid='loggedinuser' facebook-logo='true'></fb:profile-pic><p>Welcome <fb:name uid='loggedinuser' useyou='false'></fb:name>, You are signed in with your Facebook account.</p>"+
"<p><a href='#' onclick='FB.Connect.logoutAndRedirect(\"{exp:fetch_current_uri uri-only="yes"}\")' class='underline'>Click here to sign out.</a></p>"; 

  comment_user_box.innerHTML = "<input type=\"hidden\" name=\"name\" id=\"name\" value=\"Facebook user\" />"+
"<input type=\"hidden\" name=\"email\" id=\"email\" value=\"anonymous@facebook.com\" />";
  document.getElementById("fb_uid").value = FB.Connect.get_loggedInUser();
  user_pref_chk_box.style.display = 'none';

  // because this is XFBML, we need to tell Facebook to re-process the document
  FB.XFBML.Host.parseDomTree();
  }
</script>

<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"></script>
<script type="text/javascript">
FB.init("YOUR_API_KEY","{site_url}/xd_receiver.htm");
</script>

<!-- end facebook connect -->

</body>
</html>

Article page is updated with facebook connect login button. Also i’ve put two more fields on comment form one is fb_uid, another is page to passe current page url. To pass current page url, i’ve used one plugin. So you must have this too – http://expressionengine.com/forums/viewthread/73764

Let now update comments.js script, updated comemnts.js script will as below –

window.addEvent('domready', function(){

	$('comment_form').addEvent('submit', function(e) {

		new Event(e).stop();
		var log = $('log_res').empty().addClass('ajax-loading');

			//validate form
			var error = '';
			var name = $('name').get('value');
			name= Trim(name);

			var email = $('email').get('value');
			email = Trim(email);

			var comment = $('comment').get('value');
			comment = Trim(comment);

			var page =  $('page').get('value'); //current page url

			var fb_uid = $('fb_uid').get('value'); //facebook user id value
			var moderate = $('moderate').get('value'); //if comment will be moderated, have to show a message to user

			var successMsg = 'Your comment has been posted successfully';

			if(moderate=='y')
				successMsg = successMsg +'<br />If you can\'t see this, It may needs to be approved by admin';

			if(name=='Name' || name.length<3)
			 error = 'Name field can not be empty!<br />';

			//if(isEmailAddress(email)==false)
			  //error = 'Login first to comment on this post!<br />';

			if(comment=='Comment' || comment.length<3)
			 error = error+'Comment needs to be atleast 10 characters long!<br />';

			if(error=='')
			{

				   this.set('send', {
							method: 'post',
							onSuccess: function(responseText, responseXML) {

									$('comments_container').set('html', responseText); //update the container with latest comments

									$('log_res').removeClass('ajax-loading');
									$('log_res').set('html', successMsg);  									

									//if comment posted by facebook user promted him to share this
									if(fb_uid!=''){
										FB.Connect.streamPublish(comment+'\n'+page);
									}
									FB.XFBML.Host.parseDomTree();
									//window.location = page;
									comment.set('html','');

							},
							onFailure: function(responseText, value) {
									$('log_res').removeClass('ajax-loading');
									$('log_res').set('html', responseText);
							}

					});
				   this.send(this.action); 

			}else{
				$('log_res').set('html', error);
				$('log_res').removeClass('ajax-loading');
			}

	});

	//trim the value
	function Trim(s)
	{

	  while ((s.substring(0,1) == ' ') || (s.substring(0,1) == '\n') || (s.substring(0,1) == '\r'))
	  {
		s = s.substring(1,s.length);
	  }
	  while ((s.substring(s.length-1,s.length) == ' ') || (s.substring(s.length-1,s.length) == '\n') || (s.substring(s.length-1,s.length) == '\r'))
	  {
		s = s.substring(0,s.length-1);
	  }
	  return s;
	}

	//do email address validation
	function isEmailAddress(email)
		{
		  var result = false
		  var theStr = new String(email)
		  var index = theStr.indexOf("@");
		  if (index > 0)
			  {
				var pindex = theStr.indexOf(".",index);
				if ((pindex > index+1) && (theStr.length > pindex+1))
				result = true;
			  }
			  return result;
	} //

});// JavaScript Document

This script will updated database, on the samettime it will promt facebook share window to ask user if he wants toi share this article or not. We also need to update articles/comments template which might be like -

<div id="comments_container" class="comments">
	{exp:comment:entries weblog="{embed:weblog}" limit="25" show_expired="yes" dynamic="on"}

		{if count==1}
			<h3>Member Comments</h3>
		{/if}

		<div class="comment">

                            {if {exp:fbcomment_user}{comment_id}{/exp:fbcomment_user}==0}
				<div class="authorThumb">

					{if avatar}
					<img src="{avatar_url}" style="float:left;padding:4px;border: 1px solid gray" title="{screen_name}'s avatar" alt="{screen_name}'s avatar" class="alignleft" />
					{/if}

				</div>
				<div class="authorsComment">
					<div class="datenAuthor">{comment_date format='%F %j, %Y'} <b>{url_as_author}</b> wrote:</div>
					<div class="details">
					{comment}
					</div>
				</div>
			{if:else}
<!-- facebook user comment -->
				<div class="authorThumb">
				<fb:profile-pic uid="{exp:fbcomment_user}{comment_id}{/exp:fbcomment_user}" facebook-logo="true" linked="true" size="square" />
				</div>
				<div class="authorsComment">
							<div class="datenAuthor">{comment_date format='%F %j, %Y'} <b><fb:name uid='{exp:fbcomment_user}{comment_id}{/exp:fbcomment_user}' useyou='false'></b> wrote:</div>
							<div class="details">
							{comment}
							</div>
				</div>

			{/if}
		</div>

		<div style="clear:both;"></div>

		{paginate}
			<div class="pagination" style="clear:both; float:left; margin: 10px 0;">
				<span class="pagecount">Page {current_page} of {total_pages} pages</span>  {pagination_links}
			</div>
		{/paginate}

	{/exp:comment:entries}
</div>

First portion to show comment who isn’t from facebook, second portion is to show comments of facebook user. On first portion i’ve used a plugin to detect if comment placed by facebook user. So you need to install the plugin, and extension. Here are the codes of plugin, extension.

Create a file named “ext.fbcomment.php”, put following contents, then put this file to to your extensions folder and install this –

<?php

if ( ! defined('EXT')) exit('No direct script access allowed');

/*
================================================================
	Copyright (c) 2009 kodegeek
	http://kodegeek.wordpress.com
----------------------------------------------------------------
	File:			ext.fbcomment.php
----------------------------------------------------------------
	Version:		1.0.0
----------------------------------------------------------------
	Purpose:		Enables  to add/store facebook user id as fb_udi
----------------------------------------------------------------
	Compatibility:	EE 1.6.7
================================================================
*/

/** ----------------------------------------
/**	Begin class
/** ----------------------------------------*/

class Fbcomment
{
	var $name="Facebook User Comment";
	var $version = "1.0.0";
	var $description = "Handle comment module behavior";
	var $settings_exist= "n";
	var $docs_url		= "http://kodegeek.wordpress.com";

    /** ----------------------------------------
    /**	Constructor
    /** ----------------------------------------*/

    function Fbcomment( $settings = '' )
    {
		$this->settings = $settings;
	}

	/**	End constructor */

    /** ----------------------------------------
    /**	Activate
    /** ----------------------------------------*/

    function activate_extension()
	{
		global $DB;

		//Add column to store facebook user id
		$DB->query("ALTER TABLE exp_comments ADD COLUMN fb_uid BIGINT (64) DEFAULT '0' NOT NULL  AFTER author_id " );
		$this->methods();
	}

	/**	End activate */

	/** ----------------------------------------
	/**	Disable
	/** ----------------------------------------*/

	function disable_extension()
	{
		global $DB;

		$DB->query( "ALTER TABLE exp_comments drop column fb_uid" );
		$DB->query( "DELETE FROM exp_extensions WHERE class='".ucfirst(get_class($this))."'" );
	}

	/**	End disable */

    /** ----------------------------------------
    /**	Update
    /** ----------------------------------------*/

    function update_extension( $current = '' )
	{
		if ( $current == '' OR $current == $this->version )
		{
			return FALSE;
		}

		$this->methods();
	}

	/**	End update */

    /** ----------------------------------------
    /**	Methods
    /** ----------------------------------------*/

    function methods()
	{
		global $DB;

		/** ----------------------------------------
		/**	Set methods array
		/** ----------------------------------------*/

		$methods	= array(
							'fb_comment'		=> array(
													'class'        => ucfirst( get_class($this) ),
													'method'       => 'fb_comment',
													'hook'         => 'insert_comment_end',
													'settings'     => '',
													'priority'     => 5,
													'version'      => $this->version,
													'enabled'      => 'y'
													)
							);

		/** ----------------------------------------
		/**	Find out what already exists
		/** ----------------------------------------*/

		$query		= $DB->query( "SELECT method, hook, version FROM exp_extensions WHERE class = '".ucfirst( get_class($this) )."'" );

		$dbmethods	= array();

		foreach ( $query->result as $row )
		{
			$dbmethods[ $row['method'] ]	= $row;
		}

		/** ----------------------------------------
		/**	Loop and install / update
		/** ----------------------------------------*/

		foreach ( $methods as $key => $val )
		{
			if ( isset( $dbmethods[$key] ) )
			{
				$DB->query( $DB->update_string( 'exp_extensions', $val, array( 'class' => ucfirst( get_class($this) ), 'method' => $key ) ) );
			}
			else
			{
				$DB->query( $DB->insert_string( 'exp_extensions', $val ) );
			}
		}

		/** ----------------------------------------
		/**	Return
		/** ----------------------------------------*/

		return TRUE;
	}

	/**	End methods */

	/**--------------------------------------------------
	/** Update just inseretd comment by facebook user id
	/**--------------------------------------------------*/
	function fb_comment($data, $comment_moderate, $comment_id)
	{
		global $DB, $EXT, $FNS;
		$EXT->end_script = TRUE; //kill to show message for comment moderation

		if(isset($_POST['fb_uid']) && $_POST['fb_uid']!='')
		{
			$DB->query("UPDATE exp_comments SET fb_uid='".$_POST['fb_uid']."' WHERE comment_id=".$comment_id );
		}
		$FNS->redirect($_POST['RET']);
	}
	/*	END */	

}

?>

Now create a file named “pi.fbcomment_user.php”, put the following contents on the file and put the files on plugins folder.

<?php
/*
=====================================================
 Comments facebook user
 by: kodegeek
 http://kodegeek.wordpress.com

=============================================================
	File:			pi.fbcomment_user.php
=============================================================
*/

$plugin_info = array(
						'pi_name'			=> 'Facebook user of comment',
						'pi_version'		=> '1.0',
						'pi_author'			=> 'Abu Musa',
						'pi_author_url'		=> 'http://kodegeek.wordpress.com/',
						'pi_description'	=> 'If comment is submitted by facebook user, get facebook user id',
						'pi_usage'			=> Fbcomment_user::usage()
					);

class Fbcomment_user {

    var $return_data;

    /** ----------------------------------------
    /**  Get comment facebook user if exist
    /** ----------------------------------------*/

	function Fbcomment_user()
	{
		global $TMPL, $DB;

		/* Grab Template Data */
		$comment_id = $TMPL->tagdata;

		//get facebook user id
		$sql = "SELECT fb_uid FROM exp_comments WHERE comment_id = ".$comment_id;
		$query = $DB->query($sql);

		$this->return_data = $query->row['fb_uid'];
	}
    /* END */

// ----------------------------------------
//  Plugin Usage
// ----------------------------------------

// This function describes how the plugin is used.
//  Make sure and use output buffering

function usage()
{
ob_start();
?>

{exp:Fbcomment_user}
{comment_id}
{/exp:Fbcomment_user}

<?php
$buffer = ob_get_contents();

ob_end_clean(); 

return $buffer;
}
/* END */

}
// END CLASS
?>

So everything is done, now put everything altogether. See this stuff on action – http://www.thebudgetfashionista.com/archive/link-love-faux-for-fall-goth-make-up-seasonal-jobs-ann-taylor-and-compact-f/
So if anything goes wrong to you, please let me know – also your feedback is very important for me.
Thanks.

A David Walsh se le ha ocurrido una idea muy simple pero efectiva para borrar las imagenes que no cargan. Esto sería util por ejemplo en una galería con varias imagenes, ya que eliminando las que no cargan la galería sigue viendose perfectamente.

Link: Remove Broken Images Using MooTools or jQuery

Es muy común usar frameworks para hacernos la vida más fácil. Yo he estado trabajando con Mootools para JavaScript y es simple añadir elementos a tu página que generan una interfaz muy atractiva al usuario.

Hay muchas librerías que vienen listas para usar y por lo general añaden efectos al cargar la página. Al comenzar a usar este framework no tenía idea cómo funcionaba por supuesto, y de a poco he ido descubriéndolo. Intenté usar una librería que verificara que en el campo de input para que el usuario pusiera el formato que yo necesitaba. usando la librería ahorraba una buena parte de trabajo.
El problema ocurrió cuando quize cargar en una parte de mi página un formulario a través de AJAX(Request en Mootools) y ahi ya no funcionó
Después de unos intentos por arreglarlo me di cuenta que los eventos que se añaden a cada input se llaman con la función ‘domready’ que se le asigna la página… es decir cuando cargo la página solamente voy a estar sumando las opciones confguradas a los input. Otra cosa sucede al cargar un trocito de código ya que no se carga la página y no estoy ejecutando el evento ‘domready’ por lo tanto lo que debemos hacer es que cuando la llamada en AJAX haya termindo con exito. Llamo a la función que le agrega los correspondientes eventos a los input, o en el caso general a cualquier elemento de tu trozo de código al que le quieres agregar algo .
Más adelante subo un ejemplo que ahora estoy trabajando.

My workplace needed a photo carousel to show staff images and information. A quick trawl of the web turned up the very slick-looking pbb magicwheel, and David Walsh’s Facebook style modal dialog box, which were quickly mashed together to create the desired effect.  This is a bit of a quick and dirty job, but the first time I’ve ever used MooTools!

1. Download and extract pbb magicwheel.  Open pbb-magicwheel.html in a text editor.
2. Modify the link tags within the ‘#magicwheel’ div so that they have a numeric ‘id’ value, starting from 1.
3. Add an empty div with id of ‘myModal’ and class of ‘box’ immediately after the <body> tag:

<div id=”myModal”>
</div>

4. Add a div for each icon, containing the info you want to appear. Make sure the div has the class ‘box’ and id ’staffDetail’ + the number of the relevent icon eg:

<div id=”staffDetail2″>
<h2>Hello there!</h2>
<p>What do you do at work?</p>
<p>Writing code wot makes websites work. My fave things (apart from work) are cats, ice-cream and 60s music.</p>
<p><a href=”#” id=”fb-close”>close me</a><p>
</div>

I chose to use divs rather than putting the info in an array, as it made it easy for my colleagues to edit the text using dreamweaver.

5. Overwrite the embedded .box css definition with the one below, and add the additional definitions beneath it:

.box {
color: #666;
padding: 7px;
background: #f1f1f1;
width: 100%;
z-index: 1000
padding-left: 100px;
padding-right: 100px;
visibility: hidden;
}

.box p {
width: 960px;
}

.box img {
float: right;
margin-right: 30px;
}

#myModal {
opacity: 0;
}

6.  Add the following code to the embedded JavaScript, immediately after the line ‘window.addEvent(‘domready’, function(){‘:

//CUSTOM – Modal dialog code
//Hide modal by default
$(‘myModal’).setStyles({
opacity:0,
});

//Trigger modal to fade in when a link within #magicwheel is clicked…
$(‘magicwheel’).getElements(‘a’).addEvent(‘click’,function(index) {
$(‘myModal’).fade(‘out’);
var staffImage = $(this.get(‘id’)).get(‘html’);
var staffDetailDiv = $(’staffDetail’+this.get(‘id’)).get(‘html’);
$(‘myModal’).fade(‘in’).set(‘html’, staffImage, staffDetailDiv);
return false;
});

//Trigger modal to fade out when ‘close me’ link is clicked…
$(‘fb-close’).addEvent(‘click’,function(e) { $(‘myModal’).fade(‘out’); });
window.addEvent(‘keypress’,function(e) { if(e.key == ‘esc’) { $(‘myModal’).fade(‘out’); } });
$(document.body).addEvent(‘click’,function(e) {
if($(‘myModal’).get(‘opacity’) == 1 && !e.target.getParent(‘.generic_dialog’)) {
$(‘myModal’).fade(‘out’);
}
});
//END CUSTOM

As e-commerce evolves and business to business systems aim to provide greater resources for users, the need for integration plays a critical role in how they will achieve this. Integration aims to bring components of different systems together to form a larger or more powerful system, a simple example of this is integrating an online ordering system into a standard website to act as an e-business. To achieve the integration of enterprise software architectures there are a number of technologies which are being used to bring software components and utilise them as one system, some of these technologies include AJAX, jQuery and MooTools which is a lightweight javascript web framework.

AJAX or Asynchronous Javascript and XML is a technology which allows web applications to communicate with a back end server asynchronously to allow pages to contain dynamically generated content without disrupting the contents of the page, this aim is the same for both jQuery and MooTools although the methods whic are used to achieve this are somewhat different, instead of using server side processing jQuery promotes the interaction between XHTML and Javascript to process requests on the clients computer, alongside this comes MooTools which is actually a javascript web application framework which is used to create a framework to utilise technologies such as jQuery and AJAX, the integration of these technologies not only aids in the development of dynamic systems but also allows web system to efficiently utilise client side processing.

Other technologies which are aiming to utilise integration are Ruby on Rails and Action Script, these are both object oriented languages which utilise a Model View Controller Architecture, other similarities between these two include: both have functionality for prototyping, and both use freeform languages, however they do differ in things such as the way that they are typed: Ruby is dynamically typed, where ActionScript is static and also the way in which each utilizes the MVC architecture.

When starting a new project, it’s important to consider which framework(s) to use, if any.  Frameworks can speed up development, but they may be feature-bloated or not so easy to learn. Also, it’s important to think about in which languages you will use frameworks. For the network (soon more on that topic) we first chose BluePrint for CSS, MooTools for JS and CodeIgniter for PHP. After some research, we discovered that for our needs MooTools wasn’t the correct framework, since we won’t do much more then ajax, DOM manipulation and tabs. We’re in the process of choosing a new one, but there is much chance we’ll go for jQuery. We also discovered that CodeIgniter was quite loose on MVC and OOP, and still PHP4-compatible (and thus not using PHP5 features optimally). Again, we’re in the process of choosing a new one, but there is much chance that we’ll choose Kohana.

What I want to say is that it’s very important to inform yourself about all the possibilities and think about what you need for your project.

Tooltips, dimana saat pengguna memfokuskan mouse-pointer (atau klik) action ini akan memberikan informasi lebih lanjut secara otomatis di bagian tertentu, seperti kata kunci ata informasi elemen web. Anda mungkin sering menggunakan dasar tooltip hanya dengan menggunakan TITLE = ” “, ALT = ” ” atau bahkan tag HTML. Namun untuk menampilkan tooltips, saya sebagai pembaca akan bisa lebih menyenangkan, menarik dan interaktif apabila kita ingin sedikit kreatif supaya web yang kita buat kelihatan lebih professional dengan menggunakan Javascripts, CSS, HTML dan Ajax.

Berikut ini lebih dari 50 tooltips Script yang bisa gunakan untuk situs web Anda, yang disusun dalam kategori CSS, Javascripts, Javascript Frameworks, dan beberapa tutorial untuk membangun tooltips secara mendasar serta plugin untuk blog atau CMS Anda. Setelah anda mengunjungi websitenya Anda juga akan mendapatkan banyak lagi script lainnya yang menarik. Selamat Mencoba dan jangan lupa Kometntarnya ya kawan..HEHEHE

• DHTML, CSS/Javascripts

Bubble Tooltips | Demo

Walterzorn’s JavaScript, DHTML Tooltips | Demo

An easy to use cross-browser Tooltip JavaScript Library that creates tooltips, information popup boxes.

BoxOver | Demo

BoxOver uses javascript / DHTML to show tooltips on a website. Implementation of the tooltips, however, requires no knowledge of DHTML or javascript.

Popup Balloon

Demonstration of balloon.js, written by Sheldon McKay.

SuperNote | Demo

SuperNotes are like regular footnotes turbocharged with JavaScript, so they display as tooltips in modern browsers, and remain accessible elsewhere.

qTip | Demo

dhtmlgoodies Ajax tooltips

dhtmlgoodies has couple of nice tooltips like Tooltip for forms, Ajax tooltip, Tooltip with transparent shadow, etc.

Tipster v3.1 | Demo

Highly customisable Javascript tooltip.

Nice Title (revised) | Demo

Modified version. Check out original Nice Title tooltip here.

Mobile Tooltip Widget for GWT(Google Web Toolkit) | Demo

JavaScript Fading Tooltips

Improved tooltip effect, lighter codes with titles get cut of at maximum of 25 characters.

Slider DataPager with Dynamic Tooltips | Demo

Not only users are shown the typical paging statistics, but now they can get an idea of what data can be found on the page before actually navigating to it.

apycom Popup Tooltip | Demo

Multi-layer tooltip.

DHTML Tooltips

The code offers a variety of options for source and type of tooltip content and flexible control of positioning, formatting and display.

Good-Looking Tooltips (GLT)

GLT is short for Good-Looking Tooltips and it is a small JavaScript library that you can include to spice up the look of your tooltips in your web page.

Cool DHTML Tooltip II | Demo

Also check out Cool DHTML Tooltip I.

Form field hints with CSS/Javascript | Demo

As you tab through each input field, some helper text appears in box out to the right.

• CSS

Lixlpixel CSS tooltips

CSS Tooltips

Unobtrusive and Slightly Accessible CSS Tool Tips

Pure CSS Tooltips

CSS Tooltips – Floating HTML Elements

This article shows how to create these tooltips with only CSS.

CSS Bubble Tooltips

CSS Rollovers for tooltip

• jQuery

jQuery Tooltip | Demo

clueTip | Demo

The clueTip plug-in allows you to easily set a link to show a “tooltip” of sorts when the user’s mouse hovers over the link. If the link includes a title attribute, its text becomes the heading of the clueTip. Here’s another cover up on clueTip.

Coda Popup Bubbles | Demo

One of the slickest tooltip we’ve seen so far.

jTip | Demo

Better Tip

BetterTip is a plugin for the JQuery library that allows you to create custom tool tips. It is based on Cody Lindley’s jTip, but it is much more flexible.

jHelperTip 1.0 | Demo

jHelperTip is intended to be useful in many situations such as hovering tip and clickable tips. It can get data from a container, through Ajax or even the attributes of the current object.

jQuery InputHintBox

• MooTools

Moo Tools Tips | Demo

e-magine Tooltips | Demo

Works like the original Moo Tool tooltip, with the possibility to grab contents from a DOM node.

• Prototype

HelpBalloon.js | Demo

Simple help balloon tooltip with a close button.

Protip 2

Prototip allows you to easily create both simple and complex tooltips using the Prototype javascript framework. Also check out Protip.

• Script.aculo.us

Tooltip.js

Tooltip.js is a simple library that builds on top of Prototype and Script.aculo.us.

CoolTip | Demo

Lightweight unobtrusive JavaScript web-browser tooltips replacement technique.

• Yahoo! User Interface (YUI)

Sweet Titles | Demo

This is a YUI style of Sweet Titles which has more flexibility in customization and allows for {n} number of initialized sets.

• Web Services

Websnapr Preview Bubble | demo

The websnapr Preview Bubble is a simple, unobtrusive script used to display an overlay bubble showing a hyperlink target thumbnail using websnapr. It’s a snap to setup and works on (almost) all modern browsers.

Snap shot

Put Snap Shots on your site to upgrade your user experience

Taggify

Taggify is a web widget which allows bloggers and publishers enhance their sites by adding visual tags to any site’s images.

• Tutorials and Other Resources

If embedding a ready-made tooltip is not your cup of tea, here’s some tutorials that teach you to build tooltip from scratch.

Create a Nice, Lightweight JavaScript Tooltip [Javascript] | Demo

Create a lightweight script that fades a tooltip with rounded corners in relation to the cursor position.

Customize Your Tips [Moo Tools]

Create a Simple, Powerful Product Highlighter with MooTools [Moo Tools] | Demo

Create Multiline Tooltip [CSS/Javascript]

This document explains how to make nice multiline tooltip for HTML documents, using simple and standard CSS, HTML and JavaScript.

Bubble Tooltips [WordPress Plugin]

This plugin makes easy to use nice tooltips for your blog. You can change for two toolips.

Tippy WordPress Plugin [WordPress Plugin]
Tippy is a friendly little WordPress plugin that gives you a way to include highly configurable tooltips in your WordPress site.

Some time ago I wrote an interesting post about how to implement a news ticker with automatic vertical scrolling (Newsvine.com-like) using MooTools.

In the past days a lot of people asked to me to modify the code of the news ticker, adding new features: in particular, Start/Resume options. So, today I released a “ready to use” script which you can use quickly on your web projects (take a look at the previous post for more information). I want to say thanks to my friend Shane Holland for his useful suggests about the solution I adopted in this post.

Download full code Live Preview

1. Start/Stop controller
I change the code of my previous tutorial about the news ticker adding a new layer with ID=controller which includes a play/stop button to start/stop vertical news scrolling:

When you click on the button, this action enables/disables vertical news scrolling and changes the button look with its related message from “stop” to “play”:

2. HTML and CSS code
I added this code into the div with ID=NewsTicker:

Stop news scroll

Play news scroll

scroll

…and I added this line within CSS code:

#play_scroll_cont{display:none;}

3. Javascript function
I created a new file newsticker.js which inlcudes JavaScript the code to enables vertical scrolling and stop/play features. You may add this code below the #newsTicker layer:

In newsticker.js I added the following code to enable stop/play features:

window.addEvent(‘domready’, function() {
var hor = new Ticker(‘TickerVertical’, {

speed : 500, delay : 5000, direction : ‘vertical’});
$(’stop_scroll’).addEvent(‘click’, function() {
$(‘play_scroll_cont’).style.display=’block’;
$(’stop_scroll_cont’).style.display=’none’;
hor.pause();
});
$(‘play_scroll’).addEvent(‘click’, function() {
$(’stop_scroll_cont’).style.display=’block’;
$(‘play_scroll_cont’).style.display=’none’;
hor.resume();
});

});

It’s all! Download the full code and try it!

Download full code

Related content
News ticker with horizontal scrolling using Mootools
Fantastic News Ticker Newsvine-like using Mootools