|
|
| View previous topic :: View next topic |
| Author |
Message |
jacquie
Site Admin
Joined: 31 Jan 2007
Posts: 102
Location: Salt Lake City, Utah, USA
|
 Posted: Sun Feb 04, 2007 12:35 am Post subject: More fun WIPS! |
 |
|
Terri of http://terriknits.blogspot.com/ has kindly allowed us to use the progress script her DH wrote for her blog so here it is.
There are 4 steps involved in getting this on your blog.
1) You need to save these images and upload then to your photo host in the usual way.
2) Add an HTML side bar element to your blog and put this code in it:
| Code: |
<!-- Start - place holder where WIPS will be displayed -->
<div id="terriKnitsWIP"><h2 class="sidebar-title">CURRENT WIP'S</h2></div>
<!-- End - place holder where WIPS will be displayed --><script type="text/javascript">
|
You can change "CURRENT WIP'S" to the title of your choice if you like.
3) Add another HTML sidebar element under the first one and add the code below. Or if you can get to your template code add the code below just after the </body> tag.
| Code: |
<script type="text/javascript">
//Originally created for Terri Knits (http://terriknits.blogspot.com/)
function createWIP(intPercentComplete,strColor,strDescription){
intPercentDone = (intPercentComplete * 0.6) + 20
intBottomMargin = 100 - intPercentDone - 20
var str = ""
str += '<table width="200">'
str += ' <tr>'
str += ' <td width="60">'
str += ' <div style="position:relative;background-color:'+strColor+';height:'+intPercentDone+'px;width:60px;margin-bottom:'+intBottomMargin+'px;">'
str += ' <span style="position:absolute;">'
str += ' <img src="YOUR LINK TO needles.gif" style="display:block;"/>'
str += ' <img src="YOUR LINK TO garment.gif" style="display:block;" onclick="infoWin = window.open(\'\',\'newWindow\',\'width=200,height=100\');infoWin.document.write(\'<H4>WIP Progress:<br />Originally Created for <br /><a href=http://terriknits.blogspot.com target=blank>Terri Knits Blog</a></H4>\')"/>'
str += ' </span>'
str += ' </div>'
str += ' </td>'
str += ' <td>'
str += strDescription + '<br />'
str += ' <span style="color:Red;">'+intPercentComplete+'%</span>'
str += ' </td>'
str += ' </tr>'
str += '</table>'
document.getElementById("terriKnitsWIP").innerHTML += str
}
<!-- Add WIPs here -->
<!--End of WIPs -->
</script>
|
Replace YOUR LINK TO needles.gif and YOUR LINK TO garment.gif with the URLs provided by your picture host for the images you uploaded in step 1).
4) Now for each WIP you want to display add the following line of code between the lines where it says '<!--Add WIPs here -->' and '<!-- End of WIPs -->'
| Code: |
createWIP(percent,"colour","name")
|
replacing "percent" with a number 0-99, "colour" with the colour you want it displayed in and "name" with the name of the item you are making.
Here is an example:
| Code: | createWIP(99,"red","sweater")
|
_________________
Jacquie
Jacquie's Journal
Crafty Threads 'n' Yarns |
|
| Back to top |
|
 |
Becka
Joined: 07 Apr 2007
Posts: 13
Location: Southeastern USA
|
|
| Back to top |
|
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
FAQ
Search
Memberlist
Usergroups
Join! (free) 
Profile
Log in to check your private messages
Log in
