Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Feature Discussion > Jquery only running for Super Admins
LoranWoW (New Admin) 12/8/2010 7:48 PM EST : Jquery only running for Super Admins
LoranWoW
Posts: 95
Posts With Wolves

Hi there

I am using jquery in a couple of places on my site.
My members were complaining that things did not look right, and I managed to deduce that the jquery scripts only worked for Super Admin users.

Any idea why this would be the case? Or is it very much a bug?

Ryan

Edit: It has occurred to me that the jquery might actually be working, but the CSS files that go with it are not.
TopBottom

Mottie (MVP) 12/9/2010 10:48 AM EST : RE: Jquery only running for Super Admins
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hi LoranWoW!

It appears that jQuery is working, but the page isn't loading your progress bar script. I'm guessing you are using the jQuery UI version? If so, it is missing the following:
  • Loading jQuery UI
  • Loading jQuery UI CSS
  • The background image needs the full path URL, it is currently "images/pbar-ani.gif" (a relative path).
which can be done by adding the following to the top of the same widget:
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/ui-darkness/jquery-ui.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
You can change the base theme by:
  • Go to this site: http://jqueryui.com/themeroller/
  • Click on the Gallery tab and finding a theme you like.
  • Replace the name (in blue) in the code above with the name of the theme you selected... make the name all lower case and replace all spaces with a dash, so "Le Frog" would become "le-frog". Then replace "ui-darkness" above with that name.
Also, in your HTML, "Deadnagel346Bar" should be "Deadangel346Bar"

OR, I think it might be better to revise the script a bit and not require jQuery UI or the css. You could try this, using the same HTML, but have the whole thing wrapped in a div with the class "character-progress":
<style type="text/css">
 .ui-progressbar { height:1em; text-align: left; }
 .ui-progressbar .ui-progressbar-value {margin: -1px; height:100%; }
 .ui-widget { font-family: Segoe UI, Arial, sans-serif; font-size: 1.1em; }
 .ui-widget-content { border: 1px solid #444444; background: #333333 url() 50% bottom repeat-x; color: #ffffff; }
 .ui-widget-content a { color: #ffffff; }
 .ui-widget-header { border: 1px solid #333333; background: #771cc1 url(http://www.axiomfiles.com/Files/258012/bar.png) 50% 50% repeat-x; color: #ffffff; font-weight: bold; }
 .ui-corner-all { -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; }
</style>
<script type="text/javascript">
  $(function(){
    var pb = {
      // Name : [ level, % 333+ gear, % 346+ gear ] - do not include the % sign
      // Joe : [ 85, 100, 50 ]
      // Tanks

      Begone    : [ 82, 0, 0 ],
      Loran     : [ 82, 0, 0 ],
      // Healers
      Anjel     : [ 83, 0, 0 ],
      Creechy   : [ 80, 0, 0 ],
      Dachia    : [ 80, 0, 0 ],
      Dreadrose : [ 80, 0, 0 ],
      Teeyani   : [ 80, 0, 0 ],
      // DPS
      Bratessie : [ 80, 0, 0 ],
      Darkgrey  : [ 82, 0, 0 ],
      Deadangel : [ 82, 0, 0 ],
      Elnath    : [ 80, 0, 0 ],
      Kredis    : [ 82, 0, 0 ],
      Skyye     : [ 80, 0, 0 ],
      Zadkiel   : [ 82, 0, 0 ],
      Zinna     : [ 82, 0, 0 ]
    };
    $('.character-progress div[id$=Bar]')
    .addClass('ui-progressbar ui-widget ui-widget-content ui-corner-all')
    .append('<div class="ui-progressbar-value ui-widget-header ui-corner-all"></div>');
    for ( b in pb ){
      $('#' + b + 'ProgressBar .ui-widget-header').width( (pb[b][0] - 80) * 20 + '%' );
      $('#' + b + '333Bar .ui-widget-header').width( pb[b][1] + '%' );
      $('#' + b + '346Bar .ui-widget-header').width( pb[b][2] + '%' );
    }
  });
</script>
TopBottom

EdgeAdministrator (New Admin) 12/9/2010 11:53 AM EST : RE: Jquery only running for Super Admins

EdgeAdministrator
Posts: 1

Mottie, that is absolutely superb. I cannot thank you enough for your help.
TopBottom

Mottie (MVP) 12/9/2010 6:26 PM EST : RE: Jquery only running for Super Admins
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Oops, I forgot to add that the modified code I added above requires that all the tables be wrapped in a div of class "character-progress".
TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%