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:

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

#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

»

Web Development Vs. Software Development: What Is the Difference?

As technology continues to transform all aspects of our lives, a lot ...

»

Web Redesign : Is Your Landing Page Begging for one?

How do you know when it’s time to web redesign your landing page? ...

»

Customer Acquisition: Few Steps To Improve This.

Customer acquisition is essential to any business’s success — to ...

»

Mobile App Development Tools: 5 Enterprise-Ready For Rapid Deployment

There are several enterprise-ready mobile app development tools for ...

»

Docker: How To Build Better Development Security With It

The top concern among developers and DevOps teams is security within ...

»

Mobile Development: How to Reduce Costs

Modern markets have become so competitive that it has become vital ...

»

Know-How DevOps Benefits Your Business

The organizations in this current fast-paced environment need to ...

»

10 Best Prototyping Tools for UI/UX Designers

Website design for a client gets only successful if you follow their ...

»

Social Media Marketing: Strategy To Boost Ecommerce-Traffic

According to a recent study, the experts revealed that people aged ...