Basic Bubble Slider

Something that is now days most widely used in forms, in eCommerce websites and in many more sections of a web page. This is a basic Slider. If you surf the web, you’ll probably see that more and more websites have a slider that rotates images and text and usually at the top of the home page, while in E-Commerce it is used to set a particular range that we want. In technical term, a slider is defined as a Track Point. It is a graphical control element with which a user may set a value by moving an indicator, usually in a horizontal or sometimes in vertical fashion.

     

Basic Preloaders

Hello Folks! I am back with another post. I hope you guys are following my blog post. Today I will be sharing something about Pre-loaders. You might have seen a lot pre-loaders while using lot of mobile apps and websites. Now days many websites has been powered up with preloaders in the beginning. It adds an interactivity to a webpage with some sort of animations. Today I am going to tell how to create a simple jQuery Preloader with very few lines of jQuery & CSS code.

Preloader

Preloader

     

CSS3 Sliding Form

Hello folks, I am back with another interesting post to share with you guys. Today I will be sharing something about some new techniques introduced in Forms. Now days there has been lot many different kind of forms, some of them are Contact Forms, Feedback Forms, Payment Forms etc. Feedback form has becoming a necessary part of daily needs websites. Using feedback forms, we can provide some feedback to the owner of the website, so that he/she can make changes as per his convince and users requirements. These feedback forms can be added in different ways to our website. I am sharing a sliding feedback form with you. In my demo file, the feedback with slide from left once you hover over a certain section of the page. This form is created using some wire-frame and scripts. To create this form I have used Normalize.css with some custom styling. To make it look more dynamic I have used Modernizr.js.

     

Simple Form

Hey folks I am back with another post of Simple Form with validation feature. The form looks quite simple as far as looks matters, but this form is infused with a special feature of Form Validation. The Form Validation allows user to enter proper information e.g. In Email field user is asked to enter email so with form validation they are provided with a format in which they have to enter the value. This format is defined using jQuery or Javascript with some Regular Expressions.

In my demo form I have added some text fields, some textarea and few select boxes. I also added a submit button to submit the form. Each field has its own text form decided using Regular Expressions. To learn more about Regular Expressions users can access……

     

Draggable & Droppable Items

We can drag and drop the selected file and then by clicking upload button, we can upload the file. Hence, this uploading process is quite easier for the users. Now days, this uploading process is used more.

Drag & Drop

Drag & Drop

The dragging & dropping of file is carried out using Draggable & Droppable API used in HTML5. To make any file draggable & droppable we can also use some Javascript function or may be some jquery API. The file today I am uploading is created using HTML5, CSS3, Mootools. Mootools is a compact Javascript Framework.

     

CSS Clock

This analog clock is quite simple to create and it can be used on a separate page as well as in a Modal Window.

CSSClock

CSSClock

Now the clock I have posted above is created using HTML5, CSS3, and very minimal scripting. This clock is responsive in nature. It means it can be easily used on Tablets as well as Mobile devices. The script I am using is created my me itself.One of the script is used for animation and other script is used for time. In HTML Markup, I have used div tags for displaying Numbers in clock. using different Id selector I have arranged second-hand, minute-hand, hour-hand.