May 04

Too many CKeditor fields in jquery tabs makes IE freeze.



IE seems to freeze or take a long time to render a page if there are more than 2 or 3 CKeditor textareas in the page. This problem is specific to IE as Firefox, Chrome and Safari do not seem to have this problem.

The basic reason for this is that IE gets stuck in instantiating the ckeditor javascript object; maybe something in the ckeditor script creates this problem.

We had this particular problem we used a JQuery tab plugin with about 8 or more tabs and each tab had a textarea field wrapped in a ckeditor object.

The final solution that was used is simple: Dont instantiate all the ckeditor objects at page load time. Instantiate for each textarea when required. In other words, let the ckeditor object get created at page load for the default tab. For all the other tabs, convert the textarea in the target tab into a ckeditor when the tab is clicked. This was a simple solution which stopped IE from freezing and also sped up the page load time.

The code snippets are given below. It is assumed that jquery libraries and the ckeditor scripts are included in the page.

The HTML part is given below. The fields are using PHP code to obtain values, but that part can be ignored. Note that the default Homepage tab is already set to class=ckeditor so it becomes a ckeditor object at page load. The other textareas are set to a dummy class called “xckeditor”:

	<tr valign="top">
				<td colspan="2">
					<div id="tabs">
					<ul>
						<li><a href="#tabs-1">Homepage</a></li>
						<li><a href="#tabs-2">About Us</a></li>
						<li><a href="#tabs-3">Privacy</a></li>
						<li><a href="#tabs-4">Terms</a></li>
						<li><a href="#tabs-5">Advertise</a></li>
						<li><a href="#tabs-6">Partner</a></li>
						<li><a href="#tabs-7">Competition</a></li>
						<li><a href="#tabs-8">Bookmark</a></li>
						<li><a href="#tabs-9">Daily Deals Newsletter</a></li>
						<li><a href="#tabs-10">FAQ</a></li>
					</ul>

					<div id="tabs-1">
						<div class="editor_adjust">
							<textarea name="txtHomepageContent" id="txtHomepageContent"  rows="10" cols="40" class="ckeditor"><?php echo($sitecountry->getValue("homepage_content"));?>

The javascript is given below. Note that there is no code to make a textarea into a plain textarea by removing the ckeditor class. This was not required since once a textarea was made into a ckeditor object it was not affecting the page speed:

jQuery(document).ready(function($) {
	$("#tabs").tabs({
		event: 'click'
	}),
	$( "#tabs" ).tabs({
	   select: function(event, ui) {
		   var i = ui.index;

		   if (i == 1) {
			   $('#txtAboutUsContent').removeClass("xckeditor");
			   $('#txtAboutUsContent').ckeditor();
		   }
		   else if (i == 2) {
			   $('#txtPrivacyContent').removeClass("xckeditor");
			   $('#txtPrivacyContent').ckeditor();
		   }
		   else if (i == 3) {
			   $('#txtTermsContent').removeClass("xckeditor");
			   $('#txtTermsContent').ckeditor();
		   }
		   else if (i == 4) {
			   $('#txtAdvertiseContent').removeClass("xckeditor");
			   $('#txtAdvertiseContent').ckeditor();
		   }
		   else if (i == 5) {
			   $('#txtPartnerContent').removeClass("xckeditor");
			   $('#txtPartnerContent').ckeditor();
		   }
		   else if (i == 6) {
			   $('#txtCompetitionContent').removeClass("xckeditor");
			   $('#txtCompetitionContent').ckeditor();
		   }
		   else if (i == 7) {
			   $('#txtBookmarkContent').removeClass("xckeditor");
			   $('#txtBookmarkContent').ckeditor();
		   }
		   else if (i == 8) {
			   $('#txtNewsletterContent').removeClass("xckeditor");
			   $('#txtNewsletterContent').ckeditor();
		   }
		   else if (i == 9) {
			   $('#txtFaqContent').removeClass("xckeditor");
			   $('#txtFaqContent').ckeditor();
		   }
	   }
	});	

});

A good enhancement would have been to place a check if a textarea was already assigned the ckeditor class before running the

Mar 18

Linked List class in Javascript



ThisĀ  is an exercise in using the object oriented concepts in Javascript to implement a doubly linked list.

There is a class called Node which encapsulates the actual node in the list. The linked list is implemented as a global object with class variables and methods to:

  • Add a node
  • Remove a node
  • Search for a node
  • Sort the list in ascending order
  • Display the entire list

The Node object simply stores a string. There is scope for further improvement, as always. The source is easily available by viewing the page source. Any comments and recommendations for changes or improvements are welcome.

You can see the implementation here

Jan 08

Amazing javascript



Since the last couple of years, with the advent of AJAX , Javascript has got a new lease of life and has gone from becoming from a ‘web application sidekick’ to the ‘big guy for Web interfaces’. Heres a neat little trick which anyone can do
1.Load up a site with a good amount of graphics in your browser. Try http://news.google.com
2.Wait till the page has completed loading and all the images are visible.
3.Paste the script below into your browser address bar and press Enter

javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.images; DIL=DI.length; function A(){for(i=0; i-DIL; i++){DIS=DI[ i ].style; DIS.position=%27absolute%27; DIS.left=Math.sin(R*x1+i*x2+x3)*x4+x5; DIS.top=Math.cos(R*y1+i*y2+y3)*y4+y5}R++}setInterval(%27A()%27,5); void(0);

4.Note it might not work with all sites, but most sites do put up a good performance.