Last active
October 5, 2015 10:57
-
-
Save deostroll/46a59a23cc36945af5c8 to your computer and use it in GitHub Desktop.
chat sample css
This file contains 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
| node_modules | |
| app |
This file contains 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
| $(function(){ | |
| var chats = $('.chat-area'); | |
| var odd = false; | |
| var toggleClass = function() { | |
| odd = !odd; | |
| if(odd) { | |
| return 'odd'; | |
| } | |
| else { | |
| return ''; | |
| } | |
| }; | |
| var chatInput = $('#chat-input').keypress(function(evt){ | |
| if(evt.keyCode === 13) { | |
| var txt = chatInput.val(); | |
| chatInput.val(''); | |
| //chats.append('<li>' + txt + '</li>') | |
| var dt = new Date().getTime(); | |
| var div = $('<div/>') | |
| .append( | |
| '<strong>Me: </strong>' + txt | |
| ) | |
| .addClass('chat-msg') | |
| .addClass(toggleClass()) | |
| .appendTo(chats); | |
| console.log({ | |
| height: div.height(), | |
| top: div.offset().top, | |
| chatScrollTop: chats.scrollTop() | |
| }); | |
| chats.scrollTop(div.offset().top + div.height()); | |
| } | |
| }); | |
| }); |
This file contains 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
| /*global module:false*/ | |
| module.exports = function(grunt) { | |
| // Project configuration. | |
| grunt.initConfig({ | |
| // Metadata. | |
| pkg: grunt.file.readJSON('package.json'), | |
| banner: '/*! <%= pkg.title || pkg.name %> - v<%= pkg.version %> - ' + | |
| '<%= grunt.template.today("yyyy-mm-dd") %>\n' + | |
| '<%= pkg.homepage ? "* " + pkg.homepage + "\\n" : "" %>' + | |
| '* Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>;' + | |
| ' Licensed <%= _.pluck(pkg.licenses, "type").join(", ") %> */\n', | |
| // Task configuration. | |
| concat: { | |
| options: { | |
| banner: '<%= banner %>', | |
| stripBanners: true | |
| }, | |
| dist: { | |
| src: ['lib/<%= pkg.name %>.js'], | |
| dest: 'dist/<%= pkg.name %>.js' | |
| } | |
| }, | |
| jshint: { | |
| options: { | |
| curly: true, | |
| eqeqeq: true, | |
| immed: true, | |
| latedef: true, | |
| newcap: true, | |
| noarg: true, | |
| sub: true, | |
| undef: true, | |
| unused: true, | |
| boss: true, | |
| eqnull: true, | |
| browser: true, | |
| globals: {} | |
| }, | |
| gruntfile: { | |
| src: 'Gruntfile.js' | |
| }, | |
| lib_test: { | |
| src: ['lib/**/*.js', 'test/**/*.js'] | |
| } | |
| }, | |
| watch: { | |
| gruntfile: { | |
| files: '<%= jshint.gruntfile.src %>', | |
| tasks: ['jshint:gruntfile'] | |
| }, | |
| all: { | |
| files: ['app.js', 'style.css', 'index.html'], | |
| tasks: ['copy'], | |
| options: { | |
| livereload: '<%= connect.options.livereload %>' | |
| } | |
| } | |
| }, | |
| copy: { | |
| app: { | |
| expand: true, | |
| src: ['*.html', '*.js', '*.css', '!Gruntfile.js'], | |
| dest: 'app/', | |
| filter: 'isFile' | |
| } | |
| }, | |
| clean: { | |
| app: { | |
| src: 'app/' | |
| } | |
| }, | |
| connect: { | |
| options: { | |
| livereload: 35729, | |
| hostname: 'localhost', | |
| port: 9542, | |
| directory: 'app' | |
| }, | |
| livereload: { | |
| options: { | |
| open: true, | |
| middleware: function(connect) { | |
| var serveStatic = require('serve-static') | |
| var app = connect(); | |
| app.use(serveStatic('app')) | |
| return [ | |
| app | |
| ]; | |
| } | |
| } | |
| } | |
| } | |
| }); | |
| // These plugins provide necessary tasks. | |
| grunt.loadNpmTasks('grunt-contrib-concat'); | |
| grunt.loadNpmTasks('grunt-contrib-jshint'); | |
| grunt.loadNpmTasks('grunt-contrib-watch'); | |
| grunt.loadNpmTasks('grunt-contrib-connect'); | |
| grunt.loadNpmTasks('grunt-contrib-copy'); | |
| grunt.loadNpmTasks('grunt-contrib-clean'); | |
| // Default task. | |
| grunt.registerTask('default', ['jshint', 'qunit', 'concat', 'uglify']); | |
| grunt.registerTask('serve', ['build', 'connect:livereload', 'watch']) | |
| grunt.registerTask('build', ['clean', 'copy']) | |
| }; |
This file contains 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
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> | |
| <title>Sample Chat</title> | |
| <!-- Bootstrap --> | |
| <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css"> | |
| <link rel="stylesheet" type="text/css" href="style.css"> | |
| </head> | |
| <body> | |
| <h1>Sample Chat</h1> | |
| <div class="container"> | |
| <div id="chat-container"> | |
| <div class="chat-area"> | |
| </div> | |
| <div> | |
| <input id="chat-input" type="text" placeholder="Type and press 'Enter' to send..."/> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> | |
| <!-- Include all compiled plugins (below), or include individual files as needed --> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> | |
| <script src="app.js"></script> | |
| </body> | |
| </html> |
This file contains 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
| { | |
| "engines": { | |
| "node": ">= 0.10.0" | |
| }, | |
| "devDependencies": { | |
| "connect-livereload": "^0.5.3", | |
| "grunt": "~0.4.5", | |
| "grunt-contrib-clean": "^0.6.0", | |
| "grunt-contrib-concat": "~0.4.0", | |
| "grunt-contrib-connect": "^0.11.2", | |
| "grunt-contrib-copy": "^0.8.1", | |
| "grunt-contrib-jshint": "~0.10.0", | |
| "grunt-contrib-watch": "~0.6.1", | |
| "serve-static": "^1.10.0" | |
| } | |
| } |
This file contains 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
| #chat-container { | |
| min-height: 415px; | |
| height: 415px; | |
| border: 1px solid blue; | |
| padding: 7px; | |
| } | |
| .chat-area { | |
| overflow-y: auto; | |
| width: 100%; | |
| height:380px; | |
| } | |
| .chat-msg { | |
| } | |
| .odd { | |
| background-color: #E5FFE5; | |
| } | |
| #chat-input { | |
| position: relative; | |
| bottom: 0px; | |
| border: none; | |
| background-color: #e0e0e0; | |
| width:100%; | |
| height: 25px; | |
| } | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment