all the browser checking the cookie is enable or not
var cookieEnabled = (navigator.cookieEnabled) ? true : false;
if( cookieEnabled == false){
document.write('Cookies are disabled.Enable it.' );
}else{
document.write('Cookies are enable.' );
}the cookie set is checked for cookie name
Here ‘user’ is the cookie name and cookie value is the username
div can added the class to draggable and resizable
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script> <link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>outer_div class inner content div resizable and draggable
<div class="outer_div">
<div class="movable_content ui-widget-content" contenteditable> </div>
</div>
$(".movable_content").draggable({
cursor:"move",
containment: "parent"
});
$(".movable_content") .resizable({
maxWidth: 300,
minHeight: 150
});
div can changed in the style to the textarea
<div id="textarea" contenteditable></div>the style of the id textarea added textarea style
#textarea {
-moz-appearance: textfield-multiline;
-webkit-appearance: textarea;
border: 1px solid gray;
font: medium -moz-fixed;
font: -webkit-small-control;
height: 28px;
overflow: auto;
padding: 2px;
resize: both;
width: 400px;
}The typing the textarea content to increase the height of the textarea
<div id="moveable-content "> <textarea class=" textarea-editer " id="write_content" style=""></textarea></div>In the normal typing the textarea height increased width in the scroll bar but inthis function increased the textarea height with no scroll
$('#moveable-content').on('change click keyup keydown paste cut', 'textarea', function () {
$(this).height(0).height(this.scrollHeight);
jQuery('#moveable-content').css({'height': this.scrollHeight });
jQuery('#text-content-height').val(this.scrollHeight+'px');
}).find('textarea').change();
In the project count dynamically the window scroll based calculated .
content div is the content to calculated project count
<div class="content-div"><!--- Content-div---Start-->
<span class="totalproject"></span>
<span id="label">TOTAL PROJECTS</span>
</div><!--- Content-div---End-->the style for the content div given below
.totalproject{
text-align:center;
display:block;
font-size:20px;
margin-right: 185px;
}
#label{
text-align:center;
display:block;
font-size:16px;
margin-right: 195px;
}
.content-div {
width: 25%;
display: inline-block;
float: left;
}In the count to function called in the window scroll move and count function have the parameters from, to,speed,refresh interval used
(function($) {
$.fn.countTo = function(options) {
// merge the default plugin settings with the custom options
options = $.extend({}, $.fn.countTo.defaults, options || {});
// how many times to update the value, and how much to increment the value on each update
var loops = Math.ceil(options.speed / options.refreshInterval),
increment = (options.to - options.from) / loops;
return $(this).each(function() {
var _this = this,
loopCount = 0,
value = options.from,
interval = setInterval(updateTimer, options.refreshInterval);
function updateTimer() {
value += increment;
loopCount++;
$(_this).html(value.toFixed(options.decimals));
if (typeof(options.onUpdate) == 'function') {
options.onUpdate.call(_this, value);
}
if (loopCount >= loops) {
clearInterval(interval);
value = options.to;
if (typeof(options.onComplete) == 'function') {
options.onComplete.call(_this, value);
}
}
}
});
};
$.fn.countTo.defaults = {
from: 0, // the number the element should start at
to: 100, // the number the element should end at
speed: 1000, // how long it should take to count between the target numbers
refreshInterval: 100, // how often the element should be updated
decimals: 0, // the number of decimal places to show
callback: function() { alert("I'm done!"); },
onUpdate: null, // callback method for every time the element is updated,
onComplete: null, // callback method for when the element finishes updating
};
})(jQuery);
function count_display(){
jQuery(function($) {
$('.totalproject').countTo({
from: 0,
to: 50,
speed: 5000,
refreshInterval: 50,
onComplete: function(value) {
// console.debug(this);
}
});
});
the animation multirotate based on the style animation,it used in the java script function
The animation-element class is have the animation content
<div class="animation-element multi-step-left cf">
<div class="gallery">
<h3 class="title">Johnthon Smith</h3>
<h4 class="subtitle">Senior Enginer</h4>
<div class="image" style="background-image: url(http://drive.google.com/uc?export=download&id=0B7UPM0QugWUjVTdZcktRTWhNamM)">
<div class="social">
<i class="fa fa-facebook"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-google-plus"></i>
<i class="fa fa-envelope"></i>
</div>
</div>
</div>
</div>the animation style is given below and the animation class in-view class added in the animation main div
/*animation element*/
.animation-element {
position: relative;
width: 22%;
margin: 0% 1.5% 3% 1.5%;
float: left;
}
/*4 grid layout*/
.animation-element:nth-of-type(4n-3) {
clear: left;
}
.animation-element:nth-of-type(4n-2) {}
.animation-element:nth-of-type(4n-1) {}
.animation-element:nth-of-type(4n-0) {
clear: right;
}
/*left fancy animastion*/
@-moz-keyframes left_animation {
0% {
opacity: 0;
-moz-transform: rotate(180deg) translate3d(100%, 100%, 0);
}
75% {
opacity: 0.8;
-moz-transform: rotate(-40deg);
}
100% {
opacity: 1;
-moz-transform: rotate(0deg) translate3d(0%, 0%, 0);
}
}
@-webkit-keyframes left_animation {
0% {
opacity: 0;
-webkit-transform: rotate(180deg) translate3d(100%, 100%, 0);
}
75% {
opacity: 0.8;
-webkit-transform: rotate(-40deg);
}
100% {
opacity: 1;
-webkit-transform: rotate(0deg) translate3d(0%, 0%, 0);
}
}
@keyframes left_animation {
0% {
opacity: 0;
transform: rotate(180deg) translate3d(100%, 100%, 0);
}
75% {
opacity: 0.8;
transform: rotate(-40deg);
}
100% {
opacity: 1;
transform: rotate(0deg) translate3d(0%, 0%, 0);
}
}
/*right fancy animation*/
@-moz-keyframes right_animation {
0% {
opacity: 0;
-moz-transform: rotate(180deg) translate3d(-100%, -100%, 0);
}
75% {
opacity: 0.8;
-moz-transform: rotate(40deg);
}
100% {
opacity: 1;
-moz-transform: rotate(0deg) translate3d(0%, 0%, 0);
}
}
@-webkit-keyframes right_animation {
0% {
opacity: 0;
-webkit-transform: rotate(180deg) translate3d(-100%, 100%, 0);
}
75% {
opacity: 0.8;
-webkit-transform: rotate(40deg);
}
100% {
opacity: 1;
-webkit-transform: rotate(0deg) translate3d(0%, 0%, 0);
}
}
@keyframes right_animation {
0% {
opacity: 0;
transform: rotate(180deg) translate3d(-100%, -100%, 0);
}
75% {
opacity: 0.8;
transform: rotate(40deg);
}
100% {
opacity: 1;
transform: rotate(0deg) translate3d(0%, 0%, 0);
}
}
/*Multi-step animation*/
.multi-step-left .gallery,
.multi-step-right .gallery {
position: relative;
opacity: 0;
/*prevents flicker as animation occurs*/
}
.multi-step-left.in-view .gallery {
-moz-animation: left_animation 1300ms ease-in both;
-webkit-animation: left_animation 1300ms ease-in both;
animation: left_animation 1300ms ease-in both;
}
.multi-step-right.in-view .gallery {
-moz-animation: right_animation 1300ms linear both;
-webkit-animation: right_animation 1300ms linear both;
animation: right_animation 1300ms linear both;
}the window scroll get the animation content position animation content height,window height and window position to calculated for added class. In the class to the animation animated mutirotate
var $animation_elements = $('.animation-element');
var $window = $(window);
function check_if_in_view() {
var window_height = $window.height();
var window_top_position = $window.scrollTop();
var window_bottom_position = (window_top_position + window_height);
$.each($animation_elements, function() {
var $element = $(this);
var element_height = $element.outerHeight();
var element_top_position = $element.offset().top;
var element_bottom_position = (element_top_position + element_height);
//check to see if this current container is within viewport
if ((element_bottom_position >= window_top_position) &&
(element_top_position <= window_bottom_position)) {
$element.addClass('in-view');
} else {
$element.removeClass('in-view');
}
});
}
$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');
the animation bottom to top based on the style animation,it used in the java script function
The animation-element class is have the animation content
<div class="animation-element bounce-up cf">
<div class="subject development">
<div class="category-color"></div>
<div class="icon"><i class="fa fa-cogs"></i></div>
<div class="header cf">
<h4 class="date"><i class="fa fa-calendar-o"></i> April, 2015</h4>
<h4 class="category"><i class="fa fa-folder-o"></i> Development</h4>
</div>
<h3 class="title">Fundamentals of C++ Development</h3>
<div class="content">An introductory class on C++. This course will outline the basic elements required to understand development...</div>
<div class="enrole">Enrole</div>
</div>
</div>the animation style is given below and the animation class in-view class added in the animation main div
.animation-element {
position: relative;
width: 30%;
margin: 0% 1.33 2.66% 1.33%;
float: left;
}
.animation-element:nth-of-type(3n-2) {
width: 31.5%;
margin: 0% 1.375% 2.75% 0%;
clear: left;
}
.animation-element:nth-of-type(3n-1) {
width: 31.5%;
margin: 0% 1.375% 2.75% 1.375%;
}
.animation-element:nth-of-type(3n-0) {
width: 31.5%;
margin: 0% 0% 2.75% 1.375%;
clear: right;
}
/*bounce up animation for the subject*/
.bounce-up .subject {
opacity: 0;
-moz-transition: all 700ms ease-out;
-webkit-transition: all 700ms ease-out;
-o-transition: all 700ms ease-out;
transition: all 700ms ease-out;
-moz-transform: translate3d(0px, 200px, 0px);
-webkit-transform: translate3d(0px, 200px, 0px);
-o-transform: translate(0px, 200px);
-ms-transform: translate(0px, 200px);
transform: translate3d(0px, 200, 0px);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.bounce-up.in-view .subject {
opacity: 1;
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate3d(0px, 0px, 0px);
}the window scroll get the animation content position animation content height,window height and window position to calculated for added class. In the class to the animation animated bottom to top
var $animation_elements = $('.animation-element');
var $window = $(window);
function check_if_in_view() {
var window_height = $window.height();
var window_top_position = $window.scrollTop();
var window_bottom_position = (window_top_position + window_height);
$.each($animation_elements, function() {
var $element = $(this);
var element_height = $element.outerHeight();
var element_top_position = $element.offset().top;
var element_bottom_position = (element_top_position + element_height);
//check to see if this current container is within viewport
if ((element_bottom_position >= window_top_position) &&
(element_top_position <= window_bottom_position)) {
$element.addClass('in-view');
} else {
$element.removeClass('in-view');
}
});
}
$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');
the animation-element class div is used for the animation content
<div class="animation-element slide-left testimonial">
<div class="header">
<div class="left">
<img src="http://drive.google.com/uc?export=download&id=0B7UPM0QugWUjV3BseTMtcEU1T2M" />
</div>
<div class="right">
<h3>Joanna Hammerlton</h3>
<h4>Marketing Manager - Omega Creative</h4>
</div>
</div>
</div>the animation-element div style added for the animation
.animation-element.slide-left {
opacity: 0;
-moz-transition: all 500ms linear;
-webkit-transition: all 500ms linear;
-o-transition: all 500ms linear;
transition: all 500ms linear;
-moz-transform: translate3d(-100px, 0px, 0px);
-webkit-transform: translate3d(-100px, 0px, 0px);
-o-transform: translate(-100px, 0px);
-ms-transform: translate(-100px, 0px);
transform: translate3d(-100px, 0px, 0px);
}
.animation-element.slide-left.in-view {
opacity: 1;
-moz-transform: translate3d(0px, 0px, 0px);
-webkit-transform: translate3d(0px, 0px, 0px);
-o-transform: translate(0px, 0px);
-ms-transform: translate(0px, 0px);
transform: translate3d(0px, 0px, 0px);
}
.animation-element.slide-left.testimonial {
float: left;
width: 47%;
margin: 0% 1.5% 3% 1.5%;
background: #F5F5F5;
padding: 15px;
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
border: solid 1px #EAEAEA;
}
.animation-element.slide-left.testimonial:hover,
.animation-element.slide-left.testimonial:active{
box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.25);
}
.animation-element.slide-left.testimonial:nth-of-type(odd) {
width: 48.5%;
margin: 0% 1.5% 3.0% 0%;
}
.animation-element.slide-left.testimonial:nth-of-type(even) {
width: 48.5%;
margin: 0% 0% 3.0% 1.5%;
}
the window scroll get the animation content position animation content height,window height and window position to calculated for added class. In the class to the animation animated left to right
var $animation_elements = $('.animation-element');
var $window = $(window);
function check_if_in_view() {
var window_height = $window.height();
var window_top_position = $window.scrollTop();
var window_bottom_position = (window_top_position + window_height);
$.each($animation_elements, function() {
var $element = $(this);
var element_height = $element.outerHeight();
var element_top_position = $element.offset().top;
var element_bottom_position = (element_top_position + element_height);
//check to see if this current container is within viewport
if ((element_bottom_position >= window_top_position) &&
(element_top_position <= window_bottom_position)) {
$element.addClass('in-view');
} else {
$element.removeClass('in-view');
}
});
}
$window.on('scroll resize', check_if_in_view);
$window.trigger('scroll');
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar { /* 1 */ width:7px;}
::-webkit-scrollbar-button { /* 2 */ }
::-webkit-scrollbar-track { /* 3 */ background: #ffffff;}
::-webkit-scrollbar-track-piece { /* 4 */ background: #ffffff; }
::-webkit-scrollbar-thumb { /* 5 */ background-color: #E4E4E4; height: 54px;}
::-webkit-scrollbar-corner { /* 6 */ }
::-webkit-resizer { /* 7 */ }