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

»

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 ...

»

Why hand-coding is always preferable over website builders

There is long debate as to why hand-coding is preferable over website ...

»

8 Reasons Your Site Should be Using Progressive Web Apps

Google has been driving at full speed since 2015 to help developers, ...

»

Tips to Handle Negative Feedback for Your Mobile App

Feedback from users for your mobile app is as essential as its ...

»

Why is Link Building So Important? Read this to understand

Getting a high ranking on search engine results is important to the ...

»

Productivity Tips for Web Developers for Efficient Time Management

The world is full of distractions. Whether you are a work-from-home, ...

»

The Importance of a Good Domain Name

The right domain name can genuinely make or break a business – ...

»

Cloud Strategy of Oracle: Working or Not?

Though Oracle considered cloud strategy as gibberish long before, it ...

»

Some Excellent SEO Tools for Boosting SEO Rankings like Never Before

You could be having a really great-looking website and the niftiest ...