Star Rating (Using jQuery)

Star Rating
Star Rating

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.

     

Advertisements

5-Star Rating (No Script)

In the earlier post, I shared how to create Star Rating by using some scripting. In this post, we will create 5-Star rating without using any kind of scripting and also to mention this 5-star rating will work just fine as any other rating. This rating is created by just using some HTML and CSS. To make this rating work fine we have added some pseudo classes in CSS, to make it work fine. These pseudo classes allows to add style effects on hovering, on focussing and even when the stars are checked.

Star Rating
Star Rating

The above image defines layout about how the star rating will appear. There is a 5-star rating. Each star rating has different title value. These star are defined using input tag with radio type. Each of these are floated to left using CSS Float property. When we submit the form, the specific value related to that particular star is forwarded to the server.These stars are enclosed within a fieldset followed by legend tag.

     

Star Rating (Using Script)

Star Rating is one of the most easy and simple way to rate any object present on your website. It can be used in Blog, Online Shop, Website, Portfolio. Its is a voting control which enable rating elements of content in your site by its readers. It’s a super-effective way of getting instant feedback from your readers. Whether it’s a blog post, web page, image or what ever piece/element of your website that you want to be rated by your readers. The demo file I am adding today is a cross browser compliant.

Star Rating

Star Rating

     

Communication Links

Communication is one of the most important part of life. Now we can communicate with some one or even with the developer while accessing his/her website. Just by clicking a simple button we can easily make a call or send SMS. This button is actually a link which is created using a-tag with some added styling using CSS. The code to this button is quite simple and easy. In the href attribute we have to add tel:[number]. While accessing the website or application on mobile, if we click the button it will automatically open the dialer, using which we can make the call quite easily.