Bloggers' Paradise

jacquie · Posted: Sun Feb 04, 2007 12:32 am Post subject: 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.

Renocat · Joined: 05 Mar 2007 Posts: 5

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

jacquie · Posted: Mon Mar 05, 2007 2:40 am Post subject:

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

Jacquie's Journal
Crafty Threads 'n' Yarns

Renocat · Joined: 05 Mar 2007 Posts: 5

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 · Posted: Tue Mar 06, 2007 2:13 pm Post subject:

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!
_________________
Jacquie

Jacquie's Journal
Crafty Threads 'n' Yarns

dee · Joined: 26 Mar 2007 Posts: 3 Location: uk

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!!
_________________
http://dee.typepad.com

jacquie · Posted: Mon Mar 26, 2007 2:04 pm Post subject:

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

Jacquie's Journal
Crafty Threads 'n' Yarns

Renocat · Joined: 05 Mar 2007 Posts: 5

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 · Posted: Tue Mar 27, 2007 2:39 am Post subject:

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

Jacquie's Journal
Crafty Threads 'n' Yarns

jacquie · Posted: Tue Mar 27, 2007 3:42 am Post subject:

Please try this out:

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

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

_________________
Jacquie

Jacquie's Journal
Crafty Threads 'n' Yarns