Samples with jquery, css3 and html5

Tuesday, 21 April 2015

jQuery plugin for modal boxes and popups

Avgrund is a jQuery plugin for modal boxes and popups. It uses interesting concept showing depth between popup and page. It works in all modern browsers and gracefully degrade in those that do not support CSS transitions and transformations (e.g. in IE 6-9 has standard behavior). Tested with jQuery 1.4+

  Live Demo               Download

CSS3: Create rounded corners using css only

Once upon a time all the web developers do lot of work to create rounded corners. Sometimes we need to add extra JavaScript files for IE. But now we can able to create rounded corners just using a single property that is available in CSS3.

The border-radius property allows you to add rounded corners to elements.

<!DOCTYPE html>
#rnd-cornners1 {
            border-radius: 25px;
            background: #EB65A0;
            padding: 20px; 
            width: 200px;
            height: 150px;    
#rnd-cornners2 {
            border-radius: 25px;
            border: 2px solid #73C5E1;
            padding: 20px; 
            width: 200px;
            height: 150px;    
<p>The border-radius property allows you to add rounded corners to elements.</p>
<p>Rounded corners for an element with a specified background color:</p>
<p id="rnd-cornners1">Rounded corners!</p>
<p>Rounded corners for an element with a border:</p>
<p id="rnd-cornners2">Rounded corners!</p>

What is HTML5-?: Overview

HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web.

HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG).

The new standard incorporates features like video playback and drag-and-drop that have been previously dependent on third-party browser plug-ins such as Adobe Flash, Microsoft Silverlight, and Google Gears.

HTML5 Browser Support       

HTML5 is supported in all modern browsers.In addition, all browsers, old and new, automatically handle unrecognized elements as inline elements.

Because of this, you can "teach" old browsers to handle "unknown" HTML elements.

HTML5 Mobile Browser Support
                                                    The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5.

HTML5 New Features:

HTML5 introduces a number of new elements and attributes that helps in building a modern websites. Following are great features introduced in HTML5.
  • New Semantic Elements: These are like <header>, <footer>, and <section>.
  • Forms 2.0: Improvements to HTML web forms where new attributes have been introduced for <input> tag.
  • Persistent Local Storage: To achieve without resorting to third-party plugins.
  • WebSocket : A a next-generation bidirectional communication technology for web applications.
  • Server-Sent Events: HTML5 introduces events which flow from web server to the web browsers and they are called Server-Sent Events (SSE).
  • Canvas: This supports a two-dimensional drawing surface that you can program with JavaScript.
  • Audio & Video: You can embed audio or video on your web pages without resorting to third-party plugins.
  • Geolocation: Now visitors can choose to share their physical location with your web application.
  • Microdata: This lets you create your own vocabularies beyond HTML5 and extend your web pages with custom semantics.
  • Drag and drop: Drag and drop the items from one location to another location on a the same webpage.

Monday, 20 April 2015

Plugin: Multiple file upload using jQuery

jQuery File Upload widget with multiple file selection, drag&drop support, progress bars, validation and preview images, audio and video for jQuery. Supports cross-domain, chunked and resumable file uploads and client-side image resizing. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.

  Live Demo             Download

Plugin : Virtual Keyboard Using jQuery UI

Virtual Keyboard is a jQuery UI plugin that comes with lots of features, compatible with theme roller, works with jQuery mobile and would ideal for touch screen.

This plugin supports many keyboard layouts like qwerty, alphabetic, numeric, Dvorak, regional layouts or any other custom layout. The entire keyboard can be easily customized with CSS.

   Live Demo                Download

jQuery plugin for instant messaging like facebook/gmail chat

     jQChat is a jQuery plugin for instant messaging like facebook/gmail chat. Is a plugin that can be used to add a JavaScript-based real time chatting system to your site.                                                

 Live Demo                Download

Like Us On Facebook

Popular Posts

Powered by Blogger.

Follow by Email

Main Post

Send Quick Massage


Email *

Message *