WebComponent: Progress Bar

Forums

My Profile

Inbox

Address Book

My Subscription

My Forums

WebComponent: Progress Bar

Logged in as: Guest

arrSession:exec spGetSession 2,16,54998

	Active Users: There are 0 members and 0 guests.
	Users viewing this topic: none

Printable Version

All Forums >> [Scripting] >> Post a VBScript >> WebComponent: Progress Bar
Do you like VisualBasicScript.com? Link to us and help spread the word about our forum. Thanks!

Page: [1]

Message

<< Older Topic Newer Topic >>

WebComponent: Progress Bar - 1/6/2008 12:59:53 PM

TNO

Posts: 1036
Score: 10
Joined: 12/18/2004
From: thenewobjective.com
Status: offline

Probably 2-3 times a month we see questions about progress bars. In response, here's a progress bar to implement in your webpages/HTML Applications:

The biggest benefit here is not relying on the <object> tag and assuming that the ActiveX Component is installed.

Put this is a separate library (vbsProgress.vbs in this example)

Class prog
 Public Function init()
    Dim newDiv
    Set newDiv = document.createElement("div")
    newDiv.innerHTML ="<div id='_progress' style='position:fixed;top:0px;left:0px;height:200px;width:400px;background-color:black;color:white;z-index:1000;display:none;'><div id='_LB0' style='position:absolute;left:50%;top:50%;'><div style='position:absolute;font-family:arial;font-size:10px;color:#FFFFFF;left:-50px;top:-18px;'><div id='_message'>Working...</div><div id='_status'></div></div><div style='position:absolute;left:-50px;;top:-5px;font-size:1px;width:100px;height:10px;background:#333'><div id='_LB1' style='position:absolute;left:0px;top:0px;font-size:1px;width:0px;height:10px;background:#FFFFFF'></div></div></div></div>"

document.body.appendChild(newDiv)
 End Function

Public Function progress(part,whole)
    If(part >= whole) Then
        Progress.hide()
    Else
        document.getElementById("_status").innerText=round(part/whole*100) & "%"
        document.getElementById("_LB1").style.width=round(part/whole*100) & "px"
    End If
 End Function

Public Function show()
    Dim p
    Set p = document.getElementById("_progress")
    p.style.display = ""
    p.style.top = (screen.availHeight/2 - 200) & "px"
    p.style.left = (screen.availWidth/2 - 200) & "px"
 End Function
 
 Public Function hide()
    document.getElementById("_progress").style.display = "none"
 End Function
End Class

Dim Progress

Set Progress = New prog

A sample page:

And finally the API:

API:
Progress.init() <--do this before using the progress bar so it loads the bar to the page <body onload="Progress.init()"> or similar.
Progress.show() <--Show the progress bar
Progress.hide() <--hide the progress bar
Progress.progress(part,whole) <--update progress

< Message edited by TNO -- 1/6/2008 1:05:36 PM >

_____________________________

Consolidated Script Component: The Acid Test

A universe of complexity...