jQuery.noConflict()

There are different JavaScript libraries such as jQuery,mootools,ajax etc available which helps us to add functionalities to our web applications.
Hundreds of plugins built using those libraries are making our tasks easy. So without actually peeping into the code we use those plugins.
Now, the problem arises when these libraries are used together.

I stuck in the same problem when I was implementing jquery in my application which already had lighbox implemented in it.
After researching a lot I figured out that prototype.js which was used for implementing Lightbox and jQuery.js in my application were conflicting.

The real problem was both libraries were using '$' as their main function name. Hence one library was breaking the behaviour of other library.

for e.g. in jquery we use :
$(function(){
---
---
});

Here '$' represents jQuery. Similarly in prototype.js for lightbox '$' was used which was representing its main function.
jQuery has provided us the solution to get rid of this problem. Simply use noConflict() function immediately after jQuery.js.
When you use noConflict(), jQuery will return $() to its previous owner and you will need to use jQuery() instead of shorthand $() function.

so it can be written as
jQuery(function(){
---
---
});

else...

var j=jQuery.noConflict();

so,
j(Function(){
--
--
});

So now, jQuery is compatible with other javascript libraries and can be used easily.

CSS SPRITE

I have been working on this technique and found it quite interesting and loved working on it. Lets discuss more about this technique.

What it is??

Technique wherein small images are consolidated at one place and then that consolidated image is used to apply those small images around your application.

Whole magic is done by background position property. By using background position property the exact position of the required image can be identified.

Why to use??

The technique helps you to reduce HTTP request and thus performance gaining of your application.

When you look for optimization of web application you look around to reduce the number of HTTP requests.

So here if you have 10 different small images in your application then 10 different HTTP requests would be sent to fetch those images from server. Wherein when we use CSS SPRITE, all 10 images are consolidated in one image and then only one HTTP request is sent to fetch the images.

Where it has been used??

CSS sprite is now majorly used. Put your firebug (in Firefox) on and see the CSS of yahoo.com, aol.com, digg.com all are using CSS sprite to display small images.

When to use??

Typically the technique should be used to access small images.

How to make it?

Sprite images can be build in photshop or to make your life easier there are number of CSS SPRITE generators available on web wherein they ask you to upload your images and build sprite image for you with respective background position of particular image. I use www.csssprites.com

Useful Resources:

http://css-tricks.com/css-sprites/

http://blog.mozilla.com/webdev/2009/03/27/css-spriting-tips/

http://websitetips.com/articles/css/sprites/#why-sprites

http://csssprites.org/

DATA URI

To fetch each file (images on your website, any plain text file) browser has to make separate http request with server. So the thumb rule to optimize any web application is to reduce the number of http requests.So lesser the number of requests made fast your application will load.

We use different techniques such as CSS Sprites to reduce these http requests.

Data URL is one of such techniques. And is supported in all major browsers including Internet Explorer 8.

There are many URL schemes available eg http, ftp,mailto: etc. each scheme has its own meaning. Similarly the data: URL scheme is a way to embed “immediate data” as if it was included externally.

Syntax:

data:[<mediatype>][;base64],<data>

The mediatype is a MIME type string, such as "image/jpeg" for a JPEG image file.

If omitted, defaults to text/plain;charset=US-ASCII

If the data is textual, you can simply embed the text (using the appropriate entities or escapes based on the enclosing document's type). Otherwise, you can specify base64 to embed base64-encoded binary data.

Examples:

data:,Hello%2C%20World!

Simple text/plain data

data:text/plain;base64,SGVsbG8sIFdvcmxkIQ%3D%3D

base64-encoded version of the above

data:text/html,%3Ch1%3EHello%2C%20World!%3C%2Fh1%3E

Embedding an image in the HTML using data url:

E.g.

<img src="data:image/gif;base64,R0lGODlhEAAOALMAAOazToeHh0tLS/7LZv/0jvb29t/f3//Ub/

/ge8WSLf/rhf/3kdbW1mxsbP//mf///yH5BAAAAAAALAAAAAAQAA4AAARe8L1Ekyky67QZ1hLnjM5UUde0ECwLJoExKcpp

V0aCcGCmTIHEIUEqjgaORCMxIC6e0CcguWw6aFjsVMkkIr7g77ZKPJjPZqIyd7sJAgVGoEGv2xsBxqNgYPj/gAwXEQA7" 

width="16" height="14" alt="embedded folder icon">

Useful resourcesl:

http://tools.ietf.org/html/rfc2397

http://nametrends.net/about/sparklines.htm

http://eligrey.com/blog/projects/data-uri-tool

http://www.websiteoptimization.com/speed/tweak/inline-images/

http://weston.ruter.net/2009/05/07/detecting-support-for-data-uris/

https://developer.mozilla.org/en/The_data_URL_scheme

Emulate IE8 as IE7

IE8 has come up with many updates that might affect your existing application/website design. So if you really running out of time and need to fix these issues as soon as possible then what you could do is actually inserting a meta tag in head section and asking your IE8 to render the page as IE7 or any other IE version.

<meta http-equiv="X-UA-Compatible" content="IE=…." />

There are two ways of using this meta tag:

1. <meta http-equiv="X-UA-Compatible" content="IE=7"/> 
2. 
   
   <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>

IE=7 : Display in IE7 Standards mode; Already supported in the IE8 Beta 1 release

IE=EmulateIE7 : Display standards DOCTYPEs in IE7 Standards mode; Display quirks DOCTYPEs in Quirks mode;

There are two ways to implement this tag:

• On a per-site basis, add a custom HTTP header
  

X-UA-Compatible: IE=EmulateIE7

• On a per-page basis, add a special HTML tag to each document, right after the tag
  

Implementing the HTTP header is beneficial if a site owner wants most of their site to render as it did in IE7 or if there are no plans to update site content. Inclusion of this header honors any Quirks mode pages that belong to the site.

Using the meta-tag on a per-page basis is beneficial when the publisher wants to opt-in specific pages to render as they did in IE7.

NOTE: The X-UA-Compatible tag and header override any existing DOCTYPE. Also, the mode specified by the page takes precedent over the HTTP header. For example, you could add the EmulateIE7 HTTP header to a site, and set specific pages to display in IE8 mode (by using the meta-tag with content=”IE8”).

Using the IE=EmulateIE7 compatibility tag is a simple way for users to continue their current experience when browsing your site until you can update with more standards-compliant content.

Useful resources:

http://blogs.msdn.com/ie/archive/2008/06/10/introducing-ie-emulateie7.aspx

http://www.microsoft.com/windows/internet-explorer/readiness/developers-new.aspx#versioning

http://stackoverflow.com/questions/1105381/why-is-internet-explorer-8-messing-up-my-website-look-and-feel

http://www.programmerfish.com/how-to-make-your-web-site-ie-8-compatible/

http://msdn.microsoft.com/en-us/library/cc288472%28VS.85%29.aspx

<!DOCTYPE>

What is Doctype:

In HTML and XHTML, the DocType is a special tag that goes right at the top of the page above <HTML> and warns the browser what's coming.

e.g. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

It should be written exactly as specified with respect to spellings and case. i.e. doctype in capital letters, exact url for dtd etc.

It informs browser using which html standards it should render the coming html page.

It switches the browser from ‘Quirk’ to ‘Standard’ mode which is known as ‘Doctype switching.’

Quirk mode: The way the old browsers would have rendered your page, using old standards.

For e.g. IE Quirks Mode is IE5.5. IE6, 7 and 8 all switch back to 5.5 when they encounter a Quirks Mode page.

Quirks mode is generated when you either use the HTML 4.01 Transitional Doctype, you don't define a Doctype, or you use a doctype without a URL DTD defined. For example, Internet Explorer changes how the pages are displayed if you remove the DTD from the Transitional Doctype:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

Standard mode: Browser would render the page using the new standard way.

Difference Between DOCTYPE and dtd:

The document type declaration is said to communicate HTML version information

DOCTYPE switches the browser from standard to quirk mode and dtd tells browser to use which standards.

What if I remove DTD and only put DOCTYPE:

On removing the dtd the browser is suspected to remain to quirk mode. Because browser cannot detect the standards to render the web page/app without dtd url.

IE remains in quirk mode if you do not put dtd.

Some of the problems that can be encountered:

1. You will not be able to use a HTML (HyperText Markup Language) Validator to check the page coding. HTML validation requires the DOCTYPE declaration.
2. The browser rending the web page will process the coding in Quirks Mode.
3. The stylesheet may not be implemented as planned.

Some of the commonly used DOCTYPES:

HTML 4.01 Transitional - Safe for Most Browsers

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

The HTML 4.01 Transitional DOCTYPE is probably the most popular DTD out there. It gives you the older tags like fonts that are no longer part of the strict specification. It tells browsers that you are using the most up-to-date HTML, but need some backwards compatibility.

HTML 4.01 Strict DOCTYPE is Harder to Implement

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Strict removes all the deprecated tags from the specification. Be careful whenever you use strict DTDs to validate your HTML ensure that it's correct. Strict DTDs are great for being absolutely correct against the standard, but not all browsers handle the alternatives to tags that are missing.

Useful Resources for DOCTYPE:

• http://www.alistapart.com/articles/doctype/
• http://www.htmlbasictutor.ca/doctype-declaration.htm
• http://www.evotech.net/blog/2007/04/dtd-the-document-type-declaration/
• http://www.wpdfd.com/issues/67/doctype_amp_dtd/
• http://webdesign.about.com/od/dtds/qt/tipdoctypelist.htm
• http://www.quirksmode.org/css/quirksmode.html#t10
  
  

CSS tips for newbeeies….

Don’t use empty DIVS:

Instead of using empty divs to clear the floats use element below the floating element to clear the floats. Else clear the container holding your whole document.

Inheriting the link color:

To let the link to inherit the color as same as the text around it, use

{ Color:inherit }

e.g.: Suppose <span id="eg1">This is the example text to <a>illustrate</a> the <a> inherit </a> propertylt;span>

Now the css for the above text could be:

#eg1{ color:#aaa; }

Now if u want the link in the document should inherit the color of its parent element, use inherit property,

#eg1 a{ Color:inherit; }

Background-Position:

Values:	top, center, bottom, left, center, right
Initial:	0% 0%
Inherited:	No

If a background image has been specified, the value of 'background-position' specifies its initial position.

One can also use keyword values to indicate the position of the background image. Keywords cannot be combined with percentage values, or length values. The possible combinations of keywords and their interpretations are as follows:

• 'top left' and 'left top' both mean the same as '0% 0%'.
• 'top', 'top center' and 'center top' mean the same as '50% 0%'.
• 'right top' and 'top right' mean the same as '100% 0%'.
• 'left', 'left center' and 'center left' mean the same as '0% 50%'.
• 'center' and 'center center' mean the same as '50% 50%'.
• 'right', 'right center' and 'center right' mean the same as '100% 50%'.
• 'bottom left' and 'left bottom' mean the same as '0% 100%'.
• 'bottom', 'bottom center' and 'center bottom' mean the same as '50% 100%'.
• 'bottom right' and 'right bottom' mean the same as '100% 100%'.

Examples:

BODY { background: url(banner.jpeg) right top } /* 100% 0% */

BODY { background: url(banner.jpeg) top center } /* 50% 0% */

Empty div height:

Empty div has some default height in IE whereas firefox does not show this default height. This is because IE takes some default alphabet in the empty div. and hence it shows height in the empty div.

So To fix this bug use font-size=1 in that div.

Eg: <div style=”font-size:1px”></div>

Table Rules:

To display only rules in table use rules attribute . IE does not display rules without frames attributes.

Eg. : <table rules=”rows” frames=”void”>

<tr>

<td>TABLE RULES</td>

</tr>

</table>

List:

To align the text justify in ‘li’, use

Display:block;

List-style-type:

We use list style type property to change the shape of bullet in the unordered list. Sometimes the web browser behaves in the tricky way and shows different bullet shapes than that was specified.

In a such a case instead of explicitly defining

list-style-type:square

Place the image to the background of 'li' item and adjust in such a way that it emulates the bullet of the list.

Eg:

.boxContent li {

background:transparent url(../styleImages/bullet.jpg) no-repeat scroll 0 4px;

list-style-type:none;

padding-left:12px;

}

Remove the white space in between li and its content:

Use li{

display:inline-block;

}

Remove the dotted border around the active link in Firefox:

a{

outline: none;

}