Facebook like drop down menu using jQuery

Visit Infonine.in Blog http://infonine.in/blog

Today we will see a drop down menu like a facebook notification. We are using a jquery here. The code we use here is very easy and short.

Read more of this post

CSS Margin and Padding [Designikx Tutorial]

Designikx Tutorial - https://designikx.wordpress.com
Today’s topic is CSS Box Model – Border, Margin and Padding

What is box model?

Margin, border, padding and contents of the element are together known as the The Box Model.
We don’t have to use all of these. But its good to keep box model in mind.
The graphical representation of The Box Model is as… Read more of this post

CSS Gradient : How to Use

CSS Gradient :  How to use

Safari, Chrome, Firefox, Opera, Internet Explorer – all major browser supports CSS Gradients. Internet Explorer doesn’t support all CSS Gradient properties. The features like gradient repeat, gradient angle, and radial gradient are not supported by Internet Explorer. It supports only horizontal and vertical linear gradient with two colors.

Read more of this post

Sliding Tab Using jQuery

Sliding Tab using jQuery

Necessity of space [ in display area] leads us to use new techniques.  So as to minimize the space in short space utilization we are using a tab which on click [ You can use Mouseover/Out Function too ] Maximize and Minimize the other tabs.  Also it’s a  6-7 line Jquery code we used for sliding purpose.
Here it looks like:

Sliding tab – When Load

Sliding Tab – On Click Event

Here is the jQuery code for sliding tab..

$(".all_block").click(function() {
	$(this).animate({width:650},"slow");
	$(this).prevAll("div").animate({width:50},"slow");
	$(this).nextAll("div").animate({width:50},"slow");});
/* Code For Reset All */
$("#reset_").click(function() {
	$("#container").children("div").animate({width:200},"slow");});

For Complete Source click on Read More

Read more of this post

Animated Tooltip Using jQuery

Login Form

Its another tooltip sourcecode using jQuery. You can copy paste the sourcecode from here. It is a span based tooltip, with animation. The Jquery effects used here are as..

$(".tbox").focusin(function() {

	$(this).next("span").show(1000);

});
$(".tbox").focusout(function() {

	$(this).next("span").hide(1000);

});

Read more of this post

IE Fix – Centering Layout [Common Bug in IE]

We use the “margin:0 auto;” for centering layout which works in Firefox and Chrome well. But when it comes to IE, it shows the entire layout at left.

Display in Firefox and Chrome:

Display in Internet Explorer :

Click on “Read More” to continue…
Read more of this post

%d bloggers like this: