Kim Knits: A widget for you

Saturday, April 28, 2007

A widget for you

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.

Over 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

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.

7 comments:

Anna said...: I just added the progress tracker to my blog and my knitting gallery. Thank you so much for figuring it out.; 7:43 PM
Kim said...: Glad it worked...I just left you a little additional info :-); 8:15 PM
Becka said...: WTG widget maker!!!! As I said on KR, I used the code, but don't know how to make a widget, Jacquie finally explained it in such a way that I understood it...duh me, but, that's how it goes with me and computers, LOL!; 10:57 AM
Unknown said...: OK - I need help, if you are willing. I installed it, but the graphics aren't working. I understand I have to change the link, but that's when I get confused. I can upload graphics - but where do I get the graphics to upload? And then which of graphics url's do I put in the widget?? Please email me & help!
anastaciaknits @ verizon dot net; 5:45 PM
fleegle said...: Ah, Kim, you might want to check the spelling on Progess...I think you would like it better as Progress?

Thanks for the widget!; 10:13 PM
Kim said...: Well, I suppose one could spell it that way ;-) Thanks for the heads up Fleegle, should be all better now.; 8:23 AM
HomeMadeOriginals said...: I could also use some help with the graphics part. I see how to change the text so it shows my item, but where do I get the graphics. Can I post them on Flickr and link to there?
Thanks.; 8:58 PM

Post a Comment

Add Progress Tracker to your blog!

<div style="position:relative; left:0px; top:0px;">
                        
                    <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, mitten, mystery, blanket, cardigan
   
   projects[projects.length] = "Cotton Hoodie, 50, cardigan";
   projects[projects.length] = "Jaywalker, 60, sock";

// 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 = "aqua";
   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" style="font-weight:bold;" src="YOURLINK/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>     
                        <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, cardigan, mitten, mystery, blanket, shawls 
   
   projects[projects.length] = "SPINNING, 100, sheep";
   projects[projects.length] = "Kureyon Scarf, 40, scarf";

// 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;";

width="118" style="position:relative; left:0px; top:0px;"><div style="position:relative; left:0px; top:0px;">');
      document.write('<div style="' + styleImg + '"><img border="0" width="121" height="50"

src="http://mysite.verizon.net/kim.williams2/knit_tracker/images/sm_' + type +'_clear.gif"></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" height="' + amtWhite +'"

src="http://i5.photobucket.com/albums/y181/ferryfax/clear.gif"/></div>');
      document.write('</div></td><td><span style="' + fontStyle + '"><b>'+name+'</b>: ' + percent + '%</span>');
        document.write('</td></tr>');
   }
   document.write('</table>');

</script></div>

Kim Knits

Contributors

Blogs I read

Saturday, April 28, 2007

A widget for you

7 comments:

Progress Tracker

Add Progress Tracker to your blog!

Completed Projects

Click for archives