All Mix Blog

Recently, we have redesigned one of our projects. The task was to make the web application to look and act more like Web2.0 app. New design looked great and surely it had lot's of rounded corners. You can download jQuery Rounded Corners plugin. First, rounded corners were done using CSS, but it got our code cluttered and it introduced a lot of unnecessary HTML markup. Since we had full control

Recently, we have redesigned one of our projects. The task was to make the web application to look and act more like Web2.0 app. New design looked great and surely it had lot's of rounded corners. You can download jQuery Rounded Corners plugin. First, rounded corners were done using CSS, but it got our code cluttered and it introduced a lot of unnecessary HTML markup. Since we had full control

Recently we had a post about automatically adding row count to your tables and then made a plugin out of it. We could further improve our plug-in by providing an option to let plug-in users to overwrite default setting. For example plugin users could provide a CSS class to set to the added column or change the default "#" in the column header to some other meaningful text. This is all possible

Recently we had a post about automatically adding row count to your tables and then made a plugin out of it. We could further improve our plug-in by providing an option to let plug-in users to overwrite default setting. For example plugin users could provide a CSS class to set to the added column or change the default "#" in the column header to some other meaningful text. This is all possible

We all know that global variable are evil. Namespacing  your variables and methods is now considered a good practice and shows your awareness about the trends. Anyway, I thought how can I namespace my variables and methods in jQuery. Well, first off, I can easily extend jQuery with custom written plugins. $.fn.extend({ myNamespaced: function(myArg){ return 'namespaced.' + myArg; } });

We all know that global variable are evil. Namespacing  your variables and methods is now considered a good practice and shows your awareness about the trends. Anyway, I thought how can I namespace my variables and methods in jQuery. Well, first off, I can easily extend jQuery with custom written plugins. $.fn.extend({ myNamespaced: function(myArg){ return 'namespaced.' + myArg; } });

Now available as a rowCount jQuery plugin. Recently on jQuery mailing list a user asked how he/she could add a row count in their table automatically. So I wrote a code snippet which looks like this: $(document).ready(function(){ $("table").each(function(){ if($(this).is('table')){ $('thead th:first-child, thead td:first-child', this).each(function(){ if($(this).is('td'))

Now available as a rowCount jQuery plugin. Recently on jQuery mailing list a user asked how he/she could add a row count in their table automatically. So I wrote a code snippet which looks like this: $(document).ready(function(){ $("table").each(function(){ if($(this).is('table')){ $('thead th:first-child, thead td:first-child', this).each(function(){ if($(this).is('td'))

Recently I posted my findings about private fields in JavaScript. So this is a continuation of the post and it talks about public fields in your JavaScript code. So here is a quick example of public properties in your code: function User() { // Private property var name = ''; return { // Public property classVersion: '1.3', prevVersions: ['1.2.3', '1.2', '1'], setName:

Recently I posted my findings about private fields in JavaScript. So this is a continuation of the post and it talks about public fields in your JavaScript code. So here is a quick example of public properties in your code: function User() { // Private property var name = ''; return { // Public property classVersion: '1.3', prevVersions: ['1.2.3', '1.2', '1'], setName:

Reading about the jQuery 1.3's new selector engine Sizzle and its speed improvements I thought I would do a performance comparison between jQuery 1.2.6 and jQuery 1.3. I was prepared for something good, but the test results blew my mind. I had a page with one unordered list with 1000 items each with a class (class="1", class="2", etc). Here is  are the tests and results: console.time("

Reading about the jQuery 1.3's new selector engine Sizzle and its speed improvements I thought I would do a performance comparison between jQuery 1.2.6 and jQuery 1.3. I was prepared for something good, but the test results blew my mind. I had a page with one unordered list with 1000 items each with a class (class="1", class="2", etc). Here is  are the tests and results: console.time("

To start, in jQuery 1.3 event object has been normalized and wrapped into jQuery.Event object. As it says in the documentation: "The event object is guaranteed to be passed to the event handler (no checks for window.event required)." Here is an jQuery.Event object overview: Attributes event.type event.target event.relatedTarget event.currentTarget

To start, in jQuery 1.3 event object has been normalized and wrapped into jQuery.Event object. As it says in the documentation: "The event object is guaranteed to be passed to the event handler (no checks for window.event required)." Here is an jQuery.Event object overview: Attributes event.type event.target event.relatedTarget event.currentTarget

Long awaited jQuery 1.3 has just been released. You can read about it on jQuery blog and release notes. Notable changes: new blazingly fast selectors engine (Sizzle) new jQuery.Event object that is available in your event functions faster HTML injection (~6x faster) .hide() and .show() are now much faster (~2.5x faster) [@attr] syntax deprecated, use [attr] and many many more.

Long awaited jQuery 1.3 has just been released. You can read about it on jQuery blog and release notes. Notable changes: new blazingly fast selectors engine (Sizzle) new jQuery.Event object that is available in your event functions faster HTML injection (~6x faster) .hide() and .show() are now much faster (~2.5x faster) [@attr] syntax deprecated, use [attr] and many many more.

In pursue for my JavaScript code performance and some questions on jQuery mailing list I looked for and eventually came across some of the JavaScript code packers. Here is a list of custom JavaScript code compressors available for free. YUI Compressor (from Yahoo) JSMin (by Douglas Crockford) ShrinkSafe  (from Dojo library) Packer (by Dean Edwards) According to general opinion of

In pursue for my JavaScript code performance and some questions on jQuery mailing list I looked for and eventually came across some of the JavaScript code packers. Here is a list of custom JavaScript code compressors available for free. YUI Compressor (from Yahoo) JSMin (by Douglas Crockford) ShrinkSafe  (from Dojo library) Packer (by Dean Edwards) According to general opinion of

There are times when you can't understand why your code is not doing what it's supposed to do. After killing half an hour on trying to figure out what is the problem you either give up and decide to rewrite or leave it for later. Later looking at your code you clearly see the bug and think how you couldn't you see it. For cases like that you can use online JavaScript code validator JSLint.

There are times when you can't understand why your code is not doing what it's supposed to do. After killing half an hour on trying to figure out what is the problem you either give up and decide to rewrite or leave it for later. Later looking at your code you clearly see the bug and think how you couldn't you see it. For cases like that you can use online JavaScript code validator JSLint.

Most of us don't even use image maps anymore. But occasionally, mostly when freelancing, you will need to work with the pages that were created in mid 90's and image maps where pop stars in that era. Anyway to refresh your memory here is how HTML image map looks like: <area shape="rect" coords="20,6,200,60" href="http://

Most of us don't even use image maps anymore. But occasionally, mostly when freelancing, you will need to work with the pages that were created in mid 90's and image maps where pop stars in that era. Anyway to refresh your memory here is how HTML image map looks like: <area shape="rect" coords="20,6,200,60" href="http://

Today I was working on new category browser UI for the project I am working. I had to select the innermost element and append some more content into it. Basically, I had an HTML like this: Outermost element Some Text Evenmore text Who cares anymore? Innermost Element So I needed to select the

Today I was working on new category browser UI for the project I am working. I had to select the innermost element and append some more content into it. Basically, I had an HTML like this: Outermost element Some Text Evenmore text Who cares anymore? Innermost Element So I needed to select the

The very basic of Object-Oriented Programming (OOP) is private fields and public methods (not considering features like polymorphism, inheritance, etc). So how to achieve this very basic of OOP in JavaScript. It turns out to be easy. Here is how to have private fields in your custom JavaScript functions/classes and using methods of your function/class to amend it. function User() { var name =

The very basic of Object-Oriented Programming (OOP) is private fields and public methods (not considering features like polymorphism, inheritance, etc). So how to achieve this very basic of OOP in JavaScript. It turns out to be easy. Here is how to have private fields in your custom JavaScript functions/classes and using methods of your function/class to amend it. function User() { var name =

Recently I was reading about extending jQuery's functionality and plugin system. I wrote two articles on extending jQuery functionality with your own custom functions.  To extend you write $.fn.myFunction and then your function. It was interesting what $.fn is, so I look through the jQuery code and on line 33 found: jQuery.fn = jQuery.prototype = { So jQuery's fn is just a synonym for its

Recently I was reading about extending jQuery's functionality and plugin system. I wrote two articles on extending jQuery functionality with your own custom functions.  To extend you write $.fn.myFunction and then your function. It was interesting what $.fn is, so I look through the jQuery code and on line 33 found: jQuery.fn = jQuery.prototype = { So jQuery's fn is just a synonym for its

Following jQuery performance related articles here is another tip to boost your jQuery code performance. You should use ID selections whenever you can. Because jQuery uses browser's native getElementById() function which is much faster. Now back to JavaScript code performance testing. I have an unordered list with 1000 items. First test will have list items with class attributes and the second

Following jQuery performance related articles here is another tip to boost your jQuery code performance. You should use ID selections whenever you can. Because jQuery uses browser's native getElementById() function which is much faster. Now back to JavaScript code performance testing. I have an unordered list with 1000 items. First test will have list items with class attributes and the second