How to avoid Conflict in jQuery

Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery's case, $ is just an alias for jQuery, so all functionality is available without using $. If we need to use another JavaScript library alongside jQuery, we can return control of $ back to the other library with a call to $.noConflict():

Creates a different alias instead of jQuery to use in the rest of the script.

var $j = jQuery.noConflict();
// Do something with jQuery
$j("div p").hide();

// Do something with another library's $()
$("content").style.display = 'none';

404 Page on a Static Site

Here's a very quick, but very useful trick. You can catch 404 errors (page not found) on a static site and serve up a custom 404 page with a one-liner in your .htaccess file:

ErrorDocument 404 /404.php

The "/404.php" part is the path to whatever file you want to serve up as the error page.

Remember that the .htaccess file works on Apache servers only. I say "static" sites, because if you are using a CMS system already (like WordPress), there is already a system in place for catching 404 errors and this is unnecessary.

Tips for using jQuery

Find if something is hidden:

We use .hide(), .show() methods in jquery to change the visibility of an element. Use following code to check the whether an element is visible or not.

if($(element).is(":visible") == "true") {
//The element is Visible
}

Center an element on the Screen:

To make align the element to center.

jQuery.fn.center = function () {
this.css("position","absolute");
this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
return this;
}

//Use the above function as:
$(element).center();

Disable right-click contextual menu:

There’s many Javascript snippets available to disable right-click contextual menu, but JQuery makes things a lot easier:

$(document).ready(function(){
$(document).bind("contextmenu",function(e){
return false;
});
});

Get mouse cursor x and y axis:

This script will display the x and y value – the coordinate of the mouse pointer.

$().mousemove(function(e){
//display the x and y axis values inside the P element
$('p').html("X Axis : " + e.pageX + " | Y Axis " + e.pageY);
});
<p></p>

Font resizing:

Font Resizing is a very common feature in many modern websites. Here’s how to do it with JQuery.

$(document).ready(function(){
// Reset Font Size
var originalFontSize = $('html').css('font-size');
$(".resetFont").click(function(){
$('html').css('font-size', originalFontSize);
});
// Increase Font Size
$(".increaseFont").click(function(){
var currentFontSize = $('html').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*1.2;
$('html').css('font-size', newFontSize);
return false;
});
// Decrease Font Size
$(".decreaseFont").click(function(){
var currentFontSize = $('html').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
var newFontSize = currentFontSizeNum*0.8;
$('html').css('font-size', newFontSize);
return false;
});
});

Preloading images:

When you’re using images in Javascript, a good thing is to preload it before you have to use it. This code will do the job:

jQuery.preloadImages = function()
{
for(var i = 0; i").attr("src", arguments[i]);
}
};

// Usage
$.preloadImages("image1.gif", "/path/to/image2.png", "some/image3.jpg");

SlideShow using jQuery

Creating Image Slide Show using jQuery:

In the code below you will see a surrounding div (id slideshow-area) which holds our slideshow content scroll area and our next and previous buttons. Inside our scroll area we have a div to hold the content and finally the content itself. As far as html goes this is pretty simple stuff.

<div id="slideshow-area">
<div id="slideshow-scroller">
<div id="slideshow-holder">
<div class="slideshow-content">
<img src="eureka_small.jpg" />
</div>
<div class="slideshow-content">
<img src="wallace_gromit_small.jpg" />
</div>
<div class="slideshow-content">
<img src="dead_like_me_small.jpg" />
</div>
</div>
</div>
<div id="slideshow-previous"></div>
<div id="slideshow-next"></div>
</div>

CSS is up next, it is slightly more complicated than the html but nothing too crazy. The first piece to look at is the positioning and sizing of main slide show area and scroller, which can have pretty much the same css. We do however add a border to our area to bring it out a little. The code below is fairly understandable, I make sure to set the position to relative so that I can easily position the next and previous buttons absolutely.

#slideshow-area, #slideshow-scroller {
width: 500px;
height: 500px;
position: relative;
overflow: hidden;
margin: 0 auto;
}

#slideshow-area {
border: 1px solid #000;
}

We are also going to set the height of the content holder to 500px, same as the area.

#slideshow-holder {
height: 500px;
}

The next two items are the previous and next buttons. They take a little bit more work to make sure they are in the correct position. The buttons also have background images for pretty arrows (sorry IE6 users it may look bad since the arrows are png files). I also set the cursor to hand and pointer - for browser compatibility. And finally we also have classes to identify and float left each piece of content in the slideshow.

#slideshow-previous, #slideshow-next {
width: 50px;
height: 50px;
position: absolute;
background: transparent url("arrow_left.png") no-repeat 50% 50%;
top: 225px;
display: none;
cursor: pointer;
cursor: hand;
}

#slideshow-next {
display: block;
background: transparent url("arrow_right.png") no-repeat 50% 50%;
top: 225px;
right: 0;
}

.slideshow-content {
float: left;
}

Well onto the real work, we now have to create the JavaScript to handle our functionality. jQuery makes this relatively simple though. First item is adding code to the document ready event.

var totalSlides = 0;
var currentSlide = 1;
var contentSlides = "";

$(document).ready(function(){
$("#slideshow-previous").click(showPreviousSlide);
$("#slideshow-next").click(showNextSlide);

var totalWidth = 0;
contentSlides = $(".slideshow-content");
contentSlides.each(function(i){
totalWidth += this.clientWidth;
totalSlides++;
});
$("#slideshow-holder").width(totalWidth);
$("#slideshow-scroller").attr({scrollLeft: 0});
updateButtons();
});

Next we need to create the two functions showPreviousSlide and showNextSlide. These two functions do mainly three things: change current slide number, update the buttons, and scroll the content. These functions along with support functions are below.

function showPreviousSlide()
{
currentSlide--;
updateContentHolder();
updateButtons();
}

function showNextSlide()
{
currentSlide++;
updateContentHolder();
updateButtons();
}

function updateContentHolder()
{
var scrollAmount = 0;
contentSlides.each(function(i){
if(currentSlide - 1 > i) {
scrollAmount += this.clientWidth;
}
});
$("#slideshow-scroller").animate({scrollLeft: scrollAmount}, 1000);
}

function updateButtons()
{
if(currentSlide < totalSlides) {
$("#slideshow-next").show();
} else {
$("#slideshow-next").hide();
}
if(currentSlide > 1) {
$("#slideshow-previous").show();
} else {
$("#slideshow-previous").hide();
}
}

Quoting HTML attribute values

The values of attributes can contain text, hexadecimal color codes or numbers. In case of JavaScript event handlers, the values consist of small JavaScript code. A sincere advice for good and clean HTML coding is to always put quotes around attribute values. It is a good habit, will save you many headaches and avoid errors especially when attribute values contain spaces.

while using bgcolor="#ffffff" instead of bgcolor=#ffffff results is greater browser compatibility and differentiates it nicely from other attribute-value pairs.

Quoting attribute values is also required in XHTML. Your pages will fail the W3C validation if you leave the values hanking around with the quotes.

HTML mailto attribute

The HTML mailto is a quick way to add the facility of receiving feedback from visitor on the web site. when the visitor clicked the HTML mailto, It lanuches their email program with new email window.

Note: HTML mailto assumes that the visitor has configured an email client (Outlook Express, Netscape Messenger, Thunderbird or any other) to send emails.

The Basic form HTML mailto requires an email address.

Its looks like:

<a href="mailto:info@openshell.in">Feedback Form</a>

The Complex form HTML mailto by adding an email subject and the email body so that it looks a little more professional.

Its look Like:

<a href="mailto:info@openshell.in?subject=Feedback for Openshell.in&body=Thanks for Provinding useful Tips">Feedback Form</a>

In addition to the body and subject, we can also provide HTML mailto with CC (Carbon Copy) and BCC (Blind Carbon Copy). This, as you would have guessed, requires us to append these values to the HTML mailto attribute just like we had done for body and subject.

Its look Like:

<a href="mailto:info@openshell.in?subject=Feedback for Openshell.in&body=Thanks for Provinding useful Tips&cc=anotheremailaddress@anotherdomain.com&bcc=onemore@anotherdomain.com">Feedback Form</a>

HTML mailto is a quick and easy way for beginners and who don't know server-side programming languages (such as JSP, PHP, ROR etc.) to add a link on their web site for receiving visitor feedback.

Refresh / Redirection

When you need your web page automatic refresh in 5 second or any second, use this meta tag.  It's a simple code, put it between HEAD tag in your web page. This script easy but powerful.

<HEAD>
<meta http-equiv='refresh' content='2;url='file_name or URL'>
</HEAD>
// content = time (second)
// file_name = name of file you want to refresh or redirect

Many websites use this scripts to redirect to another page or refresh the same page.

For example:  My website updates in every 10 minutes and I want to show user my latest content then I put this script to my page and set it refreshs in every 10 minutes