0

Can anyone help me out with my ratingsystem? I'm trying to duplicate my section with the class of container(Entire progressbar), but whenever I do so the ratingbar only works for either one of the progressbars. I've kept in mind to change the id's of the second checkboxes so they don't interfere. This is the code with one progressbar but I want more of them.

Bytheway it would be helpfull if somebody knows a decent way to share this mess of code I have here.

PHP+HTML:

<?php $num = 2; ?>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Animated Progress Bar</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <section class="container">
        <input type="radio" class="radio twenty" name="progress" value="twenty" id="twenty" <?php if($num === 1) { echo 'checked'; } ?>>
        <label for="twenty" class="label">1</label>

        <input type="radio" class="radio fourty" name="progress" value="fourty" id="fourty" <?php if($num === 2) { echo 'checked'; } ?>>
        <label for="fourty" class="label">2</label>

        <input type="radio" class="radio sixty" name="progress" value="sixty" id="sixty" <?php if($num === 3) { echo 'checked'; } ?>>
        <label for="sixty" class="label">3</label>

        <input type="radio" class="radio eighty" name="progress" value="eighty" id="eighty"<?php if($num === 4) { echo 'checked'; } ?>>
        <label for="eighty" class="label">4</label>

        <input type="radio" class="radio onehundred" name="progress" value="onehundred" id="onehundred" <?php if($num === 5) { echo 'checked'; } ?>>
        <label for="onehundred" class="label">5</label>

        <div class="progress">
            <div class="progress-bar"></div>
        </div>
    </section>
</body>
</html>

CSS:

body {
  font: 13px/20px 'Lucida Grande', Tahoma, Verdana, sans-serif;
  color: #404040;
  background: #323232;
}
.container {
  margin: 80px auto;
  width: 640px;
  text-align: center;
}
.container .progress {
  margin: 0 auto;
  width: 150px;
}
.progress {
  padding: 4px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}
.progress-bar {
  position: relative;
  height: 10px;
  border-radius: 4px;
  -webkit-transition: 0.4s linear;
  -moz-transition: 0.4s linear;
  -o-transition: 0.4s linear;
  transition: 0.4s linear;
  -webkit-transition-property: width, background-color;
  -moz-transition-property: width, background-color;
  -o-transition-property: width, background-color;
  transition-property: width, background-color;
  -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
}
.progress-bar:before, .progress-bar:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.progress-bar:before {
  bottom: 0;
  border-radius: 4px 4px 0 0;
}
.progress-bar:after {
  z-index: 2;
  bottom: 45%;
  border-radius: 4px;
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
}
.twenty:checked ~ .progress > .progress-bar {
  width: 20%;
  background-color: #f63a0f;
}
.fourty:checked ~ .progress > .progress-bar {
  width: 40%;
  background-color: #f27011;
}
.sixty:checked ~ .progress > .progress-bar {
  width: 60%;
  background-color: #f2b01e;
}
.eighty:checked ~ .progress > .progress-bar {
  width: 80%;
  background-color: #f2d31b;
}
.onehundred:checked ~ .progress > .progress-bar {
  width: 100%;
  background-color: #86e01e;
}
.radio {
  display: none;
}
.label {
  display: inline-block;
  margin: 0 5px 20px;
  padding: 3px 8px;
  color: #aaa;
  text-shadow: 0 1px black;
  border-radius: 3px;
  cursor: pointer;
}
.radio:checked + .label {
  color: white;
  background: rgba(0, 0, 0, 0.25);
}
Lee Taylor
  • 7,761
  • 16
  • 33
  • 49
Stephan-v
  • 19,255
  • 31
  • 115
  • 201

2 Answers2

1

Try this code:

PHP+HTML

 <?php
     $num = 3;
 ?>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Animated Progress Bar</title>
  <link rel="stylesheet" href="my.css">
</head>
<body>
    <section class="container">
        <input type="radio" class="radio twenty" name="progress" value="twenty" id="twenty" <?php if($num === 1) { echo 'checked'; } ?>>
        <label for="twenty" class="label">1</label>

        <input type="radio" class="radio fourty" name="progress" value="fourty" id="fourty" <?php if($num === 2) { echo 'checked'; } ?>>
        <label for="fourty" class="label">2</label>

        <input type="radio" class="radio sixty" name="progress" value="sixty" id="sixty" <?php if($num === 3) { echo 'checked'; } ?>>
        <label for="sixty" class="label">3</label>

        <input type="radio" class="radio eighty" name="progress" value="eighty" id="eighty"<?php if($num === 4) { echo 'checked'; } ?>>
        <label for="eighty" class="label">4</label>

        <input type="radio" class="radio onehundred" name="progress" value="onehundred" id="onehundred" <?php if($num === 5) { echo 'checked'; } ?>>
        <label for="onehundred" class="label">5</label>

        <div class="progress">
            <div class="progress-bar"></div>
        </div>
    </section>

    <section class="container">
        <input type="radio" class="radio twenty2" name="progress2" value="twenty" id="twenty2" <?php if($num === 1) { echo 'checked'; } ?>>
        <label for="twenty2" class="label">1</label>

        <input type="radio" class="radio fourty2" name="progress2" value="fourty" id="fourty2" <?php if($num === 2) { echo 'checked'; } ?>>
        <label for="fourty2" class="label">2</label>

        <input type="radio" class="radio sixty2" name="progress2" value="sixty" id="sixty2" <?php if($num === 3) { echo 'checked'; } ?>>
        <label for="sixty2" class="label">3</label>

        <input type="radio" class="radio eighty2" name="progress2" value="eighty" id="eighty2"<?php if($num === 4) { echo 'checked'; } ?>>
        <label for="eighty2" class="label">4</label>

        <input type="radio" class="radio onehundred2" name="progress2" value="onehundred" id="onehundred2" <?php if($num === 5) { echo 'checked'; } ?>>
        <label for="onehundred2" class="label">5</label>

        <div class="progress2">
            <div class="progress-bar"></div>
        </div>
    </section>
</body>
</html>

css:

body {
  font: 13px/20px 'Lucida Grande', Tahoma, Verdana, sans-serif;
  color: #404040;
  background: #323232;
}
.container {
  margin: 80px auto;
  width: 640px;
  text-align: center;
}
.container .progress, .container .progress2 {
  margin: 0 auto;
  width: 150px;
}
.progress, .progress2 {
  padding: 4px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 6px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25), 0 1px rgba(255, 255, 255, 0.08);
}
.progress-bar {
  position: relative;
  height: 10px;
  border-radius: 4px;
  -webkit-transition: 0.4s linear;
  -moz-transition: 0.4s linear;
  -o-transition: 0.4s linear;
  transition: 0.4s linear;
  -webkit-transition-property: width, background-color;
  -moz-transition-property: width, background-color;
  -o-transition-property: width, background-color;
  transition-property: width, background-color;
  -webkit-box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.25), inset 0 1px rgba(255, 255, 255, 0.1);
}
.progress-bar:before, .progress-bar:after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
}
.progress-bar:before {
  bottom: 0;
  border-radius: 4px 4px 0 0;
}
.progress-bar:after {
  z-index: 2;
  bottom: 45%;
  border-radius: 4px;
  background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  background-image: -moz-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  background-image: -o-linear-gradient(top, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.05));
}
.twenty:checked ~ .progress > .progress-bar, .twenty2:checked ~ .progress2 > .progress-bar {
  width: 20%;
  background-color: #f63a0f;
}
.fourty:checked ~ .progress > .progress-bar, .fourty2:checked ~ .progress2 > .progress-bar {
  width: 40%;
  background-color: #f27011;
}
.sixty:checked ~ .progress > .progress-bar, .sixty2:checked ~ .progress2 > .progress-bar {
  width: 60%;
  background-color: #f2b01e;
}
.eighty:checked ~ .progress > .progress-bar, .eighty2:checked ~ .progress2 > .progress-bar {
  width: 80%;
  background-color: #f2d31b;
}
.onehundred:checked ~ .progress > .progress-bar, .onehundred2:checked ~ .progress2 > .progress-bar {
  width: 100%;
  background-color: #86e01e;
}
.radio {
  display: none;
}
.label {
  display: inline-block;
  margin: 0 5px 20px;
  padding: 3px 8px;
  color: #aaa;
  text-shadow: 0 1px black;
  border-radius: 3px;
  cursor: pointer;
}
.radio:checked + .label {
  color: white;
  background: rgba(0, 0, 0, 0.25);
}

this works great on me, you'll just need to modify the next name, class, and css of the next progress bars..

In this case, I tried adding progress2, twenty2 and so on the next progress bars..

Well, If you want to create so many progress bars in a page, you may want to make the html inside php loop or you can use jQuery to manipulate the DOM...

hope this works!

catzilla
  • 1,901
  • 18
  • 31
  • Forgot the change the name for the second group myself. Thank you so much for going through the code and helping me out! – Stephan-v Apr 27 '13 at 16:01
1

For your second progress group you need to change the following

  • the id of each input element (radio not checkbox)
  • the for attribute of the labels to correspond with the new id of the input elements
  • the name of the input elements, since they are radio button which get grouped by name

So a second group would result to this html structure

<section class="container">
    <input type="radio" class="radio twenty" name="progress-2" value="twenty" id="twenty-2" />
    <label for="twenty-2" class="label">1</label>
    <input type="radio" class="radio fourty" name="progress-2" value="fourty" id="fourty-2" />
    <label for="fourty-2" class="label">2</label>
    <input type="radio" class="radio sixty" name="progress-2" value="sixty" id="sixty-2" />
    <label for="sixty-2" class="label">3</label>
    <input type="radio" class="radio eighty" name="progress-2" value="eighty" id="eighty-2" />
    <label for="eighty-2" class="label">4</label>
    <input type="radio" class="radio onehundred" name="progress-2" value="onehundred" id="onehundred-2" />
    <label for="onehundred-2" class="label">5</label>
    <div class="progress">
        <div class="progress-bar"></div>
    </div>
</section>

Working demo at http://jsfiddle.net/gaby/mfNYu/1/

Gabriele Petrioli
  • 191,379
  • 34
  • 261
  • 317
  • Thanks, I don't work with radio buttons that much so I forgot the edit the name for the second group and group them all together. Doh. Thanks a lot for going through this bunch of code though! – Stephan-v Apr 27 '13 at 16:01