The text box rolling change

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

The original style: (note a change)

The following code:

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">


<html xmlns="">


<head>


<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


<title></title>


<style type="text/css">


* { margin:0; padding:0;font:normal 12px/17px Arial; }


.msg {width:300px; margin:100px; }


.msg_caption { width:100%; overflow:hidden; margin-bottom:1px;}


.msg_caption span { display:block; float:left; margin:0 2px; padding:4px 10px; background:#898989; cursor:pointer;color:white; }


.msg textarea{ width:300px; height:80px;height:100px;border:1px solid #000;}


</style>


 <!--   The introduction of jQuery -->


 <script src="../scripts/jquery-1.3.1.js" type="text/javascript"></script>


 <script type="text/javascript">


$(function(){


var $comment = $('#comment');//Gets the comment box


$('.up').click(function(){ //The button click event


if(!$comment.is(":animated")){//Determine whether a animation


$comment.animate({ scrollTop  : "-=50" } , 400);


}


})


$('.down').click(function(){//Click the button down binding events


if(!$comment.is(":animated")){


$comment.animate({ scrollTop  : "+=50" } , 400);


}


});


});


  </script>


</head>


<body>


<form action="" method="post">


<div class="msg">


<div class="msg_caption">


<span class="up" >Upward</span>


<span class="down" >Down</span>


</div>


<div>


<textarea id="comment" rows="8" cols="20">A multi line text box height changes.A multi line text box height changes.A multi line text box height changes.A multi line text box height changes.A multi line text box height changes.A multi line text box height changes.A multi line text box height changes.A multi line text box height changes.A multi line text box height changes.A multi line text box height changes.A multi line text box height changes.A multi line text box height changes.A multi line text box height changes.A multi line text box height changes.A multi line text box height changes.A multi line text box height changes.A multi line text box height changes.A multi line text box height changes.A multi line text box height changes.A multi line text box height changes.A multi line text box height changes.A multi line text box height changes.A multi line text box height changes.A multi line text box height changes.A multi line text box height changes.A multi line text box height changes.A multi line text box height changes.A multi line text box height changes.A multi line text box height changes.A multi line text box height changes.A multi line text box height changes.A multi line text box height changes.A multi line text box height changes.A multi line text box height changes.A multi line text box height changes.A multi line text box height changes.</textarea>


</div>


</div>


</form>


</body>


</html>


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Stephen at November 21, 2013 - 8:36 PM