Blog modification

Posted at 1:11:08 AM in Web (9) | Read count: 1390

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. 

Written by Leonard Rogers on Friday, December 24, 2010 | Comments (0)


    Name
    URL
    Email
    Email address is not published
    Remember Me
    Comments

    CAPTCHA Reload
    Write the characters in the image above