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.

     

jQuery Full Content

Hello Folks I am back with another post. Last time I posted something about Responsive Templates. Today I am going to discuss something about a very popular jquery plugin called Jquery Full Content. Now this plugin is a quite interesting plugin which can be used to create a full dynamic single page website. This plugin is used to create fully container with width and height of window. It will add a scrolling effect to the page . Once we click any link it will scroll to that location automatically. This location can be either vertical or horizontal. A sample to the image is shown below.

HomePage

HomePage