I need a HTML/CSS guru to please help me build 4 buttons in an html. The buttons must be styled differently for Normal, Mouseover, Mousedown (Click)
I have an HTML application (.hta) that contains four buttons. Three of these buttons contain only an icon and the fourth button contains text. I would like to use CSS to style these 4 buttons so that they effectively have three states:
State-1-Normal
State-2-Mouseover
State-3-Click
I have attached three images showing an example of what I'm roughly trying to achieve.
The four buttons is part of an .hta. I attach a sample of the working .hta with the best buttons I could muster by myself. Just extract the .zip to a folder, rename the Screen.txt to Screen.hta and run it. You will then get a good idea what the end product will look like. The buttons I built does not have a mouseover or mousedown(click) effect as I would like them to have. Basically I would like these buttons to behave and look like real buttons. I also built the whole button as an image but I would preferably just like to have a .png of the image and generate and style the remainder of the button with CSS/HTML code. (I believe that is the correct/best way of doing it?) The buttons need to be positioned with X and Y coordinates.
All the current code and images is inside the .zip. Be careful when you click the buttons as their function is to LogOff, Restart and PowerOff your PC. The fourth button does not currently have an action and it is ok if it just clicks but not perform an action.
This .hta have mostly been developed with help received from E-E and I am grateful for additional help as I (we) build this further.
1-Normal-State.jpg
2-Mouse-Over.jpg
3-Click.jpg
IconsForFinalButtons.zip
State-1-Normal
State-2-Mouseover
State-3-Click
I have attached three images showing an example of what I'm roughly trying to achieve.
The four buttons is part of an .hta. I attach a sample of the working .hta with the best buttons I could muster by myself. Just extract the .zip to a folder, rename the Screen.txt to Screen.hta and run it. You will then get a good idea what the end product will look like. The buttons I built does not have a mouseover or mousedown(click) effect as I would like them to have. Basically I would like these buttons to behave and look like real buttons. I also built the whole button as an image but I would preferably just like to have a .png of the image and generate and style the remainder of the button with CSS/HTML code. (I believe that is the correct/best way of doing it?) The buttons need to be positioned with X and Y coordinates.
All the current code and images is inside the .zip. Be careful when you click the buttons as their function is to LogOff, Restart and PowerOff your PC. The fourth button does not currently have an action and it is ok if it just clicks but not perform an action.
This .hta have mostly been developed with help received from E-E and I am grateful for additional help as I (we) build this further.
1-Normal-State.jpg
2-Mouse-Over.jpg
3-Click.jpg
IconsForFinalButtons.zip
Last Comment
ASKER
I am not sure if it's relevant but the .hta will run on a windows 7 or above machine. I believe the nternet explorer engine is used when you run a .hta. (Not sure if you set a default program for .hta's?) The size of the .hta program and it's dependencies (images, background) is not important as it will be cloned to hundreds of machines and only run from the local HDD. It is however important that the html code is well written as these machines are not always high spec. The current .hta (in the .zip) runs well enough performance wise.
ASKER
The following link also has a very good looking button. It feels natural.
http://cssdeck.com/labs/am
The CSS and HTML code is on that page and could be useful?
http://cssdeck.com/labs/am
The CSS and HTML code is on that page and could be useful?
ASKER
The following style is also acceptable.
http://codepen.io/BJack/pe
http://codepen.io/BJack/pe
You could use a sprite, like this:
And then set the background ONCE and use the background coordinates to show the required icon
And then set the background ONCE and use the background coordinates to show the required icon
input[name="button01"],input[name="button02"],input[name="button03"] {
background: url(sprite.jpg) !important;
background-size: inherit !important;
}
input[name="button01"]:hover {
background-position: -61px 0 !important;
}
input[name="button01"]:active {
background-size: -121px 0 !important;
}
input[name="button02"]:hover {
background-position: -61px -64px !important;
}
input[name="button02"]:active {
background-size: -121px -64px !important;
}
input[name="button03"]:hover {
background-position: -61px -126px !important;
}
input[name="button03"]:active {
background-size: -121px -126px !important;
}
ASKER
Thank you for that input Rob. I never knew that a sprite could be used like that. It will unfortunately not work because we would like to be able to change the three different state colors easily and without redoing the images in photoshop. We have put in allot of work since I posted this (a day ago) and we have something which almost works perfect. Two of the three states works now except on the mouse down/active state. I will attach the code below. Someone that knows CSS well could probably solve the riddle in one minute flat. (Or I'm just being overly optimistic as always).
I attached a .zip file containing the images and everything so you can see exactly what happens. I disabled the vbscripts for each button so you cannot accidentally PowerOff or anything like that. Just rename the ScreenV11.txt to .hta
E-E-Sample.zip
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name=VI60_defaultClientScript content=VBScript>
<title></title>
<HTA:APPLICATION
ID="objScreen"
APPLICATIONNAME="Screen"
BORDER="none"
BORDERSTYLE="normal"
CAPTION="no"
ICON=""
MAXIMIZEBUTTON="no"
MINIMIZEBUTTON="no"
SHOWINTASKBAR="yes"
SINGLEINSTANCE="yes"
SYSMENU="no"
SCROLL="no"
VERSION="1.0"
CONTEXTMENU="no"
WINDOWSTATE="maximize"
INNERBORDER="no"/>
<style>
html,
body {
font-family: sans-serif;
}
.btn {
width:55px;
height:55px;
position:absolute;
display:block;
padding:5px;
-webkit-border-radius: 3px;
-moz-border-radius:3px;
border-radius: 3px;
border:0;
}
.btn-lg {
position:absolute;
width:150px;
height:55px;
font-size:13pt;
text-align:center;
border:0;
-webkit-border-radius: 3px;
-moz-border-radius:3px;
border-radius: 3px;
}
.btn-log-off {
position: absolute;
background: url("LogOff.png") no-repeat center #3E535E;
left:886px;
top:535px;
}
.btn-log-off:hover {
background: url("LogOffB.png") no-repeat center #3E535E;
}
.btn-log-off:active {
background: url("LogOffB.png") no-repeat center #32434C;
}
.btn-restart {
position: absolute;
background: url("Restart.png") no-repeat center #724F0F;
left:886px;
top:599px;
}
.btn-restart:hover {
background: url("RestartB.png") no-repeat center #724F0F;
}
.btn-restart:active {
background: url("RestartB.png") no-repeat center #573D0C;
}
.btn-power-off {
position: absolute;
left:886px;
top:663px;
background: url("Power.png") no-repeat center #602F2E;
}
.btn-power-off:hover {
background: url("PowerB.png") no-repeat center #5F2E2F;
}
.btn-power-off:active {
background: url("PowerB.png") no-repeat center #ffff00;
}
.btn-learning-marterials {
position: absolute;
left:720px;
top:615px;
color:#DADADA;
background-color:#28442E;
}
.btn-learning-marterials:hover {
color:#A2FF90;
background-color:#2B4931;
}
.btn-learning-marterials:active {
color:#A3FF90;
background-color:#223A27;
}
</style>
</head>
<BODY
BACKGROUND="PlatformV30.jpg"
TOPMARGIN="10"
RIGHTMARGIN="10"
LEFTMARGIN="10">
<Script Language="VBScript">
Sub LogOffPC()
Set objShell = CreateObject("WScript.Shell")
objShell.Run("shutdown -l -f"), 1, True
End Sub
Sub RestartPC()
Set objShell = CreateObject("WScript.Shell")
objShell.Run("shutdown -t 0 -r -f"), 1, True
End Sub
Sub PowerOffPC()
Set objShell = CreateObject("WScript.Shell")
objShell.Run("shutdown -t 0 -s -f"), 1, True
End Sub
Sub Window_OnLoad
' Size and position main window
window.resizeTo 1366,768
window.moveTo 0,0
' Display current time
myClock.innerText = Now()
' Set up a timer event so we can update the screen periodically
iTimerID = window.setInterval("myVBSClock", 1000)
End Sub
Sub myVBSClock
' Update current time
myClock.innerText = Now()
' Refresh colors from HWstatus file
CheckHWStatusFile
' Refresh colors from SWstatus file
CheckSWStatusFile
' Refresh data
RefreshData
End Sub
Function ComputerName()
' Get computername
Set wshShell = CreateObject("WScript.Shell")
ComputerName = wshShell.ExpandEnvironmentStrings("%COMPUTERNAME%")
Set wshShell = Nothing
End Function
Sub CheckSWStatusFile
' Constants for file I/O
Const ForReading = 1
Const ForWriting = 2
Const TriStateUseDefault = -2
' Name of SWstatus file
strSWStatusFile = "SWStatus.txt"
' Create file system object
Set objFSO = CreateObject("Scripting.FileSystemObject")
' Make sure SWstatus file exists
If objFSO.FileExists(strSWStatusFile) Then
' Open it for reading
Set objSWStatusFile = objFSO.OpenTextFile(strSWStatusFile, ForReading, False, TriStateUseDefault)
' Read SWstatus file, slit lines into array elements
arrSWStatus = Split(objSWStatusFile.ReadAll, vbCrLf)
' Close file, release objects
objSWStatusFile.Close
Set objSWStatusFile = Nothing
Set objFSO = Nothing
' Process each line of the SWstatus file (skip blank lines)
For Each strSWStatus in arrSWStatus
If strSWStatus <> "" Then
' Split SWstatus line into array at comma
arrField = Split(strSWStatus, ",")
' Process lines based on first field on line (item name to update), and set item color to SWstatus file value
Select Case arrField(0)
Case "ST01"
ST01.style.background = arrField(1)
Case "ST02"
ST02.style.background = arrField(1)
Case "ST03"
ST03.style.background = arrField(1)
Case "ST04"
ST04.style.background = arrField(1)
Case "ST05"
ST05.style.background = arrField(1)
Case "ST06"
ST06.style.background = arrField(1)
Case "ST07"
ST07.style.background = arrField(1)
End Select
End If
Next
End If
End Sub
Sub CheckHWStatusFile
' Constants for file I/O
Const ForReading = 1
Const ForWriting = 2
Const TriStateUseDefault = -2
' Name of HWstatus file
strHWStatusFile = "HWStatus.txt"
' Create file system object
Set objFSO = CreateObject("Scripting.FileSystemObject")
' Make sure HWstatus file exists
If objFSO.FileExists(strHWStatusFile) Then
' Open it for reading
Set objHWStatusFile = objFSO.OpenTextFile(strHWStatusFile, ForReading, False, TriStateUseDefault)
' Read HWstatus file, slit lines into array elements
arrHWStatus = Split(objHWStatusFile.ReadAll, vbCrLf)
' Close file, release objects
objHWStatusFile.Close
Set objHWStatusFile = Nothing
Set objFSO = Nothing
' Process each line of the HWstatus file (skip blank lines)
For Each strHWStatus in arrHWStatus
If strHWStatus <> "" Then
' Split HWstatus line into array at comma
arrField = Split(strHWStatus, ",")
' Process lines based on first field on line (item name to update), and set item color to HWstatus file value
Select Case arrField(0)
Case "HW01"
HW01.style.background = arrField(1)
Case "HW02"
HW02.style.background = arrField(1)
Case "HW03"
HW03.style.background = arrField(1)
Case "HW04"
HW04.style.background = arrField(1)
Case "HW05"
HW05.style.background = arrField(1)
Case "HW06"
HW06.style.background = arrField(1)
Case "HW07"
HW07.style.background = arrField(1)
Case "HW08"
HW08.style.background = arrField(1)
Case "HW09"
HW09.style.background = arrField(1)
Case "HW10"
HW10.style.background = arrField(1)
Case "HW11"
HW11.style.background = arrField(1)
Case "HW12"
HW12.style.background = arrField(1)
End Select
End If
Next
End If
End Sub
Sub RefreshData
' Constants for file I/O
Const ForReading = 1
Const ForWriting = 2
Const TriStateUseDefault = -2
intRows = 2
intCols = 2
' Name of status file
strDataFile = "db.csv"
' Create file system object
Set objFSO = CreateObject("Scripting.FileSystemObject")
' Make sure data file exists
If objFSO.FileExists(strDataFile) Then
' Open it for reading
Set objDataFile = objFSO.OpenTextFile(strDataFile, ForReading, False, TriStateUseDefault)
' Read data file, slit lines into array elements
arrData = Split(objDataFile.ReadAll, vbCrLf)
' Close file, release objects
objDataFile.Close
Set objDataFile = Nothing
Set objFSO = Nothing
' Process each line of the status file, updating html table data
For intRow = 0 To intRows
arrField = Split(arrData(intRow), ",")
Set objCell = document.getElementById("dbdata").rows(intRow).cells
For intCol = 0 To intCols
objCell(intCol).innerHTML = arrField(intCol)
Next
Set objCell = Nothing
Next
End If
End Sub
</SCRIPT>
<script language="javascript">
/* This script and many more are available free online at
The JavaScript Source :: http://www.javascriptsource.com
Created by: James Nisbet (morBandit) :: http://www.bandit.co.nz/ */
window.onload = function() {
document.onselectstart = function() {return false;} // ie
document.onmousedown = function() {return false;} // mozilla
}
</script>
<input
type="button"
name="button01"
class="btn btn-log-off"
onClick='vbscript:LogOffPC'/>
<input
type="button"
name="button02"
class="btn btn-restart"
onClick='vbscript:RestartPC'
/>
<input
type="button"
name="button03"
class="btn btn-power-off"
onClick='vbscript:PowerOffPC'
/>
<button type="button" class="btn-lg btn-learning-marterials">LEARNING<br/>MARTERIALS</button>
<SPAN
id="dbdataspan"
style="
top: 633px;
left: 1030px;
position: absolute;
z-index: 1;
color: #353535;
visibility: show;">
<table id="dbdata" style="width: 340px;height: 50px;color: #353535;font-family: Arial Black;font-size: 20px;font-weight: lighter;" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="height: 20px;width: 118px;text-align: center;">0<br></td>
<td style="height: 20px;width: 118px;text-align: center;">0<br></td>
<td style="height: 20px;width: 118px;text-align: center;">0<br></td>
</tr>
<tr>
<td style="height: 20px;width: 118px;text-align: center;">0<br></td>
<td style="height: 20px;width: 118px;text-align: center;">0<br></td>
<td style="height: 20px;width: 118px;text-align: center;">0<br></td>
</tr>
<tr>
<td style="height: 20px;width: 118px;text-align: center;">0<br></td>
<td style="height: 20px;width: 118px;text-align: center;">0<br></td>
<td style="height: 20px;width: 118px;text-align: center;">0<br></td>
</tr>
</tbody>
</table>
</SPAN>
<SPAN
id="ST01"
style="
top: 320px;
left: 480px;
width: 25px;
height: 25px;
position: absolute;
z-index: 1;
visibility: show;
background: #5d5d5d;">
</SPAN>
<SPAN
id="ST02"
style="
top: 348px;
left: 480px;
width: 25px;
height: 25px;
position: absolute;
z-index: 1;
visibility: show;
background: #5d5d5d;">
</SPAN>
<SPAN
id="ST03"
style="
top: 376px;
left: 480px;
width: 25px;
height: 25px;
position: absolute;
z-index: 1;
visibility: show;
background: #5d5d5d;">
</SPAN>
<SPAN
id="ST04"
style="
top: 404px;
left: 480px;
width: 25px;
height: 25px;
position: absolute;
z-index: 1;
visibility: show;
background: #5d5d5d;">
</SPAN>
<SPAN
id="ST05"
style="
top: 432px;
left: 480px;
width: 25px;
height: 25px;
position: absolute;
z-index: 1;
visibility: show;
background: #5d5d5d;">
</SPAN>
<SPAN
id="ST06"
style="
top: 460px;
left: 480px;
width: 25px;
height: 25px;
position: absolute;
z-index: 1;
visibility: show;
background: #5d5d5d;">
</SPAN>
<SPAN
id="ST07"
style="
top: 488px;
left: 480px;
width: 25px;
height: 25px;
position: absolute;
z-index: 1;
visibility: show;
background: #5d5d5d;">
</SPAN>
<SPAN
id="HW01"
style="
top: 320px;
left: 35px;
width: 25px;
height: 250px;
position: absolute;
z-index: 1;
visibility: show;
background: #5d5d5d;">
</SPAN>
<SPAN
id="HW02"
style="
top: 320px;
left: 70px;
width: 25px;
height: 25px;
position: absolute;
z-index: 1;
visibility: show;
background: #5d5d5d;">
</SPAN>
<SPAN
id="HW03"
style="
top: 348px;
left: 70px;
width: 25px;
height: 25px;
position: absolute;
z-index: 1;
visibility: show;
background: #5d5d5d;">
</SPAN>
<SPAN
id="HW04"
style="
top: 376px;
left: 70px;
width: 25px;
height: 25px;
position: absolute;
z-index: 1;
visibility: show;
background: #5d5d5d;">
</SPAN>
<SPAN
id="HW05"
style="
top: 404px;
left: 70px;
width: 25px;
height: 25px;
position: absolute;
z-index: 1;
visibility: show;
background: #5d5d5d;">
</SPAN>
<SPAN
id="HW06"
style="
top: 432px;
left: 70px;
width: 25px;
height: 25px;
position: absolute;
z-index: 1;
visibility: show;
background: #5d5d5d;">
</SPAN>
<SPAN
id="HW07"
style="
top: 460px;
left: 70px;
width: 25px;
height: 25px;
position: absolute;
z-index: 1;
visibility: show;
background: #5d5d5d;">
</SPAN>
<SPAN
id="HW08"
style="
top: 488px;
left: 70px;
width: 25px;
height: 25px;
position: absolute;
z-index: 1;
visibility: show;
background: #5d5d5d;">
</SPAN>
<SPAN
id="HW09"
style="
top: 516px;
left: 70px;
width: 25px;
height: 25px;
position: absolute;
z-index: 1;
visibility: show;
background: #5d5d5d;">
</SPAN>
<SPAN
id="HW10"
style="
top: 544px;
left: 70px;
width: 25px;
height: 25px;
position: absolute;
z-index: 1;
visibility: show;
background: #5d5d5d;">
</SPAN>
<SPAN
id="HW11"
style="
top: 600px;
left: 70px;
width: 25px;
height: 25px;
position: absolute;
z-index: 1;
visibility: show;
background: #5d5d5d;">
</SPAN>
<SPAN
id="HW12"
style="
top: 655px;
left: 70px;
width: 25px;
height: 25px;
position: absolute;
z-index: 1;
visibility: show;
background: #5d5d5d;">
</SPAN>
<SPAN
style="
top: 722px;
left: 960px;
position: absolute;
z-index: 1;
text-align: left;
color: #dadada;
font-family: Arial;
font-size: 45px;
visibility: show;">
<script type="text/javascript"> document.write(computername());</script>
</SPAN>
<SPAN
STYLE="
top: 320px;
left: 480px;
width: 25px;
height: 25px;
position: absolute;
z-index: 0;
background-image: url('Busy.gif');
visibility: show;">
</SPAN>
<SPAN
STYLE="
top: 348px;
left: 480px;
width: 25px;
height: 25px;
position: absolute;
z-index: 0;
background-image: url('Busy.gif');
visibility: show;">
</SPAN>
<SPAN
STYLE="
top: 376px;
left: 480px;
width: 25px;
height: 25px;
position: absolute;
z-index: 0;
background-image: url('Busy.gif');
visibility: show;">
</SPAN>
<SPAN
STYLE="
top: 404px;
left: 480px;
width: 25px;
height: 25px;
position: absolute;
z-index: 0;
background-image: url('Busy.gif');
visibility: show;">
</SPAN>
<SPAN
STYLE="
top: 432px;
left: 480px;
width: 25px;
height: 25px;
position: absolute;
z-index: 0;
background-image: url('Busy.gif');
visibility: show;">
</SPAN>
<SPAN
STYLE="
top: 460px;
left: 480px;
width: 25px;
height: 25px;
position: absolute;
z-index: 0;
background-image: url('Busy.gif');
visibility: show;">
</SPAN>
<SPAN
STYLE="
top: 488px;
left: 480px;
width: 25px;
height: 25px;
position: absolute;
z-index: 0;
background-image: url('Busy.gif');
visibility: show;">
</SPAN>
<SPAN
STYLE="
top: 750px;
left: 1180px;
position: absolute;
z-index: 1;
text-align: right;
color: #dadada;
font-family: Arial;
font-face: Arial;
font-size: 14px;
font-weight: bold;
visibility: show;">
<font color="white"><PRE ID=myClock></font>
</SPAN>
</BODY>
</HTML>
I attached a .zip file containing the images and everything so you can see exactly what happens. I disabled the vbscripts for each button so you cannot accidentally PowerOff or anything like that. Just rename the ScreenV11.txt to .hta
E-E-Sample.zip
your css code does not take effect because the image is "in front" of the background. Your LogOffB.png has a grey background. if you just had the blue key on a transparent background then your code below would work.
.btn-log-off:hover {
background: url("LogOffB.png") no-repeat center #3E535E;
}
.btn-log-off:active {
background: url("LogOffB.png") no-repeat center #32434C;
}
.btn-log-off:hover {
background: url("LogOffB.png") no-repeat center #3E535E;
}
.btn-log-off:active {
background: url("LogOffB.png") no-repeat center #32434C;
}
ASKER
No, all 6 .png files has transparent backgrounds. Please check the last E-E Sample.zip file. I am fairly sure the .png is used as an "icon" and the actual square button is drawn with the code:
.btn {
width:55px;
height:55px;
position:absolute;
display:block;
padding:5px;
-webkit-border-radius: 3px;
-moz-border-radius:3px;
border-radius: 3px;
border:0;
}
Could you use something like this: http://jsfiddle.net/gdakeja6/embedded/result/
(http://jsfiddle.net/gdakeja6/output/). This uses essentially a font (glyphicon) to render the color of the icon and its background. I couldn't find the same logoff icon to use but this would give you ultimate flexibility on styling.
(http://jsfiddle.net/gdakeja6/output/). This uses essentially a font (glyphicon) to render the color of the icon and its background. I couldn't find the same logoff icon to use but this would give you ultimate flexibility on styling.
I understand if you also just want to persist with the png images, given how close you are. I was just showing you what else is available should you choose to use it :)
ASKER
Rob, that works 100% and I am ok with the different icons. How would I put that into my code though? How do I maintain the click action? Below is the current script. I just need what you just showed me in that and I will be a very happy man!
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name=VI60_defaultClientScript content=VBScript>
<title></title>
<HTA:APPLICATION
ID="objScreen"
APPLICATIONNAME="Screen"
BORDER="none"
BORDERSTYLE="normal"
CAPTION="no"
ICON=""
MAXIMIZEBUTTON="no"
MINIMIZEBUTTON="no"
SHOWINTASKBAR="yes"
SINGLEINSTANCE="yes"
SYSMENU="no"
SCROLL="no"
VERSION="1.0"
CONTEXTMENU="no"
WINDOWSTATE="maximize"
INNERBORDER="no"/>
<style>
html,
body {
font-family: sans-serif;
}
.btn {
width:55px;
height:55px;
position:absolute;
display:block;
padding:5px;
-webkit-border-radius: 3px;
-moz-border-radius:3px;
border-radius: 3px;
border:0;
}
.btn-lg {
position:absolute;
width:150px;
height:55px;
font-size:13pt;
text-align:center;
border:0;
-webkit-border-radius: 3px;
-moz-border-radius:3px;
border-radius: 3px;
}
.btn-log-off {
position: absolute;
background: url("LogOff.png") no-repeat center #3E535E;
left:886px;
top:535px;
}
.btn-log-off:hover {
background: url("LogOffB.png") no-repeat center #3E535E;
}
.btn-log-off:active {
background: url("LogOffB.png") no-repeat center #32434C;
}
.btn-restart {
position: absolute;
background: url("Restart.png") no-repeat center #724F0F;
left:886px;
top:599px;
}
.btn-restart:hover {
background: url("RestartB.png") no-repeat center #724F0F;
}
.btn-restart:active {
background: url("RestartB.png") no-repeat center #573D0C;
}
.btn-power-off {
position: absolute;
left:886px;
top:663px;
background: url("Power.png") no-repeat center #602F2E;
}
.btn-power-off:hover {
background: url("PowerB.png") no-repeat center #5F2E2F;
}
.btn-power-off:active {
background: url("PowerB.png") no-repeat center #ffff00;
}
.btn-learning-marterials {
position: absolute;
left:720px;
top:615px;
color:#DADADA;
background-color:#28442E;
}
.btn-learning-marterials:hover {
color:#A2FF90;
background-color:#2B4931;
}
.btn-learning-marterials:active {
color:#A3FF90;
background-color:#223A27;
}
</style>
</head>
<BODY
BACKGROUND="PlatformV30.jpg"
TOPMARGIN="10"
RIGHTMARGIN="10"
LEFTMARGIN="10">
<Script Language="VBScript">
Sub LogOffPC1()
Set objShell = CreateObject("WScript.Shell")
objShell.Run("shutdown -l -f"), 1, True
End Sub
Sub RestartPC1()
Set objShell = CreateObject("WScript.Shell")
objShell.Run("shutdown -t 0 -r -f"), 1, True
End Sub
Sub PowerOffPC1()
Set objShell = CreateObject("WScript.Shell")
objShell.Run("shutdown -t 0 -s -f"), 1, True
End Sub
Sub Window_OnLoad
' Size and position main window
window.resizeTo 1366,768
window.moveTo 0,0
' Display current time
myClock.innerText = Now()
' Set up a timer event so we can update the screen periodically
iTimerID = window.setInterval("myVBSClock", 1000)
End Sub
Sub myVBSClock
' Update current time
myClock.innerText = Now()
' Refresh colors from HWstatus file
CheckHWStatusFile
' Refresh colors from SWstatus file
CheckSWStatusFile
' Refresh data
RefreshData
End Sub
Function ComputerName()
' Get computername
Set wshShell = CreateObject("WScript.Shell")
ComputerName = wshShell.ExpandEnvironmentStrings("%COMPUTERNAME%")
Set wshShell = Nothing
End Function
Sub CheckSWStatusFile
' Constants for file I/O
Const ForReading = 1
Const ForWriting = 2
Const TriStateUseDefault = -2
' Name of SWstatus file
strSWStatusFile = "SWStatus.txt"
' Create file system object
Set objFSO = CreateObject("Scripting.FileSystemObject")
' Make sure SWstatus file exists
If objFSO.FileExists(strSWStatusFile) Then
' Open it for reading
Set objSWStatusFile = objFSO.OpenTextFile(strSWStatusFile, ForReading, False, TriStateUseDefault)
' Read SWstatus file, slit lines into array elements
arrSWStatus = Split(objSWStatusFile.ReadAll, vbCrLf)
' Close file, release objects
objSWStatusFile.Close
Set objSWStatusFile = Nothing
Set objFSO = Nothing
' Process each line of the SWstatus file (skip blank lines)
For Each strSWStatus in arrSWStatus
If strSWStatus <> "" Then
' Split SWstatus line into array at comma
arrField = Split(strSWStatus, ",")
' Process lines based on first field on line (item name to update), and set item color to SWstatus file value
Select Case arrField(0)
Case "ST01"
ST01.style.background = arrField(1)
Case "ST02"
ST02.style.background = arrField(1)
Case "ST03"
ST03.style.background = arrField(1)
Case "ST04"
ST04.style.background = arrField(1)
Case "ST05"
ST05.style.background = arrField(1)
Case "ST06"
ST06.style.background = arrField(1)
Case "ST07"
ST07.style.background = arrField(1)
End Select
End If
Next
End If
End Sub
Sub CheckHWStatusFile
' Constants for file I/O
Const ForReading = 1
Const ForWriting = 2
Const TriStateUseDefault = -2
' Name of HWstatus file
strHWStatusFile = "HWStatus.txt"
' Create file system object
Set objFSO = CreateObject("Scripting.FileSystemObject")
' Make sure HWstatus file exists
If objFSO.FileExists(strHWStatusFile) Then
' Open it for reading
Set objHWStatusFile = objFSO.OpenTextFile(strHWStatusFile, ForReading, False, TriStateUseDefault)
' Read HWstatus file, slit lines into array elements
arrHWStatus = Split(objHWStatusFile.ReadAll, vbCrLf)
' Close file, release objects
objHWStatusFile.Close
Set objHWStatusFile = Nothing
Set objFSO = Nothing
' Process each line of the HWstatus file (skip blank lines)
For Each strHWStatus in arrHWStatus
If strHWStatus <> "" Then
' Split HWstatus line into array at comma
arrField = Split(strHWStatus, ",")
' Process lines based on first field on line (item name to update), and set item color to HWstatus file value
Select Case arrField(0)
Case "HW01"
HW01.style.background = arrField(1)
Case "HW02"
HW02.style.background = arrField(1)
Case "HW03"
HW03.style.background = arrField(1)
Case "HW04"
HW04.style.background = arrField(1)
Case "HW05"
HW05.style.background = arrField(1)
Case "HW06"
HW06.style.background = arrField(1)
Case "HW07"
HW07.style.background = arrField(1)
Case "HW08"
HW08.style.background = arrField(1)
Case "HW09"
HW09.style.background = arrField(1)
Case "HW10"
HW10.style.background = arrField(1)
Case "HW11"
HW11.style.background = arrField(1)
Case "HW12"
HW12.style.background = arrField(1)
End Select
End If
Next
End If
End Sub
Sub RefreshData
' Constants for file I/O
Const ForReading = 1
Const ForWriting = 2
Const TriStateUseDefault = -2
intRows = 2
intCols = 2
' Name of status file
strDataFile = "db.csv"
' Create file system object
Set objFSO = CreateObject("Scripting.FileSystemObject")
' Make sure data file exists
If objFSO.FileExists(strDataFile) Then
' Open it for reading
Set objDataFile = objFSO.OpenTextFile(strDataFile, ForReading, False, TriStateUseDefault)
' Read data file, slit lines into array elements
arrData = Split(objDataFile.ReadAll, vbCrLf)
' Close file, release objects
objDataFile.Close
Set objDataFile = Nothing
Set objFSO = Nothing
' Process each line of the status file, updating html table data
For intRow = 0 To intRows
arrField = Split(arrData(intRow), ",")
Set objCell = document.getElementById("dbdata").rows(intRow).cells
For intCol = 0 To intCols
objCell(intCol).innerHTML = arrField(intCol)
Next
Set objCell = Nothing
Next
End If
End Sub
</SCRIPT>
<script language="javascript">
/* This script and many more are available free online at
The JavaScript Source :: http://www.javascriptsource.com
Created by: James Nisbet (morBandit) :: http://www.bandit.co.nz/ */
window.onload = function() {
document.onselectstart = function() {return false;} // ie
document.onmousedown = function() {return false;} // mozilla
}
</script>
<input
type="button"
name="button01"
class="btn btn-log-off"
onClick='vbscript:LogOffPC'/>
<input
type="button"
name="button02"
class="btn btn-restart"
onClick='vbscript:RestartPC'
/>
<input
type="button"
name="button03"
class="btn btn-power-off"
onClick='vbscript:PowerOffPC'
/>
<button type="button" class="btn-lg btn-learning-marterials">LEARNING<br/>MARTERIALS</button>
<SPAN
id="dbdataspan"
style="
top: 633px;
left: 1030px;
position: absolute;
z-index: 1;
color: #353535;
visibility: show;">
<table id="dbdata" style="width: 340px;height: 50px;color: #353535;font-family: Arial Black;font-size: 20px;font-weight: lighter;" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="height: 20px;width: 118px;text-align: center;">0<br></td>
<td style="height: 20px;width: 118px;text-align: center;">0<br></td>
<td style="height: 20px;width: 118px;text-align: center;">0<br></td>
</tr>
<tr>
<td style="height: 20px;width: 118px;text-align: center;">0<br></td>
<td style="height: 20px;width: 118px;text-align: center;">0<br></td>
<td style="height: 20px;width: 118px;text-align: center;">0<br></td>
</tr>
<tr>
<td style="height: 20px;width: 118px;text-align: center;">0<br></td>
<td style="height: 20px;width: 118px;text-align: center;">0<br></td>
<td style="height: 20px;width: 118px;text-align: center;">0<br></td>
</tr>
</tbody>
</table>
</SPAN>
<SPAN
id="ST01"
style="
top: 320px;
left: 480px;
width: 25px;
height: 25px;
position: absolute;
z-index: 1;
visibility: show;
background: #5d5d5d;">
</SPAN>
<SPAN
id="ST02"
style="
top: 348px;
left: 480px;
width: 25px;
height: 25px;
position: absolute;
z-index: 1;
visibility: show;
background: #5d5d5d;">
</SPAN>
<SPAN
id="ST03"
style="
top: 376px;
left: 480px;
width: 25px;
height: 25px;
position: absolute;
z-index: 1;
visibility: show;
background: #5d5d5d;">
</SPAN>
<SPAN
id="ST04"
style="
top: 404px;
left: 480px;
width: 25px;
height: 25px;
position: absolute;
z-index: 1;
visibility: show;
background: #5d5d5d;">
</SPAN>
<SPAN
id="ST05"
style="
top: 432px;
left: 480px;
width: 25px;
height: 25px;
position: absolute;
z-index: 1;
visibility: show;
background: #5d5d5d;">
</SPAN>
<SPAN
id="ST06"
style="
top: 460px;
left: 480px;
width: 25px;
height: 25px;
position: absolute;
z-index: 1;
visibility: show;
background: #5d5d5d;">
</SPAN>
<SPAN
id="ST07"
style="
top: 488px;
left: 480px;
width: 25px;
height: 25px;
position: absolute;
z-index: 1;
visibility: show;
background: #5d5d5d;">
</SPAN>
<SPAN
id="HW01"
style="
top: 320px;
left: 35px;
width: 25px;
height: 250px;
position: absolute;
z-index: 1;
visibility: show;
background: #5d5d5d;">
</SPAN>
<SPAN
id="HW02"
style="
top: 320px;
left: 70px;
width: 25px;
height: 25px;
position: absolute;
z-index: 1;
visibility: show;
background: #5d5d5d;">
</SPAN>
<SPAN
id="HW03"
style="
top: 348px;
left: 70px;
width: 25px;
height: 25px;
position: absolute;
z-index: 1;
visibility: show;
background: #5d5d5d;">
</SPAN>
<SPAN
id="HW04"
style="
top: 376px;
left: 70px;
width: 25px;
height: 25px;
position: absolute;
z-index: 1;
visibility: show;
background: #5d5d5d;">
</SPAN>
<SPAN
id="HW05"
style="
top: 404px;
left: 70px;
width: 25px;
height: 25px;
position: absolute;
z-index: 1;
visibility: show;
background: #5d5d5d;">
</SPAN>
<SPAN
id="HW06"
style="
top: 432px;
left: 70px;
width: 25px;
height: 25px;
position: absolute;
z-index: 1;
visibility: show;
background: #5d5d5d;">
</SPAN>
<SPAN
id="HW07"
style="
top: 460px;
left: 70px;
width: 25px;
height: 25px;
position: absolute;
z-index: 1;
visibility: show;
background: #5d5d5d;">
</SPAN>
<SPAN
id="HW08"
style="
top: 488px;
left: 70px;
width: 25px;
height: 25px;
position: absolute;
z-index: 1;
visibility: show;
background: #5d5d5d;">
</SPAN>
<SPAN
id="HW09"
style="
top: 516px;
left: 70px;
width: 25px;
height: 25px;
position: absolute;
z-index: 1;
visibility: show;
background: #5d5d5d;">
</SPAN>
<SPAN
id="HW10"
style="
top: 544px;
left: 70px;
width: 25px;
height: 25px;
position: absolute;
z-index: 1;
visibility: show;
background: #5d5d5d;">
</SPAN>
<SPAN
id="HW11"
style="
top: 600px;
left: 70px;
width: 25px;
height: 25px;
position: absolute;
z-index: 1;
visibility: show;
background: #5d5d5d;">
</SPAN>
<SPAN
id="HW12"
style="
top: 655px;
left: 70px;
width: 25px;
height: 25px;
position: absolute;
z-index: 1;
visibility: show;
background: #5d5d5d;">
</SPAN>
<SPAN
style="
top: 722px;
left: 960px;
position: absolute;
z-index: 1;
text-align: left;
color: #dadada;
font-family: Arial;
font-size: 45px;
visibility: show;">
<script type="text/javascript"> document.write(computername());</script>
</SPAN>
<SPAN
STYLE="
top: 320px;
left: 480px;
width: 25px;
height: 25px;
position: absolute;
z-index: 0;
background-image: url('Busy.gif');
visibility: show;">
</SPAN>
<SPAN
STYLE="
top: 348px;
left: 480px;
width: 25px;
height: 25px;
position: absolute;
z-index: 0;
background-image: url('Busy.gif');
visibility: show;">
</SPAN>
<SPAN
STYLE="
top: 376px;
left: 480px;
width: 25px;
height: 25px;
position: absolute;
z-index: 0;
background-image: url('Busy.gif');
visibility: show;">
</SPAN>
<SPAN
STYLE="
top: 404px;
left: 480px;
width: 25px;
height: 25px;
position: absolute;
z-index: 0;
background-image: url('Busy.gif');
visibility: show;">
</SPAN>
<SPAN
STYLE="
top: 432px;
left: 480px;
width: 25px;
height: 25px;
position: absolute;
z-index: 0;
background-image: url('Busy.gif');
visibility: show;">
</SPAN>
<SPAN
STYLE="
top: 460px;
left: 480px;
width: 25px;
height: 25px;
position: absolute;
z-index: 0;
background-image: url('Busy.gif');
visibility: show;">
</SPAN>
<SPAN
STYLE="
top: 488px;
left: 480px;
width: 25px;
height: 25px;
position: absolute;
z-index: 0;
background-image: url('Busy.gif');
visibility: show;">
</SPAN>
<SPAN
STYLE="
top: 750px;
left: 1180px;
position: absolute;
z-index: 1;
text-align: right;
color: #dadada;
font-family: Arial;
font-face: Arial;
font-size: 14px;
font-weight: bold;
visibility: show;">
<font color="white"><PRE ID=myClock></font>
</SPAN>
</BODY>
</HTML>
ASKER
Also remember the final file is an .hta that wil run locally without internet so I assume I will have to install something for the glyphicons to work?
ASKER CERTIFIED SOLUTION
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
You would only need to include a css file, that you could copy and paste into the top of the hta if need be. However I think my most recent post before this one solves it for you ;)
Hopefully you've now got two solutions and can choose the best one to suit you going forward
Hopefully you've now got two solutions and can choose the best one to suit you going forward
ASKER
You cracked it Rob! The only issue was with the:
<meta http-equiv="x-ua-compatibl
It now works exactly as we originally intended. This info can now be used commonly going forward. Thank you very much for your time. It is very much appreciated!
<meta http-equiv="x-ua-compatibl
It now works exactly as we originally intended. This info can now be used commonly going forward. Thank you very much for your time. It is very much appreciated!
No problem... *virtual high 5* LOL :)
ASKER
Rob, the buttons work great now but I was so focused on them that I did not notice everything else broke. The other spans and elements no longer displays.
:-(
It also seems that when I position my first span with X and Y coordinates it now impacts on all the spans below that one? I have absolutely no clue why?
:-(
It also seems that when I position my first span with X and Y coordinates it now impacts on all the spans below that one? I have absolutely no clue why?
ASKER
I can open a new question if you like? I am more than willing to do that so that you earn the deserved points for your help. Would you like me to do so?
If only because it's now a different issue to the one you've posted here. I'll be able to check it out in a few hours but there's bound to be another expert pick this up.
Post the new question link here if you don't mind too
Post the new question link here if you don't mind too
ASKER
Thank you Rob. The new question is here:
http://rdsrc.us/xMGRz8
http://rdsrc.us/xMGRz8
HTML
HTML (HyperText Markup Language) is the main markup language for creating web pages and other information to be displayed in a web browser, providing both the structure and content for what is sent from a web server through the use of tags. The current implementation of the HTML specification is HTML5.
62K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
TRUSTED BY
ASKER
E-E-Sample.zip