I have the following HTA using VBScript to copy a folder from one source folder to a destination folder. I also have a, so far not working, progress bar made in CSS and JavaScript to show the progress. The script is copying the folder succesfully, but I have not found a way to show the progress.
I need to find a way to show the actual progress in the progress bar when copying the folder. I have tried with various methods using the statement For Each File In Folder but without luck.
I know there are other methods of showing a progress bar, i.e the Windows progress bar, but I would like to use my own.
The following code samples are in one HTA, but I've dividede the sciprts up for better overview. Hope that helps.
The following code is the acutal copy folder VBScript:
<script language="vbscript">
Sub Setup
Dim FSO, NewFile, ThisFile
Set FSO = CreateObject("Scripting.FileSystemObject")
FolderDir = FSO.GetFolder("..\")
dim WSHShell, desktop, pathstring, objFSO
set objFSO = CreateObject("Scripting.FileSystemObject")
Set WSHshell = CreateObject("WScript.Shell")
desktop = WSHShell.SpecialFolders("Desktop")
Destination = objFSO.GetAbsolutePathName(desktop)
Source = "C:\Test\Source"
FSO.CopyFolder ""&Source&"", ""&Destination&"\", True
End Sub
Sub CloseApp
Self.Close
End Sub
</script>
The copy script is triggered by the onClick on an image in the HTA script:
<HTA:APPLICATION ApplicationName="UPDATE" CAPTION="NO" SCROLL="NO" INNERBORDER="NO" SINGLEINSTANCE="YES" ICON="../images/icon_64.ico" ShowInTaskbar="YES">
<body onload="progressbar(100,75);">
<table cellpadding=0 cellspacing=0 width="100%">
<tr>
<td id="top_bar" height="25" width="100%" align="center">INSTALLATION</td>
</tr>
<tr>
<td align="center">
<br>
<b>Do you want to install the program?</b><br>
<br>
<div style="width:150px">
<div id="slider" align="left">
<div id="sliderbar" ></div>
<div id="progress" align="center"></div>
</div>
</div>
<br>
<img src="../images/installer.png" onclick="Setup()">  <img src="../images/afslut.png" onclick="CloseApp()">
<br>
</td>
</tr>
</table>
</script>
</body>
Furthermore I have a progress bar, which is made in CSS and JavaScript:
<style>
#slider{
width:100%;
height:12px;
border:1px solid #000;
overflow:hidden;
background: #FFF;
}
#sliderbar{
width:37%;
height:12px;
border-right: 1px solid #000;
background-color: #66FF33;
}
#progress {
font-family: Arial;
font-size: 10px;
font-weight: bold;
position: relative;
top: -15px;
}
</style>
<script language="JavaScript">
function progressbar(XX, YY){
var progress=Math.round((YY*100)/XX);
document.getElementById("sliderbar").style.width=progress+'%';
document.getElementById("progress").innerHTML=progress+'%';
document.title = progress+'% Installed';
}
</script>
I really hope that someone here can see an easy way to show use the progress bar. This is my last step in finishing a script, so I would be pleased if someone can help me out.
Thanks for reading!
Related
I want to finish this project I was working on for my mom for Valentine's day.
I want to be able to click an h2 and have it trigger multiple events, for example making the background color green, changing the font size of h2 to something bigger like 50px and changing the font size of h1 to 50px
I've never triggered multiple events at the same time from an onclick event. I'd love assistance to make mom happy.
body {
background-color: lightblue;
}
<html>
<body>
<h1 style="color:purple;
text-align:center;" onclick="this.style.color='yellow'; this.style.fontSize='40px'; document.body.style.backgroundColor='green';">
Happy Valentines Day Mom!
</h1>
<img src="Source/me.jpg" alt="This is Me" width="300" height="300" align="middle">
<p align="center" style="color:white;" onmouseover="this.style.textDecoration='underline';" onmouseout="this.style.textDecoration='';">
Lots of love and wishes on this day. It is not possible to repay the love that you have given to me. I just can love you, dear mom. Take my lots of love on this Happy Valentine's Day.
</p>
<img src="source/mom.jpg" alt="Mom" width="200" height="200" align="middle">
<h1 style="color:blue;
text-align:center;" onclick="this.innerHTML='Best Mother Ever!';">
I love you so much! - J
</h1>
<br>
<h2 id="joke" align="center" style="color:white;" onmouseover="this.style.textDecoration='line-through';" onmouseout="this.style.textDecoration='';">P.S. I love you more!</h2>
<button type="button" onclick='document.getElementById("joke").innerHTML = "P.S.S. you are the best!"'>Click Me!</button>
</body>
</html>
I think it would be best to work with style using a CSS file.
Create a CSS file and set some classes like:
h2.valentines {
background-color: green;
font-size: 50px;
color: white;
}
Then on the onclick event you can pass a function to add the class to the element you want, just like this:
function addValentineClass() {
const element = document.getElementById('joke');
element.className = "valentines";
}
I have a website (html/css/javascript/php) on a WAMP server. The format is header. nav (on the left), section (to the right of the nav div). In the section I have a javascript 3 tabs container. I am pulling the info from a .php file and displaying the retrieved data in the textarea. The textarea is on a timer so each time new data is retrieved, a new textarea is created below the current textarea with the new data.
My problem, since Javascript is loaded into the page last, the textareas are positioned outside of the tabbed div container and run across all boundaries and borders.
How can I position the newly created textareas so they will appear and stay inside the first tab? Here is the code I am using so far. I have tried many solutions and none worked, even absolute positioning did not work.
<div id="section">
<!-- these are the tags ID and the href links back to itself, the page does not navigate forward or backward-->
<ul id="tabs">
<li>.........Orders Placed</li>
<li>.......Delivered</li>
<li>.......Cancelled</li>
</ul>
<div class="tabContent" id="order" style="max-height:800px;overflow-y:scroll;border:1px solid red;">
<div>
<button onclick="myFunction()">Try it</button>
<script type="text/javascript" >
function myFunction() {
var x = document.createElement("TEXTAREA");
var t = document.createTextNode("<?php include('NewIncomingOrders.php')?>");
x.appendChild(t);
document.body.appendChild(x);
setTimeout(myFunction, 9000);
}
</script>
</div>
</div>
and the css I have tried: more than on way here, and I could not get any of them to work. I have a button included in the code to start the timed function.
TEXTAREA{
width:80em;
height:4em;
border: 1px solid #FFFFFF;
position:static;
left: 195px;
top: 1px;
}
OR THIS METHOD:
.section{
position:relative;
height:200px;
width:400px;
background-color:blue;
}
.tabContent{
position:absolute;
bottom:2px;
left:2px;
right:2px;
}
.tabContent textarea{
width:100%;
height:30px;
box-sizing:border-box;
-moz-box-sizing:border-box;
-webkit-box-sizing:border-box;
}
If anyone has an idea how to position the textarea so that it stays within the tab, or hints on what direction to go, please let me know!
Here is a picture to let you know what I mean.
Tab_Not_Working:
Dan O put me on the right path. I got it working:
<script type="text/javascript" >
function myFunction() {
var x = document.createElement("TEXTAREA");
var t = document.createTextNode("<?php include('NewIncomingOrders.php')>");
x.appendChild(t);
document.getElementById("order").appendChild(x);
setTimeout(myFunction, 9000);
}
</script>
I'm trying to open 2 reports through one button to make our process a little bit quicker. Everything works fine as soon if i only put one link in the "onclick" event but as soon as i put both of them in only one them opens.
This is what i tried.
<script type="text/javascript">
function itsa()
{
window.location.href='http://*******/****/******/*****/_vti_bin/owssvr.dll?CS=109&Using=_layouts/query.iqy&List={*******************}&View={**********************}&CacheControl=1';
}
function other()
{
window.location.href='http://*******/****/******/*****/_vti_bin/owssvr.dll?CS=109&Using=_layouts/query.iqy&List={*******************}&View={**********************}&CacheControl=1';
}
</script>
<div class="wrapper">
<input type="button" style="width:180px; height: 75px; background:gray; color:white;font-size:larger; font-weight:bold; left: 214px;"onclick="itsa();other();" value ="Generate Excel report"/>
</div>
and i also tried
<div class="wrapper">
<input type="button" style="width:180px; height: 75px; background:gray; color:white;font-size:larger; font-weight:bold; left: 214px;"onclick=" window.location.href='http://*******/****/******/*****/_vti_bin/owssvr.dll?CS=109&Using=_layouts/query.iqy&List={*******************}&View={**********************}&CacheControl=1'; window.location.href='http://*******/****/******/*****/_vti_bin/owssvr.dll?CS=109&Using=_layouts/query.iqy&List={*******************}&View={**********************}&CacheControl=1';" value ="Generate Excel report"/>
</div>
Any ideas?
Thank you.
You need to open up each report in a popup. Use window.open("URL") instead of window.location.href to do so.
<div id="z1" onclick="document.getElementById('q1').style.display=''; document.getElementById('z1').style.display='none';" style="border:solid 1px; background- color: #DDDDDD; width:936px; height:auto; margin-left:0px;margin-right:0px;">
<h2> Pg. 419-423, problems 8-14 even, 20-30 odd, AYP 1-10</h2></div>
<div id="q1" onclick="document.getElementById('q1').style.display='none'; document.getElementById('z1').style.display='';" style="display:none; border:solid 1px; background-color: #DDDDDD; width:938px; height:auto;margin-left:0px;margin-right:0px;">
<h2> Pg. 419-423, problems 8-14 even, 20-30 odd, AYP 1-10</h2>
</br>
<img src="http://www.rediker.com/reports/samples/Attendance-Period/Homework-Assignment- form.jpg"></img></div>
The above script is what I planned on using to create a spoiler. Basically, when the user clicks on the z1 element, it hides itself and shows the q1 element, and vice-versa. It works on all browsers besides IE. Linking Jquery would be a small liability.
I think this is what you're looking for. You're missing to add display: block
Change this
document.getElementById('z1').style.display='';
to
document.getElementById('z1').style.display='block';
You should think about cleaning your code.
HTML:
<div id="z1" onclick="aa()"></div>
<div id="q1" onclick="bb()">
<img src="http://www.rediker.com/reports/samples/Attendance-Period/Homework-Assignment-form.jpg"/>
</div>
JS:
function aa() {
document.getElementById('q1').style.display = 'block';
document.getElementById('z1').style.display = 'none';
}
function bb() {
document.getElementById('q1').style.display = 'none';
document.getElementById('z1').style.display = 'block';
}
Working JSfiddle
Look at your Gmail inbox. You have 3 main columns
contains the Sender
contains "THE_EMAIL_SUBJECT - THE_EMAIL_BODY"
the date the email was sent on
I note that when you resize the window, the Gmail web client automatically resizes the displayed text in the second column. It basically just truncates the text so that it always can display the sent on date to the right, and the sender to the left. It is a pretty neat effect, and I would like to have that effect for myself. Does anyone know how to do this in HTML/CSS/JS?
This will have a receiver sender fixed the left side and your date hugging the right of your window. No JavaScript!
<html>
<head>
<title>SO</title>
<style>
#content
{
margin-right: 10px;
width: 100%;
}
#receiver, #sender, #subject, #date
{
padding-right: 5px;
}
#receiver
{
width: 50px;
}
#sender
{
width: 50px;
}
#subject
{
width: 100%;
overflow: hidden;
}
#date
{
width: 50px;
}
</style>
</head>
<body>
<table id="content">
<tr>
<td>
<div id="receiver">
Receiver
</div>
</td>
<td>
<div id="sender">
Sender
</div>
</td>
<td id="subject">
<div style="height: 20px;">
This is my long subject that hides its self when the window is too narow.
</div>
</td>
<td>
<div id="date">
May 6
</div>
</td>
</tr>
</table>
</body>
</html>
You may change the content width to what percentage you would like or auto and or set margins.
You may not that it works better than Google in the sense that if the subject is too long then it gets hidden also. I just mixed mine up and put sender there when it should be in the order of sender receiver subject emailContent Date but you get the point im sure.
This StackOverflow question is similar to yours.
To apply this solution to your problem, you could use a table, fix the width of the right-most column (the date) and set the two other columns to overflow.