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!

WordPress Speed Test

Recently Published

»

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

»

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