Image

Imageneoqbacca wrote in Imagejavascript

Help ?!

Hello.

This is a total plea for help. I consider myself very computer literate, but I don't know javascript. I'd like to have this cute little knitting progress tracker appear on my LJ, but I can't seem to figure out exactly where to paste the code. I can host the images on my own, so that's not the problem. If anyone can try to explain to me what to do, I'd be super appreciative! If you need to talk to me, you can get me on AIM as Neoqbacca or MSN as blakehr@gmail.com

Here is the website that explains the code and how to make it work:
http://www.indigirl.com/knit_tracker/


I am pasting it here after encoding it from the webside listed on your community's info.

<div style="position:relative; left:0px; top:0px;">
<script type="text/javascript" language="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] = "Janda, 75, sweater";
    projects[projects.length] = "Cleo, 100, tank";
    projects[projects.length] = "Toque, 80, hat";
    projects[projects.length] = "Regia Socks, 50, sock";
    projects[projects.length] = "Kureyon Scarf, 40, scarf";
    projects[projects.length] = "Felted Bag, 100, bag";
    
    
    // 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:absolute; left:0px; width:121px; height:50px;";
    
    document.write("<center>");
    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];
        
        position=eval(projHeight*(i-1));
        var styleFilter=genericStyle + "top:" + position +"px; z-index:2;";
        var styleImg=genericStyle + "top:" + position +"px; z-index:3;";
        
        document.write("<div style='" + styleImg + "'><img src='/knit_tracker/images/sm_" + type +"_clear.gif' width='121' height='50' border='0'><br />");
        document.write("<span style='" + fontStyle + "'><b>"+name+"</b>: " + percent + "%</span></div>");
        
        var amtWhite = 50 - (50*(.01*percent));
        var whichFill = wipColor;
        
        if(amtWhite == 0) {
            whichFill = foColor;
        }
        document.write("<div style='" + styleFilter + " background-color:" + whichFill + ";'><img src='/knit_tracker/images/white.gif' width='121' height='" + amtWhite +"' /></div>");
    }
    document.write("</center>");
</script>




Thank you so much !!!

LJ Video