Blog modification
I didn't like the form for making a comment to display on the page unless the reader wanted to leave a comment. It made the page look way too busy and I'm of the opinion that not everyone is going to leave a comment. So, I decided to hide it and leave a link the user could click to get the comment form to display.
I'm know you can hide information on a page using CSS styles and then use javascript to change the style characteristic to show the hidden information. For example the CSS style to hide everything between <div></div>, the opening tag would have <div style="display:none">. This also hides the real estate used to display the information. My problem was the code to get it to show, so I did some research.
The first sight I found was here and I used the following snippet.
<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function toggle(el)
{
myEl = document.getElementById(el);
myEl.style.display = (myEl.style.display == 'none') ? 'block' : 'none';
}
</script>
</head>
<body>
<div id="show" style="display: block;"><a href="#" onclick="toggle('show');toggle('hide');toggle('a');">Show</a></div>
<div id="hide" style="display: none;"><a href="#" onclick="toggle('show');toggle('hide');toggle('a');">Hide</a></div>
<div id="a" style="display: none;">Hello, World</div>
</body>
</html>
This worked pretty good, but when I clicked to show the page, the page would refresh and position the display to the top. It would also clear off any data I entered. I found a comment on this page "The link contains “javascript:”, which indicates that this link doesn’t point to a page..." that got me to thinking. The href="#", while it doesn't go anywhere, could be causing the problem as it points to a page and not to a javascript so I modified the snippet above to:
<div id="show" style="display: block;"><a href="javascript:onclick=toggle('show');toggle('hide');toggle('a');">Show</a></div>
<div id="hide" style="display: none;"><a href="javascript:onclick=toggle('show');toggle('hide');toggle('a');">Hide</a></div>
With that modification, the page stopped refreshing. You can see the results on the page your viewing by clicking Leave a comment.
