Checkbox & Radio Buttons
Published On: 11/07/2014
Radio Buttons and Check boxes are one of the most common type given to Input tags. These are mostly used in forms and other form related areas. Actually Radio buttons are graphical icons representing one of the set of items. Out of this set of items only one item can be selected at once.
Checkbox 1
On the other hand, Checkbox as shown in figure above are defined as a graphical control element, which allows users to make binary selections. This exactly means a choice between one of two possible mutually exclusive options. Checkboxes are often shown on the screen as a square box as shown in above image. These checkboxes are used to make multiple selections.
Order Form
Published On: 09/07/2014
Sample Order Form
The above sample image gives an actual idea of a sample order form. This is a snapshot taken from our demo file. This Order form is deigned using table structure. Product Name, Quantity, Unit Price and Totals are defined in separate columns. At the bottom of the table we have created a Input bar containing Product Subtotal. We have also mentioned total quantity into shipping rates to get the Order Grand Total. Finally at bottom right, we have a submit button to submit the order which will be further processed by the server.
Now, this form is created using very basic HTML and its Table and Form elements, CSS. We have also used jquery and one of its plugin named Order.js. The CSS Styling has been done in another External Stylesheet. The table element is wrapped inside a div element.
Basic Bubble Slider
Published On: 08/07/2014
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.
CSS3 Sliding Form
Published On: 04/06/2014
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.
Different DropDowns
Published On: 12/05/2014
Hello Folks! Today I will be sharing another important topic with you. This topic is regarding different kinds of dropdown. I believe you all have noticed importance of Dropdown in different websites these days especially in contact forms and other kind of forms. Basically Dropdown is simply a list which allows the user to choose one or multiple values from a list. When activated, it displays (drops down) a list of values, from which the user can select one or multiple values. To create a very simple Dropdown or Select list, we basically us HTML. Using Select and Option Tag, we can easily create a simplest Dropdown. Now we can style this Dropdown using CSS Styling. This Styling wont affect its working. Because Styling can be changed using some kind of scripting.
Horizontal Forms
Published On: 07/05/2014
Hello Folks! Today I am gonna post something really interesting and unique. This time I will be posting another type of form. This will be Login form. Login forms are really common type of form, but the form I am gonna share will be unique in layout from other forms. Normally, we see vertically aligned form which are have a basic design. The design we use is horizontally aligned. We have also used some scripting to create this basic form structure and other animation.
Horizontal Form
Interactive Form with Sliding
Published On: 27/04/2014
Hello folks! Today I am gonna share about Interactive Forms with you. This form is created by me and It can be used in different fields for various purpose. As an example I made this form for Hospital info feeder. This is an Attendant Registration form which can be used to store Attendant info for all those who are coming to meet patient admitted in hospital. This is a highly interactive and simple form. This form is created using HTML, CSS, Jquery and some additional scripting through javascript. In styling, I have used some vendor prefixes for browsers like Chrome, Firefox, Opera, Safari etc. I also used some CSS3 Attributes. This form is backward compliant. It means that this form works on all old as well as latest browsers including IE8.
Attendant Registration
Star Rating (Using jQuery)
Published On: 20/02/2014
In this figure, we can see how star rating will look when created with jquery. These stars are defined using Radio Inputs. Each star value is provided with a separate id. Also the value for each star rating is different. Each star rating is floated to left using CSS Float property.
CSS Clock
Published On: 10/10/2013
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
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
Published On: 08/10/2013
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
Custom Map
Published On: 04/10/2013
Sample_1
To start with coding we basically need Twitter Bootstrap responsive wire frame, jQuery, htmlshim file for early version of browsers. Starting with coding. Bootstrap is placed at the top of in the header section before any other style sheet. The layout for the document is arranged in such a way that sidebar is placed on the left hand side and main context section that is this Google Map is placed on the right side of the page. The dropdowns for color are obtained using Javascript. The link to all the other scripts are placed at the bottom of the Body tag. We also need a link to Google Map API. The version of API depends on the requirement of client or user. The map styles are changed using a javascript function called changeMapStyles function. Using colordrop function we are getting the value of the selected color. The portion of script code is given below.
Diapo
Published On: 03/10/2013
Carousels are also known as Image Sliders. These carousels can be made very easily by using some javascript. Now days there are many scripts available in the market which can used to create a carousel quite simply by just using HTML and CSS. Here i will share one of those plugins which can be used for creating CAROUSEL in such a way that, it can handle anything including text, image, video, buttons etc. A snapshot of this slider is given below.
Carousel
Source Code Button
Published On: 30/09/2013
I have created something unique and different to resolve this issue. We can add a simple button which will directly link us to Source Code page or may be it can open Source Code in a Modal Window. I am attaching a sample file with this post you can check it out. This demo page will work fine with all the latest versions of Chrome and Firefox. May be with Safari also. But this will surely not work with IE8 and below.
Screenshot
Vibrating Buttons
Published On: 27/09/2013
…Once you tap over any button on the webpage, It gives a little vibrate. Now today I will share some code using which you guys can also add this to your mobile website. How to make this vibration happen when the user click any particular button.The Vibration API allows developers to direct the device, using JavaScript, to vibrate in any particular pattern or button for a given duration.Well this vibration occurs due to very little Javascript code. I am linking a Sample file with this , in this file I have used HTML5, CSS3, and very few lines of Javascript also.It’s always good to check for the presence of API support before using it; here’s how you can detect the Vibration API’s presence:…….
alert("navigator.vibrate? " + (navigator.vibrate ? "Yes" : "No"));
alert("navigator.webkitVibrate? " + (navigator.webkitVibrate ? "Yes" : "No"));
alert("navigator.oVibrate? " + (navigator.oVibrate ? "Yes" : "No"));
Full Screen Mode
Published On: 24/09/2013
A Full-screen mode allows you to use the entire computer screen for browsing. This removes all menus and toolbar from view, but you will of course still be able to use context menus, mouse gestures, and keyboard shortcuts.
FullScreenMode
Just Query 