Javascript Archives - Page 2 of 6

Force Same Height on All Slick Slides

I love the slick slider, but sometimes the default functionality isn’t quite what I need. For a variety of other reasons the height of the slides can vary from slide to slide There is no built in “force height” option. Although it should be possible using “display: flex”, I try to avoid using flex on dynamic or complex elements that are hard to fail gracefully on.

I found some good code on the forums to force the slick slides to share the same height. I hope it helps you in the future too!

//when the slick slide initializes we want to set all of our slides to the same height
$('.slide-container').on('setPosition', function () {
	jbResizeSlider();
});

//we need to maintain a set height when a resize event occurs.
//Some events will through a resize trigger: $(window).trigger('resize');
$(window).on('resize', function(e) {
	jbResizeSlider();
});

//since multiple events can trigger a slider adjustment, we will control that adjustment here
function jbResizeSlider(){
	$slickSlider = $('.slide-container');
	$slickSlider.find('.slick-slide').height('auto');

	var slickTrack = $slickSlider.find('.slick-track');
	var slickTrackHeight = $(slickTrack).height();

	$slickSlider.find('.slick-slide').css('height', slickTrackHeight + 'px');
}

//when the slick slide initializes we want to set all of our slides to the same height

$('.slide-container').on('setPosition', function () {

jbResizeSlider();

});

//we need to maintain a set height when a resize event occurs.

//Some events will through a resize trigger: $(window).trigger('resize');

$(window).on('resize', function(e) {

jbResizeSlider();

});

//since multiple events can trigger a slider adjustment, we will control that adjustment here

function jbResizeSlider(){

$slickSlider = $('.slide-container');

$slickSlider.find('.slick-slide').height('auto');

var slickTrack = $slickSlider.find('.slick-track');

var slickTrackHeight = $(slickTrack).height();

$slickSlider.find('.slick-slide').css('height', slickTrackHeight + 'px');

}

Quick Javascript Date Format

Format pretty much any valid date and return it in the standard Y-m-d format.

function formatDate(date) {
	var d = new Date(date),
		month = '' + (d.getMonth() + 1),
		day = '' + d.getDate(),
		year = d.getFullYear();

	if (month.length < 2) month = '0' + month;
	if (day.length < 2) day = '0' + day;

	return [year, month, day].join('-');
}

function formatDate(date) {

var d = new Date(date),

month = '' + (d.getMonth() + 1),

day = '' + d.getDate(),

year = d.getFullYear();

if (month.length < 2) month = '0' + month;

if (day.length < 2) day = '0' + day;

return [year, month, day].join('-');

}

Basic Template Engine

Sometimes I need to setup Javascript templating for a page or two, or even just a form. I found a cool solution over on Krasimir Tsonev’s blog. I thought I would save it here for future use.

Template

I don’t really like having to setup long strings in javascript, it is just so ugly. So I use the <script type=”text/template”> approach to separate out my templates from my code. Here is an example.

<script id="attendee-tempate" type="text/template">
	<div class="attendee" id="attendee-<%dataID%>" data-id="<%dataID%>">
		<h5>Attendee #<%dataID%> Information:</h5>
		<div class="form-group">
			<label>First Name(s):</label>
			<input type="text" maxlength="100" name="attendee[<%dataID%>][firstname]" class="form-control req" value="" />
		</div>

		<div class="form-group">
			<label>Last Name(s):</label>
			<input type="text" maxlength="100" name="attendee[<%dataID%>][lastname]" class="form-control req" value=""/>
		</div>

		<div class="form-group">
			<label>Phone:</label>
			<input type="text" maxlength="20" name="attendee[<%dataID%>][phone]" class="form-control req phone-input inline-block" value="" />
		</div>

		<div class="form-group">
			<label>Email:</label>
			<input type="email" maxlength="100" name="attendee[<%dataID%>][email]" class="form-control req validate-email" value="" />
		</div>

		<div class="form-group">
			<label>Ticket: <span class="ticket_price">$<%ticketPrice%></span></label>
		</div>

	</div>
</script>

<h5>Attendee #<%dataID%> Information:</h5>

<label>First Name(s):</label>

<input type="text" maxlength="100" name="attendee[<%dataID%>][firstname]" class="form-control req" value="" />

</div>

<input type="text" maxlength="100" name="attendee[<%dataID%>][lastname]" class="form-control req" value=""/>

</div>

<label>Phone:</label>

<input type="text" maxlength="20" name="attendee[<%dataID%>][phone]" class="form-control req phone-input inline-block" value="" />

</div>

<label>Email:</label>

<input type="email" maxlength="100" name="attendee[<%dataID%>][email]" class="form-control req validate-email" value="" />

</div>

<label>Ticket: <span class="ticket_price">$<%ticketPrice%></span></label>

</div>

</script>

This is just a basic “Attendee” template for some event. Notice the <%stuff%> inside there. That is where the magic happens.

Template Engine

Here is where the real magic happens.

function TemplateEngine(tpl, data) {
    var re = /<%([^%>]+)?%>/g, match;
    while(match = re.exec(tpl)) {
        tpl = tpl.replace(match[0], data[match[1]])
    }
    return tpl;
}

//Usage
var attendeeTemplate = $('#attendee-tempate').html();

var newAttendee = TemplateEngine(attendeeTemplate, {
				    dataID: $('.attendee').length + 1,
				    ticketPrice: 50
				})

function TemplateEngine(tpl, data) {

var re = /<%([^%>]+)?%>/g, match;

while(match = re.exec(tpl)) {

tpl = tpl.replace(match[0], data[match[1]])

}

return tpl;

}

//Usage

var attendeeTemplate = $('#attendee-tempate').html();

var newAttendee = TemplateEngine(attendeeTemplate, {

dataID: $('.attendee').length + 1,

ticketPrice: 50

})

So as you can see the “TemplateEngine” just takes some input and replaces anything between the <% %> symbols. Krasimir actually has a more functional version setup on his blog as well with support for some logic, but that is more than I needed. And if I ever did need that much functionality I would just turn to a full Template Engine.

Update:

I noticed a strange flaw in this template engine when working with templates that require multiple replacements on the same line of text. Here is another version of the template engine you can use which should find all variables in your template, regardless of how many are on a line.

function TemplateEngine(tpl, data) {
	for(var key in data){
		var re = new RegExp("<%" + key + "%>", "gi");
		tpl = tpl.replace(re, data[key]);
	}
	return tpl;
}

function TemplateEngine(tpl, data) {

for(var key in data){

var re = new RegExp("<%" + key + "%>", "gi");

tpl = tpl.replace(re, data[key]);

}

return tpl;

}

Skrollr Menu

In my last post I talked about extending the easing functionality of jQuery. Here is what I was using that easing for. My custom skrollr menu!

HTML / PHP

First we need to setup the menu itself. Here is a shortened version of what I did.

<?php 
//This was a skrollr for a client and it needed to be able to handle as many sections as the clients wanted.
$skrollr_height = (count($sections) * 1000) + $footer_height + $header_height;
//The step size was used to control the speed / length of each skrollr section
$step_size = 400;
?>
<div id="skrollr-nav" data-0="top: 40%;" data-<?php echo $skrollr_height-$footer_height-200; ?>="top: 40%;" data-<?php echo $skrollr_height-$footer_height; ?>="top: 20%;">
	<ul>
		<?php 
			if(!empty($sections)) {
				$data_position = 0;
				foreach($sections as $s => $section) {
                                        //each of our skrollr sections is made up of 3 steps, so multiply $step_size by 3.
					$data_position = $s * $step_size * 3;
					echo '<li class="section-menu">
							<a class="skrollr-link" data-position="'.$data_position.'" href="#section-'.$i.'">
								<span class="sprite sprite-'.($i==0?'large':'small').'-triangle"></span>
							</a>
						</li>';
				}
			}
		?>
	</ul>
</div>

<?php

//This was a skrollr for a client and it needed to be able to handle as many sections as the clients wanted.

$skrollr_height = (count($sections) * 1000) + $footer_height + $header_height;

//The step size was used to control the speed / length of each skrollr section

$step_size = 400;

<ul>

<?php

if(!empty($sections)) {

$data_position = 0;

foreach($sections as $s => $section) {

//each of our skrollr sections is made up of 3 steps, so multiply $step_size by 3.

$data_position = $s * $step_size * 3;

echo '<li class="section-menu">

</a>

</li>';

}

</ul>

</div>

I am going to skip over the actual skrollr section code because that is a large chunk of code that will vary greatly for each project. I leave that part to you!

Javascript

Here is the code needed to make your skrollr menu work.

jQuery(document).ready(function($){
	var skrollrPosition = 0,
		menuLocation = 0,
		skrollrSpeed = 750,
		$root = $('html, body'),
		sectionSize = <?php echo $step_size * 3 ?>;

	//generally considered best to load skrollr after document has loaded
	//https://github.com/Prinzhorn/skrollr
	var s = skrollr.init({
	    render: function(data) {
	        //update our skrollrPosition so we know where skrollr thinks we are
	        skrollrPosition = data.curTop;

	        //try to find the correct active menu
	        if(skrollrPosition >= sectionSize){
	        	//round to the nearest section
	        	menuLocation = Math.round(skrollrPosition / sectionSize) * sectionSize;
	        }else{
	        	menuLocation = 0
	        }

	        var $currentLink = $("li.section-menu").find("[data-position='" + menuLocation + "']");
	        if( $currentLink.length ){
	        	$('a.skrollr-link .sprite').removeClass('sprite-large-triangle').addClass('sprite-small-triangle');
	            	$currentLink.find('.sprite').removeClass('sprite-small-triangle').addClass('sprite-large-triangle');
	        }

	    },
	});

	//Control the menu
	$('a.skrollr-link').click(function(e) {
            var position = $(this).data('position'),
	       	$this = $(this);

            $root.animate({
                scrollTop: position
	    }, skrollrSpeed, 'easeOutQuad' ,function () {
	        $('a.skrollr-link .sprite').removeClass('sprite-large-triangle').addClass('sprite-small-triangle');
	        $this.find('.sprite').removeClass('sprite-small-triangle').addClass('sprite-large-triangle');
	    });
	
            return false;
    });

jQuery(document).ready(function($){

var skrollrPosition = 0,

menuLocation = 0,

skrollrSpeed = 750,

$root = $('html, body'),

sectionSize = <?php echo $step_size * 3 ?>;

//generally considered best to load skrollr after document has loaded

//https://github.com/Prinzhorn/skrollr

var s = skrollr.init({

render: function(data) {

//update our skrollrPosition so we know where skrollr thinks we are

skrollrPosition = data.curTop;

//try to find the correct active menu

if(skrollrPosition >= sectionSize){

//round to the nearest section

menuLocation = Math.round(skrollrPosition / sectionSize) * sectionSize;

}else{

menuLocation = 0

}

var $currentLink = $("li.section-menu").find("[data-position='" + menuLocation + "']");

if( $currentLink.length ){

$('a.skrollr-link .sprite').removeClass('sprite-large-triangle').addClass('sprite-small-triangle');

$currentLink.find('.sprite').removeClass('sprite-small-triangle').addClass('sprite-large-triangle');

}

});

//Control the menu

$('a.skrollr-link').click(function(e) {

var position = $(this).data('position'),

$this = $(this);

$root.animate({

scrollTop: position

}, skrollrSpeed, 'easeOutQuad' ,function () {

$('a.skrollr-link .sprite').removeClass('sprite-large-triangle').addClass('sprite-small-triangle');

$this.find('.sprite').removeClass('sprite-small-triangle').addClass('sprite-large-triangle');

});

return false;

});

There we go! Surprisingly simple to setup your own skrollr menu!

Here is what the menu looks like when you are looking at the third section ( …sort of. I didn’t want to screen shot the entire project ).

Note: If you want to setup your own menu for skrollr you should also check out the skrollr menu plugin. It works pretty well, but I had more fun making my own.

Another Note: The ‘easeOutQuad’ function is not built into jQuery. You will need to get jQuery UI or add your own easing functionality to use non standard easing functions. See my previous post.

Extend jQuery Easing Functionality

I was recently implementing a skrollr page and was setting up a custom menu. I realized that most of the cool easing functions were not available with the standard jQuery install, and I didn’t want to include jQuery UI (or any of it’s pieces). I found a link on Stack Overflow which had a really nice easing extension for jQuery.

Easing Function

I actually cut out most of these easing functions when I put it in my own project, but I figured I would include the entire list function here.

/*
 * jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
 *
 * Uses the built in easing capabilities added In jQuery 1.1
 * to offer multiple easing options
 *
 * TERMS OF USE - jQuery Easing
 *
 * Open source under the BSD License.
 *
 * Copyright 2008 George McGinley Smith
 * All rights reserved.
 *
 * Redistribution and use in source and binary forms, with or without modification,
 * are permitted provided that the following conditions are met:
 *
 * Redistributions of source code must retain the above copyright notice, this list of
 * conditions and the following disclaimer.
 * Redistributions in binary form must reproduce the above copyright notice, this list
 * of conditions and the following disclaimer in the documentation and/or other materials
 * provided with the distribution.
 *
 * Neither the name of the author nor the names of contributors may be used to endorse
 * or promote products derived from this software without specific prior written permission.
 *
 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
 * MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE
 * COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
 * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE
 * GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
 * AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
 * NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
 * OF THE POSSIBILITY OF SUCH DAMAGE.
 *
*/

// t: current time, b: begInnIng value, c: change In value, d: duration
$.easing.jswing = $.easing.swing;

$.extend($.easing,
{
    def: 'easeOutQuad',
    swing: function (x, t, b, c, d) {
        //alert($.easing.default);
        return $.easing[$.easing.def](x, t, b, c, d);
    },
    easeInQuad: function (x, t, b, c, d) {
        return c*(t/=d)*t + b;
    },
    easeOutQuad: function (x, t, b, c, d) {
        return -c *(t/=d)*(t-2) + b;
    },
    easeInOutQuad: function (x, t, b, c, d) {
        if ((t/=d/2) < 1) return c/2*t*t + b;
        return -c/2 * ((--t)*(t-2) - 1) + b;
    },
    easeInCubic: function (x, t, b, c, d) {
        return c*(t/=d)*t*t + b;
    },
    easeOutCubic: function (x, t, b, c, d) {
        return c*((t=t/d-1)*t*t + 1) + b;
    },
    easeInOutCubic: function (x, t, b, c, d) {
        if ((t/=d/2) < 1) return c/2*t*t*t + b;
        return c/2*((t-=2)*t*t + 2) + b;
    },
    easeInQuart: function (x, t, b, c, d) {
        return c*(t/=d)*t*t*t + b;
    },
    easeOutQuart: function (x, t, b, c, d) {
        return -c * ((t=t/d-1)*t*t*t - 1) + b;
    },
    easeInOutQuart: function (x, t, b, c, d) {
        if ((t/=d/2) < 1) return c/2*t*t*t*t + b;
        return -c/2 * ((t-=2)*t*t*t - 2) + b;
    },
    easeInQuint: function (x, t, b, c, d) {
        return c*(t/=d)*t*t*t*t + b;
    },
    easeOutQuint: function (x, t, b, c, d) {
        return c*((t=t/d-1)*t*t*t*t + 1) + b;
    },
    easeInOutQuint: function (x, t, b, c, d) {
        if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;
        return c/2*((t-=2)*t*t*t*t + 2) + b;
    },
    easeInSine: function (x, t, b, c, d) {
        return -c * Math.cos(t/d * (Math.PI/2)) + c + b;
    },
    easeOutSine: function (x, t, b, c, d) {
        return c * Math.sin(t/d * (Math.PI/2)) + b;
    },
    easeInOutSine: function (x, t, b, c, d) {
        return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;
    },
    easeInExpo: function (x, t, b, c, d) {
        return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;
    },
    easeOutExpo: function (x, t, b, c, d) {
        return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;
    },
    easeInOutExpo: function (x, t, b, c, d) {
        if (t==0) return b;
        if (t==d) return b+c;
        if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;
        return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;
    },
    easeInCirc: function (x, t, b, c, d) {
        return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;
    },
    easeOutCirc: function (x, t, b, c, d) {
        return c * Math.sqrt(1 - (t=t/d-1)*t) + b;
    },
    easeInOutCirc: function (x, t, b, c, d) {
        if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;
        return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;
    },
    easeInElastic: function (x, t, b, c, d) {
        var s=1.70158;var p=0;var a=c;
        if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
        if (a < Math.abs(c)) { a=c; var s=p/4; }
        else var s = p/(2*Math.PI) * Math.asin (c/a);
        return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
    },
    easeOutElastic: function (x, t, b, c, d) {
        var s=1.70158;var p=0;var a=c;
        if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
        if (a < Math.abs(c)) { a=c; var s=p/4; }
        else var s = p/(2*Math.PI) * Math.asin (c/a);
        return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
    },
    easeInOutElastic: function (x, t, b, c, d) {
        var s=1.70158;var p=0;var a=c;
        if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
        if (a < Math.abs(c)) { a=c; var s=p/4; }
        else var s = p/(2*Math.PI) * Math.asin (c/a);
        if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
        return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
    },
    easeInBack: function (x, t, b, c, d, s) {
        if (s == undefined) s = 1.70158;
        return c*(t/=d)*t*((s+1)*t - s) + b;
    },
    easeOutBack: function (x, t, b, c, d, s) {
        if (s == undefined) s = 1.70158;
        return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
    },
    easeInOutBack: function (x, t, b, c, d, s) {
        if (s == undefined) s = 1.70158;
        if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
        return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
    },
    easeInBounce: function (x, t, b, c, d) {
        return c - $.easing.easeOutBounce (x, d-t, 0, c, d) + b;
    },
    easeOutBounce: function (x, t, b, c, d) {
        if ((t/=d) < (1/2.75)) {
            return c*(7.5625*t*t) + b;
        } else if (t < (2/2.75)) {
            return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
        } else if (t < (2.5/2.75)) {
            return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
        } else {
            return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
        }
    },
    easeInOutBounce: function (x, t, b, c, d) {
        if (t < d/2) return $.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;
        return $.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;
    }
});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

* jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/

* Uses the built in easing capabilities added In jQuery 1.1

* to offer multiple easing options

* TERMS OF USE - jQuery Easing

* Open source under the BSD License.

* Redistribution and use in source and binary forms, with or without modification,

* are permitted provided that the following conditions are met:

* Redistributions of source code must retain the above copyright notice, this list of

* conditions and the following disclaimer.

* Redistributions in binary form must reproduce the above copyright notice, this list

* of conditions and the following disclaimer in the documentation and/or other materials

* provided with the distribution.

* Neither the name of the author nor the names of contributors may be used to endorse

* or promote products derived from this software without specific prior written permission.

* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY

* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF

* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE

* COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,

* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE

* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED

* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING

* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED

* OF THE POSSIBILITY OF SUCH DAMAGE.

// t: current time, b: begInnIng value, c: change In value, d: duration

$.easing.jswing = $.easing.swing;

$.extend($.easing,

{

def: 'easeOutQuad',

swing: function (x, t, b, c, d) {

//alert($.easing.default);

return $.easing[$.easing.def](x, t, b, c, d);

easeInQuad: function (x, t, b, c, d) {

return c*(t/=d)*t + b;

easeOutQuad: function (x, t, b, c, d) {

return -c *(t/=d)*(t-2) + b;

easeInOutQuad: function (x, t, b, c, d) {

if ((t/=d/2) < 1) return c/2*t*t + b;

return -c/2 * ((--t)*(t-2) - 1) + b;

easeInCubic: function (x, t, b, c, d) {

return c*(t/=d)*t*t + b;

easeOutCubic: function (x, t, b, c, d) {

return c*((t=t/d-1)*t*t + 1) + b;

easeInOutCubic: function (x, t, b, c, d) {

if ((t/=d/2) < 1) return c/2*t*t*t + b;

return c/2*((t-=2)*t*t + 2) + b;

easeInQuart: function (x, t, b, c, d) {

return c*(t/=d)*t*t*t + b;

easeOutQuart: function (x, t, b, c, d) {

return -c * ((t=t/d-1)*t*t*t - 1) + b;

easeInOutQuart: function (x, t, b, c, d) {

if ((t/=d/2) < 1) return c/2*t*t*t*t + b;

return -c/2 * ((t-=2)*t*t*t - 2) + b;

easeInQuint: function (x, t, b, c, d) {

return c*(t/=d)*t*t*t*t + b;

easeOutQuint: function (x, t, b, c, d) {

return c*((t=t/d-1)*t*t*t*t + 1) + b;

easeInOutQuint: function (x, t, b, c, d) {

if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b;

return c/2*((t-=2)*t*t*t*t + 2) + b;

easeInSine: function (x, t, b, c, d) {

return -c * Math.cos(t/d * (Math.PI/2)) + c + b;

easeOutSine: function (x, t, b, c, d) {

return c * Math.sin(t/d * (Math.PI/2)) + b;

easeInOutSine: function (x, t, b, c, d) {

return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b;

easeInExpo: function (x, t, b, c, d) {

return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b;

easeOutExpo: function (x, t, b, c, d) {

return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b;

easeInOutExpo: function (x, t, b, c, d) {

if (t==0) return b;

if (t==d) return b+c;

if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b;

return c/2 * (-Math.pow(2, -10 * --t) + 2) + b;

easeInCirc: function (x, t, b, c, d) {

return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b;

easeOutCirc: function (x, t, b, c, d) {

return c * Math.sqrt(1 - (t=t/d-1)*t) + b;

easeInOutCirc: function (x, t, b, c, d) {

if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b;

return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b;

easeInElastic: function (x, t, b, c, d) {

var s=1.70158;var p=0;var a=c;

if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;

if (a < Math.abs(c)) { a=c; var s=p/4; }

else var s = p/(2*Math.PI) * Math.asin (c/a);

return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;

easeOutElastic: function (x, t, b, c, d) {

var s=1.70158;var p=0;var a=c;

if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3;

if (a < Math.abs(c)) { a=c; var s=p/4; }

else var s = p/(2*Math.PI) * Math.asin (c/a);

return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;

easeInOutElastic: function (x, t, b, c, d) {

var s=1.70158;var p=0;var a=c;

if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5);

if (a < Math.abs(c)) { a=c; var s=p/4; }

else var s = p/(2*Math.PI) * Math.asin (c/a);

if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;

return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;

easeInBack: function (x, t, b, c, d, s) {

if (s == undefined) s = 1.70158;

return c*(t/=d)*t*((s+1)*t - s) + b;

easeOutBack: function (x, t, b, c, d, s) {

if (s == undefined) s = 1.70158;

return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;

easeInOutBack: function (x, t, b, c, d, s) {

if (s == undefined) s = 1.70158;

if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;

return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;

easeInBounce: function (x, t, b, c, d) {

return c - $.easing.easeOutBounce (x, d-t, 0, c, d) + b;

easeOutBounce: function (x, t, b, c, d) {

if ((t/=d) < (1/2.75)) {

return c*(7.5625*t*t) + b;

} else if (t < (2/2.75)) {

return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;

} else if (t < (2.5/2.75)) {

return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;

} else {

return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;

}

easeInOutBounce: function (x, t, b, c, d) {

if (t < d/2) return $.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b;

return $.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b;

}

});

Once you include this in your project and you connect it to your jQuery object you can use any of these easing functions normally.

$('html, body').animate({
    scrollTop: 1000
}, 1000, 'easeOutQuad' ,function () {
    //function complete
});

$('html, body').animate({

scrollTop: 1000

}, 1000, 'easeOutQuad' ,function () {

//function complete

});

JS Resize Text

There are a ton of ways to do everything. I needed to setup a system for increasing and decreasing the font size on a site and here is the code I used to do that.

Javascript Functions

This is the most important part of the whole thing. There are 3 functions here, but only 1 is really needed for the resizing of text. The other 2 are for manipulating cookies. I borrowed the start of this function from David Walsh ( who used to work at the same place I work now! ).

/**
 * Resize Text
 * @param  int multiplier how much to change the text
 *
 * @link https://davidwalsh.name/change-text-size-onclick-with-javascript
 */
function jbResizeText(multiplier) {
  textMultiplier = Math.round(parseFloat(textMultiplier + (multiplier * 0.1)) * 10 ) / 10 ;

  //we need to put some limits on the size changes
  if(textMultiplier >= 1.3){

    textMultiplier = 1.3;
    $('#text-size .increase').addClass('min-max');

  }else if(textMultiplier <= .8){

    textMultiplier = .8;
    $('#text-size .decrease').addClass('min-max');

  }else{

    $('#text-size .min-max').removeClass('min-max');

  }

  var newSize = textMultiplier + "em";
  
  //apply font sizes
  $('.text-change').css('font-size', newSize);

  //Save the current text multiplier
  setCookie("textmultiplier", textMultiplier, 30);
}

/**
 * Set a Cookie
 * @param string cname  Cookie Name
 * @param mixed cvalue  Cookie Value
 * @param int exdays How many days before expire
 */
function setCookie(cname, cvalue, exdays) {
    var d = new Date();
    d.setTime(d.getTime() + (exdays*24*60*60*1000));
    var expires = "expires="+ d.toUTCString();
    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

/**
 * Get a cookie
 * @param  string cname  Cookie Name
 * @return string        Cookie Value
 */
function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i = 0; i <ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) == 0) {
            return c.substring(name.length,c.length);
        }
    }
    return "";
}

/**
 * Delete a Cookie
 * @param string cname  Cookie Name
 */
function deleteCookie(cname) {
    setCookie(cname, '', -1);
}

/**

* Resize Text

* @param int multiplier how much to change the text

* @link https://davidwalsh.name/change-text-size-onclick-with-javascript

function jbResizeText(multiplier) {

textMultiplier = Math.round(parseFloat(textMultiplier + (multiplier * 0.1)) * 10 ) / 10 ;

//we need to put some limits on the size changes

if(textMultiplier >= 1.3){

textMultiplier = 1.3;

$('#text-size .increase').addClass('min-max');

}else if(textMultiplier <= .8){

textMultiplier = .8;

$('#text-size .decrease').addClass('min-max');

}else{

$('#text-size .min-max').removeClass('min-max');

}

var newSize = textMultiplier + "em";

//apply font sizes

$('.text-change').css('font-size', newSize);

//Save the current text multiplier

setCookie("textmultiplier", textMultiplier, 30);

}

/**

* Set a Cookie

* @param string cname Cookie Name

* @param mixed cvalue Cookie Value

* @param int exdays How many days before expire

function setCookie(cname, cvalue, exdays) {

var d = new Date();

d.setTime(d.getTime() + (exdays*24*60*60*1000));

var expires = "expires="+ d.toUTCString();

document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";

}

/**

* Get a cookie

* @param string cname Cookie Name

* @return string Cookie Value

function getCookie(cname) {

var name = cname + "=";

var ca = document.cookie.split(';');

for(var i = 0; i <ca.length; i++) {

var c = ca[i];

while (c.charAt(0)==' ') {

c = c.substring(1);

}

if (c.indexOf(name) == 0) {

return c.substring(name.length,c.length);

}

return "";

}

/**

* Delete a Cookie

* @param string cname Cookie Name

function deleteCookie(cname) {

setCookie(cname, '', -1);

}

Javascript Actions / Event Handlers

The functions by themselves are pretty useless if you never call them, so here is what I am doing to call the resize functionality.

//TEXT CHANGE
//if the user has previously changed the text size, try to resize right away
var cookieMultiplier = getCookie("textmultiplier");
if (cookieMultiplier != "") {
	textMultiplier = parseFloat(cookieMultiplier);
	jbResizeText(0);
}

$("#text-size").on("click", '.increase', function() {jbResizeText(1);});
$("#text-size").on("click", '.decrease', function() {jbResizeText(-1);});
$("#text-size").on("click", '.reset', function() {
	textMultiplier = 1;
	pkResizeText(0);
        deleteCookie("textmultiplier", '', -1);
});

//TEXT CHANGE

//if the user has previously changed the text size, try to resize right away

var cookieMultiplier = getCookie("textmultiplier");

if (cookieMultiplier != "") {

textMultiplier = parseFloat(cookieMultiplier);

jbResizeText(0);

}

$("#text-size").on("click", '.increase', function() {jbResizeText(1);});

$("#text-size").on("click", '.decrease', function() {jbResizeText(-1);});

$("#text-size").on("click", '.reset', function() {

textMultiplier = 1;

pkResizeText(0);

deleteCookie("textmultiplier", '', -1);

});

HTML

Here is the little bit of HTML that I used to setup the controls. I added a note that in order to only affect specific locations use the ‘text-change’ class on the various elements. I find this helps to prevent breaking layouts with increasing font size.

<!-- Make sure to set the 'text-change' class on any element you want to be affected by this -->
<div id="text-size">
	<p class="title">Text Size</p>
	<p class="increase"><i class="fa fa-plus"></i> A</p>
	<p class="decrease"><i class="fa fa-minus"></i> A</p>
        <p class="reset">Reset Text</p>
</div>

<p class="reset">Reset Text</p>

</div>

SCSS

The styling of this is completely up to you, but here is some SCSS I used recently to setup my widget.

NOTE: I have a bunch of variables here and a couple of grays. I don’t know about you, but I usually end up needing to use a dozen different grays on each site. I usually end up using the same ones so I gave them goofy names to make them easier to remember. However I always use #FFF for white…not sure why.

#text-size                  { position: fixed; right: 0; top: 275px; width: 70px; z-index: 999; @include user-select(none); @include box-shadow(0px 0px 10px -2px rgba(0,0,0,0.4));
  p                         { color: $brown; font-weight: bold; margin-bottom: 0; }

  .title                    { background-color: #f5f5f3; border-top-left-radius: 6px; border-bottom: 1px solid $upgraydd; font-size: 14px; line-height: 30px; text-align: center; }

  .increase,
  .decrease                 {
    &:hover                 { background-color: $primary-green; color : #FFF; 
      i                     { color: #FFF; }
    }
    &:active                { background-color: $brown; color : #FFF; 
      i                     { color: #FFF; }
    }

    &.min-max               { background-color: #FFF !important; color: $graaaaaay !important; cursor: default;
      i                     { color: $graaaaaay !important;  }
    }
  }

  .change                   { border-bottom: 1px solid $upgraydd; cursor: pointer; line-height: 40px; padding-left: 10px;
    i                       { color: $primary-green; margin-right: 4px; }
  }

  .increase                 { font-size: 20px;
    i                       { }
  }

  .decrease                 { font-size: 16px; 
    i                       { font-size: 20px; }
  }

  .reset                    { border-bottom-left-radius: 6px; cursor: pointer; font-size: 12px; line-height: 20px; text-align: center; }

  @media (max-width: $screen-xs-max)  { display: none; }
}

#text-size { position: fixed; right: 0; top: 275px; width: 70px; z-index: 999; @include user-select(none); @include box-shadow(0px 0px 10px -2px rgba(0,0,0,0.4));

p { color: $brown; font-weight: bold; margin-bottom: 0; }

.title { background-color: #f5f5f3; border-top-left-radius: 6px; border-bottom: 1px solid $upgraydd; font-size: 14px; line-height: 30px; text-align: center; }

.increase,

.decrease {

&:hover { background-color: $primary-green; color : #FFF;

i { color: #FFF; }

}

&:active { background-color: $brown; color : #FFF;

i { color: #FFF; }

}

&.min-max { background-color: #FFF !important; color: $graaaaaay !important; cursor: default;

i { color: $graaaaaay !important; }

}

.change { border-bottom: 1px solid $upgraydd; cursor: pointer; line-height: 40px; padding-left: 10px;

i { color: $primary-green; margin-right: 4px; }

}

.increase { font-size: 20px;

i { }

}

.decrease { font-size: 16px;

i { font-size: 20px; }

}

.reset { border-bottom-left-radius: 6px; cursor: pointer; font-size: 12px; line-height: 20px; text-align: center; }

@media (max-width: $screen-xs-max) { display: none; }

}

Base Styles

In order for all of this to work, you need to make sure you are working in “em”s and also your line height is a float value and not a set pixel value, like so.

body 	{ font-size: 18px; line-height: 1.6; }
p 	{ font-size: 1em; }
li      { font-size: 1em; }

body { font-size: 18px; line-height: 1.6; }

p { font-size: 1em; }

li { font-size: 1em; }

You will definitely need to edit this to fit your website, but I hope this gives you a good starting point.

I don’t want to screen shot the whole site this is coming from but here is what the text size adjuster looks like with the above code.

Good luck!