Expandable Text Area

deboz

just wait till I finish
Joined
25 Nov 2006
Messages
19
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

I may actually be insane.
Joined
31 Mar 2002
Messages
15,804
We didn't. Jelsoft did :D

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

kcnychief

??? ??? ?
Political Access
Joined
8 Apr 2005
Messages
16,950
Pretty sure this does it...

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

SPeedY_B

I may actually be insane.
Joined
31 Mar 2002
Messages
15,804
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

??? ??? ?
Political Access
Joined
8 Apr 2005
Messages
16,950
Yeah, figured he wanted to know how to do it within vBulletin :D
 

deboz

just wait till I finish
Joined
25 Nov 2006
Messages
19
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

I may actually be insane.
Joined
31 Mar 2002
Messages
15,804
Here's what I have on my site's contact form:
Code:
...
<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>



Code:
<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

just wait till I finish
Joined
25 Nov 2006
Messages
19
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

I may actually be insane.
Joined
31 Mar 2002
Messages
15,804
No problem, I'm sure there's a way to simplify it further, I wrote that quickly when making a design ages ago :D
 

deboz

just wait till I finish
Joined
25 Nov 2006
Messages
19
No problem, I'm sure there's a way to simplify it further, I wrote that quickly when making a design ages ago :D

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?
 
Last edited:

SPeedY_B

I may actually be insane.
Joined
31 Mar 2002
Messages
15,804
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

just wait till I finish
Joined
25 Nov 2006
Messages
19
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>
 

Members online

No members online now.

Latest profile posts

Electronic Punk wrote on Sazar's profile.
Rest in peace my friend, been trying to find you and finally did in the worst way imaginable.
Terrahertz wrote on Electronic Punk's profile.
Yo fellas!
Electronic Punk wrote on Sazar's profile.
Where are you buddy?
Perris Calderon wrote on Electronic Punk's profile.
Hey EP! All good with me, applying for Microsoft MVP right now, should have done this a while ago.

Notifications don't work, I only found your response by coming back to hunt up some threads, if you want, give me your email address so we can keep in touch easier!
Perris Calderon wrote on Electronic Punk's profile.
EP, glad to see you come back and tidy up...did want to ask a one day favor, I want to enhance my resume , was hoping you could make me administrator for a day, if so, take me right off since I won't be here to do anything, and don't know the slightest about the board, but it would be nice putting "served administrator osnn", if can do, THANKS

Been running around Quora lately, luv it there!

Forum statistics

Threads
61,997
Messages
673,411
Members
5,590
Latest member
AntonioPR