How To : Make Vertical Rating Meter Easy Way Using jQuery

Hello developers. Today I am very much excited to tell you how we can make vertical rating meter using css , html and little php (or may be some other language). The meter reading goes from 0 to 100 units. In this example I am taking units as percentage. The trick is very simple and easy to understand. I am using one meter image in background and hiding its height with overlay blank div.

Here is the DEMO.

Works perfectly on ie6 , firefox and chrome

Simply copy and paste the following code inside your body tag:

1
2
3
4
5
6
7
<div id="performance_meter_one">
    <div class="wrap">
	<div class="overlay" style="height:30%;"></div>
        <!-- Very Important. Here height =  100 - rate_value where rate_value is generated with defined php logic  -->
        <!-- Here height = 30% means actual rate is 70% and hence rate_value = 70 -->
	 </div>
</div>

Here is the CSS. Place it inside your style sheet.

1
2
3
#performance_meter{background:url("meter.gif") no-repeat;width:93px;height:375px}
#performance_meter .wrap{height:268px}
#performance_meter .overlay{position:absolute;width:27px;background:#fff;margin-left:33px;margin-top:27px;}

.

Alll done! Check out the DEMO how it looks.

Cheers!

Recently Published

»

8 Ways the Right Ecommerce Platform Makes Your Business Perform Better

Starting your own ecommerce store is an exciting experience, but ...

»

The SSL certificates and why are they essential for sites

What are SSL and its purpose? SSL is a modern technology that is ...

»

Entering Into M-Commerce as a Small Business

According to a December 2016 Business Insider article, the U.S. ...

»

How to Convert More Traffic Quickly and Easily

If you’ve got a blog that gets plenty of traffic but ...

»

Strengthen Workplace Productivity with Live Chat Software

Live chat has become an important part of every company’s customer ...

»

How More Powerful Smartphones Are Making Websites Load Faster

Smartphone speeds keep accelerating. Last October, Qualcomm joined ...

»

The Most Effective Method To Present A Logo Plan

The Most well-known creators’ battles are and how they are ...

»

Sure Guide for Improving Your WP Site Accessibility

This article compiles some best practices to optimize a WP site ...

»

9 Social Media and Marketing Tools Recommended for a Business

A business is set up to have a profit by delivering a product or a ...