top



http://world-dezign.forumotion.com/h48-

how to apply it on my textarea like in WDForum?

I know how to, but tell me, why exactly do you want this?

the same...

Follow this:

- Find the selector for the textarea in quick reply or give it one.
- Choose a height, your css would proberly look like this now.

Code:
SELECTOR HERE {
height : 100px;
}
- Create another css code and put :focus behind it, that means you can change it when the mouse is in the area.
Code:
SELECTOR HERE:focus {
height : 200px;
}
That would change the quick reply area when having the mouse inside it.

Note! There is a little different value and property with this on World Dezign, so it won't animate like here. I can give you it, but hear the staff first, if it's ok to use, then I'll give it to you. Wink

You can give it UD (: If people ask first we give it but if they just take it without asking, we will report the forum (:

Okay Happy

---

It's specified by the CSS3 transition, here is a generell look for values and properties.

For Google Chrome:

Code:
SELECTOR HERE {
height : 100px;
-webkit-transition : height 1s ease-in-out;
}
For Mozilla Firefox:
Code:
SELECTOR HERE {
height : 100px;
-moz-transition : height 1s ease-in-out;
}
For Opera:
Code:
SELECTOR HERE {
height : 100px;
-o-transition : height 1s ease-in-out;
}
Default CSS3:
Code:
SELECTOR HERE {
height : 100px;
transition : height 1s ease-in-out;
}
So in all use:
Code:
SELECTOR HERE {
height : 100px;
-webkit-transition : height 1s ease-in-out;
-o-transition : height 1s ease-in-out;
-moz-transition : height 1s ease-in-out;
transition : height 1s ease-in-out;
}

Note! the "1s" specifies the speed, increase the number and it'll get slower.

Nice Explaining! Wink

Thanks Smile

---

.daniel I used the example (World Dezign HTML page) you gave to set a speed.

i don't understand! Vey Mad

Just take the last code and add your Quick Reply class/ID (:

What's the quick reply ID? Smile

so:

Code:
TEXTAREA1 {
height : 100px;
-webkit-transition : height 1s ease-in-out;
-o-transition : height 1s ease-in-out;
-moz-transition : height 1s ease-in-out;
transition : height 1s ease-in-out;
}

Code:
#text_editor_textarea.quick_reply_textarea

Thank-you Gangstar. (:

Welcome (:

On a note, how do you find all of these ID's? And when I input the code into my css, it doesn't work.. :(

Code:
#text_editor_textarea.quick_reply_textarea {
height : 100px;
}

#text_editor_textarea.quick_reply_textarea:focus {
height : 200px;
}

#text_editor_textarea.quick_reply_textarea {
height : 100px;
-webkit-transition : height 1s ease-in-out;
-o-transition : height 1s ease-in-out;
-moz-transition : height 1s ease-in-out;
transition : height 1s ease-in-out;
}

I am correct right? I am using phpBB2. o-o

View page source and search for them,

Nope.. the code was for #punbb only.

try this code:

Code:
form#quick_reply textarea#text_editor_textarea {
height : 100px;
-webkit-transition : height 1s ease-in-out;
-o-transition : height 1s ease-in-out;
-moz-transition : height 1s ease-in-out;
transition : height 1s ease-in-out;
}

form#quick_reply textarea#text_editor_textarea:focus {
height : 200px;
}

lol... no luck. :(

Give me time to find the correct one Razz

Here:

Code:
form#quick_reply textarea#text_editor_textarea {
-webkit-transition: height 0.4s ease-in-out;
-o-transition: height 0.4s ease-in-out;
-moz-transition: height 0.4s ease-in-out;
transition: height 0.4s ease-in-out;
height: 100px !important;
}
form#quick_reply textarea#text_editor_textarea:focus {
  height: 150px !important;
}

Perfection! Smile

I already have this on my forum for more than a month... lol (After reading the CSS3 Transition tut of course).

Too all other versions on Forumotion, just search for the word Quick Reply (preferably Ctrl + F in most browsers) in the source of the page, and have a look at the id or class. Look for that in your CSS and edit. Smile

Just a note for users of different version forums.

in my forum it don't go!

.daniel what is ur forum version?

PunBB

Go to page : 1, 2  Next