Archive for Bloggers' Paradise The forum for personal bloggers to get help and share knowledge on all aspects of blogging.
 



       Bloggers' Paradise Forum Index -> Code Exchange
jacquie

Sweet HTML Morsels Progress Bars

My Progress Bars came from
http://www.unlikelywords.com/html-morsels

but is not currently available. You are perfectly allowed to copy it from here though. It has two parts. This first part must be installed above the second part and if you can get to the <head> tag of your template it can go in there, otherwise somewhere in the <body> tags will be fine.

Code:
<script language="javascript">
  // drawPercentBar()
  // Written by Matthew Harvey (matt AT unlikelywords DOT com)
  // (http://www.unlikelywords.com/html-morsels/)
  // Distributed under the Creative Commons
  // "Attribution-NonCommercial-ShareAlike 2.0" License
  // (http://creativecommons.org/licenses/by-nc-sa/2.0/)
  function drawPercentBar(width, percent, color, background)
  {
    var pixels = width * (percent / 100);
    if (!background) { background = "none"; }
 
    document.write('<div style="position: relative; line-height: 1em; background-color: '
                   + background + '; border: 1px solid black; width: '
                   + width + 'px">');
    document.write('<div style="height: 1.5em; width: ' + pixels + 'px; background-color: '
                   + color + ';"></div>');
    document.write('<div style="position: absolute; text-align: center; padding-top: .25em; width: '
                   + width + 'px; top: 0; left: 0">' + percent + '%</div>');
    document.write('</div>');
  }
</script>


The second part is repeated for each progress bar you want to draw and you set the values in parentheses to reflect your progress.

Code:
<script language="javascript">drawPercentBar(100, 100, 'teal', 'white'); </script>


The first number is the width of the bar in pixels - experiment with this to get it right for your sidebar.

The second is the percent progress you want to show,

The third is the color of the progress bar and the fourth is the color of the background.

I don't know where the little garment progress bars come from - I hope someone else can enlighten us Smile
Renocat

I have the code for the garmet progress bars. I just can't get it to work in the new blogger.
jacquie

Welcome to Bloggers' Paradise!

Try copying the code from the above post. It has been edited to work with the new Blogger which is much stricter with HTML and Javascript.

If that doesn't work then please feel free to ask again.
Renocat

Hi Jacquie,

I got the progress bars you posted working. I also got the ones from Terriknits working but prefered the clean lines of the ones above.

I had a different code for the garment progress bars. You could specify many different types of garments and it would show a picture for each, ie, sweater, scarf, bag, blanket, cardigan, etc. I have tried many times to get that working but have given up. If anyone wants to give it a try, I would be happy to post the code.
jacquie

Please do and we'll see if we can work out how to get it going - as long as it's free for you to post of course.

Would you be able to post where you got it from originally?

Glad you got the sweet morsel ones working!
dee

Hi. I have the code for the knit tracker and cant get it to work on my blog without linking back to the persons website, when i try to link it to my images on photo bucket i just get coloured squares. iv almost given up now!
heres the link to the website

http://www.swatchnot.hender-son-s.com/finalyarnometer.html

They are free to use as long as you dont link back to the site!!
jacquie

I will try them out on my tester blog and get back to you soon.
Renocat

I still cannot get the progress tracker with the garments to work in the new blogger. I keep getting an error that says my XML is not well formed.
jacquie

I have been working on it all day and have it working with IE but Im not happy with it in FireFox.

I hope the owner of the code doesn't mind me messing with it, but she has withdrawn support and it does shame to let it go.
jacquie

Please try this out:
    From http://www.swatchnot.hender-son-s.com/finalyarnometer.html save the pictures you want to use and load them up to your picture host. Make sure they are all in the same album so that they all have the same url apart from the last part. The last part should be "sm_xxx_clear.gif" where xxx is sheep, sweater, scarf4 etc. This will be used later to identify which picture you want so it is very important.
    In Blogger go to your Template - Page Elements page and click on the Add a Page Element box and then choose the HTML/JavaScript option.
    Copy the following code into the text box on the next dialog box.
    Code:
        <div style="position:relative; left:0px; top:0px;">
                            
                         
                            <script language="Javascript" type="text/javascript">
       var projects = new Array();
       
       // set up projects like this: NAME, percent done, type
       // type can be: sweater, tank, hat, bag, sock, scarf
       
       projects[projects.length] = "SPINNING, 100, sheep";
       projects[projects.length] = "Kureyon Scarf, 40, scarf4";

       
       
       // set up the colors for works in progress (less than 100 percent) and finished objects (100 percent)
       // these can be hex codes, or color names (Green, Red, Blue, etc).
       
       var wipColor = "#33cc33";
       var foColor = "#9966ff";
       
       
       // edit this to get the fonts to display differently if you want
       
       var fontStyle="font-family:arial,helvetica,sans-serif; font-size:12px; color:#888888;";

       // set up height of standard project: adjust this if projects are overlapping
       var projHeight = 90;
       
       // initial vertical position from top of container. Adjust if you want.
       var position="0";
       
       // WARNING: Don't edit after this line unless you're a javascript queen!
       var numProjects = projects.length;
       var genericStyle = 'position:relative; left:-1px; width:121px; height:50px;';
       var otherStyle = 'position:absolute; left:0px; width:120px; height:50px;';
       
       document.write('<table border="0" style="position:relative; left:0px; top:0px;" width="200">');
       for(var i=1; i<=numProjects; i++) {
          var variables = projects[i-1].split(', ');
          var name= variables[0];
          var percent = variables[1];
          var type = variables[2];
          
          var styleFilter=otherStyle + 'top:0px; z-index:2;';
          var styleImg=genericStyle + 'top:0px; z-index:3;';
          document.write('<tr style="position:relative; left:0px; top:0px;"><td style="position:relative; left:0px; top:0px;" width="118"><div style="position:relative; left:0px; top:0px;">');
          document.write('<div style="' + styleImg + '"><img border="0" width="121" src="YOUR LINK/sm_' + type +'_clear.gif" height="50"></div>');
          
          var amtWhite = 50 - (50*(.01*percent));
          var whichFill = wipColor;
          
          if(amtWhite == 0) {
             whichFill = foColor;
          }
          document.write('<div style="' + styleFilter + ' background-color:' + whichFill + ';"><img width="121" src="http://i5.photobucket.com/albums/y181/ferryfax/clear.gif" height="' + amtWhite +'"/></div>');
          document.write('</div></td><td><span style="' + fontStyle + '"><b>'+name+'</b>: ' + percent + '%</span>');
            document.write('</td></tr>');
       }
       document.write('</table>');

    </script></div>   

    The lines
    Code:
    projects[projects.length] = "SPINNING, 100, sheep";
       projects[projects.length] = "Kureyon Scarf, 40, scarf4";

    are the ones that you have to change or add - one for each project you have. The first item eg SPINNING is what you want to call it, the number next is the % complete, the final item is the picture you want to display and must correspond to one of the xxxx in the names of your picture files.
    Also in the code you must replace where it says YOUR LINK with the common URL part you have for your pictures. (All but the sm_xxx_clear.gif part)
    When those changes are made you can save the page element and check if it works.
    Hopefully I have got it to play nicely both with Internet Explorer and FireFox but please let me know if you have any problems or if I need to explain anything better
dee

hey.. it `s working yeah Very Happy
I am still having a few problems with it though, when i changed the percentage there was a white line through it instead of the colour moving down and also the word sock is at the side of it instead of the bottom. Iv tried tweaking it but i then loose the image! Confused
Thanks for your help, ill have another look when im not so tired, at the moment i cant see the woods through the trees Confused
I got the same thing when i tried to change the hex code which says you can -i lost the image Crying or Very sad
funny thing though when i did change the percentage it changed colour
from green to purple... Confused
jacquie

I couldn't get it to work with the word at the bottom so I put it at the side instead.

It changes colour from green to purple when it goes to 100% done - it always did that.

I'll see if I can reproduce the white line problem and see what can be done to fix it. and what happens when you change the colour values.

thanks for testing it for me.
jacquie

When you set up the project values it is very fussy about the format - they have to be separated by a , and exactly one space or it can't find them. Could that explain why the image was lost?
dee

hi i have got the code too display correctly but, and here`s the but, i really hate those colours, so, i have been trying too tweak it with no luck.
The part of the code which says set up colours for progress. Do you think it means to set it up like the projects with the [] and hex codes - i noticed on the site that the colours can be changed i just cant seem to figure out how its done!




// set up the colors for works in progress (less than 100 percent) and finished objects (100 percent)
// these can be hex codes, or color names (Green, Red, Blue, etc).

var wipColor = "#33cc33";
var foColor = "#9966ff";

are these the hex codes you have to change? when i did that i lost the image!
jacquie

Yes they are the ones you need to change. The way it is set up there is just one colour for all WIPs and then it changes to the second colour when the % is set to 100% for an FO.

Please send me an example of what you changed it to exactly so I can reproduce the problem.
Becka

Hello one and all, I'm new to this forum and wanted to thank you very much for your crystal clear instructions on the (I believe) Indie girl WiP progress "projects"! I had tried unsuccessfully I don't know how many times to install them on my previous Blogger blog and I couldn't figure out what I was doing wrong and the key was having the pics stored in the same gallery....THANKS SO MUCH for finally making that clear! I've got them up and running on my blog now and it only took a very few moments to do so! Can't say it enough....THANKS!
jacquie

HI Becka,

So glad you were able to get the WIP code going. Welcome to this forum - hope you continue to find it useful.
Becka

I'm so sure that I will!
LOL, I canNOT even explain how aggravated I was with trying to put those particular progress trackers on my previous Blogger blog (pre-Beta)! But, there had there had never been a person that made it crystal clear as far as hosting the clear gifs in the same album! It makes perfect sense now....again...THANKS SO MUCH Very Happy Very Happy
Renocat

Finally

I finally got the progress tracker from indie girl working. The code above from Jacquie is what finally solved it.

As I was playing around with my blog, I decide to make a widget that might make it easier for others to add the progress tracker to their blog. It works for me but I am not sure it will work for others. So if you would like to try it out, let me know if it works.

Go to my blog http://kimsknitpage.blogspot.com/ and on the right hand side you will see my progress tracker and under that a button that says Add Progress Tracker. If you click on that, you will be taken to a blogger page that warns about adding untrusted content Smile WHen you click on the Add Widget button, the progress tracker will be added to your page. You then can go to your dashboard and edit where it is displayed. You will also need to edit the section of the code that says
Code:
projects[projects.length] = "SPINNING, 100, sheep";
   projects[projects.length] = "Kureyon Scarf, 40, scarf4";

so you get YOUR projects displayed Wink

You should also edit the section where it originally said YOUR LINK in the code to the location where you have your images stored. I left my link in there for now...if I get too many people using my images on my server, I will have to take that out of the code. I left it in so you can see that it is working.

Please let me know if this works or not. THis is my first attempt at making a widget.

Thanks!
Kim
jacquie

Thank you for making this widget and posting about it - it works very well for me.
Renocat

Glad it works. I tried to edit my post but I don't think I can. After thinking about it, I did remove the link to my images so you will have to edit the section that says YOURLINK
darcikles

knit tracker

I see the issues are resolved?

Or not?

IE, new blogger issues...uckkk.

So I changed mine to Cascading Style Sheets and put into blogger as a WIDGET code. New graphics are being made in addition the the 2 I alread have .

You may view new code at
http://www.swatchnot.hender-son-s.com/blog/


PS If there are any more changes to any of the code I have done, please let me know so I can post the "fixes"

thanks!

       Bloggers' Paradise Forum Index -> Code Exchange
Page 1 of 1
Create your own free forum | Buy a domain to use with your forum
Wordpress Themes|Free MP3 Downloads|Wordpress Themes|Wordpress Themes|Debt ConsolidationDebt Consolidation|Debt Consolidation|Debt Consolidation|Payday Loan|Free Credit Score