Created
March 30, 2012 12:54
-
-
Save beakr/2251323 to your computer and use it in GitHub Desktop.
Expanding nice comment box.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .comment_box { | |
| /* Cosmetic */ | |
| margin-left: 30px; | |
| margin-top: 50px; | |
| border-radius: 7px; | |
| border-color: #BABABA; | |
| box-shadow: 1px 5px 2px #EDEDED; | |
| height: 130px; | |
| width: 300px; /* Was 470px */ | |
| /* Text */ | |
| font-family: "Helvetica Neue", sans-serif; | |
| font-size: 15px; | |
| font-weight: normal; | |
| color: #7A7A7A; | |
| padding: 10px; | |
| } | |
| .comment_box:focus { | |
| outline: none; | |
| border-color: #7AB0E6 | |
| } | |
| |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <body> | |
| <textarea class="comment_box">Post a comment...</textarea> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Auto-selection when clicked | |
| $(".comment_box").click(function() { | |
| $(".comment_box").css('color', 'black'); | |
| }); | |
| // Text turns gray again when not typing | |
| $(".comment_box").blur(function() { | |
| $(".comment_box").css('color', '#7A7A7A'); | |
| }); | |
| // Post a comment... dissapears when field is clicked | |
| $('.comment_box').focus(function() { | |
| if ($(this).val() === 'Post a comment...') { | |
| return $(this).val(''); | |
| } | |
| }); | |
| // Post a comment... reappears when field is not in focus anymore | |
| $('.comment_box').blur(function() { | |
| if ($(this).val() === '') { | |
| return $(this).val('Post a comment...'); | |
| } | |
| }); | |
| // Expanding | |
| $(".comment_box").focus(function() { | |
| $(this).animate({ width: "470px" }, 250); | |
| $(this).animate({ height: "200px" }, 250); | |
| }); | |
| $(".comment_box").blur(function() { | |
| $(this).animate({ width: "300px" }, 200); | |
| $(this).animate({ height: "130px" }, 200); | |
| }); |
qqqqq
ghj
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
asd