Facebook like drop down menu using jQuery

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

Create favicon for your website

favicon

What is favicon?

A favicon (favorites icon) is used as a shortcut icon for website. It is also bookmark icon ( on bookmark bar or menu ), url icon ( what we see on location bar ).

What it is exactly?

It may be .png, .gif, .ico graphic image having dimension 16X16, 32X32…

How to create favicon?

.png, .gif – you can create this file using any image editing software
.ico – you’ll get some online icon maker software to generate .ico file from your image.

How to use favicon in website?

For ICON (.ico file)

<link href="favicon.ico" rel="shortcut icon" /> 

For GIF (.gif file)

<link href="favicon.gif" rel="icon" type="image/gif" /> 

For PNG (.png file)

<link href="favicon.png" rel="icon" type="image/png" /> 

Hope this will help you in your projects.
Please share/recommend  if you like this post.

Thanks,
Nikhil U.
UI Designer
Pune[MH,India]

Animated stretchable search text box using jQuery

Today we will see the Animated Textbox which on focus stretch and on de-focus shrink to a particular size.
Here we are using jquery, css. This will reduce the occupied area by tradional search box. As shown in following image.

animated-search-box

Read more of this post

CSS Margin and Padding [Designikx Tutorial]

Designikx Tutorial - http://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

Jquery – Use of function – Passing values through function

Here we study about the jquery function. By using function we can use same code for multiple times. Here I have created the Add function which I can use for no. of times.
The code is as follows

<!DOCTYPE html>
<html>
<head>
<title>Passing Value Through Function</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
</head>
<body>
<input type="text" id="textboxone">+
<input type="text" id="textboxtwo">=<span style="padding:0 10px;"></span>
<button id="addbutton">Add</button>
<script>
$("#addbutton").click(function(){

	var a=$("#textboxone").val();
	var b=$("#textboxtwo").val();
	var d=addnumbers(a,b);
	$("span").append(d)
});
function addnumbers(a,b)
{
	var c=Number(a)+Number(b);
	return c;
}
</script>
</body>
</html>

Read more of this post

Follow

Get every new post delivered to your Inbox.

Join 259 other followers

%d bloggers like this: