Distraction free huge chat.
Forked from Luuk Lamers's Pen Big Chat.
A Pen by Bright Spark on CodePen.
Created
August 18, 2015 07:53
-
-
Save bright-spark/f11fcb9c5d67118d2143 to your computer and use it in GitHub Desktop.
Big Chat
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
| <body class="light"> | |
| <a href="#" class="toggle">toggle scheme</a> | |
| <div id="chat"> | |
| <div class="messages"> | |
| <div class="message"> | |
| <div class="person">Me</div> | |
| Hi, how are you? | |
| </div> | |
| <div class="message right"> | |
| <div class="person">Person B</div> | |
| Hey! I'm fine, how are you? | |
| </div> | |
| <div class="message"> | |
| <div class="person">Me</div> | |
| Very very good! Wanna see a movie tonight? | |
| </div> | |
| <div class="message right"> | |
| <div class="person">Person B</div> | |
| Yeah, which one? | |
| </div> | |
| <div class="message"> | |
| <div class="person">Me</div> | |
| How about the Avengers? | |
| </div> | |
| <div class="message right"> | |
| <div class="person">Person B</div> | |
| Nehh, don't like it | |
| </div> | |
| <div class="message"> | |
| <div class="person">Me</div> | |
| Oh, seriously? What about spiderman then? | |
| </div> | |
| <div class="message right"> | |
| <div class="person">Person B</div> | |
| Yess awesome!!! | |
| </div> | |
| <div class="message right"> | |
| Ten 'o clock? | |
| </div> | |
| <div class="message right"> | |
| dude? | |
| </div> | |
| </div> | |
| <div class="typearea"> | |
| <div class="person">Me</div> | |
| <textarea name="newtext" id="" cols="30" rows="3" tabindex="1">Sorry, my dinner burned :S</textarea> | |
| </div> | |
| </div> | |
| </body> |
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
| $("textarea").on("keyup", function(e){ | |
| if(e.keyCode == 13){ | |
| var insertText = $(this).val(); | |
| $('.messages').append('<div class="message"><div class="person">Me</div>'+insertText+'</div>'); | |
| $(this).val('').html(''); | |
| $("body").animate({scrollTop:$('body').height()}); | |
| } | |
| }); | |
| $('.toggle').on("click", function(){ | |
| $('body').toggleClass('light'); | |
| }); |
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
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
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{ | |
| height:100%; | |
| } | |
| body{ | |
| background:black; | |
| color: #666; | |
| transition: 0.2s ease all; | |
| } | |
| body.light{ | |
| background:white; | |
| color: #bbb; | |
| } | |
| .toggle{ | |
| background: #111; | |
| position: fixed; | |
| top: 0.5em; | |
| left: 0.5em; | |
| font-size: 16px; | |
| color: #888; | |
| text-decoration: none; | |
| padding: 1em; | |
| transition: 0.3s ease background; | |
| &:hover{ | |
| background: #222; | |
| } | |
| } | |
| body.light .toggle{ | |
| background: #eee; | |
| color: #666; | |
| &:hover{ | |
| background: #ddd; | |
| } | |
| } | |
| html,body,div,textarea,input{ | |
| font-family: Roboto, sans-serif; | |
| font-size: 36px; | |
| font-weight: 200; | |
| } | |
| #chat{ | |
| width: 600px; | |
| margin: auto; | |
| } | |
| .message{ | |
| line-height: 1.4; | |
| margin: 0 0 0.5em 0; | |
| position: relative; | |
| &.right{ | |
| text-align: right; | |
| .person{ | |
| right:auto; | |
| left: 100%; | |
| padding:0.5em 0 0 1em; | |
| } | |
| } | |
| } | |
| .message:last-child{ | |
| animation-name: fadeDark; | |
| animation-duration: 3s; | |
| } | |
| .light .message:last-child{ | |
| animation-name: fadeLight; | |
| animation-duration: 3s; | |
| } | |
| .person{ | |
| font-size: 50%; | |
| line-height: inherit; | |
| position: absolute; | |
| right:100%; | |
| padding:0.5em 1em 0 0; | |
| white-space: nowrap; | |
| } | |
| .typearea{ | |
| position: relative; | |
| } | |
| textarea{ | |
| background: transparent; | |
| border: 0 none; | |
| border-top: 1px solid currentColor; | |
| font-size: 36px; | |
| width: 100%; | |
| padding: 0 0 0 0; | |
| margin: 0; | |
| color: white; | |
| outline: 0 none; | |
| transition: 0.3s ease color; | |
| } | |
| .light textarea{ | |
| color: #000; | |
| } | |
| @keyframes fadeDark { | |
| from{color: #fff;} | |
| } | |
| @keyframes fadeLight { | |
| from{color: #000;} | |
| } |
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
| <link href="http://fonts.googleapis.com/css?family=Roboto:100,300,400" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment