Results 1 to 5 of 5

Thread: Progress Bar with Images

  1. #1
    Join Date
    Dec 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Progress Bar with Images

    I found the probress bar on this site that uses xp_progress.js http://www.dynamicdrive.com/dynamici...rogressbar.htm
    which is really cool and I think will help me. However I really want to take it a step further and instead of having a gradient progress I would like to be able to have an image(s) progress across the bar. Say like have chili peppers progress across the bar like the gradient does.

    Is there something on this site like that? Is it possible to modify xp_progress.js to do something like that? Is there something around like that so I don't have to re-invent the wheel?

    Forgive me, I am not very fulent in JS.

    Thanks for any input.

    Wes

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,133
    Thanks
    44
    Thanked 3,229 Times in 3,190 Posts
    Blog Entries
    12

    Default

    Here is where the blocks for the bar are created in xp_progress.js:

    Code:
    function createBar(w,h,bgc,brdW,brdC,blkC,speed,blocks,count,action){
    if(ie||w3c){
    var t='<div id="_xpbar'+(++N)+'" style="visibility:visible; position:relative; overflow:hidden; width:'+w+'px; height:'+h+'px; background-color:'+bgc+'; border-color:'+brdC+'; border-width:'+brdW+'px; border-style:solid; font-size:1px;">';
    t+='<span id="blocks'+N+'" style="left:-'+(h*2+1)+'px; position:absolute; font-size:1px">';
    for(i=0;i<blocks;i++){
    t+='<span style="background-color:'+blkC+'; left:-'+((h*i)+i)+'px; font-size:1px; position:absolute; width:'+h+'px; height:'+h+'px; '
    t+=(ie)?'filter:alpha(opacity='+(100-i*(100/blocks))+')':'-Moz-opacity:'+((100-i*(100/blocks))/100);
    t+='"></span>';
    }
    t+='</span></div>';
    document.write(t);
    var bA=(ie)?document.all['blocks'+N]:docume . . .
    Let's zoom in and make changes (add/change the green, get rid of the red):

    Code:
    for(i=0;i<blocks;i++){
    t+='<img src="mygif.gif" style="background-color:'+blkC+'; left:-'+((h*i)+i)+'px; font-size:1px; position:absolute; width:'+h+'px; height:'+h+'px; '
    t+=(ie)?'filter:alpha(opacity='+(100-i*(100/blocks))+')':'-Moz-opacity:'+((100-i*(100/blocks))/100);
    t+='"></span>';
    }
    The mygif.gif can be any image you like, the path can be included if desired, just like in a normal HTML image ( <img src="images/whatever.gif"> ) tag.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Dec 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    John,

    Wow, thanks! I haven't had a chance to try tyhis out yet but I'll get back here as soon as I plug it all together here in the next few days.

    Thanks again!

    Wes

  4. #4
    Join Date
    Dec 2006
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    That was neat. I was able to get an image to progress across the bar.

    I looked but didn't see anything apparent that would give me any "width" adjustment of the scroll blocks. They are square, but can I make them rectangle to accept an image say, that is "40 X 20" and not "20 X 20" for example?

    Thanks.

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    29,133
    Thanks
    44
    Thanked 3,229 Times in 3,190 Posts
    Blog Entries
    12

    Default

    Two ways to go here that I see. The first requires a little image editing skill and is the one I prefer here due to how small the image is or should be and the posibility of unexpected results with the second method. It goes like so:

    Edit your image in an image editing program so that it is a square. To maintain the aspect ratio of the image itself, you can add transparent borders or borders that are the same color as the background of the image or of the progress bar's or whatever color you like. Many image editing programs can do this easily via an increase canvas size option.

    The second requires editing the script and the results may be different than I expect, at least with some image sizes. The script assumed square blocks with each side equal to the height of the bar so, our added image had to be square. We could add a parameter here for the width of the image (this time all additions and changes are red):

    Code:
    <script type="text/javascript">
    var bar1= createBar(300,15,'white',1,'black','blue',85,7,3,"",20);
    </script>
    and use it by adding it to the function like so:

    Code:
    function createBar(w,h,bgc,brdW,brdC,blkC,speed,blocks,count,action,iw){
    if(ie||w3c){
    var t='<div id="_xpbar'+(++N)+'" style="visibility:visible; position:relative; overflow:hidden; width:'+w+'px; height:'+h+'px; background-color:'+bgc+'; border-color:'+brdC+'; border-width:'+brdW+'px; border-style:solid; font-size:1px;">';
    t+='<span id="blocks'+N+'" style="left:-'+(h*2+1)+'px; position:absolute; font-size:1px">';
    for(i=0;i<blocks;i++){
    t+='<img src="mygif.gif" style="background-color:'+blkC+'; left:-'+((h*i)+i)+'px; font-size:1px; position:absolute; width:'+iw+'px; height:'+h+'px; '
    t+=(ie)?'filter:alpha(opacity='+(100-i*(100/blocks))+')':'-Moz-opacity:'+((100-i*(100/blocks))/100);
    t+='">';
    }
    t+='</span></div>';
    document.write(t);
    var bA=(ie)?document.all['blocks'+N]:docume . . .
    Notes: Be sure to scroll far enough to the right to see both changes in the above code block. The height of the image will still be the height of the bar. The bar's width must be set wide enough to accommodate all the image blocks' widths added together and then some. The wider your image relative to its height, the more likely this is to cause problems, though any dimensions may be fine. OR, it might be that any image that is not square will mess up another part of the script.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •