Expandable Text Area

deboz

just wait till I finish
Joined
Nov 25, 2006
Messages
19
#1
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
Mar 31, 2002
Messages
15,800
#2
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 User
Joined
Apr 8, 2005
Messages
16,948
#3
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
Mar 31, 2002
Messages
15,800
#4
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.
 

deboz

just wait till I finish
Joined
Nov 25, 2006
Messages
19
#6
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
Mar 31, 2002
Messages
15,800
#7
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
Nov 25, 2006
Messages
19
#8
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
Mar 31, 2002
Messages
15,800
#9
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
Nov 25, 2006
Messages
19
#10
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
Mar 31, 2002
Messages
15,800
#11
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
Nov 25, 2006
Messages
19
#12
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 posts

Latest profile posts

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 comming back to hunt up some threads, if you want, give me your email address so we can keep in touch easier, mine is perriscalderon at gmail
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 https://tinyurl.com/ycpxl
Electronic Punk wrote on Perris Calderon's profile.
All good still mate?
Hello, is there anybody in there? Just nod if you can hear me ...

Forum statistics

Threads
62,031
Messages
673,546
Members
89,038
Latest member
Samhicks