Posts Tagged ‘JavaScript’

WordPress Video Galleries with NextGen and jQuery

Thursday, April 9th, 2009

For one of my recent WordPress projects I needed an easy way for the client to organize and display videos. Unfortunately my hope that NextGen Gallery plugin, which I already used for the images, will do the trick vanished after couple of clicks and I started googling for a solution. Since neither google nor Worpdress Plugins page gave me anything reasonable I started rethinking the situation:

  1. I was already using Shadowbox which allows displaying videos
  2. I already had jQuery enabled in my WordPress Theme
  3. I can use the alt field in the NextGen options for the url of the video

So what I needed was to modify the generated from NextGen anchor (the href attribute) and somehow to distinguish if the  thumbnail is for image or video.

Here is the script I wrote which does both things:

jQuery(document).ready(function($){
  $(".ngg-gallery-thumbnail a").each(function (arr){
    if ($(this).attr("title").substr(0,5)=="Video"){
      $(this).attr("rel","shadowbox;width=405;height=340");
      $(this).attr("href",$(this).children("img").attr("title"));
    }
  })
});

All you have to do to make it work is:

  1. Include this Javascript somewhere on your page
  2. Put the url for your video in the alt textfield
  3. Start your descriptions with “Video”

If you found this script useful consider donating. Hosting isn’t free you know. Thanks!

MooTools vs JQuery vs Prototype vs YUI vs Dojo Comparison Revised

Friday, January 16th, 2009

Update (02-03-2009):

Recently things are going a bit beyond the healthy conversations and various people are taking the whole which-is-the-fastest-framework” idea way too seriously. The most important thing in any benchmarking process is not to compare apples to oranges, which unfortunatelly happens too often. After jQuery adopted Sizzle (a selector engine) many people started comparing it directly to Mootools (a framework).  As a result Aaron (Clientcide) posted Sizzle and MooTools by the Numbers as an answer to the recent flame-wars on the Javascript Frameworks scene. Apart from only testing and comparing the selectors engines (which is what Slickspeed does) I suggest checking out another post on Clientcide – Comparing Frameworks with Inheritance Benchmarking.

/update end

As my previous post comparing Dojo vs JQuery vs MooTools vs Prototype got quite popular and was included in the Wikipedia’s Comparison of JavaScript frameworks article I decided it is about time to update it with some fresh data and browsers.

For the performance part I used the same tool as before – Slickspeed. If you have forgotten, it tests the selectors which are essential part of any Javascript framework. Currently Slickspeed includes the following frameworks: MooTools 1.2, JQuery 1.2.6 (1.3 see bellow), Prototype 1.6.0.2, YUI 2.5.2 Selector beta and Dojo 1.1.1. Unfortunately some of those are not the latest versions but still are quite recent and I am sure the guys will update it soon. The good news is, as you can see from the list, now it includes YUI which is really strong competitor.

Performance comparison done as following:

  1. All tests were done under OS with latests updates applied (Windows XP SP3, Ubuntu 8.10, Windows 7 Beta 1)
  2. Slickspeed was run three times per browser with emptied cache and restart between each iteration.
  3. The average from all tests results rounded to integers were taken in account for the chart.
  4. Nothing else was running during the tests.

Results per browser:
Javascript Frameworks Performance ComparsionResults per framework:
Javascript Frameworks Performance Comparsion

Since this time the comparison includes a lot more browsers and frameworks the raw data table is in separate html file.

Remarks:

  • FF refers to Mozila Firefox, IE is Internet Explorer and Win7 is Microsoft Windows Seven
  • 3 Dojo selectors failed under both Mozilla Firefox 3.1 Beta2 and Safari 3.2.1
  • 11 Dojo selectors and 4 YUI returned invalid results (failed) under Internet Explorer 8

Failed tests mean lower final time under the listed above browsers which was especially valid for Dojo under IE8 where the summary time was around the obviously impossible 1ms .

Update (jQuery 1.3): When I started writing this post the latest jQuery version was still 1.2.6 but on January 14-th they released 1.3 with lots of performance changes. The dev team have replaced the whole selector engine with Sizzle which gave a noticeable performance boost to the framework.  The official jQuery website is providing Slickspeed test results which indeed show big improvement among the other interesting changes in this release.

Summary:

I have done my best to be as objective as possible. As you can see I have tested twelve browsers and for each I ran Slickspeed three times. However those benchmarks are very hardware dependent so on different computers the results may vary. Still the chart (proportions) should look quite similar to the ones above. If you have very different times please contact me so I can double check again and update if needed.

Since performance should not be the only criterion for choosing a Javascript framework here are couple thoughts on the design differences between some of them.

Glenn Vanderburg does great comparison between Prototype and JQuery code design in his Why I still prefer Prototype to jQuery blog post.

And here’s the capsule summary: jQuery is a very nice piece of work, and makes some common tasks easier than their Prototype equivalents. Where it’s good, it’s very good indeed. But its design is uneven, and its scope is limited. For me, at least, Prototype is still the tool of choice. I think it’s a richer, more thorough, and overall better designed library.

A good resource on Dojo is Dylan Schiemann’s post Debunking Dojo Toolkit Myths were he addresses file size, performance, documentation, usage and bunch of other topics.

And ofcourse no comparsion is complete without my favourite JS framework Mootools. When it comes to What’s Moo I am a big fan of Aaron Newton and his blog Clientcide (was previously Clientside when he worked for CNet). On several occasion Aaron wrote about differences between jQuery and Mootools:

When I wrote that post, I went out of my way to make the point that jQuery is different than MooTools, but not, in my view, either inferior or superior. Just different.

I suggest to read those posts jQuery, MooTools, the Ajax Experience, Programming to the Pattern, and What Really Makes One Framework Different From Another and How Many Flavors of Linux Are There?. A good thing to do is subscribe to his RSS feed since apart from the strictly Mootools topics there are many general ones which will help anyone using whatever framework.

Another good piece of information that may affect your choice is that Microsoft and Nokia are adopting jQuery and will be integrated in Visual Studio. However if you are using Aptana there is already support for most of the frameworks including Mootools.

The point of this post is not to start another flame war on which JS framework is better. Each one does what it was supposed to do and has its supporters.

I am open to any reasonable suggestions about the above content.

Facebook Style Image Cropping (Javascript Preview)

Tuesday, August 26th, 2008

While others are sun bathing somewhere on the shores of Black Sea I received another interesting task – to  implement cropping for user uploaded profile images. My first idea was to port MooCrop to Mootools 1.2 and apply couple of modifications, but the customer wanted the cropping to be exactly like in Facebook. For those who don’t know it is plain old boring mouse drag.

Instead of generating thumbnail and then cropping it (like in Facebook) I take the original (uploaded) image and resize it with CSS (yes I know it is not the right thing to do but for a quick preview IMO it is ok and we skip one resizing operation). Then I use the Drag Class to create a drag to scroll container (like in Adobe Acrobat) and finally with two hidden input fields I send the coordinates to the server side part which takes care of the resizing and cropping of the image.

Enough mumbojumbo – the cropping example and the pic

FaceBook cropping

Javascript Dynamic Paging (MooTools Pager)

Saturday, August 16th, 2008

Couple of days ago I had to create a content pager which can dynamically insert page numbers including previous and next buttons.

The reason why I had to use Javascript and not any server side solution is quite interesting – the paging method should not really divide the content into different web pages. This is needed because if the text we want to split contains any XHTML markup and we divide it into separate web pages the markup will be broken (invalid). Just imagine having opening <div> tag in the first page and closing in the second – not cool! Other break point is if we just split some tag in two.

Using my favourite Javascript Framework – Mootools and with couple of XHTML/CSS tricks I could get it working with the following code:

// This Javascript is written by Peter Velichkov (http://www.creonfx.com)
// and is distributed under the following license : http://creativecommons.org/licenses/by-sa/3.0/
// Use and modify all you want just keep this comment. Thanks
 
var pagerPageHeight = $('warper').getSize().y;
var contentArea = $('content');
var pagerCurPage = 1;
var pagerPagesCount = 1;
var pagerPages = $('pager');
 
var pagerInit = function(){
 
	var contentHeight = contentArea.getSize().y ;
	pagerPagesCount = (contentHeight / pagerPageHeight).toInt();
	if (contentHeight % pagerPageHeight != 0 ) pagerPagesCount++;
	if (pagerPagesCount === 1) return;
 
	var prev = new Element('a', {
			'class': 'cust-pager-prev',
			'html': '&amp;lt',
			'id': 'cust-pager-prev',
			'events': {
				'click': function(){
					pagerChangePage(pagerCurPage - 1);
				}
			}
		});
 
	var next = new Element('a', {
			'class': 'cust-pager-next',
			'html': '&amp;gt',
			'id': 'cust-pager-next',
			'events': {
				'click': function(){
					pagerChangePage(pagerCurPage + 1);
				}
			}
	});	
 
	prev.inject(pagerPages,'top');
	$('cust-pager-prev').setStyle('display','none');
 
	for (var i=1; i&lt;=pagerPagesCount; i++){
		var anchor = new Element('a', {
			'class': 'cust-pager-item',
			'id': 'cust-pager-item-'+ i,
			'html': i,
			'events': {
				'click': pagerChangePage.pass(i)
			}
		});
		anchor.inject(pagerPages);
	}
 
	next.inject(pagerPages,'bottom');
};
 
var pagerChangePage = function(page){
	$('cust-pager-item-' + pagerCurPage).set('class', 'cust-pager-item');
	$('cust-pager-item-' + page).set('class', 'cust-pager-item-sel');
 
	pagerCurPage = page;
 
	if (pagerCurPage === 1) {
		$('cust-pager-prev').setStyle('display', 'none');
	}else{
		$('cust-pager-prev').setStyle('display', 'inline');
	}
 
	if (pagerCurPage === pagerPagesCount) {
		$('cust-pager-next').setStyle('display', 'none');
	}else{
		$('cust-pager-next').setStyle('display', 'inline');
	}
 
	contentArea.setStyle('top', (-1) * pagerPageHeight * (page - 1));
};
 
pagerInit();

The example and the picture as usual.

Custom Pager

Dynamic Increase / Decrease Font Size Box with Javascript

Sunday, July 20th, 2008

Web Accessibility is important aspect of the modern websites and including functionality for increasing / decreasing the font-size of the body text is a good step for achieving it. With all recent A grade browsers this is kind of unneeded since they have build in zoom functionality (ctrl + / ctrl -) but still there are couple of advantages for using custom solution:

  1. Preventing broken design due to resizing displacements
  2. Easier for less experienced users who don’t know how to zoom from the browser
  3. Looks kind of cool :)

The script I’ve written has the following features:

  1. Stores settings (increase/decrease value) in cookie
  2. Uses style switching (overwriting) so there is no font resizing after page load
  3. Limits the resizing to three steps in each way

Here is the code and example. Note that I’m changing only the body font-size because all paragraphs are using relative units (em). If you prefer to use absolute units (px) you will need to declare all CSS selectors you are using.

dynamic font resizing

Of course there are couple of things which can be improved but I wanted a simple script working under all major browsers : IE 6+, FF, Opera, Safari.

Customizable Form Select / Dropdown Replacement with Mootools

Thursday, July 17th, 2008

After seeing couple of implementations of replacing the default form checkboxes and radio buttons I was on a search for cross-platform select dropdown which can be fully styled with CSS. Unfortunately there are not so many options and the best I could find is elSelect:


elSelect is a great tool that allows you to visually change look and feel of usual select, keeping its functionality.

However I believe there is plenty of space for improvements.

1. Porting to Mootools v1.2 -

You need to replace setHTML, setText and other deprecated stuff to the new syntax.

2. Instead of creating new input just move the original (otherwise all events connected with the DOM element are lost and it does not work with .NET forms) -

Replace:

this.hiddenInput = new Element('input').setProperties({
			type  : 'hidden',
			name  : this.source.getProperty('name')
		}).injectInside($(this.options.container))

with:

this.hiddenInput = this.source.injectAfter($(this.options.container));

3. Various optimizations + autocomplete functionality and keyboard shortcuts (Tab-ing through the form).

Also I’m checking the browser agent since under iPhone it is better not to replace the select and adding some code graceful degradation:

var addCustomSelect = function(wrapper){
	if(!Browser.Platform.ipod){
		try{
			var mySelect = new elSelect( {container : wrapper});
		}catch(e){}
	}
	if ($(wrapper).getElement('select')) $(wrapper).getElement('select').setStyle('display','inline'); // Select is still here - degrade gracefully
}
if($('cust-sel')) addCustomSelect('cust-sel'); // Call as soon as possible

Other good tip is to have the select (you are replacing) with style visibility:hidden so it does not flicker when loading.

You can download my modified version from here. It has 1 and 2 applied plus some other minor changes. Still it is a good idea to diff the original and my version since I have custom modification that you might not need.

Howto Optimize Rendering Speed of ASP.NET Ajax Websites

Monday, April 14th, 2008

A common case for most ASP.NET sites is slow frontend rendering due to many Javascripts. The typical requests graph looks like this:

ASP.NET Rendering Graph

All these AXD files are embedded Web Resources usually Javascripts and sometimes CSSs. The bad news about having many embedded Javascripts are:

  1. Many HTTP Requests (meaning generating more load to the web server)
  2. Poor rendering time because when the browser starts downloading a Javascript file it stops downloading(rendering) everything else (easily seen on the graph)
  3. Less chance for caching any of those files
  4. If HTTP compression is enabled in the IIS many files mean more load and worse compression ratio than one merged file.

The most common scenario for having many embedded Javascripts is either using AJAX or some commercial .NET controls.

The solution for merging AJAX AXDs in a single file is described in those two great posts:

Script combining made easy [Overview of the AJAX Control Toolkit's ToolkitScriptManager]

and

Script combining made better [Overview of improvements to the AJAX Control Toolkit's ToolkitScriptManager]

The recapitulation when with a friend of mine (Julian) tested out this technique was reducing the loading time with about 2 seconds on a quite clean and well build site. Also the better HTTP compression reduced the size a bit.

If you are using ComponentArt’s Web.UI version 2007.2 or later controls there is solution posted on their blogs too:

Optimizing Web.UI Client Script Deployment

And couple more general advices:

  1. If it depends on you merge all your Javascript and CSS files
  2. Load CSS at most top of you page
  3. Load Javascripts at most bottom of your page (if possible)
  4. Minify both Javascripts and CSSs
  5. Be smart :)

Update: Stefan Dobrev sent me a link for moving the AJAX Javascripts to the bottom (point 3 of the list above) which should improve rendering time too. Thanks Stefan

WAI / XHTML Valid Input Watermarks for Mootools

Thursday, November 15th, 2007

Just refactored the input watermarking script, of course it is still XHTML 1.0 transitional and WCAG priority 1,2 valid.

JavaScript:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
 
// This Javascript is written by Peter Velichkov (http://www.creonfx.com)
// and is distributed under the following license : http://creativecommons.org/licenses/by-sa/3.0/
// Use and modify all you want just keep this comment. Thanks
 
var values = new Array();
var inputs = new Array();
 
function addWaterMark(el){
	try {
		values.push(el.value);
		el.addEvent('focus',function(){
			if (el.value === values[inputs.indexOf(el)]){el.value = ''};
		});
		el.addEvent('blur',function(){
			if(this.value === ''){el.value = values[inputs.indexOf(el)]};
		});
	} catch(e) {dbug.log('addWaterMark: ', e)}
};
window.addEvent('domready', function(){
	inputs = $$('input.watermark');
	inputs.each(addWaterMark);
});
//-->

Usage: Just put value on you inputs and use class=”watermark”

As usual example

IE6 PNG Transparency Fix with Javascript v2.0

Tuesday, November 13th, 2007

Thanks to Aaron Newton from CNET.com for refactoring my PNG Fix script and increasing its quality and speed.

As usual for dessert explanations + demo and source code

Custom Dropdown (Styled Select)

Friday, November 2nd, 2007

Update: A far more better approach is to dynamically replace <select>’s in the HTML. Here is my post on the topic – Customizable Form Select / Dropdown Replacement with Mootools

Got tired of not able to style (colors, padding, background image, etc) dropdowns under various browsers (Internet Explorer and Safari are proven worst). Using my very favorite javascript framework mootools I created some simple dropdown simulating the select and option html tags usage.

Picture == thousand words
Custom Dropdown

and example of custom styled dropdown