Onclick doesn't yield expected results.

Client Side Coding > Javascript & Ajax

(1/1)

drayarms:
Hello people, I have looked at this code in and out and can't seem to find out what the problem is. The topic says it all. I have a link on a webpage with id name comment_stream on which when users click, is supposed to display an otherwise hidden comment box (id name comment_stream_div) and at the same time, hide the comment link, you know the type on facebook and other social networking sites. I am using javascript functions to accomplish this with an onclick event. The idea is to toggle between the display attributes (block and none) of the elements i wish to hide or display with the onclick event. I will show the javasscript below, as well as the the html for the elements involved and the css.

--- Code: ---
<script type='text/javascript'>

function show_comment_stream_div() {

document.getElementById('comment_stream_div').display = 'block';

document.getElementById('comment_stream').display = 'none';
}

</script>

//Print the comment link

<p id = 'comment_stream' onclick = 'show_comment_stream_div()' > <a href = ''> Comments: </a> </p>";

//Print out the comments div.

<div id = 'comment_stream_div' onmouseover = 'show_close_comment_stream_div()' onmouseout = ' hide_close_comment_stream_div()'> <p id = 'close_comment_stream_div' onclick = 'hide_comment_stream_div()'> <a> X </a> </p>

<form action = 'status_comment_entry.php'>

<input id = 'comment_stream_input' type = 'textarea' rows = '8' cols = '20' value ='' name = 'comment' /> <br/>

<input id = 'comment_stream_submit' type = 'submit' value = 'submit!' name = 'submit' />

</form>

</div>

#comment_stream
{position:relative;bottom:70px;left:230px; color:#2d73b9; display:block;}

#comment_stream_div
{position:relative;bottom:82px;left:123px; width:240px; height:75px; border-style:solid; border-width:1px; border-color:#c0c0c0; display:none;}

--- End code ---

Here are screen shots of what i expect before and after clicking

Well folks, can anyone tell me what I'm doing wrong?

codeguru:
Hi dray,

You can do it with jQuery. Very simple; here's the code I generated for you:

--- PHP Code: ---
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>jQuery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
    $(function() {
        $('#comment_stream a').click(function(){
$('#comment_stream_div').show();
});
$('#comment_stream_div').mouseover(function(){
$('#close_comment_stream_div').show();
});
$('#comment_stream_div').mouseout(function(){
$('#close_comment_stream_div').hide();
});
$('#close_comment_stream_div').click(function(){
$('#comment_stream_div').hide();
});
    });
    </script>
</head>

<body>
<p id = 'comment_stream'> <a href='#'> Comments: </a></p>
<div id = 'comment_stream_div'>
<p id = 'close_comment_stream_div'<a>X</a> </p>
<form action = 'status_comment_entry.php'>
  <input id = 'comment_stream_input' type = 'textarea' rows = '8' cols = '20' value ='' name = 'comment' /> <br/>
  <input id = 'comment_stream_submit' type = 'submit' value = 'submit!' name = 'submit' />
</form>
</div>

</body>
</html>

--- End code ---

drayarms:
@Codeguru, thanks for that, I'm going to try it out. Only problem is I don't understand Jquery yet. Isn't there a way around this with just simple JS? I have a few other situations that I need to use events to alter.

drayarms:
I got a suggestion from another forum, to access the display and visibility attributes as follow:
document.getElementById('id').style.display = 'value'
That seems to solve the problem but one more problem arises. The expected results just flash on the screen for a brief second or two, then the page resorts to its original settings. Any suggestions?

Navigation

[0] Message Index

Go to full version