bijusubhash.com » HTML

Simple Popup using CSS and jQuery

Biju Subhash — Sun, 24 Apr 2011 13:30:32 +0000

In this post I’m explaining, how to create a simple popup using CSS and jQuery. There is a lot of popup script available over the net like, lightbox, tinybox etc. As per the part of my project I want to create a simple popup without any animation and it should be automatically aligned center vertical and horizontal. For this popup, here I’m explaining each code html, css and jquery. Ok lets start with html first.

Step One HTML


    	
    	
        	
            
            
            
            	
                	
                    	Send Your Messages
                    
                    
                    
                    	
                        	
                            	Name
                            	
                                    
                                    
                                    
                                    
                                    
                                    
                                
                            
                            
                            	 
                            
                        	
                            	Email
                            	
                                    
                                    
                                    
                                    
                                    
                                    
                                
                            
                        


                        
                            
                            	 
                            
                        	
                            	
                                	Subject
                                
                            
                            
                            	
                            
                        	
                            	
                                	
                                    
                                    
                                    
                                    
                                    
                                
                            
                            
                            	 
                            
                        	
                            	
                                	Message

Step Two CSS

Here we are using only three images for popup. One is for the curve of the popup, its using a master image for curves. And the another two are for close bottons which for normal and mouse over buttons.

/*---popup styles starts here ----- */
	.popupGrayBg {
		position:fixed;
		width:100%;
		height:100%;
		background:black;
		z-index:1001;
		left:0;
		top:0;
		opacity:.5;
		filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
		}
	.QTPopupCntnr {
		width:487px;
		position:fixed;
		z-index:1200;
		background:gray;
		left:50%;
		top:50%;
		margin-left:-244px;
		margin-top:-276px;
		}
	.gpBdrLeftTop {
		width:6px;
		height:6px;
		background:url(../images/greenPopupBdr.png) left top no-repeat;
		float:left;
		}
	.gpBdrRightTop {
		width:6px;
		height:6px;
		background:url(../images/greenPopupBdr.png) right top no-repeat;
		float:right;
		}
	.gpBdrTop {
		height:3px;
		background:#a9b6e1;
		border-top:3px solid #3b4f91;
		margin-left:6px;
		margin-right:6px;
		}
	.gpBdrLeft {
		border-left:3px solid #3b4f91;
		background:#fff;
		}
	.gpBdrRight {
		border-right:3px solid #3b4f91;
		background:#fff;
		min-height:400px;
		position:relative;
	}
	.gpBdrLeftBottom {
		width:6px;
		height:6px;
		background:url(../images/greenPopupBdr.png) left bottom no-repeat;
		float:left;
		}
	.gpBdrRightBottom {
		width:6px;
		height:6px;
		background:url(../images/greenPopupBdr.png) right bottom no-repeat;
		float:right;
		}
	.gpBdrBottom {
		height:3px;
		background:#fff;
		border-bottom:3px solid #3b4f91;
		margin-left:6px;
		margin-right:6px;
		}
	.gpBdrRight .caption {
		background:#a9b6e1;
		line-height:38px;
		padding-left:10px;
		font-family:Arial, Helvetica, sans-serif;
		font-size:15px;
		font-weight:bold;
		color:#3b4f91;
		}
	.gpBdrRight .closeBtn {
		background:red;
		width:31px;
		height:31px;
		position:absolute;
		right:-15px;
		top:-15px;
		background:url(../images/grn_pp_cls_btn_normal.png) no-repeat;
		}
	.gpBdrRight .closeBtn:hover {
		background:url(../images/grn_pp_cls_btn_over.png) no-repeat;
		}
	.gpBdrRight .content {
		padding:25px;
		font-weight:normal;
		}
/*---popup styles ends here ----- */

Step Three jQuery

You can download the popup script and see the demo too.

BS-Progress Bar Pack

Biju Subhash — Wed, 09 Feb 2011 15:28:46 +0000

Hi folks, I’m just introducing a progress bar pack that you can use for application or website wherever. The pack contains three types of progress bar container and six different type colors of animated gif progress bars.The container have colors with gray, white and black and have title like “Please wait…” and a footer text “Your request is being processed” which you can change as your own content. You can download the source code and images and I have just explained the code so you and learn or edit as you like.

Demo: BS Progress Bar Demo

How To ?

Step 1: CSS

/* Type one Container /*
	.prg_bar_bg{
		background:url(images/progress_bar_bg.png) no-repeat;
		width:298px;
		height:89px;
		padding-top:16px;
		text-align:center;
		}
	.prg_bar_bg .prg_bar {
		text-align:center;
		padding-bottom:5px;
		padding-top:5px;
		}
	.prg_bar_bg .prg_title {
		font:bold 12px/normal Verdana, Geneva, sans-serif;
		color:#323232;
		}
	.prg_bar_bg .prg_cntnt {
		font:normal 11px/normal Verdana, Geneva, sans-serif;
		color:#5d5d5d;
		padding-top:5px;
		}
/* Type Two Container /*
	.prg_bar_bg_black{
		background:url(images/progress_bar_bg_black.png) no-repeat;
		width:302px;
		height:91px;
		padding-top:16px;
		text-align:center;
		}
	.prg_bar_bg_black .prg_bar {
		text-align:center;
		padding-bottom:5px;
		padding-top:5px;
		}
	.prg_bar_bg_black .prg_title {
		font:bold 12px/normal Verdana, Geneva, sans-serif;
		color:#ccc;
		}
	.prg_bar_bg_black .prg_cntnt {
		font:normal 11px/normal Verdana, Geneva, sans-serif;
		color:#999;
		padding-top:5px;
		}
/* Type Three Container /*
	.prg_bar_bg_white{
		background:url(images/progress_bar_bg_white.png) no-repeat;
		width:307px;
		height:90px;
		padding-top:16px;
		text-align:center;
		}
	.prg_bar_bg_white .prg_bar {
		text-align:center;
		padding-bottom:5px;
		padding-top:5px;
		}
	.prg_bar_bg_white .prg_title {
		font:bold 12px/normal Verdana, Geneva, sans-serif;
		color:#333;
		}
	.prg_bar_bg_white .prg_cntnt {
		font:normal 11px/normal Verdana, Geneva, sans-serif;
		color:#666;
		padding-top:5px;
		}

Step 2: HTML

	<div class="prg_bar_bg"> <!-- change this class for different container style -->
    	<div class="prg_title">Please wait...</div>
    	<div class="prg_bar"><img src="images/progress_bar_violet.gif" /></div><!-- call different progress bar image -->
    	<div class="prg_cntnt">Your request is being processed</div>
    </div>

progress bar pack gif animated progress bar

A great collection of HTML5 Demos and Examples

Biju Subhash — Fri, 15 Oct 2010 03:42:26 +0000

Remy Sharp’s have cool site for HTML5 demos and examples he have hacked together. The demos listed one by one and you can view the supported browsers in the right side. You can filter the demos by clicking on the browser support icon or the technology tag. You can view source code easily by clicking on the view source link for each demo.

HTML5 JavaScript CSS3

Create a Custom HTML5 Video Player with CSS3 and JQuery

Biju Subhash — Wed, 04 Aug 2010 07:52:43 +0000

Are you a professional web designer, and you want to create a video player which look consistent across browsers. Each browser provide their own look and feel skin for the browser. And If you want to control to look the same on each browsers and integrate with your own design, you will have to create your own controls from scratch.

All media elements in HTML5 support the media elements API, which we can access using JavaScript and use to easily wire up functions such as play, pause, etc. to any buttons we create. Because the native video player plays nicely with other open web technologies, we can create our controls using HTML, CSS, SVG or whatever else we like.

CSS3 HTML5 jQuery JavaScript HTML5-Video Player

Rediscovering the Button Element-Particle Tree

Biju Subhash — Mon, 14 Dec 2009 09:00:18 +0000

Rediscovering the Button Element - Particle Tree

Particle Tree has comes with a great tutorials for web developers and web designers. Creating a consistent interface for your users is a constant struggle for every application designer. Building consistency on the web is especially tough because the visual rendering differences across browsers and operating systems are wildly different and almost arbitrary in what can and cannot be done. No where does this become more apparent than when you’re dealing with form elements and the biggest loser of them all in the battle for a standardized look is the infamous Submit button.

Buttons Links Tutorials Consistent Interface

Scalable CSS Buttons Using PNG image and Background Colors

Biju Subhash — Tue, 01 Dec 2009 08:02:16 +0000

Scalable CSS Buttons Using PNG image and Background Colors

David’s Kitchen comes with an article about Scalable CSS Buttons Using PNG image and Background Colors. Its explain how to create dynamic CSS Buttons using PNG, Transparency and Background colors and support full scalability.

Its verry usefull for developers because the length of the button will be changed according to the length of the text. The buttons are with Web 2.0 style. The mouse over color applied.

CSS Button Scalable PNG Dynamic JavaScript

Twitter Style Login Form with jQuery

Biju Subhash — Mon, 23 Nov 2009 09:55:03 +0000

Twitter Style Login Form with Jquery

Twitter recently updated their home page with a cool design. On the top right of the home page you will see user login with drop down form. AEXT has written a tutorial for the login form which has the look and feel of twitter sign in login form using JQuery.

It’s saving your space of the webpage and makes visitors feel comfortable by the awesome toggle login form. The tutorial explains how to create a login drop down with Twitter style using JQuery. It’s a step by step tutorial for learning how to do the toggle and tooltips with jQuery.

Twitter JQuery Javascript Tutorial Twitter-Style HTML

Javascript custome scrollbars – FleXcroll

Biju Subhash — Tue, 17 Nov 2009 10:24:15 +0000

Custom Javascript Scrollbars - fleXcroll

Hesido introduce FleXcroll. A custome javascript scrollbars for your html page. Custom scroll bars are usually bad, and they should be avoided whenever possible. But sometimes you just need that look to go with your website in a place that is design sensitive, and not content sensitive, or your customer wants them bad. For those cases, Hesido have come up with a javascript solution that let’s you use (X)HTML without having to resort to Flash. FleXcroll support mouse-wheel and keyboard scroll (from version 1.5.0), and text selection aid (from version 1.7.5) so people can text-select overflowed contents, making it behave almost the same as (and in some cases better than(!)) OS default scroll bars.

Javascript Custom Scrollbars FleXcroll CSS Hesido

Build a Realistic Hover Effect with jQuery

Biju Subhash — Fri, 06 Nov 2009 13:17:41 +0000

JQuery Hover Navigation (Animated)

Would you like to Create a Realistic Hover Effect With jQuery? It adds a rising hover effect to a set of icon links using jQuery’s animate effect. In a nutshell, the JS appends the reflection/shadow to each

, then animates the position and opacity of these elements and the icon links on hover. And .stop() eliminates any queue buildup from quickly mousing back and forth over the navigation.

Javascript JQuery Navigation Animated-Navigation

Easily make HTML text wrap in shapes other than Rectangle with CSS

Biju Subhash — Thu, 05 Nov 2009 10:34:33 +0000

Css Text Wrapper

Not Just Rectangles Anymore

!The CSS Text Wrapper allows you to easily make HTML text wrap in shapes other than just a rectangle. You can make text wrap around curves, zig-zags, or whatever you want. All you have to do is draw the left and right edges below and then copy the generated code to your website. Get to it

Tested in Internet Explorer 6+, Firefox, Safari, Opera, and Netscape.

Css HTML Text-Wrap Shapes Rectangle