Presenting pagePiling.js, the new jQuery plugin to create a scrolling pile of sections

After launching fullPage.js and multiScroll.js, now I present pagePiling.js. A new way to create a single scrolling page in which sections are piled one over another creating an original effect to present the information.

This jQuery plugin creates a stack of pages accessible by scrolling. Sections will be one under another producing a cascade effect when scrolling.

View demo Continue reading

Retrieving a post from WordPress and displaying it in your site

wordpress-blog-extract-post-to-website

Yeah, I know… It sounds like a simple thing to do. And yeah, that’s exactly what I though when I decided to do it, but I was wrong 🙂

Once I got the body of the wanted post, I found some troubles when printing it out. It was not well formatted, the paragraphs breaks were not shown…

I almost had it fixed by using a couple of PHP functions like `nl2br` and `utf8_encode`, but I still had problems with some “weird” characters such as long dashes:

$query = $conn->prepare("select * from wp_posts where post_title = :title and post_status = 'publish'");
$query->bindParam(':title', "myDemo");
$query->execute();
$results = $query->fetchAll(PDO::FETCH_ASSOC);

echo nl2br(utf8_encode($results['post_content']));

Then I just decided to take a look the wordpress template files and figure out how it really worked inside.
And… I might be wrong, but I found it quite crazy and chaotic to understand for newbies in WordPress insides like me.

Continue reading

multiScroll.js: jQuery plugin to create multi-scrolling sites with two vertical layouts

multiscroll-plugin-divided-panels

View demo

Although there are many jQuery plugins out there, there’s space for more yet!
This time I found a couple of sites using this new kind of multi-directional scroll and as didn’t find any script to do it, I decided to make it by my own.

Some sites using this kind of navigation are:

multiScroll.js is the name I chose for this plugin. Its aim is to facilitate the creation of multi-scrolling websites with two vertical panels or layouts scrolling in opposite directions. A great way to catch the visitor attention with an original page.

Continue reading

Useful resources for web developing

web resources

Web developing is not only about coding and designing a web site is not only about Photoshop. Creating a proper site nowadays is not as simple as it could be 10 years ago. Nowadays technology has evolve in many aspects and things are acquiring another dimension in terms of complexity.

Now users demand more, search engines become more intelligent and browsers multiply under different web engines.
Continue reading

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

Validating CakePHP users from other PHP service

auth-cakephp-php
Nowadays is very common to synchronize different applications, relate them somehow or even share the users accounts.

Working with a framework such as CakePHP make thing easier but at the same time it hides all those actions taking place behind the scenes.

CakePHP automatically hashes the user passwords to secure them and store the hash in the users table of the database. A hashed password with CakePHP 2.3 looks like this: f061c4f1a0b786c3b05dd0013a0230d767l19b77

Continue reading

Creating a jQuery animation from a single sprite image

jquery-sprite-animation

Old days

Years ago it was quite common to see GIF animations all over the net. Basically we call GIF images to any image using the .gif extension. The Gif format provides a way to display a sequence of images one after another creating the illusion of an animation, same as the way cartoon movies were made in the past.

Currently the use of Gif animations in websites has dramatically decreased, but why? Although you can actually have GIF animations with end (no loop), the fact that the color palette is so reduced (up to 256 per frame) has taken an important role on it. Color graduations were not looking good at all and many transparencies were being affected by this restriction.

Continue reading