AcrisDesign » Tutorials

35 jQuery Tutorials You Must Know

Prakash — Mon, 17 May 2010 03:28:00 +0000

Jquery is one of the most used open source javascript library out there, just because of easy to use and easy to code. Our fellow web developer created some great jQuery tutorials and today we just want list some of the tutorials which really stand out from the tradition javascript effect tutorials. Check out this beautiful jquery tutorials which you all must know.

Easy Display Switch with CSS and jQuery

Making an Interactive Picture with jQuery

Create an Image Rotator with Description (CSS/jQuery)

Animated Landscape Using CSS and jQuery

Create Portfolio Website With CSS/jQuery

Inline Modal Window w/ CSS and jQuery

Sexy Drop Down Menu w/ jQuery & CSS

Animate Curtains Opening with jQuery

Sliding Boxes and Captions with jQuery

Vertical Scroll Menu with jQuery Tutorial

Animate Image Filling Up Using jQuery

Animate Panning Slideshow with jQuery

Sponsor Flip Wall With jQuery & CSS

Colorful Sliders With jQuery & CSS3

Making a Mosaic Slideshow With jQuery & CSS

Making a Photoshoot Effect With jQuery & CSS

An Awesome CSS3 Lightbox Gallery With jQuery

A jQuery Twitter Ticker

Making a Really Cool jQuery Gallery

Create Bounce out Vertical menu with jQuery

Build a Simple Image Slideshow with jQuery Cycle

Content Slider Using CSS and Jquery

Contextual Slideout Tips With jQuery & CSS3

How to Create Sleek Sliding Box Effect With jQuery

Create a awsesome images gallery using css3 and jquery

The most awesome jquery image slider

Create a Simple Infinite Carousel with jQuery

Create Background Scrolling Effect with jQuery

Filter Image View Using jQuery

Sliding Panel Photo Wall Gallery with jQuery

Beautiful Background Image Navigation with jQuery

Scrollable Thumbs Menu with jQuery

Awesome Bubble Navigation with jQuery

Automatic Image Slider w/ CSS & jQuery

Pretty Simple Content Slider with jQuery and CSS3

Animated Landscape Using CSS and jQuery

Vikas Ghodke — Tue, 20 Apr 2010 16:04:15 +0000

After the launch of jQuery many web designer who face problem with javascript now moved to jQuery because of vast range of various effect support from jQuery. Jquery is one of the leading JavaScript framework available now. Just a basic of javascript is required to start using jQuery and implementing some great effect with little knowledge. Since some weeks we are writing jquery tutorials for our readers and today we created this beautiful tutorial and in the end of this tutorial we will learn to Create Animated Landscape using CSS and Jquery. So lets start learning it.

Check Out DEMO

Step 1 : Organize Files

First of all we need to setup all our files which required in this tutorial, create one HTML file, CSS file and image folder which holds all our images

Step 2 : HTML Document

Here we need to write our html document first, which contains wrapper with fixed height and width and within it one container which holds all the elements of our page. Check out the code below

<div id="wrapper">
<div id="inner">
    <div id="cloudone"><img src="images/clud1.png" alt="" /></div>
    <div id="cloudtwo"><img src="images/clud2.png" alt="" /></div>
    <div id="cloudthree"><img src="images/clud1.png" alt="" /></div>
    <div id="boat"><img src="images/boat.png" alt="" /></div>
</div>
</div>

Final HTML codes.


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Animated Landscape Using CSS and jQuery</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
<div id="inner">
    <div id="cloudone"><img src="images/clud1.png"></div>
    <div id="cloudtwo"><img src="images/clud2.png"></div>
    <div id="cloudthree"><img src="images/clud1.png"></div>
    <div id="boat"><img src="images/boat.png"></div>
</div>
</div>
</body>
</html>

Step 3 : CSS Styling

Now some css styling is required. Important thing to keep in mind is to have overlay hidden for container(#inner) and position absolute for all the moving images. Here we will keep our moving images like clouds and boat out of the container with the help of negative left and right margin so that while using jquery we would have a nice effect. Check out the below CSS codes.

#wrapper {
	width:800px;
	height:600px;
       /* main background image with sky, sun, river and ground */
	background-image:url(images/Untitled-3.jpg);
	background-repeat:no-repeat;
	margin-top:10px;
	margin-left:auto;
	margin-right:auto;
	border: 10px solid #666;
}
#inner {
	position:relative;
	overflow:hidden;
	width:800px;
	height:600px;
	margin:0px;
}
#cloudone {
	position:absolute;
	margin-top:2px;
	margin-left:-200px;
	filter:alpha(opacity=80);
  /* CSS3 standard */
        opacity:0.8;
}
#cloudtwo {
	position:absolute;
	margin-top:80px;
	margin-left:-300px;
	filter:alpha(opacity=60);
  /* CSS3 standard */
        opacity:0.6;
}
#cloudthree {
	position:absolute;
	margin-top:60px;
	margin-left:-600px;
	filter:alpha(opacity=70);
  /* CSS3 standard */
        opacity:0.7;
}
#boat {
	margin-top:360px;
	position:absolute;
	margin-left:800px;
}

Step 4 : Jquery

First of all we need to tag below lines to the head of our html document.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script src="landscape.js" type="text/javascript"></script>

Here we will using double animate function to animate clouds and boat. And to rotate clouds and boat will create one function to do this job. Check out below codes first.

function cloudone(){
    $("#cloudone").animate({left:"+=1200px"},10000).animate({left:"-200px"}, 0)
    setTimeout("cloudone()",10000);
}

In above codes, here we moved class id cloudone to +=1200px which means image will move 1200px of its right and to give sliding effect we used .animate function and the time taken to complete the slide would be 10 second. Now another .animate function will move the image to original position in time interval 0 sec and to start the rotation again we have sum the time intervals of both the animate functions and using setTimeout function we started the rotation loop again. This way animate all the images which you want to slide on the canvas. Check out below codes for more clarification.

function cloudone(){
   $("#cloudone").animate({left:"+=1200px"},10000).animate({left:"-200px"}, 0)
   setTimeout("cloudone()",10000);
}
function cloudtwo(){
   $("#cloudtwo").animate({left:"+=1500px"},15000).animate({left:"-300px"}, 0)
   setTimeout("cloudtwo()",15000);
}
function cloudthree(){
   $("#cloudthree").animate({left:"+=2000px"},20000).animate({left:"-600px"}, 0)
   setTimeout("cloudthree()",20000);
}
function boat(){
   //This time we need to move boat to left side so we put the margin to 1000px
   $("#boat").animate({right:"+=1000px"},20000).animate({right:"-200px"}, 0)
   setTimeout("boat()",20000);
}

Now we need to trigger all our functions ( cloudone(), cloudtwo(), cloudthree() ) the animation will begin as soon as the page load. Check out below codes.

$(document).ready(function() {
	setTimeout("cloudone()",10);
	setTimeout("cloudtwo()",10);
	setTimeout("cloudthree()",10);
	setTimeout("boat()",10);
});

Final Codes

$(document).ready(function() {
	setTimeout("cloudone()",10);
	setTimeout("cloudtwo()",10);
	setTimeout("cloudthree()",10);
	setTimeout("boat()",10);
});
function cloudone(){
	$("#cloudone").animate({left:"+=1200px"},10000).animate({left:"-200px"}, 0)
	setTimeout("cloudone()",10000);
}
function cloudtwo(){
	$("#cloudtwo").animate({left:"+=1500px"},15000).animate({left:"-300px"}, 0)
	setTimeout("cloudtwo()",15000);
}
function cloudthree(){
	$("#cloudthree").animate({left:"+=2000px"},20000).animate({left:"-600px"}, 0)
	setTimeout("cloudthree()",20000);
}
function boat(){
	$("#boat").animate({right:"+=1000px"},20000).animate({right:"-200px"}, 0)
	setTimeout("boat()",20000);
}

Check Out DEMO

Create animated vertical Menu Using Jquery

Vikas Ghodke — Mon, 19 Apr 2010 16:12:17 +0000

Yeah i know there are hell lot of tutorials on navigation menu with css and jquery and some of them are really amazing you can check out some in our post 25 Excellent jQuery Tutorials for Navigation Menu . Today i come up with one more tutorial on Navigation menu but this time its animated vertical navigation menu with css and jquery. So lets start creating it before we start please check out the demo.

Demo

Step 1

First of all we need to set up our files, so lets create one html, css and js files along with one image folder which holds all our images which has been used in creating this vertical menu. Now we need to code our HTML document first. So lets start writing some html codes for vertical navigation menu.

<div id="nav">
<ul>
	<li><a href="#"><img src="images/home.png" width="65" height="52" /></a><p>Home</p></li>
      	<li><a href="#"><img src="images/portfolio.png" width="65" height="52" /></a><p>Portfolio</p></li>
      	<li><a href="#"><img src="images/about.png" width="65" height="52" /></a><p>About</p></li>
      	<li><a href="#"><img src="images/contact.png" width="65" height="52" /></a><p>Contact</p></li>
</ul>
</div>

Final Html Document.


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Create animated vertical Menu Using Jquery</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script src="jquery-1.2.6.min.js"type="text/javascript"></script>
<script language="javascript" type="text/javascript" src="vtip.js"></script>
</head>
<body>
<div id="wrapper">
	<div id="content">
		<h2>Create animated vertical Menu Using Jquery</h2>
		<p>Lorem Ipsum lroem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum.</p>
	</div>
	<div id="nav">
		<ul>
    		<li><a href="#"><img src="images/home.png" width="65" height="52" /></a><p>Home</p></li>
      	<li><a href="#"><img src="images/portfolio.png" width="65" height="52" /></a><p>Portfolio</p></li>
      	<li><a href="#"><img src="images/about.png" width="65" height="52" /></a><p>About</p></li>
      	<li><a href="#"><img src="images/contact.png" width="65" height="52" /></a><p>Contact</p></li>
  	 </ul>
</div>
</div>
</body>
</html>

Step 2

So now html documentation is ready, lets give some css styling to it. First of all we need to style our vertical navigation menu to achieve our desired output. The overflow for #nav must be hidden because we don’t want to show our Menu text on page load.

#nav {
	width:100px;
	float:left;
	overflow:hidden;
}
ul{
    margin:0;
    padding:0;
}
li {
	width:52px;
	float:right;
	margin-top:20px;
	height:52px;
	background-color:#d4e8e7;
	position:relative;
	list-style:none;
	font:Georgia, "Times New Roman", Times, serif;
	color:#ef7a1a;
	font-size:18px;
}
#nav li p {
	margin-left:70px;
	margin-top:-40px;
	position:relative;
}
 
#content {
	float:right;
	text-align:center;
	width:298px;
	height:375px;
	background-color:#d4e8e7;
	border: 1px solid #d4e8e7;
	/* Rounder Corner */
	-moz-border-radius: 7px;
    -webkit-border-radius: 7px;
	-khtml-border-radius: 7px;
}
#content h2 {
	font-family:Georgia, "Times New Roman", Times, serif;
	font-size:18px;
	color:#333;
	margin-top:20px;
	margin-bottom:10px;
	text-shadow: 0px 1px 2px #999;
}

Our vetical menu looks something like this now.

Step 3

Now we are done with styling our menu. Lets link jquery file to our html document along with custom empty js file named vmenu.js which contains all the custom jquery codes.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" type="text/javascript"></script>
<script src="vmenu.js" type="text/javascript"></script>

Step 4

Last and final step of our tutorial is to give life to our navigation menu using jquery. Here we will use .animate() function to achieve our desired effect. We will change the size of li to get the effect. All the explanation included as comments in below codes.

$(document).ready(function(){
 
    //When mouse roll over on menu icon
    $("li").mouseover(function(){
	//The below code is used to give animated effect to menu
        $(this).stop().animate({
	//Change the size of navigation menu to 152px
    width: "152px",
	//Time
  }, 500 );
    });
 
    //When mouse cursor removed from menu icon
    $("li").mouseout(function(){
        $(this).stop().animate({
	//Back to normal width 52px
    width: "52px",
  }, 500 );
    });
 
});

Demo

40 Illustrator Tutorials created in 2010

Prakash — Fri, 16 Apr 2010 09:59:12 +0000

We have posted variety of List tutorials on various category like Icon Tutorials, Photo Retouching, Retro, Grunge etc. Since last two months there are plenty of well written Illustrator tutorials has been posted on various blogs so we selected some of our personal favourite tutorials. Check out this awesome Illustrator tutorials that has been created in 2010.

Illustrator Tutorial: Japanese Sushi

How to Make Super-Sharp, Vector Swords

Create a Cute Little Tiger in Illustrator

Cartoon Character – Dexter

Create a Simple Storefront Icon

Create a Grimy Text Treatment with a Pen Tablet

Abduzeedo 2010 Logo Design

Create A Cute Creature Character From A Sketch

Modeling the Human Face in Illustrator

Cafe Style Coffee Art in Adobe Illustrator

Create A Briefcase Icon

Creating a Toaster-Popping Illustration

Create A Mouthwatering Chocolate Covered Strawberry

How to Create a Shiny, Vector Laptop

Design a Cute Hamster Avatar

How to Create a Crafts Inspired Vector Kids Illustration

How to Create a Seamless Argyle Pattern in Illustrator

Create a Tasty Burger Icon in Illustrator

Create a Cool Vector Panda Character in Illustrator

Create Textured European Goldfinch Characters

Playing with Vectors in Illustrator

Create a Stylized First Aid Icon in Illustrator

create an illustration of a fountain pen

How To Build a Vector Clock Graphic in Illustrator

Create a Penguins Illustration Tutorial for Global Warming Cause

illustrator tutorial: create a 6-egg box (not necessarily for Easter)

illustrator tutorial: create a yummy vector cupcake

Create Lady Birds Insect Tutorial Using Adobe Illustrator

How To Draw A Funny Cop Illustration From A Sketch

Create lush, glossy vector images

How to Create an Elegant, Vector Pen in Illustrator

Create quirky repeating patterns

How to Design a Cheeky Koala Mascot Head

How to Create a Cute Vector Bear T-Shirt Design

Create an Illustration of a Pearl-Filled Clam on an Ocean Bed

How to Create a Cool Monkey Character in Illustrator

make watercolor and marker style portraits with illustrator

design vector cartoon character

how to make abstract typography art with illustrator

an illustrators project from start to finish

Jquery Plus Wordpress : Plugins and Tutorials

Vikas Ghodke — Wed, 07 Apr 2010 13:48:51 +0000

Worpress is one of the famous blogging and CMS platform used by bloggers and now many corporate websites too. And jQuery is one of the most famous javascript framework used this days. So today we have collected some plugins along with tutorials which combines both wordpress and jquery.

Tweet Blender

Tweet Blender is a WordPress plugin and a Widgetbox widget that blends Twitter tweets from multiple sources. For WordPress, it shows up in the blog sidebar and also automatically adds a tweet archive page.

Image Drop Shadow

Image Drop Shadow wordpress plugin adds stylish drop shadow to images posted on your blog using jQuery. Just install it and all your posted images will automatically have a drop shadow.

OpenID

OpenID is an open standard that allows users to authenticate to websites without having to create a new password. This plugin allows users to login to their local WordPress account using an OpenID, as well as enabling commenters to leave authenticated comments with OpenID. The plugin also includes an OpenID provider, enabling users to login to OpenID-enabled sites using their own personal WordPress account.

jQuery-Pagebar

jQuery-Pagebar show instead of the next and prev links a jQuery slider as a modern pagebar. So it’s easy to navigate through many pages.

jQuery Lightbox For Native Galleries

Makes the native WordPress galleries use a lightbox script called ColorBox to display the fullsize images right there in the page. No modifications required.

Shadowbox JS

Shadowbox is an online media viewing application that supports all of the web’s most popular media publishing formats. Shadowbox is written entirely in JavaScript and CSS and is highly customizable. Using Shadowbox, website authors can display a wide assortment of media in all major browsers without navigating users away from the linking page.

Create a jQuery Carousel with WordPress Posts

This post will give you a quick run down of how to easily add a simple and easily customizable carousel with WordPress posts from a specified category.

Wordpress jQuery Lightbox Plugin

Used to overlay images on the current page.

J Post Slider wordpress plugin

This plugin will rotate latest posts from blog, presented with selected image, post headline, and optional post excerpt. One post can have one J Post Slider, image for this animation.

WP Wall

WP Wall is a “Wall” widget that appears in your blog’s side bar. Readers can add a quick comment about the blog as a whole, and the comment will appear in the sidebar immediately, without reloading the page.

SimpleModal Contact Form (SMCF)

SimpleModal Contact Form (SMCF) is an Ajax powered modal contact form.

How To Create Tabs Using jQuery

Create a featured posts slider in Wordpress using jQuery

Using jQuery to liven up your WordPress login

Just in case you’ve been coding in a box for the last 10 years, jQuery is a great JS library that has a number of nifty usages. One of its popular plugins is the ‘thickbox’ and its what we’re going to use now to create a simple means of logging in for you/your clients.