Hi everyone, I have a problem with a javascript. It is used to show comments below some links. It works fine if the script is pasted only once on a page. But I need to use it multiple times on each page. If it is pasted more than once on a page the comment shown when clicking on a link is shown below the links of the first script pasted. English being my second language it is difficult for me to explain it. Please paste the code below in a html-editor to view it and try clicking on the links. The basic content is in the site BODY, the styling and layout is all placed in an inline CSS stylesheet in the HEAD tag and then handled via the Javascript in the SCRIPT tag. Hope that someone can help - I'm not a programmer. Thanks John <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>My Title</title> <META http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- I HAVE INCLUDED AN INLINE STLYE SHEET TO HANDLE ALL THE LAYOUT AND STYLING OF THE PAGE --> <style type="text/css"> .textarea { font-family:Arial, Verdana, Helvetica, sans-serif; font-size:small; text-align:left; color:#000000; margin-bottom:5px; } .section { display:block; clear:both; color:#000000; margin-bottom:5px; } .links { color:#0000ff; } a.links:hover { color:#ff0000; } .linkswrapper { color:#000000; margin-right:10px; } .linkcomment { color:#000000; } </style> </head> <body> <div class="textarea">COMMENTS TO BE SHOWN BELOW THIS TEXT WHEN CLICKING ON THE LINKS </div> <div class="section"> <span class="linkswrapper">[ <a href="#" class="links" onClick="showComment(c_1);">LINK TO COMMENT1</a> ]</span> <span class="linkswrapper">[ <a href="#" class="links" onClick="showComment(c_2);">LINK TO COMMENT2</a> ]</span> </div> <div class="section"> <span id="linkComment" class="linkcomment"></span> </div> <script language="javascript" type="text/javascript"> var c_1 = 'COMMENT 1 HERE ...'; var c_2 = 'COMMENT 2 HERE ...'; function showComment(comment) { if(document.getElementById('linkComment').innerHTML == comment) { document.getElementById('linkComment').innerHTML = ''; } else { document.getElementById('linkComment').innerHTML = comment; } } </script> Placed on the page a second time: <div class="textarea">COMMENTS TO BE SHOWN BELOW THIS TEXT WHEN CLICKING ON THE LINKS.</div> 1. <div class="section"> <span class="linkswrapper">[ <a href="#" class="links" onClick="showComment(c_3);">LINK TO COMMENT3</a> ]</span> <span class="linkswrapper">[ <a href="#" class="links" onClick="showComment(c_4);">LINK TO COMMENT4</a> ]</span> </div> <div class="section"> <span id="linkComment" class="linkcomment"></span> </div> <script language="javascript" type="text/javascript"> var c_3 = 'COMMENT 3 HERE ...'; var c_4 = 'COMMENT 4 HERE ...'; function showComment(comment) { if(document.getElementById('linkComment').innerHTML == comment) { document.getElementById('linkComment').innerHTML = ''; } else { document.getElementById('linkComment').innerHTML = comment; } } </script> </body> </html>
Here's the fix: Study it and understand it before you ask anything else. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>My Title</title> <META http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- I HAVE INCLUDED AN INLINE STLYE SHEET TO HANDLE ALL THE LAYOUT AND STYLING OF THE PAGE --> <style type="text/css"> .textarea { font-family:Arial, Verdana, Helvetica, sans-serif; font-size:small; text-align:left; color:#000000; margin-bottom:5px; } .section { display:block; clear:both; color:#000000; margin-bottom:5px; } .links { color:#0000ff; } a.links:hover { color:#ff0000; } .linkswrapper { color:#000000; margin-right:10px; } .linkcomment { color:#000000; } </style> </head> <body> <div class="textarea">COMMENTS TO BE SHOWN BELOW THIS TEXT WHEN CLICKING ON THE LINKS </div> <div class="section"> <span class="linkswrapper">[ <a href="#" class="links" onClick="showComment(c_1);">LINK TO COMMENT1</a> ]</span> <span class="linkswrapper">[ <a href="#" class="links" onClick="showComment(c_2);">LINK TO COMMENT2</a> ]</span> </div> <div class="section"> <span id="linkComment" class="linkcomment"></span> </div> <script language="javascript" type="text/javascript"> var c_1 = 'COMMENT 1 HERE ...'; var c_2 = 'COMMENT 2 HERE ...'; var c_3 = 'COMMENT 3 HERE ...'; var c_4 = 'COMMENT 4 HERE ...'; function showComment(comment, where) { if (typeof(where) == "undefined"){ where = 'linkComment'; } if(document.getElementById(where).innerHTML == comment) { document.getElementById(where).innerHTML = ''; } else { document.getElementById(where).innerHTML = comment; } } </script> Placed on the page a second time: <div class="textarea">COMMENTS TO BE SHOWN BELOW THIS TEXT WHEN CLICKING ON THE LINKS.</div> 1. <div class="section"> <span class="linkswrapper">[ <a href="#" class="links" onClick="showComment(c_3, 'linkComment2');">LINK TO COMMENT3</a> ]</span> <span class="linkswrapper">[ <a href="#" class="links" onClick="showComment(c_4, 'linkComment2');">LINK TO COMMENT4</a> ]</span> </div> <div class="section"> <span id="linkComment2" class="linkcomment"></span> </div> </body> </html> Code (markup):
Wow! That's the quickest reply I ever received on the web. You should be included in Guinness World Records . It works perfectly. Thanks for helping. John
Just one more question. When clicking on a link the text below is pushed down one line - line break - when clicking on the link again the text comment disappears but the text below stays where it were pushed down. Is it possible having the text below to go back to its position where it were before the link were clicked, when clicking it once againg after having read the comment? Thanks John
i think I remember this bug In IE and the answer is, you can't revert the spacing back easily - there's a bug in IE where an empty element (one whose innerHTML has been emptied) actually is not empty - it has something like a line break as a space retainer. workaround: i ended up using was to apply inline display style to the div after emptying the innerhtml. this bug may actually be derived from the lack of :empty pseudo selector / styling in IE. for more on it, just google for "ie empty div using space" or something
Thanks for all the help but I only tested it in the viewer of the HTML editor yesterday. Testing it in IE and Firefox today it doesn't work in any of them. The commentary is folded out when clicking on the link but clicking again doesn't remove the commentary. And in Firefox when clicking on a link it allways goes to the top of the page - like a 'go to top of page' link. Is there any fix for these problems? I am not a programmer so I'm lost as for this. Thanks John
Thanks for your response. I, however only had tested it in the viewer of the HTML editor - re. my other post. Testing it in IE today the comment is shown but doesn't disappear as it should when clicking on the link once more. So I can't see if there afterwards is empty space in IE. John
Thanks again premiumscripts - I don't see your post here, but replacing it with if(document.getElementById(where).innerHTML != '') { as you suggested did the job. Now it works fine in both explorer and firefox. In firefox there is no space after having clicked on the links - after having clicked on the link the second time so the text comment disappears the text below returns to its original place. However as for explorer there is this space. And it doesn't look good if comments are placed 20 times on one page. The text doesn't return to it's original place. As mentioned in this thread it may be a bug in explorer, but I wish that someone had a solution for that as well - where do I find Bill Gates? John
Adding display: inline; to the css actually removes the empty space in explorer: .section { display:block; clear:both; color:#000000; margin-bottom:5px; display: inline; } But now part of the first line of the comment text is at the same line as the comment links: How do I add a line break in javascript? I learned that /n should be used but I don't know how and where to place it. John
as i said for linebreak just do something.innerHTML = "<br />" + realContent; don't think of it as a linebreak in javascript (which would be \n, for example alert("foo\nbar"), in this instance, think of javascript as your tool to produce normal html--and a break in html is just <br /> or <br> (dependent on your doctype).
I discovered one more problem with this script. Everytime I click a comment link it goes to the top of the page, like if it were a 'Go to top' link. Is there any fix for that as well? Hope that someone has a fix for this as well. Thanks John