It kinda worked. Here is a list of things needing some work on:
1. It opened the file, but no saved download file. Anyway for both?
-OptimalDesigns
What (kind of) file?
As mentioned before, it depends on the browser how to handle the file... PDFs might be opened right away within the browser as "PDF preview". If all else fails, try a zipped version of the file to download. In my case a "Save as..." dialogue-window was opened by the browser in the first place.
2. How to change background-color to lightgray for 'this.id' button?
-OptimalDesigns
The button design ist determined by the browser, if no special format is defined.
But you can change the appearance using CSS-code.
Though in my case, the button WAS changed to light grey (see screenshot).
Dealing with CSS (cascading style-sheets) is not really complicated, but if you're completely new to that matter it might need some work on the basics to it.
See updated source-code below.
I put some CSS-code for the buttons in the HEAD-section,
referencing the BUTTON-
class via the
.button-section (mind the dot at the beginning!) as such (i.e. for all buttons),
and another class called
.btn1 that only applies to the first button, as the second one has the class "btn2" (all taken from your original template).
If you're not familiar with CSS - at least with the basics - this might not be the best time to go for it, if you need fast results with your button-page... you might get lost in the middle of nowhere. ;-)
<html>
<head>
<STYLE TYPE="text/css">
td {
padding:10px;
}
.button {
padding: 6px 16px;
border: 1px solid green;
border-radius: 0 8px 8px;
box-shadow: 0 lpx 5px gray;
color: white;
text-shadow: 0 -1px 1px #333;
font-size: 20px;
line-height: 30px;
}
.btn1 {
background: #5a9900 linear-gradient(#8db243, #5a9900);
}
.btn1:disabled {
background: #808080 linear-gradient(#C0C0C0, #808080);
}
.btn2 {
background: #5a3300 linear-gradient(#8db243, #5a3300);
}
</style>
<script type="text/javascript">
function dNdB(whichOne) {
// read VALUE-attribute to get link to file
fileUrl=document.getElementById(whichOne).value;
// open new tab/window to download the file
window.open(fileUrl,'_blank');
// disable the button that was clicked
document.getElementById(whichOne).setAttribute("disabled", "");
}
</script>
</head>
<body>
<table border="1">
<tr class="topic">
<td>
Descript 1
</td>
<td>
<!-- <a href="abc.ppt" download></a> -->
<button id="btn1-1" class="button btn1" value="abc.ppt" onClick="dNdB(this.id);">PPT</button>
</td>
<td>
<!-- <a href="abc.pdf" download></a> -->
<button id="btn2-1" class="button btn2" value="abc.pdf" onClick="dNdB(this.id);">PDF</button>
</td>
</tr>
</table>
</body>
</html>
3. Any way to put 'onClick="dwldAndDisableButton(this.id);" ' cmd in <table> cmd? This takes up a lot of room and is redundant. Presently there are 20+ rows of these and more may be coming. Plus, another type of filetype may be added; giving another column of buttons.
-OptimalDesigns
Uhm... no, I don't think so.
It's actually no big difference to a standard A-HREF-tag. There you would have to put in the URL anyway. This is not more or less redundant than the 'onClick="dwldAndDisableButton(this.id);" '.
And I guess, there's more redundancy in all the TR- and TD-tags of a TABLE anyway. ;-)
You only have one TABLE, but 20+ ... 40+ ... buttons. How would you distinguish the URLs?
You can of course rename the function "dwldAndDisableButton()" to something shorter... like "dNdB()" or even just "x()". But from the view of a programmer, always try to name your variables and function to something intuitive and self-explaining, so you don't get lost in your code if you want to change it in two years, when you have to work yourself through understanding your own code.
You could though put all the URLs into the HEAD/SCRIPT-section, where your function is.
You could put all the URLs there in variables like
URL01=abc.ppt
URL02=abc.pdf
URL03=...
and so on.
Then you could call your function within your "onClick" by
onClick="dNdB(this.id,'URL01')"
But I see no point in this, as on the one hand it doesn't really make your code shorter (as you now have to pass two arguments to your function, one to tell the button-ID to change the button-style and one to define the URL), and on the other hand you produce "overhead" in the function itself, because every time you call the function, all your URL-variables have to be initialized of which you only need one.
Imagine a page with 500 buttons, thus 500 URL-variables in your function. Every time you click a button, all 500 URL-variables are parsed, and then you select one of them... no very performant.
Just tell the function what URL you want in the first place.
4. Any way to save filename in <tr> and pass it on to <button> cmd.s as it is redundant too. Will need to merge filename & filetype in <button> cmd.
-OptimalDesigns
Filename in TR? From the original template, there's 2 button in a table-row (TR) with different URLs.
So there would have to be two URLs in one TR-tag that would have to be distinguished from one another.
Does not appear plausible to me.
You could put the URL in the table-data (TD = table-cell), as there is one button per TD, but what's the use? The amount of code stays the same if I move the URL from the BUTTON-tag to the TD-tag.
Same with TR... just cumulating two URLs from the buttons to two URLs in the TR surrounding it.
Just needs some additional JS-code to get from 'this.id' (i.e. the button) to the parent-element 'TD' and/or the parent-element of that, the 'TR'.
Don't get me wrong, there are ways of optimizing this and maybe making the code a little more compact, but that would need a database-system with PHP or ASP or similar. And I guess we're FAR away from that point where you want to setup a PHP-server or something like that.
