Custom Scroll

I rewrote a jQuery that make a custom scrollbar. This plugin is based on malihu custom scrollbar plugin.

Then I add some options and changed a feel logic lines and got this performance increase.

Usage

$("#content").customScroll([options]);

Default options

{
	axis: 'y', // 'y' or 'x'
	duration: 500, // milliseconds
	easing: 'easeInOutSine', // using jQuery.easing, otherwise fallbacks to 'linear'
	bottom: 1, // extra space on bottom
	draggerResize: true, // make the dragger proportional
	mousewheel: true, // mousewheel support - deppends on jQuery.mousewheel
	scrollButtons: true, // arrow navigation
	scrollButtonsSpeed: 1, // arrow navigation speed
}

Jump Menu

I wrote this snippet using jQuery for a simple jump menu that goes to an url or an anchor. If it is an achor, the navigation effect can be enhanced by adding jquery.scrollTo plugin.
The target element’s ID must be the value inside the option:

<select class="jumpMenu">
<option value="#id-1">
<option value="http://www.google.com">
</select>
<div id="id-1"></div>

Usage

Add this function to your JavaScript code:

function jumpTo(e, add) {
	var optVal = $(e).val() || $(e).attr('href'),
		scrollTo;
	if (optVal.charAt(0) === '#') {
		add = add || 0;
		scrollTo = $(optVal).offset().top + add;
		return $(window)[!!$['scrollTo'] ? 'scrollTo' : 'scrollTop'](scrollTo, 500);
	}
	document.location.href = optVal;
}

It takes 2 arguments: target and and optional numeric value for scrolling

And then you can use it:

$('select.jumpMenu').change(function() {
	jumpTo(this, 100);
});​

Lazy Load

There is a way to reduce page loading time known as “Lazy Load”. Lazy Load is a pattern that loads assets only when it is needed

Mika Tuupola wrote a jQuery plugin that dows the job. It’s very useful.

Usage

&amp;lt;img src=&amp;quot;img/grey.gif&amp;quot; alt=&amp;quot;&amp;quot; width=&amp;quot;640&amp;quot; data-original=&amp;quot;img/example.jpg&amp;quot; /&amp;gt;

JavaScript:

$(&amp;quot;img.lazy&amp;quot;).lazyload();

List Split

Sometime you need to split an undefined length list on 2 or more lists to fit on the layout container. For that case I use this jQuery plugin: jquery.listSplit.js.

It’s very useful when you need to fit a list on an horizontal container, splitting on columns.

What it does?

  • Works on ol, ul and dl
  • Backs up all list attributes on a div container
  • Returns an jQuery object of the container, to maintain the chain

Cons

  • Had some side effects on nested lists

Usage

$(selector).listSplit(slices[,invert]);

r.js watcher

For those who use RequireJS, there is this script to run on top of NodeJS called r.js.

I’ve wrote a simple watcher that rebuilds your script on save.

Usage:

node watcher.js [path/to/r.js] [path/to/builderFile]

Remove element from array

JavaScript doesn’t provide an method to remove an specific value from an array.

So I wrote a little helper function to do that for me

function removeFromArray (val, arr) {
	var i = arr.indexOf(val);

	if (i !== -1) {
		arr.splice(i, 1);
	}

	return arr;
}

And you can use it just like that:

var myArray = [9, 8, 7, 6, 5];

myArray = removeFromArray(7, myArray); // [9, 8, 6, 5]

Sanitize String (friendly url)

I wrote a simple function in CoffeeScript to sanitize strings.

It works like WordPress’s sanitize_title

Usage:

var str = 'Limpar strings com acentuação as vezes é necessário!';
sanitizeString(str); // limpar-strings-com-acentuacao-as-vezes-e-necessario

Slim Header

If you scroll this site, you can see this gadget.

HTML

<nav id="slimHeader">...</nav>

CSS

#slimHeader {
	position: fixed;
	width: 100%;
	height: 50px; /* height e top devem ter a mesma medida */
	top: -50px;
	z-index: 9;
}
#slimHeader.show {
	top: 0;
}

You just need this ‘show’ class

JavaScript

Plugin:

$.fn.toggleSlimHeader = function(headerHeight) {
	var scrollHeight = $(window).scrollTop();
	$(this).stop(true, true)
	[scrollHeight > headerHeight ? 'addClass' : 'removeClass']
	('show', 300, 'easeInOutQuad');
};

Usage:

$(window).scroll(function() {
	$('#slimHeader').toggleSlimHeader(alturaMinima);
});

You have to pass a numeric value that is the minimum height to your slim header to show up.
Usually it’s the same height of your main header.

Dependencies

jqueryjquery.effects (optional for animation)