How to display multiples jQueryUI progressbars in a page in Drupal 7?

Question

I am developping my personnal website with Drupal 7. I would like to show a progressbar for each of my skills, but with differents values.

For exemple, I would like to see a progressbar under (or between if possible) a text, and (also if possible) with a percentage.

So I tried to use jQuery UI to solve my problem.

I want all my progressbars with a different value for each. Below, an exemple of the code of my website :

<?php
drupal_add_library('system', 'ui.accordion');
drupal_add_library('system', 'ui.progressbar');
drupal_add_js('jQuery(document).ready(function(){jQuery("#accordion").accordion();});', 'inline');
drupal_add_js('jQuery(document).ready(function() {jQuery(".progressbar").progressbar({ value: 37 });', 'inline');
?>

<div id="accordion">
<h3><a href="#">RÉSEAU</a></h3>
<div>
<p><h4>Windows Server 2008</h4>
<div class="progressbar" rel="50">50%</div>

<h4>Ubuntu Server</h4>
<div class="progressbar" rel="50">50%</div>

<h4>Virtualbox</h4>
<div class="progressbar" rel="90">90%</div>
</p>
</div>

But it does not work.

To solve that problem, I tried that kind of code found on that website, but I does not work for me, when I include it in drupal like that :

<?php
drupal_add_js('jQuery("div.progressbar").each (function () {var element = this;jQuery(element).progressbar({value: parseInt(jQuery(element).attr("rel"))});});', 'inline');
?>

<div class="progressbar" rel="90"></div>

Perhaps, I am in wrong, but any answer would be so great. Thank you in advance. :)

Answer 1

Your first code example for the progress bar has a small syntax error (missing a }); at the end of the line). I'm not sure exactly why your second example doesn't work, (I didn't try it) but this code works perfectly for me using your HTML as an example:

drupal_add_js("
  (function($) {
    $(function() {
      $('.progressbar').each(function() { 
        var val = $(this).attr('rel');
        $(this).progressbar({ value: parseInt(val) });
      });
    });
  })(jQuery);",
  'inline'
);

This code produces:

EDIT

I've just noticed you have some invalid HTML in your code which probably won't help. You're wrapping <h4> and <div> tags in a <p> tag, which is invalid XHTML. It might not be the problem but it would be better practice to change that <p> to a <div>.