fullPage.js jQuery Plugin for fullscreen scrolling websites


fullPage-js-fullScreen-scrolling-website
Nowadays is very common to find fullscreen websites as it was in the past in the age of flash, but now, with the power of HTML, CSS and Javascript.

Some examples:

I had to do one of this websites and I found out there was nothing in the jQuery plugins world to make this task easier.
In an attempt to create something to make things easier for other people trying to do the same, I’ve created a simple plugin which creates the basic structure and functionality to start making a fullscreen scrolling website, also known as single page website.

Continue reading

Firing resize event only when resizing is finished

jquery-resize-finished-event

jQuery resize event is fired when the size of the browser window changes as pointed out in jQuery documentation.

Sometimes we need to execute functions which might take a while to execute or which might take much resources from the machine and we don’t want to execute them tents of times while the user is re-sizing the window until reaching the desired size.
Continue reading

Move cursor to the end of input or textarea

This kind of things sometimes might seem simple but can be a bit tricky.

I just found the crossbrowser way to do it with jQuery and I thought it would be useful to have it somewhere, so here it is:

//usage
moveCursorToEnd($('input'));

//function
function moveCursorToEnd(input) {
	var originalValue = input.val();
	input.val('');
	input.blur().focus().val(originalValue);
}

Disabling JavaScript console in production enviroments and Internet Explorer

We don’t want to show our stuff in public. Having debug information in production doesn’t make any sense.

We usually use the console.log() function of JavaScript for this tasks, and is correct, but we don’t want to comment and uncomment all of those lines every time we move our files to the production server.

Also, console.log() function doesn’t work in most versions of Interet Explorer (8 inclusive if you don’t enable and actually use the development tools functionality).

Having say that, lets fix it in a very simple way:

var console = { log: function() {} };

We have just overwritten the console.log function for an empty function which will not do anything.
Now, if we just want to do it in the production mode, we can add that javascript lines inside a condition like this one:

if(Configure::read('environment') != 'development' || strpos($_SERVER["HTTP_USER_AGENT"], 'MSIE')){
    echo '
        <script type="text/javascript">
            var console = { log: function() {} };
        </script>
   ';
}

And what if we want to disable it with any Internet Explorer version?
We could have done it with jQuery, JavaScript or even HTML comments, but i preferred the PHP method for it:

if(strpos($_SERVER["HTTP_USER_AGENT"], 'MSIE')){ ...

Then we just mix it with the previous code and we have the magic done:

//disable console.log in production and in Internet Explorer
if(Configure::read('environment') != 'development' || strpos($_SERVER["HTTP_USER_AGENT"], 'MSIE')){
    echo '
        <script type="text/javascript">
            var console = { log: function() {} };
        </script>
   ';
}