javascript - CSS sprites and background positioning -


i working on implementing star-rating widget. needs make use of sprite file, looks following

sprite ratings

i have html structured following

html

 <span id="star-ratings" class="containers">       <span id="ratings"></span>  </span>

i have following css, unsure of in terms of displaying stars

#star-ratings, #ratings{     background:url(../images/star-sprite.png) 0 15.8px repeat-x;     display: block;     width: 78px;     height: 14px; }

to further explain thought process, passing down rating value can range 0-5 through javascript , calculating final width size , applying inner span.

currently trying display initial start, empty star. instead see stars on page.

explanation

let's use image provided in example. image have 80px width (actually 79px i'm rounding up), 14px height , 5 states: 0%, 25%, 50%, 75% , 100%.

to use image sprite, create base class called .star , assign height of image (14px) , width of single state, 16px (80px / 5 states).

the default state first 1 in sprite (0%). afterwards, create css each aditional state: 25%, 50%, 75% , 100%.

each class have different value background-position attribute, based on state width.

example

here example using image provided user sprite.

<!doctype html>  <html>    <head>    <meta charset="utf-8">    <style>      .rating {        margin: 25px;      }      .rating label {        font-weight: bold;        display: block;      }      .star {        display: inline-block;        width: 16px;        height: 14px;        background-image: url('http://i.stack.imgur.com/zsmmj.png');        background-repeat: none;      }      .star-25 {        background-position: -16px 0;      }      .star-50 {        background-position: -32px 0;      }      .star-75 {        background-position: -48px 0;      }      .star-100 {        background-position: -64px 0;      }    </style>  </head>    <body>      <div class="rating">      <label>1/5 (20%)</label>      <span class="star star-100"></span>      <span class="star"></span>      <span class="star"></span>      <span class="star"></span>      <span class="star"></span>    </div>      <div class="rating">      <label>4/5 (80%)</label>      <span class="star star-100"></span>      <span class="star star-100"></span>      <span class="star star-100"></span>      <span class="star star-100"></span>      <span class="star"></span>    </div>      <div class="rating">      <label>8/10 (80%)</label>      <span class="star star-100"></span>      <span class="star star-100"></span>      <span class="star star-100"></span>      <span class="star star-100"></span>      <span class="star star-100"></span>      <span class="star star-100"></span>      <span class="star star-100"></span>      <span class="star star-100"></span>      <span class="star"></span>      <span class="star"></span>    </div>    </body>    </html>

additional example

here example using css (no images), additional studies purposes. based on accessible star rating widget pure css, provided user connexo in comments.

<!doctype html>  <html lang="en">    <head>      <meta charset="utf-8">      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>      <style type="text/css">      body {        margin: 25px;      }      .center {        padding: 10px 0;      }      input[type=number] {        font-size: 22px;        padding: 5px;        width: 50px;      }      .star-rating {        display: inline-block;      }      .star {        font-size: 30px;      }      .star:before {        content: '★';        color: #ddd;        text-shadow: 2px 2px #bbb;      }      .star-rating[data-value="1"] .star:nth-child(-n + 1):before,      .star-rating[data-value="2"] .star:nth-child(-n + 2):before,      .star-rating[data-value="3"] .star:nth-child(-n + 3):before,      .star-rating[data-value="4"] .star:nth-child(-n + 4):before,      .star-rating[data-value="5"] .star:nth-child(-n + 5):before,      .star-rating[data-value="6"] .star:nth-child(-n + 6):before,      .star-rating[data-value="7"] .star:nth-child(-n + 7):before,      .star-rating[data-value="8"] .star:nth-child(-n + 8):before,      .star-rating[data-value="9"] .star:nth-child(-n + 9):before,      .star-rating[data-value="10"] .star:nth-child(-n + 10):before {        color: #fff455;        text-shadow: 2px 2px #c3bb41;      }    </style>    </head>    <body>      <div class="center">        <input type="number" value="0" min="0" max="3" class="star-control" data-target="#star-1">        <div id="star-1" class="star-rating" data-value="0">        <span class="star"></span>        <span class="star"></span>        <span class="star"></span>      </div>      </div>      <div class="center">        <input type="number" value="0" min="0" max="5" class="star-control" data-target="#star-2">        <div id="star-2" class="star-rating" data-value="0">        <span class="star"></span>        <span class="star"></span>        <span class="star"></span>        <span class="star"></span>        <span class="star"></span>      </div>      </div>      <div class="center">        <input type="number" value="0" min="0" max="10" class="star-control" data-target="#star-3">        <div id="star-3" class="star-rating" data-value="0">        <span class="star"></span>        <span class="star"></span>        <span class="star"></span>        <span class="star"></span>        <span class="star"></span>        <span class="star"></span>        <span class="star"></span>        <span class="star"></span>        <span class="star"></span>        <span class="star"></span>      </div>      </div>      <script type="text/javascript">      function onstarcontrolchange() {          var $this = $(this),          value = $this.val(),          target = $this.data('target');          $(target).attr('data-value', value);        }        $('.star-control').on('change', onstarcontrolchange);    </script>    </body>    </html>


Comments

Post a Comment

Popular posts from this blog

1111. appearing after print sequence - php -

morning, i have code takes string of shoe sizes, explodes , puts in table. code works , info displayed correctly on page after table there few 1's after table. i'm confused this. so table looks (in columns of 3 on webpage) available in following sizes: 3 4 5 6 9 10 111 here's codes, purpose of example $x = 3|4|6|10|9 function get_sizes_pipe($x) { $counter = 0; $splits = explode("|",$x); asort($splits); $x = print "<table class='greentable'>"; $x .= print "<thead><tr><th scope='col' colspan='3' abbr='starter'>available in following sizes:</th></tr></thead><tbody><tr>"; foreach ($splits $split) { $entry = print "<td>".$split."</td>"; if($counter == 2){ $entry .= print "</tr><tr>"; $counter =0; } else { $counter++; ...
Read more

java - WARN : org.springframework.web.servlet.PageNotFound - No mapping found for HTTP request with URI [/board/] in DispatcherServlet with name 'appServlet' -

this question has answer here: why spring mvc respond 404 , report “no mapping found http request uri […] in dispatcherservlet”? 3 answers i trying making simple bbs i'm encountering following error, warn : org.springframework.web.servlet.pagenotfound - no mapping found http request uri [/board/] in dispatcherservlet name 'appservlet' i have tried solve error many times, have failed. how can solve error? here web.xml, controllerand , servlet-context. my web.xml <?xml version="1.0" encoding="utf-8"?> <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" xsi:schemalocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <filter> <filter-nam...
Read more

Ruby on Rails, ActiveRecord, Postgres, UTF-8 and ASCII-8BIT encodings -

weirdest error, who’s challenge try , me? spent hours yesterday on , it’s magic. can't believe happening , it's driving me crazy. btw, using: rails 4.2.3 ruby 2.2.3 pg 0.18 encoding.default_internal = encoding.default_external = utf-8 config.encoding = 'utf-8' it has postgres, activerecord , encodings! turns out we’ve been getting these errors whenever create new users on database special characters: encoding::undefinedconversionerror: "\xc3" ascii-8bit utf-8 \xc3 may vary depending on characters. weird part we’ve set since beginning utf-8. makes no sense , digged it, , used script: user.all.each |user| user.attributes.each |name, value| if value.is_a? string puts user.email + name.encoding.to_s + value.encoding.to_s end end end and output of 1 of users, users same: dr_lottahelp@blahblah.comutf-8utf-8 dr_lottahelp@blahblah.comutf-8ascii-8bit dr_lottahelp@blahblah.comutf-8ascii-8bit dr_lottahelp@blahblah.comutf-8asci...
Read more