Since we began to post in this blog, we have been offering components and techniques to develop a site using Ajax. Today we are going to put everything together and we see how to get results that some time age was only possible using Flash.

The study case is Monperla, an online shop that sells pearl jewelry, now we only going to see the main corporate web since the new store is still under development.

If you have read this blog before you will note that the main aspect on this web is our e24Squares Ajax gallery component. This effect have been integrated in a way that each page is related to one image on the gallery and then when you load a new page the related image loads trough the e24Squares effect.

As you see each page loads asynchronically appearing with a fade effect. One important thing on this site is that we have take care of it to degrade gracefully when javascript is disable, then it going to be indexed by the search engines correctly. To accomplish that we have use the techniques explained in the post where we commented about the onDomReady event.

As we have remarked on previous posts, the ajax web sites use to have problems with the back button, then we have used the protoHistoryManager component released some days ago.

This site has other traditional Ajax effects like lighboxes, image rollovers, Font size increaser for accessibility, etc.

I hope this help to all of you that asked for practical examples of our components and tricks. Be free to notify me if you found any problem on the web site and let me know the browser version.

equipo24 is glad to announce the release of  Ajaxigg. Ajaxigg is project similar to digg.com and meneame.es where the users can share news, components and resources about the Ajax’s world. On Ajaxigg the users decide which news are more relevant trough its vote system.

In this moment it is only available in Spanish but will be in English very soon.

The Ajax’s main feature is the async call possibility, it lets serve results without interrupt the user experience on the page. This is the main key for today’s web2.0 search engines.
Here you have some good examples that make our life easy:

• Minube - Fly search engine
• p2pFinder - Torrents files and eDonkey links search engine
• Shopall
• AjaxLookup Domain Whois

One of the major issues on AJAX web applications is the accesibility and usability lacks. Many users have manies and don¡t undestands about AJAX, they only expects that if they click the back button then it must works as always and get them back to the previous screen.

Digitarald.de have developed a solution HistoryManager - The Ajax Back-Button (v1.0) for  Mootools   developers. You can test some samples there and also I have implementerd it on my company web www.equipo24.com

But I also use to develop using Prototype so I have rewritten that library using Prototype, the usage is very similar to the original library.

Download prototype.historyManager.js

For the standards lovers here we have a trick to simulate the “target” attribute behavior without break HTML 4.0 Strict o XHTML 1.0 Strict standards.

We will use the “rel”attribute with the ”external” value that validates correctly with the above standards. We will make an script that will look for all “<a>” elements with “rel” attribute equals to “external” and then will assign a new “onclick” event to it that open in a new window the URL stored on the “href” attribute .

<a href="http://www.equipo24.com" rel="external">Nice site developed with mootools</a>

Here we have the javascript for Mootools and another general solution without need of externals libraries.

Mootools

function fix_external_links() {
	$ES('a').each(function(el) {
		if (el.getProperty('rel') == 'external') {
			el.addEvent('click', function(e) {
				e = new Event(e);
				e.stop();	
				window.open(this.getProperty('href'));
			}.bind(el));
		}	
	});
}

window.addEvent('domready', function() { 
	fix_external_links();
});

Without external libraries

function fix_external_links() {
	if (!document.getElementsByTagName) return;
	var anchors = document.getElementsByTagName("a");
	for (var i = 0; i < anchors.length; i++) {
		var anchor = anchors[i];
		if (anchor.getAttribute("rel") && anchor.getAttribute("rel") == "external") {
			anchor.target = "_blank";
		} 
	}
}
window.onload = fix_external_links;

Intro

e24Squares is an extension written for scriptaculous to make transitions between images with an original effect. This effect randomly generates squares that appear on different positions on the current image while the next image appears behind with a fade effect. The extension can be used as photo gallery, as slideshow, or as decorative animation in our web page.

Demos

• Manual Transitions
• Slideshow

Usage

Include Prototype 1.6.0.2 and Scriptaculous 1.8.1 in the HTML code header. Also include e24Squares after both:

<script type='text/javascript' src='js/prototype.js'></script>
<script type='text/javascript' src='js/scriptaculous.js?load=effects'></script>
<script type='text/javascript' src='js/e24squares.js'></script>

Next, write the necessary HTML code to define the gallery. We will need a container layer (”visor” on the example) and inside the container we will have an image for the first image in the gallery. Example below:

<!--e24Squares container -->
<div id="visor" >
	<img src="img/liberty.jpg" alt="imagen 1" />
</div>
<!-- End of e24Squares container -->

Finally, we write the necessary javascript code. As first param we will provide the container layer id (”visor”), and as second param an images filenames array and as the last one an option’s array.

oe24Squares = new e24Squares( 'visor', 
			    [ 'liberty.jpg', 'newyork2.jpg', 'mexico.jpg', 'newyork.jpg' ],
				{ 
					base: 'img/', 
					width: 640, 
					height: 300, 
					rows: 3, 
					cols: 5, 
					hideonfinish: true, 
					autostart: true, 
					duration: 1.0, 
					interval: 1.0 
				}
			);

Options

• base: Relative path to the image directory. Default is the same directory as the web page
• width: Width in pixels for the gallery visor.
• height: Height in pixels for the gallery visor.
• rows: Rows quantity in which the effect will divide the visor to form the random squares. Default value: 3
• cols: Columns quantity in which the effect will divide the visor to form the random squares. Default value:5
• duration: Decimal, representing the time in seconds that each transition between the current image and the next one will take. Default value: 1.0
• interval: Decimal, representing the time in seconds that will take to begin the next image transition. Default value: 0.3
• color: Represents the random squares color. Default value: #ffffff
• autostart: Boolean, if set to “true” the animation starts automatically, if set to “false” then we will need to call start() method to initiate the animation or to call the transition() method to go to an specific image. Default value: “false”
• hideonfinish: Boolean, if set to “true” then the visor will be hidden after showed the last photo, else the last photo will keep visible. Valor por defecto: false
• callback: callback function that will be processed once the animation is complete. It is useful to concatenate animations.

Methods

• start: No params needed. Initiates the slideshow if the effect object was created with the autostart option set to “false”.
• transition((int)index, (function)pCallback): The first param is the picture index to show(the first is zero), the second param is a callback function that will be called once finished the transition.

oe24Squares.transition(2);

Known Issues

• Ability to make the slideshow to play infinitely.

Download

e24Squares 0.2 beta (218 KB, including the demos)

Following up on the previous post, we saw how important is to take care about our AJAX scripts to degrade gracefully. Today we will see how to do it in the practice using prototype.

We will take as example the e24Writer described on previous posts. The e24Writer gradually display a group of elements using a chained opacity transition, for that reason we need that those elements be hidden before the event run. For example if we going to animate the text “AJAX”, in the way that appear letter-by-letter. If we initially hide that text using the CSS display property setting it to none, then if due to any of the reasons described on the last post we don’t have javascript then the web won’t degrade gracefully because the text “AJAX” never will appear.

But if we initially leave the text visible then we will need to hide it before the page renders, to accomplish this we need an event that fires when we have total access to the DOM and before the page renders. That event is the “domReady”.

Some AJAX libraries like Mootools, YUI o ExtJs natively have the “domReady”event, Prototype don’t. But if we look on Google by the term “prototype domReady” then we will find some extensions like this one

Event.onDOMReady(function() {
  $('text').hide();
  oe24Writer = new e24Writer( 'text', { autostart: true, duration: 1.0, interval: 0.3 });
});

In this way the text can be read even when the javascript is disabled.

With each new browser’s version we found new programming features that let us make more advanced AJAX effects. Even when most of these improvements are present at the major browsers that are more standard every day, there are always many reasons to found different users configurations:

• Users that keep using old browser’s versions.
• Users that use less popular and less standard browsers.
• User that disable javascript or make other restrictions for security reasons.
• Search engine’s spiders that do not use to parse javascript and then some texts can leave hidden.
• Users with accessibility limitations that use other ways to read the pages.

In order to reach all these users we need that those pages that use javascript to make advanced AJAX effects gracefully degrade, that means that the page must be able to work even when javascript or another special features are disabled.

In the next post we will see a real case and how to solve it using Prototype.

Introdution

e24TabMenu is a plugin written for scriptaculous. It is a tab menu that expands collapse smoothly.

Demos

• All tabs hidden
• One tab expanded

Usage

Include Prototype 1.6.0.2 and Scriptaculous 1.8.1 in the HTML code header. Also include e24TabMenu after both:

<script type='text/javascript' src='js/prototype.js'></script>
<script type='text/javascript' src='/js/scriptaculous.js?load=effects'></script>
<script type='text/javascript' src='js/e24tabmenu.js'></script>

Next, write the necesary HTML code to define de menu. We will need a container layer (“menu” on the example) and inside the container we will have a layer for each menu item where we will add its content. After that, add links (html tag “A”) for each menu’s tab, the “rel” attribute value must be e24menuitem[layer_id] where layer_id is the id of the content layer (on the example “ítem_3d”, “ítem_gall”, “ítem_menu”, “ítem_efec”). Bellow the links we can add contents that will show when all tabs are collapsed.

<div id="menu" ><!---menu container--> 
  <div id="item_3d" class="menutarget"> 
    Contenido
  </div> 
 
  <div id="item_gall" class="menutarget"> 
    Contenido
  </div> 
 
  <div id="item_menu" class="menutarget"> 
    Contenido
  </div> 
 
  <div id="item_efec" class="menutarget"> 
    Contenido
  </div> 
 
  <!---tabs del menu--> 
  <a id="3d" href="#3d" rel="e24menuitem[item_3d]"><img src="img/3d.gif" alt="Efectos 3D" /></a> 
  <a id="gall" href="#galerias" rel="e24menuitem[item_gall]"><img src="img/galerias.gif" alt="Galeria de fotos AJAX" /></a> 
  <a id="menus" href="#menus" rel="e24menuitem[item_menu]" ><img src="img/menus.gif" alt="Efectos de Menus" /></a> 
  <a id="efec" href="#efectos" rel="e24menuitem[item_efec]"><img src="img/efectos.gif" alt="Otros efectos ajax" /></a> 
  <!---tabs del menu--> 
 
  <div id="maincontent"> 
    Contenido principal 
  </div><!--texto--> 
</div><!--menu container-->

Finally we write the necesary javascript code to define the menu. As first param we will pass the container layer id , and as second param an option’s array.

oe24TabMenu = new e24TabMenu( 'menu', { duration: 1.0, transition: Effect.Transitions.sinoidal } );

Options

• duration: Decimal, representing the time in seconds that will take the menu item movement. Default value: 1.0
• transition: Function that modifies each animation’s point: Effect.Transitions.sinoidal (default), Effect.Transitions.linear, Effect.Transitions.reverse, Effect.Transitions.wobble, Effect.Transitions.flicker
• callback: callback function that will be processed once the animation is complete. It is useful to concatenate animations.

Methods

• toggleMenu: Toggles the tab. Requieres the object reference of the corresponding link.

  oe24TabMenu.toggleMenu($('3d'));

Known Issues

• Add more directions like, down-top, letf-right, right-left.

Download

e24TabMenu 0.8 beta (176 KB)

Intro

e24Writer is a plugin written for scriptaculous to gradually display a group of elements using a chained opacity transition. The elements can be either images, HTML or text.

Demos

• Animating Images

• Animating a Text

Usage

Include Prototype 1.6.0.2 and Scriptaculous 1.8.1 in the HTML code header. Also include e24Writer after both.

<script type='text/javascript' src='js/prototype.js'></script>
<script type='text/javascript' src='/js/scriptaculous.js?load=effects'></script>
<script type='text/javascript' src='js/e24writer.js'></script>

For example, if we have text that we want to appear gradually letter-by-letter. First, we need to split the text into individual letters. If the text is a whole image then we need to split it in an image per letter basis.

Next, write the necessary HTML code to define the animation. We will need a container layer (”letters” on the example) and inside the container we will have a layer for each element. There is one layer per letter. Example below:

<div id="letters" >
		<div class="letter"><img src="img/letter1.jpg" alt="letra1" /></div>
		<div class="letter"><img src="img/letter2.jpg" alt="letra2" /></div>
		<div class="letter"><img src="img/letter3.jpg" alt="letra3" /></div>
		<div class="letter"><img src="img/letter4.jpg" alt="letra4" /></div>
</div>

Finally, we write the necessary javascript code. As first param we will provide the container layer id, and as second param an option’s array.

oe24Writer = new e24Writer( 'letters', { autostart: true, duration: 1.0, interval: 0.3 });

Options

• autostart: Boolean, if set to “true” the animation starts automatically, if set to “false” then we will need to call start() method to initiate the animation. Default value: “false”
• duration: Decimal, representing the time in seconds that each element transition will take. Default value: 1.0
• interval: Decimal, representing the time in seconds that will take between each element transition. Default value: 0.3
• callback: callback function that will be processed once the animation is complete. It is useful to concatenate animations.

Methods

• start: No params needed. Initiates the animation if effect object was created with the autostart option set to “false”.

Known Issues

• Add more direction, like right-left.
• Ability to restart the animation.

Download

e24Writer 0.4.1 beta (71.33 KB)