how to make a javascript covered slideup?

Question

When you first click the answer text area, it will pop up a message box

Your Answer
Thanks for contributing an answer to Stack Overflow!

Please make sure you answer the question; this is a Q&A site, not a discussion forum.

Provide details and share your research. Avoid statements based solely on opinion; 
only make statements you can back up with an appropriate reference, or 
personal experiences.

enter image description here

I am struggling to implement this in my own system. I have checked the jQuery slideUp function, but it slides the text message box down not up.

Does any one know how to implement it?

I am assuming that it uses JavaScript animation.

There is a description of how to do popups with jquery here [here][1] [1]: http://stackoverflow.com/questions/1328723/how-to-generate-a-simple-popup-using-jquery — Soren, Jul 21 '11 at 06:19
There is a description of how to do popups [here][1] [1]: http://stackoverflow.com/questions/1328723/how-to-generate-a-simple-popup-using-jquery — Soren, Jul 21 '11 at 06:20

score 2 · Answer 1 · edited Feb 11 '14 at 21:12

2

I'm not sure exactly what you want, is this it? I think you want to use .slideToggle()

HTML

<textarea></textarea>
<div class="msg">
     谢谢你!!
</div>

jQuery

$(".msg").slideToggle();
    $("textarea").focus(function(){
        $(".msg").slideToggle();
    });
    $("textarea").blur(function(){
        $(".msg").slideToggle();
    });

What do you want to appear and when?

edited Feb 11 '14 at 21:12

rene

41,474
78
114
152

answered Jul 21 '11 at 06:23

mazlix

6,003
6
33
45

ye, but if you put the textarea bellow the div , when it click the textarea , the textarea will lide down , i need the textarea don't move , just div to slide up – mike Jul 21 '11 at 06:26
http://jsfiddle.net/mazlix/EXyxb/5/ is just extra css, i'll post an update to my jsfiddle, but it will just be a matter of using `position:absolute` if you show me an example of what you want it to look like i could help more... 我不知道您想要什么 – mazlix Jul 21 '11 at 06:28
I don't know where the popup thing from clicking on a textarea is (that you want to duplicate). Maybe take a screenshot? – mazlix Jul 21 '11 at 06:35
There are a lot of options on how to display a message; you should evaluate jQuery UI Dialog and jqModel. 你们都中国人吗？ – hayesgm Jul 21 '11 at 06:43
i have add the image , 我是中国人，呵呵。 – mike Jul 21 '11 at 06:44
it all depends on your specific desires for the styles http://jsfiddle.net/mazlix/EXyxb/11/ should help you get started with anything tricky, and then u can just edit it (i don't know how much padding around it etc. you want) 我不中国人，可是在清华读书了…… – mazlix Jul 21 '11 at 06:51
actually, the examples I gave were a little bad... you should use http://jsfiddle.net/mazlix/EXyxb/12/ (I changed `slideToggle()` to `slideUp()` and `slideDown()`) 我原来是美国人，现在在美国工作你用人人或QQ吗？ – mazlix Jul 21 '11 at 06:56
i think it is use javascript animation.not slide – mike Jul 21 '11 at 07:58

score 0 · Answer 2 · answered Jul 21 '11 at 06:19

0

Suppose your textarea is like this

<textarea id='answer'></textarea>

SO you can use

$('textarea#answer').bind('click', function() {alert('Thanks')})

answered Jul 21 '11 at 06:19

Jatin Dhoot

4,294
9
39
59

the alert('Thanks') will just popup a windows , i don't want thant – mike Jul 21 '11 at 06:21
You can write the required code in function(). I mean first you can take a hidden div, then you can show it using $('div#message').show('fast'). It depends on your imagination and requirement, but this is the basic guidance – Jatin Dhoot Jul 21 '11 at 06:23

score 0 · Accepted Answer · answered Jul 22 '11 at 01:53

<!DOCTYPE html>
<html>
  <head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <style type="text/css">
      .div1 {
      width:400px;
      height:100px;
      border: 1px solid #777777;
      }
      .div2 {
      width:400px;
      height:100px;
      border: 1px solid #777777;
      overflow:hidden;
      }
      .help {
      background-color:#fefae2;
      border: 1px solid #f3eed5;
      width:400px;
      height:100px;
      margin-top:100px;
      }
      .info-ok{
      font-size: 13px;
      color:#1087a4;
      float:right;
      margin-top:5px;
      margin-right:5px;
      }
      .info-head{
      font-size: 15px;
      font-weight: bold;
      margin-top:15px;
      margin-right:5px;
      }
    </style>
  </head>
  <script type="text/javascript">
    function popdown(){
    $(".help").animate({
    marginTop:"100px",
    }, 1000 );
    }
    function popup(){
    $(".help").animate({
    marginTop:"0px",
    }, 1000 );
    }
  </script>
  <body>
    <div class="div1">a</div>
    <div class="div2">
      <div class="help">
    <a class="info-ok" onclick="popdown()">ok</a>
    <p class="info-head">您的答案</p>
    <p>感谢您对StackPointer做的贡献</p>
    <p>请确保您回答这个问题,这是一个问答网站，而不是一个论坛</p>
    <p></p>
      </div>
    </div>
    <div class="div3">c</div>
    <textarea onclick="popup()"></textarea>
  </body>
</html>

how to make a javascript covered slideup?

3 Answers3