Creating a Simple pop-up with blocked background

Posted on August 30th, 2011 in CSS, javascript & jquery

Today we will see how to make a simple popup with blocked background.It is made in Jquery.Here is the code below:

1st Page is index.php:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” dir=”ltr”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>SMOOTH POP UP MADE BY RAJAT</title>
<link rel=”stylesheet” href=”css/general.css” type=”text/css” media=”screen” />
<script src=”js/jquery-1.2.6.min.js” type=”text/javascript”></script>
<script src=”js/popup.js” type=”text/javascript”></script>
</head>
<body>
WELCOME THIS IS MY FIRST [...]

  • Share/Bookmark
Tags: ,
Read post Add your comment

How to make a lightbox in a very simple way

Posted on August 19th, 2011 in Web Development

First I am telling you what is the main logic behind the lighbox. It is very simple & you can easily do it if you have a little knowledge of css & html.
1.    In a lightbox you can see a black box appers & it covers the whole browser – it is nothing but a [...]

  • Share/Bookmark
Tags: , ,
Read post Add your comment

SEO and CSS

Posted on November 11th, 2010 in CSS, SEO

Search Engine Optimization isn’t all about on-page meta tags and off-page link building. Intelligently written Cascading Style Sheets (CSS) can add a lot to search-friendliness of a site and contrary to the general idea it should be an integral part of an effective SEO campaign. And for that to happen, designers and front end coders [...]

  • Share/Bookmark
Tags: ,
Read post Add your comment

How to make a gallery

Posted on October 31st, 2010 in CSS, HTML

I am going to tell you how to make a Simple clickable gallery in 3 steps
Step1: Make the html page[Make the container & inner element]
<div id=”wrapper” align=”center”>
<div id=”transition”>
<a id=”auto_play” href=”#”>Auto Play Slide Show</a>
<a id=”previous” href=”#”><<Previous</a>
<a id=”next” href=”#”>Next >></a>
</div>
<div id=”big_image_container” align=”center”>
<img id=”big_image” src=”image/pic1.bmp” title=”Big Image” />
</div>
<div id=”thumb_image_container”>
<img src=”image/pic1.bmp” alt=”image1″ title=”image1″ />
<img src=”image/pic2.bmp” />
<img src=”image/pic3.bmp” />
<img [...]

  • Share/Bookmark
Tags: , ,
Read post Add your comment

The Sliding Doors Technique using CSS and jQuery to create buttons

Posted on October 28th, 2010 in CSS, HTML, javascript & jquery

The sliding doors CSS technique to create a button or tab is very useful in interface design in terms of both flexibility and time saved. Often web designers and developers are required to make hyperlink-based rounded cornered buttons or even navigation tabs of varying widths. It is tedious to create them by slicing images for [...]

  • Share/Bookmark
Tags: , , ,
Read post Add your comment

Preloading images from CSS using jQuery

Posted on October 21st, 2010 in CSS, javascript & jquery

My research on how to easily preload a web page’s images that are referenced in attached stylesheets as background images led me to Filament Group’s jQuery plugin for the same. It is easy to incorporate and works like a charm since it can pull images and preload them from any directory. While CSS sprites is [...]

  • Share/Bookmark
Tags: , , , ,
Read post Add your comment

Simple vertical tabs using jQuery and CSS

Posted on October 07th, 2010 in CSS, javascript & jquery

Vertical tabs based navigation is a tried and tested tool in the hands of an interface designer and a fundamental element in the graphical user interface structure. You see it everywhere in your computer software, including many parts of the OS, making tab usage second nature for the user. Naturally it extends on to the [...]

  • Share/Bookmark
Tags: ,
Read post Add your comment

Flash like hover effect using jQuery

Posted on September 30th, 2010 in CSS, javascript & jquery

It is no breaking news that jQuery, along with its other JavaScript library counterparts, is making serious dents in the Flash web pie. While I prefer to sit on the fence and watch the hot “Flash is Irreplaceable / Flash should Die” web debate, I do think there are a large number of effects that [...]

  • Share/Bookmark
Tags: , ,
Read post Add your comment

jQuery + CSS: Styling first character of a text differently

Posted on August 30th, 2010 in CSS, javascript & jquery

In my previous post I provided a jQuery and CSS-based solution for styling the first word of all headings in a page differently. Let’s look at a different scenario now where the first character of all headings (say, <h2> this time) in a page are different from the rest of the letters. The jQuery logic [...]

  • Share/Bookmark
Tags: , , ,
Read post Add your comment

jQuery + CSS: Styling first word of a text differently

Posted on August 23rd, 2010 in CSS, javascript & jquery

A colleague required a quick solution by which the first word of each heading in her design would be of a different color than the rest of the words in that heading. Using a <span> element for a part of the heading (say, <h1>) and styling it with CSS to apply a different color should [...]

  • Share/Bookmark
Tags: , , , ,
Read post Add your comment
Older posts »