Expandable Text Area

Discussion in 'Web Design & Coding' started by deboz, Nov 27, 2006.

  1. deboz

    deboz just wait till I finish

    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>
     
  2. SPeedY_B

    SPeedY_B I may actually be insane.

    Messages:
    15,800
    Location:
    Midlands, England
    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.
     
  3. kcnychief

    kcnychief █▄█ ▀█▄ █ Political User Folding Team

    Messages:
    16,948
    Location:
    Massachusetts
    Pretty sure this does it...

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

    SPeedY_B I may actually be insane.

    Messages:
    15,800
    Location:
    Midlands, England
    That doesn't apply if you're not using vB though.
     
  5. kcnychief

    kcnychief █▄█ ▀█▄ █ Political User Folding Team

    Messages:
    16,948
    Location:
    Massachusetts
    Yeah, figured he wanted to know how to do it within vBulletin :D
     
  6. deboz

    deboz just wait till I finish

    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>
     
  7. SPeedY_B

    SPeedY_B I may actually be insane.

    Messages:
    15,800
    Location:
    Midlands, England
    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 likes this.
  8. deboz

    deboz just wait till I finish

    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>
     
  9. SPeedY_B

    SPeedY_B I may actually be insane.

    Messages:
    15,800
    Location:
    Midlands, England
    No problem, I'm sure there's a way to simplify it further, I wrote that quickly when making a design ages ago :D
     
  10. deboz

    deboz just wait till I finish

    Messages:
    19
    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: Nov 30, 2006
  11. SPeedY_B

    SPeedY_B I may actually be insane.

    Messages:
    15,800
    Location:
    Midlands, England
    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. :)
     
  12. deboz

    deboz just wait till I finish

    Messages:
    19
    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>