Expandable Text Area

[deboz]

I was jus wondering how u guys at OSNN made the "reply to thread/quick reply/Post New Thread" area with the expandable text area when you click the "increase size button" in the top right corner?


<usrname>deboz</usrname>

 

[SPeedY_B]

We didn't. Jelsoft did 😀

It's basically done with Javascript, it should be in the source somewhere, it's quite easy to do.

 

[kcnychief]

Pretty sure this does it...

AdminCP > vBulletin options > Message Posting and Editing Options > Quick Reply Enabled > Yes - Show Enhanced (WYSIWYG) Editor Toolbar

 

[SPeedY_B]

Pretty sure this does it...

AdminCP > vBulletin options > Message Posting and Editing Options > Quick Reply Enabled > Yes - Show Enhanced (WYSIWYG) Editor Toolbar

That doesn't apply if you're not using vB though.

 

[kcnychief]

Yeah, figured he wanted to know how to do it within vBulletin 😀

 

[deboz]

well Gents, i have no idea of vB. I searched the code already but i don't see the button calling a function or anything? it's a really neat technique though...do u kno of any sites that i could probably get such material/tutorial? it could even be to expand a <div> on click of a button.I'm sure i could tailor it from there!
Thanks!
<usrname>deboz</usrname>

 

[SPeedY_B]

Here's what I have on my site's contact form:

...
<br /><textarea name="body" cols="70" rows="10" id="mailbody"></textarea>
			<script type="text/javascript"> <!--
			document.write ('<br /><div><a href="javascript:bigger();"><img src="./img/bigger.png" alt="Bigger" class="noBorder" /></a>&nbsp;&nbsp;<a href="javascript:smaller();"><img src="./img/smaller.png" alt="Smaller" class="noBorder" /></a>&nbsp;&nbsp;&nbsp;</div>');
			// -->
			</script>

<script type="text/javascript"> <!--
function bigger() {
	var currentSize = document.getElementById('mailbody').rows;	
	var nextSize = currentSize+2;
	document.getElementById('mailbody').rows = nextSize;
}
function smaller() {
	var currentSize = document.getElementById('mailbody').rows;
	var nextSize = currentSize-2;
	document.getElementById('mailbody').rows = nextSize;
} // -->
</script>

snoogins.

 

[deboz]

I understand it and i haven't tried it yet!! Wow!! i'll try it in the morning. But it seems really simple from how i've tried to interpret it (although i aint no scripter/i'm a designer).. I know this has to work so i'm saying thanx a million..I'll b sure to update u when it's effective.
Thanks 4 the lesson!

<usrname>deboz</usrname>

 

[SPeedY_B]

No problem, I'm sure there's a way to simplify it further, I wrote that quickly when making a design ages ago 😀

 

[deboz]

No problem, I'm sure there's a way to simplify it further, I wrote that quickly when making a design ages ago 😀

Works a wonder! thanks for that lesson but i wan to kno "Is it necessary for the javascript in the body? or even better, why you use javascript in the body?" AND couldn't onclick="javascript:bigger();" be used?

 

[SPeedY_B]

If I recall, the JS needed to be after the element we're resizing. Though you can try playing about with it 🙂

And yes, onclick can be used, I just used href as the links are being written by JS, therefore anyone who has JS disabled wont see them anyway. 🙂

 

[deboz]

If I recall, the JS needed to be after the element we're resizing. Though you can try playing about with it 🙂

And yes, onclick can be used, I just used href as the links are being written by JS, therefore anyone who has JS disabled wont see them anyway. 🙂

OOOOOK! I get it now. I wasn't actually thinking about the links been written with the JS but since u've explained it now i get it - ppl with JS disabled wouldn't be able to see the buttons as u said!

I asked my previious question bc i had already fooled around the coded and it wrkd withouthe JS in the body- so i just had to kno if there was some sort of advantage to using JS in the body.

But i c that ur code increases the accessibility of the site bc obiviously 'Someone who has JS disabled would have no need to see those buttons"

Great! thanks for this Lesson:up:

<usrname>deboz</usrname>