Javascript Archives

Javascript Sorting, Summing, and Rounding

I was running into an instance where I needed to be able to sort some arrays in either ASC or DESC order. I found some nice functions to help with that.

function jbSortDesc(a,b) {
	return b - a;
}

function jbSortAsc(a,b) {
	return a - b;
}

/**
 * Round a number to X decimals
 * @param  Number 	value     	Any Number value
 * @param  int 		decimals  	The number of decimals to round to
 * @return Number           	the resulting rounded number
 */
function jbRound(value, decimals) {
	var multiplier = Math.pow(10, decimals || 0);
	return Math.round(value * multiplier) / multiplier;
}

/**
 * Sum an array using the .reduce() function
 */
function jbArraySum(total, num) {
	return total + num;
}

function jbSortDesc(a,b) {

return b - a;

}

function jbSortAsc(a,b) {

return a - b;

}

/**

* Round a number to X decimals

* @param Number value Any Number value

* @param int decimals The number of decimals to round to

* @return Number the resulting rounded number

function jbRound(value, decimals) {

var multiplier = Math.pow(10, decimals || 0);

return Math.round(value * multiplier) / multiplier;

}

/**

* Sum an array using the .reduce() function

function jbArraySum(total, num) {

return total + num;

}

Example Usage:

var arr = [6.1, 2.6 ,5.1, 2.5, 3.3, 5.4, 6.6];

//get the highest 6 elements of the array and sum them
var sum = arr.sort(jbSortDesc).slice(0, 6).reduce(jbArraySum) 
//sum = 29.1

//in this case it is pointless, but you could see how this might be helpful
var roundedSum = jbRound(sum, 2);
//sum = 29.10

var arr = [6.1, 2.6 ,5.1, 2.5, 3.3, 5.4, 6.6];

//get the highest 6 elements of the array and sum them

var sum = arr.sort(jbSortDesc).slice(0, 6).reduce(jbArraySum)

//sum = 29.1

//in this case it is pointless, but you could see how this might be helpful

var roundedSum = jbRound(sum, 2);

//sum = 29.10

Calculate Age / Date Masking

Javascript is kind of wonky about their dates. Here is a simple function to calculate age based on a given date string.

function calculateAge(birthdate){
  var today = new Date();
  today = Date.parse(today);

  var minutes = 1000 * 60;
  var hours = minutes * 60;
  var days = hours * 24;
  var years = days * 365.25;

  return Math.floor((today-birthdate) / years);
}

function calculateAge(birthdate){

var today = new Date();

today = Date.parse(today);

var minutes = 1000 * 60;

var hours = minutes * 60;

var days = hours * 24;

var years = days * 365.25;

return Math.floor((today-birthdate) / years);

}

Note: This is not perfect and does not work with every possible date string, but it works pretty well with all standard US date formats.

Here is some decent code to setup some simple date masking.

$('.datemask').on('keydown', function(e){
  if (e.key.length == 1 && isNaN(e.key)){
    e.preventDefault();
    return false;
  }

  if (e.key.length == 1){
    var v = this.value;

    if (v.match(/^\d{2}$/) !== null) {
      if(v > 12) v = 12;
      this.value = v + '/';
    } else if (v.match(/^\d{2}\/\d{2}$/) !== null) {
      v = v.split('/');
      if(v[0]>12) v[0] = 12;
      if(v[1]>31) v[1] = 31;
      this.value = v[0] + '/' + v[1] + '/';
    }else if (v.match(/^\d{2}\/\d{2}\/\d{4}$/) !== null) {
      v = v.split('/');
      if(v[0]>12) v[0] = 12;
      if(v[1]>31) v[1] = 31;

      var year = new Date().getFullYear();
      var oldest = year - 150;
      if(v[2]<oldest) v[2] = oldest;
      if(v[2]>year) v[2] = parseInt(year)-1;
      this.value = v[0] + '/' + v[1] + '/' + v[2];
    }

    return this.value;
  }
});

$('.datemask').on('keydown', function(e){

if (e.key.length == 1 && isNaN(e.key)){

e.preventDefault();

return false;

}

if (e.key.length == 1){

var v = this.value;

if (v.match(/^\d{2}$/) !== null) {

if(v > 12) v = 12;

this.value = v + '/';

} else if (v.match(/^\d{2}\/\d{2}$/) !== null) {

v = v.split('/');

if(v[0]>12) v[0] = 12;

if(v[1]>31) v[1] = 31;

this.value = v[0] + '/' + v[1] + '/';

}else if (v.match(/^\d{2}\/\d{2}\/\d{4}$/) !== null) {

v = v.split('/');

if(v[0]>12) v[0] = 12;

if(v[1]>31) v[1] = 31;

var year = new Date().getFullYear();

var oldest = year - 150;

if(v[2]<oldest) v[2] = oldest;

if(v[2]>year) v[2] = parseInt(year)-1;

this.value = v[0] + '/' + v[1] + '/' + v[2];

}

return this.value;

}

});

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.