aragonc
12 years ago
parent
7f5f75a9f6
commit
fee237c082
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 211 B |
@ -0,0 +1,238 @@ |
||||
body{ |
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; |
||||
font-size: 13px; |
||||
line-height: 18px; |
||||
color: #333333; |
||||
background-color:#F5F5F5; |
||||
margin: 0; |
||||
padding: 0; |
||||
} |
||||
.page-chat{ |
||||
padding: 10px; |
||||
background: #F5F5F5; |
||||
} |
||||
#clear-chat{ |
||||
position: absolute; |
||||
top:0; |
||||
left: 10px; |
||||
border: 1px solid #CCC; |
||||
background-color: #F2F2F2; |
||||
width:100px; |
||||
} |
||||
#content-chat{ |
||||
background:#fff; |
||||
padding: 30px; |
||||
-webkit-border-radius: 10px; |
||||
-moz-border-radius: 10px; |
||||
border-radius: 10px; |
||||
} |
||||
textarea { |
||||
width: 52%; |
||||
padding: 3%; |
||||
height: 100px; |
||||
float: left; |
||||
border: 0; |
||||
background-color: #fff; |
||||
font-size: 0.75em; |
||||
font-family: Helvetica, arial, sans-serif; |
||||
-webkit-border-radius: 10px; |
||||
-moz-border-radius: 10px; |
||||
border-radius: 10px; |
||||
border: 1px solid #CCCCCC; |
||||
color: #555555; |
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.075) inset; |
||||
} |
||||
.message-student .chat-image, .message-teacher .chat-image{ |
||||
width: 80px; |
||||
height: auto; |
||||
max-height: 80px; |
||||
display: inline-block; |
||||
vertical-align: top; |
||||
-webkit-border-radius: 10px; |
||||
-moz-border-radius: 10px; |
||||
border-radius: 10px; |
||||
border:2px solid #D8D8D8; |
||||
} |
||||
.message-student .content-message{ |
||||
background-color: #ffffff; |
||||
color: #555555; |
||||
padding: 10px; |
||||
margin-bottom: 15px; |
||||
border-top: 1px solid #ECECEC; |
||||
border-left: 1px solid #ECECEC; |
||||
border-right: 1px solid #ECECEC; |
||||
border-bottom: 3px solid #ECECEC; |
||||
border-radius: 10px; |
||||
|
||||
display: inline-block; |
||||
font-size: 13px; |
||||
padding: 15px; |
||||
vertical-align: top; |
||||
width: 310px; |
||||
} |
||||
.message-teacher .icon-message{ |
||||
display: inline-block; |
||||
margin-left: -6px; |
||||
margin-top: 10px; |
||||
width: 0; |
||||
height: 0; |
||||
border-top: 0px solid transparent; |
||||
border-bottom: 15px solid transparent; |
||||
border-left: 15px solid #DFF0D8; |
||||
} |
||||
.message-student .icon-message{ |
||||
display: inline-block; |
||||
margin-right: -6px; |
||||
margin-top: 10px; |
||||
width: 0; |
||||
height: 0; |
||||
border-top: 0px solid transparent; |
||||
border-bottom: 15px solid transparent; |
||||
border-right: 15px solid white; |
||||
} |
||||
.message-teacher .content-message{ |
||||
background-color: #DFF0D8; |
||||
color: #468847; |
||||
padding: 10px; |
||||
margin-bottom: 15px; |
||||
border-top: 1px solid #D6E9C6; |
||||
border-left: 1px solid #D6E9C6; |
||||
border-right: 1px solid #D6E9C6; |
||||
border-bottom: 3px solid #D6E9C6; |
||||
border-radius: 10px; |
||||
display: inline-block; |
||||
font-size: 13px; |
||||
padding: 15px; |
||||
vertical-align: top; |
||||
width: 320px; |
||||
} |
||||
.message-teacher .message-date{ |
||||
color: #666; |
||||
font-style: italic; |
||||
font-size: 10px; |
||||
text-align: right; |
||||
margin-right: 35px; |
||||
margin-top: 10px; |
||||
} |
||||
.message-student .message-date{ |
||||
color: #666; |
||||
font-style: italic; |
||||
font-size: 10px; |
||||
text-align: left; |
||||
margin-top: 10px; |
||||
} |
||||
.user-online .perfil{ |
||||
list-style: none; |
||||
padding: 0; |
||||
margin:0; |
||||
} |
||||
.user-online .perfil li{ |
||||
margin-bottom: 5px; |
||||
} |
||||
.user-online .perfil li a{ |
||||
color: #666; |
||||
text-decoration: none; |
||||
} |
||||
.user-online .title{ |
||||
color: #fff; |
||||
padding: 5px; |
||||
font-weight: bold; |
||||
font-size: 16px; |
||||
margin-bottom: 15px; |
||||
width: 90%; |
||||
background: #2a83bf; /* Old browsers */ |
||||
background: -moz-linear-gradient(top, #2a83bf 0%, #216da8 100%); /* FF3.6+ */ |
||||
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#2a83bf), color-stop(100%,#216da8)); /* Chrome,Safari4+ */ |
||||
background: -webkit-linear-gradient(top, #2a83bf 0%,#216da8 100%); /* Chrome10+,Safari5.1+ */ |
||||
background: -o-linear-gradient(top, #2a83bf 0%,#216da8 100%); /* Opera 11.10+ */ |
||||
background: -ms-linear-gradient(top, #2a83bf 0%,#216da8 100%); /* IE10+ */ |
||||
background: linear-gradient(to bottom, #2a83bf 0%,#216da8 100%); /* W3C */ |
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2a83bf', endColorstr='#216da8',GradientType=0 ); /* IE6-9 */ |
||||
} |
||||
.delete-chat{ |
||||
background: #F8F8F8; |
||||
padding-bottom: 15px; |
||||
} |
||||
.list-group { |
||||
margin-bottom: 20px; |
||||
padding-left: 0; |
||||
} |
||||
.list-group-item { |
||||
position: relative; |
||||
display: block; |
||||
padding: 10px 15px; |
||||
margin-bottom: -1px; |
||||
background-color: #ffffff; |
||||
border: 1px solid #dddddd; |
||||
} |
||||
li.list-group-item:hover, li.list-group-item:focus { |
||||
text-decoration: none; |
||||
background-color: #EEEEEE; |
||||
} |
||||
.user-image-chat{ |
||||
width: 40px; |
||||
height: auto; |
||||
max-height: 40px; |
||||
display: inline-block; |
||||
vertical-align: top; |
||||
-webkit-border-radius: 10px; |
||||
-moz-border-radius: 10px; |
||||
border-radius: 10px; |
||||
border:2px solid #ffffff; |
||||
float: left; |
||||
margin-right: 5px; |
||||
} |
||||
#user-online-scroll .viewport { width: 260px; height: 450px; overflow: hidden; position: relative; } |
||||
#user-online-scroll .overview { list-style: none; position: relative; left: 0; top: 0; padding: 0; margin: 0; } |
||||
#user-online-scroll .scrollbar{ background: transparent url(bg-scrollbar-track-y.png) no-repeat 0 0; position: relative; background-position: 0 0; float: right; width: 15px; } |
||||
#user-online-scroll .track { background: transparent url(bg-scrollbar-trackend-y.png) no-repeat 0 100%; height: 100%; width:13px; position: relative; padding: 0 1px; } |
||||
#user-online-scroll .thumb { background: transparent url(bg-scrollbar-thumb-y.png) no-repeat 50% 100%; height: 20px; width: 25px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: -5px; } |
||||
#user-online-scroll .thumb .end { background: transparent url(bg-scrollbar-thumb-y.png) no-repeat 50% 0; overflow: hidden; height: 5px; width: 25px; } |
||||
#user-online-scroll .disable { display: none; } |
||||
.noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; } |
||||
|
||||
.btn-enviar { |
||||
-moz-box-shadow:inset 0px 1px 0px 0px #c1ed9c; |
||||
-webkit-box-shadow:inset 0px 1px 0px 0px #c1ed9c; |
||||
box-shadow:inset 0px 1px 0px 0px #c1ed9c; |
||||
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #9dce2c), color-stop(1, #8cb82b) ); |
||||
background:-moz-linear-gradient( center top, #9dce2c 5%, #8cb82b 100% ); |
||||
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#9dce2c', endColorstr='#8cb82b'); |
||||
background-color:#9dce2c; |
||||
-webkit-border-top-left-radius:10px; |
||||
-moz-border-radius-topleft:10px; |
||||
border-top-left-radius:10px; |
||||
-webkit-border-top-right-radius:10px; |
||||
-moz-border-radius-topright:10px; |
||||
border-top-right-radius:10px; |
||||
-webkit-border-bottom-right-radius:10px; |
||||
-moz-border-radius-bottomright:10px; |
||||
border-bottom-right-radius:10px; |
||||
-webkit-border-bottom-left-radius:10px; |
||||
-moz-border-radius-bottomleft:10px; |
||||
border-bottom-left-radius:10px; |
||||
text-indent:0; |
||||
border:1px solid #83c41a; |
||||
display:inline-block; |
||||
color:#ffffff; |
||||
font-family:Arial; |
||||
font-size:22px; |
||||
font-weight:bold; |
||||
font-style:normal; |
||||
height:80px; |
||||
line-height:80px; |
||||
width:131px; |
||||
text-decoration:none; |
||||
text-align:center; |
||||
text-shadow:1px 1px 0px #689324; |
||||
cursor: pointer; |
||||
} |
||||
.btn-enviar:hover { |
||||
background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #8cb82b), color-stop(1, #9dce2c) ); |
||||
background:-moz-linear-gradient( center top, #8cb82b 5%, #9dce2c 100% ); |
||||
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#8cb82b', endColorstr='#9dce2c'); |
||||
background-color:#8cb82b; |
||||
}.btn-enviar:active { |
||||
position:relative; |
||||
top:1px; |
||||
} |
||||
@ -0,0 +1,243 @@ |
||||
;(function (factory) |
||||
{ |
||||
if (typeof define === 'function' && define.amd) |
||||
{ |
||||
define(['jquery'], factory); |
||||
} |
||||
else if (typeof exports === 'object') |
||||
{ |
||||
factory(require('jquery')); |
||||
} |
||||
else |
||||
{ |
||||
factory(jQuery); |
||||
} |
||||
} |
||||
(function ($) |
||||
{ |
||||
"use strict"; |
||||
|
||||
var pluginName = "tinyscrollbar" |
||||
, defaults = |
||||
{ |
||||
axis : 'y' // Vertical or horizontal scrollbar? ( x || y ).
|
||||
, wheel : true // Enable or disable the mousewheel;
|
||||
, wheelSpeed : 40 // How many pixels must the mouswheel scroll at a time.
|
||||
, wheelLock : true // Lock default scrolling window when there is no more content.
|
||||
, scrollInvert : false // Enable invert style scrolling
|
||||
, trackSize : false // Set the size of the scrollbar to auto or a fixed number.
|
||||
, thumbSize : false // Set the size of the thumb to auto or a fixed number.
|
||||
} |
||||
; |
||||
|
||||
function Plugin($container, options) |
||||
{ |
||||
this.options = $.extend({}, defaults, options); |
||||
this._defaults = defaults; |
||||
this._name = pluginName; |
||||
|
||||
var self = this |
||||
, $viewport = $container.find(".viewport") |
||||
, $overview = $container.find(".overview") |
||||
, $scrollbar = $container.find(".scrollbar") |
||||
, $track = $scrollbar.find(".track") |
||||
, $thumb = $scrollbar.find(".thumb") |
||||
|
||||
, mousePosition = 0 |
||||
|
||||
, isHorizontal = this.options.axis === 'x' |
||||
, hasTouchEvents = ("ontouchstart" in document.documentElement) |
||||
, wheelEvent = ("onwheel" in document || document.documentMode >= 9) ? "wheel" : |
||||
(document.onmousewheel !== undefined ? "mousewheel" : "DOMMouseScroll") |
||||
|
||||
, sizeLabel = isHorizontal ? "width" : "height" |
||||
, posiLabel = isHorizontal ? "left" : "top" |
||||
; |
||||
|
||||
this.contentPosition = 0; |
||||
this.viewportSize = 0; |
||||
this.contentSize = 0; |
||||
this.contentRatio = 0; |
||||
this.trackSize = 0; |
||||
this.trackRatio = 0; |
||||
this.thumbSize = 0; |
||||
this.thumbPosition = 0; |
||||
|
||||
function initialize() |
||||
{ |
||||
self.update(); |
||||
setEvents(); |
||||
|
||||
return self; |
||||
} |
||||
|
||||
this.update = function(scrollTo) |
||||
{ |
||||
var sizeLabelCap = sizeLabel.charAt(0).toUpperCase() + sizeLabel.slice(1).toLowerCase(); |
||||
this.viewportSize = $viewport[0]['offset'+ sizeLabelCap]; |
||||
this.contentSize = $overview[0]['scroll'+ sizeLabelCap]; |
||||
this.contentRatio = this.viewportSize / this.contentSize; |
||||
this.trackSize = this.options.trackSize || this.viewportSize; |
||||
this.thumbSize = Math.min(this.trackSize, Math.max(0, (this.options.thumbSize || (this.trackSize * this.contentRatio)))); |
||||
this.trackRatio = this.options.thumbSize ? (this.contentSize - this.viewportSize) / (this.trackSize - this.thumbSize) : (this.contentSize / this.trackSize); |
||||
|
||||
$scrollbar.toggleClass("disable", this.contentRatio >= 1); |
||||
|
||||
switch (scrollTo) |
||||
{ |
||||
case "bottom": |
||||
this.contentPosition = this.contentSize - this.viewportSize; |
||||
break; |
||||
|
||||
case "relative": |
||||
this.contentPosition = Math.min(this.contentSize - this.viewportSize, Math.max(0, this.contentPosition)); |
||||
break; |
||||
|
||||
default: |
||||
this.contentPosition = parseInt(scrollTo, 10) || 0; |
||||
} |
||||
|
||||
setSize(); |
||||
|
||||
return self; |
||||
}; |
||||
|
||||
function setSize() |
||||
{ |
||||
$thumb.css(posiLabel, self.contentPosition / self.trackRatio); |
||||
$overview.css(posiLabel, -self.contentPosition); |
||||
$scrollbar.css(sizeLabel, self.trackSize); |
||||
$track.css(sizeLabel, self.trackSize); |
||||
$thumb.css(sizeLabel, self.thumbSize); |
||||
} |
||||
|
||||
function setEvents() |
||||
{ |
||||
if(hasTouchEvents) |
||||
{ |
||||
$viewport[0].ontouchstart = function(event) |
||||
{ |
||||
if(1 === event.touches.length) |
||||
{ |
||||
event.stopPropagation(); |
||||
|
||||
start(event.touches[0]); |
||||
} |
||||
}; |
||||
} |
||||
else |
||||
{ |
||||
$thumb.bind("mousedown", start); |
||||
$track.bind("mousedown", drag); |
||||
} |
||||
|
||||
$(window).resize(function() |
||||
{ |
||||
self.update("relative"); |
||||
}); |
||||
|
||||
if(self.options.wheel && window.addEventListener) |
||||
{ |
||||
$container[0].addEventListener(wheelEvent, wheel, false ); |
||||
} |
||||
else if(self.options.wheel) |
||||
{ |
||||
$container[0].onmousewheel = wheel; |
||||
} |
||||
} |
||||
|
||||
function start(event) |
||||
{ |
||||
$("body").addClass("noSelect"); |
||||
|
||||
mousePosition = isHorizontal ? event.pageX : event.pageY; |
||||
self.thumbPosition = parseInt($thumb.css(posiLabel), 10) || 0; |
||||
|
||||
if(hasTouchEvents) |
||||
{ |
||||
document.ontouchmove = function(event) |
||||
{ |
||||
event.preventDefault(); |
||||
drag(event.touches[0]); |
||||
}; |
||||
document.ontouchend = end; |
||||
} |
||||
else |
||||
{ |
||||
$(document).bind("mousemove", drag); |
||||
$(document).bind("mouseup", end); |
||||
$thumb.bind("mouseup", end); |
||||
} |
||||
} |
||||
|
||||
function wheel(event) |
||||
{ |
||||
if(self.contentRatio < 1) |
||||
{ |
||||
var evntObj = event || window.event |
||||
, deltaDir = "delta" + self.options.axis.toUpperCase() |
||||
, wheelSpeedDelta = -(evntObj[deltaDir] || evntObj.detail || (-1 / 3 * evntObj.wheelDelta)) / 40 |
||||
; |
||||
|
||||
self.contentPosition -= wheelSpeedDelta * self.options.wheelSpeed; |
||||
self.contentPosition = Math.min((self.contentSize - self.viewportSize), Math.max(0, self.contentPosition)); |
||||
|
||||
$container.trigger("move"); |
||||
|
||||
$thumb.css(posiLabel, self.contentPosition / self.trackRatio); |
||||
$overview.css(posiLabel, -self.contentPosition); |
||||
|
||||
if(self.options.wheelLock || (self.contentPosition !== (self.contentSize - self.viewportSize) && self.contentPosition !== 0)) |
||||
{ |
||||
evntObj = $.event.fix(evntObj); |
||||
evntObj.preventDefault(); |
||||
} |
||||
} |
||||
} |
||||
|
||||
function drag(event) |
||||
{ |
||||
if(self.contentRatio < 1) |
||||
{ |
||||
var mousePositionNew = isHorizontal ? event.pageX : event.pageY |
||||
, thumbPositionDelta = mousePositionNew - mousePosition |
||||
; |
||||
|
||||
if(self.options.scrollInvert && hasTouchEvents) |
||||
{ |
||||
thumbPositionDelta = mousePosition - mousePositionNew; |
||||
} |
||||
|
||||
var thumbPositionNew = Math.min((self.trackSize - self.thumbSize), Math.max(0, self.thumbPosition + thumbPositionDelta)); |
||||
self.contentPosition = thumbPositionNew * self.trackRatio; |
||||
|
||||
$container.trigger("move"); |
||||
|
||||
$thumb.css(posiLabel, thumbPositionNew); |
||||
$overview.css(posiLabel, -self.contentPosition); |
||||
} |
||||
} |
||||
|
||||
function end() |
||||
{ |
||||
$("body").removeClass("noSelect"); |
||||
$(document).unbind("mousemove", drag); |
||||
$(document).unbind("mouseup", end); |
||||
$thumb.unbind("mouseup", end); |
||||
document.ontouchmove = document.ontouchend = null; |
||||
} |
||||
|
||||
return initialize(); |
||||
} |
||||
|
||||
$.fn[pluginName] = function(options) |
||||
{ |
||||
return this.each(function() |
||||
{ |
||||
if(!$.data(this, "plugin_" + pluginName)) |
||||
{ |
||||
$.data(this, "plugin_" + pluginName, new Plugin($(this), options)); |
||||
} |
||||
}); |
||||
}; |
||||
})); |
||||
Loading…
Reference in new issue