Actual Version: 4.2.0Comments
Preamble
This tool needs a few conditions. Java Script knowledge will help - but is not mandatory. (But if you want to change positions etc.. you need it. Especially for making it available for all browsers. Not all browsers are yet tested and you have to rewrite the Java Script Code a bit for different browsers. It's tested on FireFox and Internet Explorer) You have to add html-code and Java Script code to your homepage to make it work!
What's about?
For example you have something like that in excel: Screenshot:
Now you have ticked in page HP Com read comment and selected option onClick. Then you used the button Compact. Now a html-code is created, which would show the table like that: (Note: Java Script has to be enabled. Tested with Firefox and Internet Explorer)
Just click on the cells and then click to the comment to make it disappear.
First Analysis:
You saw at once, that in the first comment nothing was bold and the line-feed was not implemented. The reason: The comment is read out as Html. (Only if there is a manual line-feed, it will be replaced with <br />) You have to format everything yourself in html-code (like mask for cells) But for this reason you can implement pictures. This we can see working in the second comment. Here i put an imgtag to the comment with some bold text. You see: Your fantasy has no limits here.
But there is work to do at your homepage!
In the following code you see the parts you have to add to your homepage in blue. Let's have a look:
<html><head>
First you need the Java Script part in the header and in the bodytag.
<script type="text/javascript"> <!-- function ohide() {o=document.getElementById("ko"); o.style.visibility="hidden";} function akt(o,h) { w= (o.offsetWidth); g= (o.offsetHeight); var x =0, y = 0; if (o.offsetParent) { x = o.offsetLeft;y = o.offsetTop; while (o = o.offsetParent) { x += o.offsetLeft;y += o.offsetTop;} } od=document.getElementById("ko");od.style.position="absolute"; od.style.visibility = "visible";od.style.top=(y) + "px";od.style.left=(x + w) +"px"; od.innerHTML=h;} --> </script> </head> <body onload="ohide();"> <!-- ######### Start Created Html Code To Copy ########## --> <table border="1" cellspacing="0" cellpadding="0" style="font-family:Arial,Arial; font-size:10pt; background-color:#ffffff; padding-left:2pt; padding-right:2pt; "> <colgroup> <col style="width:132px;" /> </colgroup> <tr style="height:17px ;"> <td style="background-color:#008080; color:#ffffff; font-weight:bold; vertical-align:bottom; " onClick="akt(this,'Peter Haserodt:<br /><br />What a surprise<br />A comment apears!');">click me</td> </tr> <tr style="height:17px ;"> <td style="vertical-align:bottom; ">Without comment</td> </tr> <tr style="height:17px ;"> <td style="vertical-align:bottom; ">Without comment</td> </tr> <tr style="height:17px ;"> <td style="vertical-align:bottom; ">Without comment</td> </tr> <tr style="height:17px ;"> <td style="background-color:#008080; color:#ffffff; font-weight:bold; vertical-align:bottom; " onClick="akt(this,'<img src="http://www.excel-jeanie-html.de/gra/ejh4.JPG" widh= height= /> <b> Excel Jeanie Html</b><br />');">click with picture</td> </tr> </table> <!-- ######### End Created Html Code To Copy ########## --> <div id="ko" style="white-space:nowrap; border-style:inset; border-width:2px; border-color:#000080; background-color:#ffffd9; visibility=hidden;position=absolute;padding:5px" onClick="ohide();"></div> </body></html> The Java Script in the header is responsible for showing the comment. Don't change the names of the functions, but you are welcome to change them themselfes for better. If you have a better solution, let me know. (Of course you can put the code into a .js) The code in the bodytag is necessary for Firefox - at least I think so. Because of the div tag in the end, Firefox won't hide it at start without this code. But my tests to put the div tag to the start, had other inconveniences. Now we are still not finished. We need the div tag to display our comment. Put this divtag to the end of your html. (Directly before the closing body tag) You are welcome to experiment with the attributes. Summary First: Don't use this in a forum. Good forums will deny access to Java Script.To get used to this feature, you will have to play arround a little bit. But in the end, it will be fairly simple. Please let me know, if you find a better Java Script code! Top Home |