Expanding/collapsing div

[chomedey]

I'm fairly inexperienced with javascript but have managed to do more or less what I want to do, which is to recreate facebook's status update textarea.

 

How that works is if you click in the textarea the share (submit) button appears.  If you then click outside the textarea, but within the share button area, the share button remains visible, but if you click outside of that area, elsewhere in the page, it disappears.

 

In my version I haven't figured out how to distinguish between a user clicking outside the textarea but within the area of the table housing both the textarea and the share button, and a user clicking outside the table area.

 

Any idea how I might do this?

 

Cheers.

 

Julian

 

<form name="share" action="index.php?a=add" method="post" onSubmit="return checkform()">
<?
echo "<table class='share'><tr><td class='col1'>";
echo "<img height='50' width='50' src='http://graph.facebook.com/$logged_in_user/picture' />";
?>
</td><td class='col2'><textarea name="share" value="share" id="share" style="color:#999;" onfocus="if(this.value==this.defaultValue)this.value=''; this.style.color = '#000'; Javascript:show('share').onetime;" onblur="if(this.value=='') {this.value=this.defaultValue; this.style.color = '#999';} else {this.style.color = '#000';}">What's on your mind?</textarea></td></tr>
<tr><td></td><td style="text-align:right;"><div id="share" style="display:none;">
<select name="visibility" id="visibility">
	<option value="">Share with:</option>
	<option value="everyone">Everyone</option>
	<option value="anon">Everyone (anonymously)</option>
	<option value="friends">Only friends</option>
	</select>
<input type="submit" value="Share" class="inputsubmit" /></td>
</div>
</tr></table>
</form>

<script type="text/javascript">
function toggle(obj) {
  var toggle = document.getElementById(obj);
  if (toggle.style.display != "none") {
    toggle.style.display = "none";
  }
  else {
    toggle.style.display = "inline";
  }
}

function show(obj) {
  var show = document.getElementById(obj);
  if (show.style.display = "none") {
    show.style.display = "inline";
  }
}
}

[brianlange]

Here's how to do it using jQuery. You set a click event to the entire document that will hide the Submit button. To prevent the textarea click and the surrounding div from also hiding the button you use the stopPropagation method.

$(document).ready(function() {
    $('form :submit').css('display', 'none');

$('#status').click( function(e) {
	$('form :submit').css('display', 'inline');
	e.stopPropagation();
});

$('#status').add('#statusBackground').click( function(e) {
	e.stopPropagation();
});

$(document).click(function(){
	$('form :submit').hide();
});
});

Html:

<div id="statusBackground">
<form id="updateStatus">
	<input type="text" id="status" value="what's on your mind?"><input type="submit" value="Share" />
</form>
</div>

[chomedey]

Hi,

 

This works OK, but not perfectly because

 

1) Sometimes I have to click twice in the textarea before the Share (submit) button reappears.  This seems to be completely random, insofar as it only happens about every four or so clicks - the rest of the time it works great.

 

2) The <select> tag, which I also want to appear and disappear with the Share button, is not picked up by the script.  I have tried changing things, so instead of

 

form: submit

 

I have

 

form: #submit, with both the select and the submit having an ID of 'submit', but it doesn't work (like I said, my knowledge of javascript is not great, and jquery even less).

 

Any ideas?

 

(Much appreciate your help btw).

 

J

[chomedey]

Hi,

 

Fixed the problem with the <select> tag.  Very easy in the end.

 

But still having a problem with randomness.  Sometimes have to click twice in the textarea, sometimes not.

 

Very odd.

 

Cheers.

 

J

[brianlange]

Try using focus instead of click.

Also try using the code independently of the other javascript on the page. The code shouldn't be buggy alone.

Add the other code snippets that make up the page until the bug appears.

Good luck.

[chomedey]

Yes, that's it.  It is conflicting with the other javascript on the page.

 

If I get rid of this:

 

onfocus="if(this.value==this.defaultValue)this.value=''; this.style.color = '#000';" onblur="if(this.value=='') {this.value=this.defaultValue; this.style.color = '#999';} else {this.style.color = '#000';}

 

in the textarea tag, everything works great.  But I kinda need this.

 

But I don't need it to act independently of the jquery script.  Right now the default text comes and goes even when clicking in the statusBackground area.  But I would prefer it to only come back if the user clicks outside that area.

 

Can I add it to the jquery script somehow?

 

Sorry to be so lost when it comes to jquery.  I'm trying to learn as I go (i.e. looked up e.stopPropagation and apparently I have to add an extra something for IE, which doesn't support it).

 

Cheers.

 

Julian

[chomedey]

The conflict between inline javascript and jquery does not occur with IE.  Finally something IE does better?

 

Either way, I am still looking for a solution for Chrome and Firefox.

 

Any ideas, anyone?

 

Cheers.

 

J

[Ang3l0fDeath]

onclick, onmouseover, onmouseout, onfocus use your javascript events.

 

Also since your doing a text input field, maybe the onmouseover/out event you should set a timer to expand/close the field, so it has a nice time delay before closing on itself.  Remember the more user-friendly the page is the better.

 

Plus with javascript you can find out where an element is on the page, its width, its height.  Plus you can find the mouse position on the page.  Well good luck, im just throwing ideas at ya.

[chomedey]

I tried onmouseover but it quickly got irritating, expanding and collapsing when the user is not necessarily wanting it to.  Onclick is much better.

 

I would like to set a timer, so it opens and closes less abruptly - not for this but for another expanding/collapsing div - but was looking up animation and didn't find much.  I will look up timer now.

 

Thanks.

 

Still not sure how to resolve the bug with conflicting inline javascript and jquery.

 

Cheers.

 

J