2

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

1 Answer 1

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:

enter image description here

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

2
  • Thanks a lot mate, you saved me a lot of hours. I knew that there was a syntax error because Netbeans said me, but a am a beginner in jQuery and a little bit in Javascript. By the way, i put a <p> in my code, because I saw it in accordion's Jquery UI exemple. I don't know if it change something, because i am in HTML5 and not in XHTML5(what is a difference?), but I will change it quickly. Anyway, thanks a lot for your help! ^^
    – Atem18
    Apr 21, 2012 at 19:37
  • I know dude. But I did it with an another account, because I did a mistake. So I can't accept the answer with my account. :/ EDIT : I can do it now. ^^
    – Atem18
    Jun 20, 2012 at 13:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.