ZENVERSE » javascript

CSS & JavaScript: Increase Page Load Speed by Compressing Files

Brian Flores — Wed, 23 Mar 2011 02:18:34 +0000

As a website owner, you must pay attention to how quickly your website loads. In order to obtain high speed page loads across your website, compressing your CSS and JavaScript can do just the trick. You may have tried the conventional Gzip compression tools after you uploaded your files to your server, but you should also consider these tools that offer you better compression rates before you actually upload your files. This provides you with the convenience of uploading your heavy CSS and JavaScript files in a refined and compressed rate.

Do you really need to compress your files?

If you want to check out if your website needs loading improvement, the Site Load Tool offers you such convenience by monitoring the response rate of your website. Just paste your URL in the online tool interface provided so you can really check out if you need to compress your website’s files. Once you’re done with that, below are some of the top tools you should check out to compress your files.

Tools for Compressing Your Files

1. JS Compressor – Source code can contain characters that are not needed. These characters, primarily new line, comments, white space and so much more, add up to the file size. This tool removes these characters, giving you that boost in loading speed.

2. Packer – A very simple compression tool, paste your code in and the tool automatically compresses your source code for optimal performance.

3. Google Closure Compiler – This compiler efficiently condenses your code as well as checks for syntax errors and others that may hinder streamlined performance.

4. YUI Compressor – This compressor by Yahoo! integrates effective source code compression to provide you the needed improvement for your JavaScript files.

5. JSMin – Notable for reducing file size in half, this tool removes characters that are not necessary, increasing the loading speed for your files.

6. Minify – This three-in-one compressor that combines a “minifying” and caching tool, is useful for compressing your JavaScript and CSS files in order to increase page load speed.

7. SquishIt – This streamlined compression tool conveniently combines and compresses your JavaScript and CSS files.

With these important tools at hand, you can surely increase your page load speed, providing you with the convenience of easy access to your website. With this in mind, you’ll have a much better opportunity to increase your visitor traffic since visitors will not have to wait as long for the great content you have for them! So, always try to improve your page speed if you want your website to go a long way in the hustle and bustle of the internet.

ZenTabs – A jQuery Tabbed Menu Script

Zen — Tue, 29 Sep 2009 15:05:36 +0000

Latest version

Latest version is 1.0.2, what has changed?

Introduction

If you noticed my tweet, I started to learn jQuery few days ago because I need it to create a photoblogging theme. To test my understanding I need to try making something, so this is the outcome : a tabbed menu script.

ZenTabs

I named it after my name. ZenTabs is a light-weight tabbed menu script powered by javascript and jQuery. It can have unlimited tabs, can be styled using CSS and more.

File size : ~ 3 Kb
Requirement : jQuery (tested using version 1.3.2)
Tested and compatible with : Firefox 3 , Opera 9 , Opera 10 , IE 6 and Safari.
Price : Free (even for commercial purpose)
License : GPL

Features

For every tabbed menu, you can have unlimited tabs
No conflicts if you have more than 1 tabbed menu in a single page
Can be styled using CSS
3 animation styles (fade / slide / none) – default is slide
3+ animation speeds (fast / normal / slow / time in ms)
Uses CSS class name to determine tab title and tab content

ZenTabs Demo

The following link show a demo with two tabbed menus running together in a same page, without conflicts.
ZenTabs Demo

Download

ZenTabs - jQuery Tabbed Menu Script 1.0.2
[ Downloaded 1995 times | 3.04 KB ]

Check back soon, an important update (wordpress thumbnail feature and version checker) is rolling out to all Zenverse themes, starting from the latest theme.

Using ZenTabs

Load the javascript and css

Include this between tag and change the URL to css and js file if they were put in different directory.

^?View Code HTML

The HTML Structure

We have to prepare the tabbed menu for users that disable javascript. Therefore, we make our structure like this:

^?View Code HTML


 
  
    Tab Title 1
    Tab Content 1
  
 
  
    Tab Title 2
    Tab Content 2

Without javascript, all you see were contents from top to bottom.

Basically, this is what all about:

Wrap the whole tabbed menu with any element of class name "zentabs"
Wrap a single set of tab and content with any element of class name "onetab"
Wrap the tab title inside "onetab" with any element of class name "tabtitle"
Wrap the tab content inside "onetab" with any element of class name "tabcontent"

Adding More Tabs

As you can see at above, you just have to add a div of class name "onetab" and a new tab will appear. If you are still not sure, here’s how:

^?View Code HTML


 
  
    Tab Title 1
    Tab Content 1
  
 
  
    Tab Title 2
    Tab Content 2
  
 
  
    Tab Title 3
    Tab Content 3

Styling ZenTabs

Since ZenTabs uses CSS class name to do its work, you can easily customise it using the class name. However, there is something you need to know:

The CSS class "zentabs" changes to "zentabs_live" once loaded.
One loaded, the tab titles are wrapped in an unordered list (ul) with class name "zentabs_ul"

This is the new structure once the script is loaded:

^?View Code HTML


  
    Tab Title 1
    Tab Title 2
  
 
  
    Tab Content 1
    Tab Content 2

Deciding which tab to show when it loaded

Simply add a class "firsttab" to any "onetab" to make it show once loaded. EG – show tab#2:

^?View Code HTML


 
  
    Tab Title 1
    Tab Content 1
  
 
  
    Tab Title 2
    Tab Content 2

Change Animation Style and Speed

Open zentabs.js and edit the first few lines. Instructions were included in the file.

Changelog

Version 1.0.2
- Now it works even if you load other library such as prototype, scriptaculous or mootools

Version 1.0.1
- Fixed an error in coding : Object doesn’t support this property or method

Version 1.0
- First version of ZenTabs

Support

If you have any problem, just leave a comment here.

Like this script? Donate via Paypal

I spent a lot of time making themes, plugins and scripts. If you like this theme and would like to support my works, you can donate via PayPal using the button below.

Thank you.

Modifying qTip To Show Tooltip Only On A Specific CSS Class

Zen — Sun, 23 Aug 2009 04:36:41 +0000

qTip is a light-weight javascript tooltip script written by qrayg.com. By default, it automatically apply tooltip on all elements specify by you. (below)

^?View Code JAVASCRIPT

var qTipTag = "a,img"; //Which tag do you want to qTip-ize? Keep it lowercase!//

In most cases, however, you don’t want to show tooltip on all elements. For example, my WordPress Theme Demo Bar plugin uses qTip and of course I don’t want tooltips on all tags.

You can make qTip to show tooltip only on a specific CSS class by some simple edits.

Simple Edit to the qtip.js file

Open your qtip.js, search for the line below at approximately line #56.

?View Code JAVASCRIPT

sTitle = a.getAttribute("title");
if(sTitle)
{

Then, replace the whole part above with this:

^?View Code JAVASCRIPT

sTitle = a.getAttribute("title");		
sClassName = a.getAttribute("class");				
if(sTitle && sClassName == 'qtip_tooltip')
{

In short,
- sClassName = a.getAttribute(“class”); was added below the “sTitle….” line.
- && sClassName == ‘qtip_tooltip’ was added to the if-statement.

Now replace the “qtip_tooltip” with your desired css class name. Add css class to your element and that’s it.

NOTE: Don’t forget to add the element to

^?View Code JAVASCRIPT

var qTipTag = "a,img"; //Which tag do you want to qTip-ize? Keep it lowercase!//

11 Free & Great Javascript Colour Pickers for Web Development

Zen — Sat, 20 Jun 2009 08:20:33 +0000

Intro

Here I am going to review 11 free and great javascript (including 1 java) colour picker plugins for web development.
For each single picker, the following aspects will be reviewed:

ASPECTS	DESCRIPTIONS
Colour Picker Type	floating div or windows popup ; pops out on clicked or static
Support multiple inputs	if you need to insert colour codes into multiple inputs
Accuracy of selection	it would be easy if the selection area is big and picker is small (precise)
Support colour output in RGB	output can be in RGB mode beside hexadecimal
Loading time	also directly related to its file size
Requirements	it may requires mootools, jquery, etc
Support onchange event	if you need a function to run straight after you change the colour
Cross browser compatiblity	does it compatible with modern browsers
Extra features	anything extra that make it great

Here we go

1. JScolor.com

ASPECTS	DESCRIPTIONS
Colour Picker Type	Floating DIV pops out on clicked
Support multiple inputs	Yes
Accuracy of selection	Not very good because the selection area is small although the picker is a crosshair
Support colour output in RGB	Yes
Loading time	Fast – 28 KB (4 images and 1 js file)
Requirements	None
Support onchange event	Yes
Cross browser compatiblity	Big list of supported browsers at JScolor.com. Tested and Working in Opera 9, MSIE 6, Firefox 3, Safari 3
Extra features	High performance, does not causes lag, allows changing picker’s face and colour scheme, input field can be left empty, ultimate input value control (forces uppercase or lowercase, with or without hash #)

Links : Demo | Download

2. JohnDyer.name

ASPECTS	DESCRIPTIONS
Colour Picker Type	Static, suitable for “pick and go”, not suitable for inserting colour codes into a form with multiple inputs
Support multiple inputs	No
Accuracy of selection	Very good because the selection area is big , just like in Photoshop
Support colour output in RGB	Yes
Loading time	Fast – 28 KB (4 images and 1 js file)
Requirements	None
Support onchange event	No
Cross browser compatiblity	Tested on IE5.5, IE6, IE7, FF2, Opera 9, Safari 2. Tested and Working in Opera 9, MSIE 6, Firefox 3, Safari 3
Extra features	Photoshop-like, support RGB and HSB just like in Photoshop, able to set initial colour

Links : Demo | Download

3. SwitchOnTheCode.com

ASPECTS	DESCRIPTIONS
Colour Picker Type	Static, suitable for “pick and go”, not suitable for inserting colour codes into a form with multiple inputs
Support multiple inputs	No
Accuracy of selection	Very good because the selection area is big , just like in Photoshop
Support colour output in RGB	Yes
Loading time	Fast – 74 KB (4 images and 1 js file)
Requirements	None
Support onchange event	No
Cross browser compatiblity	Tested and Working in Opera 9, MSIE 6, Firefox 3, Safari 3
Extra features	Another Photoshop-like colour picker, support RGB and HSB just like in Photoshop

Links : Demo & Download

4. NoGray.com

ASPECTS	DESCRIPTIONS
Colour Picker Type	Window popups on clicked
Support multiple inputs	Yes
Accuracy of selection	Very good because the selection area is big , just like in Photoshop
Support colour output in RGB	Yes
Loading time	Fast – 60 KB (6 images, 5 js file, 1 HTML file)
Requirements	XHTML doctype, MooTools
Support onchange event	Yes
Cross browser compatiblity	Tested and working in Opera 9, MSIE 6, Firefox 3
Extra features	Photoshop-like, support RGB and HSB, customisable look and feel of the color picker, support a total of 4 events beside onChange, able to invert and desaturate colour, able to set initial colour

Links : Demo & Download

5. NavSurf.com

ASPECTS	DESCRIPTIONS
Colour Picker Type	Java applet, The RGB value is passed to a JavaScript variable which could then be used to modify your web page dynamically or as form inputs.
Support multiple inputs	Unknown
Accuracy of selection	Very good because the selection area is big
Support colour output in RGB	Yes
Loading time	Fast – 74 KB (4 images and 1 js file)
Requirements	Java Platform for browser
Support onchange event	Yes as it claimed but no example was shown
Cross browser compatiblity	Tested and working in browsers with Java
Extra features	Allow you to set individual RGB values using scrolls

Links : Demo & Download

6. JavascriptKit.com – JSwitch Color Picker

ASPECTS	DESCRIPTIONS
Colour Picker Type	Floating DIV pops out on clicked
Support multiple inputs	No
Accuracy of selection	Very good because the selection area is big and the picker is a crosshair
Support colour output in RGB	Yes
Loading time	Fast – 60 KB (2 images and 1 js file)
Requirements	None
Support onchange event	Yes by editing function BtnOkClicked()
Cross browser compatiblity	Tested and working in Opera 9, MSIE 6, Safari 3 ; Failed in Firefox 3.
Extra features	Contains a color pallet that stores your most recently used colors, can retain up to 8 personal colors.

Links : Demo & Download

7. EyeCon.ro

ASPECTS	DESCRIPTIONS
Colour Picker Type	Floating DIV pops out on clicked (with nice effects such as fade and slide)
Support multiple inputs	Yes
Accuracy of selection	Not very good because the selection area is not very big although the picker is a crosshair
Support colour output in RGB	Yes
Loading time	Not very fast – 178 KB (16 images and 5 js files)
Requirements	JQuery
Support onchange event	Yes
Cross browser compatiblity	Tested and working in Opera 9, MSIE 6, Firefox 3, Safari 3
Extra features	Supports RGB and HSB, stylish interface, nice effect(fading or sliding)
Side Notes	Colour cannot be picked by a single click, instead you should drag it a little bit (try it yourself in the demo)

Links : Demo & Download

8. DesignReviver.com

ASPECTS	DESCRIPTIONS
Colour Picker Type	Floating DIV pops out on clicked
Support multiple inputs	Yes
Accuracy of selection	Good because the selection area is not very big although the picker is a crosshair
Support colour output in RGB	Yes
Loading time	Not very fast – 93 KB (11 images and 2 js files)
Requirements	JQuery
Support onchange event	Yes
Cross browser compatiblity	Tested and working in Opera 9, Firefox 3, Safari 3 ; Failed in MSIE 6.
Extra features	Supports RGB and HSB, stylish interface
Side Notes

Links : Demo & Download

9. mooRainbow

ASPECTS	DESCRIPTIONS
Colour Picker Type	Floating DIV pops out on clicked
Support multiple inputs	Yes
Accuracy of selection	Very good because the selection area is big , just like in Photoshop
Support colour output in RGB	Yes
Loading time	Fast – 48 KB (6 images, 2 js file)
Requirements	MooTools
Support onchange event	Yes
Cross browser compatiblity	Tested and working in Opera 9, MSIE 6, Firefox, Safari
Extra features	Photoshop-like, support RGB and HSB, customisable look and size of the color picker, able to set initial colour, support 2 events (onComplete and onChange)

Links : Demo & Download

10. KnallGrau.at

ASPECTS	DESCRIPTIONS
Colour Picker Type	Floating DIV pops out on clicked
Support multiple inputs	Yes
Accuracy of selection	Not good. It has the smallest selection area and the picker is a circle
Support colour output in RGB	No
Loading time	Not very good – 200 KB
Requirements	a library and scriptaculous
Support onchange event	Yes
Cross browser compatiblity	Tested and working in Opera 9, Firefox 3, MSIE 6, Safari 3
Extra features	-
Side Notes	Colour picker cannot be closed without clicking “OK”

Links : Demo | Download

11. NoFunc.org

ASPECTS	DESCRIPTIONS
Colour Picker Type	Floating DIV (always visible once loaded, movable and can be closed)
Support multiple inputs	No
Accuracy of selection	Not very good because the selection area is not very big although the picker is a crosshair
Support colour output in RGB	No
Loading time	Fast – 23 KB (3 images and internal javascript)
Requirements	None
Support onchange event	No
Cross browser compatiblity	Tested and working in Opera 9, Firefox 3, Safari 3 ; Failed MSIE 6
Extra features	Picker body is movable (dragable)
Side Notes	In the demo, the colour picker changes background colour instead of inserting value into input, but it can be edited to do so by editing the function HSVupdate()

Links : Demo and Download

Hmmm

Please correct me and sorry if I missed or got anything wrongly.

Get & Display Latest Tweets (Twitter Status) using Javascript

Zen — Thu, 18 Jun 2009 11:38:38 +0000

Retrieving latest tweets using javascript might not be as sweet as using PHP because visitors might have their javascript turned off. Anyway, who turn javascript off these days?

1. Create a container for twitter statuses

^?View Code HTML


Loading Tweets..

2. Javascript that retrieve the statuses

Paste this right after the

^?View Code HTML

IMPORTANT NOTE :
Replace the “zenverse” in …./zenverse.json?call…. with your twitter username
Replace the “5″ in ….&count=5…. with number of tweet to be displayed

So, after step 1 and 2, here’s how my HTML Code looks like:

^?View Code HTML


Loading Tweets..

3. Need some decorations?

Before we know how to style our tweet list, we need to know the structure of the output from the javascript. Well, this is it : (this is how the codes “changed” after the javascript finished loading)

^?View Code HTML


YOUR STATUS 1 about 4 hours ago
YOUR STATUS 2 about 8 hours ago

4. Styling the twitter statuses using CSS

^?View Code CSS

#twitter_update_list {
/* the main container */
}
 
#twitter_update_list li {
/* wraps a single list */
}
 
#twitter_update_list li span {
/* wraps the tweet */
}
 
#twitter_update_list li a {
/* wraps the link to the tweet */
/* by default it have 85% font-size therefore you might want to change it like below */
font-size:100% !important;
font-size:13px !important;
}

Easy huh? That’s it.
Thank you for reading