All posts in Programming Tips

Quick Star Buttons

Ever want to just insert a star rating into your website with CSS, HTML & Basic jQuery? There are a bunch of scripts out there that’ll give you fancy images or crazy javascript but most of the time you just want a basic star rating with nothing flashy. This will do the trick. No images and no fuss. Also it is ready to insert directly into a form to submit your review!

Ok, we should stop talking and dive in!

First: The HTML

<input type="hidden" name="review[stars]" id="star-rating" />
    <dt>Rating: </dt>
	    <div class="rating">

Second: The CSS

.info-reviews .rating {
  unicode-bidi: bidi-override;
  direction: rtl;
.info-reviews textarea, .info-reviews input.text {
	width: 100%;
.info-reviews .rating > span, .info-reviews .rated > span {
  display: inline-block;
  position: relative;
  font-size: 15px;
  width: 1.5em;
  cursor: pointer;
.info-reviews .rating > span:hover:before,
.info-reviews .rating > span:hover ~ span:before,
.info-reviews .rating > span.selected:before {
   content: "\2605";
   position: absolute;
   color: #27a8df;

Third: The jQuery

	$('.rating span').click(function() {
		$('.rating span').removeClass('selected');
		found = false; obj = this; stars = 0;
		$('.rating span').each(function() {
			if (this == obj)
				found = true;
			if (found)

And there you have it effortless star ratings that can be popped right into your form without uploading any images and will reflect a number 1-5 when the form is submitted. An added bonus is if you just add more stars they’ll work. Want a rating 1-10? Just add 5 more stars.

The Taming of the 3D Product Viewer

We were stumped.

We had a client who needed a cheap, portable, multi-browser compliant, mobile ready 3D viewer for their products.

I had used 3D viewers in the past but things have changed. Apparently 3D Product Viewers have become either expensive or not very good! We had a medium sized budget but we didn’t want to stick the client with a monthly or yearly fee to use a 3D product viewer on their site.

So we bit the bullet and made our own.

Initially it seemed simple. Make a WordPress plugin that allows them to drag and view different angles of the product. It seemed simple. We realized that a lot of times the rendered files are very large resulting in long wait times for 15 degree image shots. We tried everything, the initial renders came to us in PNG format which was obviously too much so we decided to move to JPEG which sucked because we wanted the transparency of the PNG. This still sucked as a solution because even though the images loaded it was still ~10MB of downloads for 15 degree view.

Then it dawned on us. Video.

Sure we’ll still have the transparency issue. Sure we’ll still fall back onto JPEGs if their browser doesn’t support HTML5 video tag or flash but when the user does we were able to compress ~10MB of images into 1.8MB of video. When the user drags to a certain angle of the product we just flip to a certain frame in the video. Better yet we can even do a 1 degree video with little increase in size and the user can drag around the product almost seemlessly.

That still seemed like.. So what?

So we thought… what would be cool? We realized that in today’s world a lot of our users would be looking at the site on a mobile device. The video worked on Android, iPad but not iPhone (iPhone won’t allow you to remove that annoying little play button overlay from the video, feature request) but when you look at it on mobile devices panning your finger around on an image seems so cold and unfeeling. We started looking into what we could do, and we found it. Mobile devices with accelerometer devices in them report the current x, y, z to the browser via Javascript. We took that and ran with it.

Now when users land on our client’s website from their desktop they quickly load the product via video (a couple seconds on broadband) and can pan around the product without a problem, dragging or arrow keys, pick your poion.

Mobile users get an even cooler experience though. They visit the website and are looking at a couple products, check out the 3D view and they are panning around it using their finger and it asks them, “Do you want to enter ‘Augmented View’?” When they choose yes it is like looking into product window on your device, you rotate the device around and it rotates in the same fashion as if you were looking at the product.

We hope to productize this in the next 3-6 months and offer product image hosting (Amazon S3), image to video conversion, a WordPress plugin, a jQuery plugin, support on product usage and a bunch of cookies.

If you have an immediate need for an awesome and fast product viewer, contact us today and we can help you out with a beta version.

Next Up: Augmented Reality Jewelry.