Controlling History: the HTML5 History API with jQuery

Controlling History: the HTML5 History API with jQuery

Today we’re going to look at a way to keep a sense of consistency on your website by maintaining the state of some elements even when the user navigates through history. We’re effectively going to create history-inactive areas which remain in the same state while the rest of the document is navigable.

This technique effectively allows ‘selective’ loading of elements. Effectively, if the user clicks a link or presses the back button, instead of loading the whole page (most of which stays constant, like script and stylesheets), we will only load the stuff that changes, i.e. the content. By doing this we save load times There are two main reasons why you would want to only load certain elements when your user uses the back and forward button to navigate through history. This cuts out all the unnecessaries and creates a faster web experience.

Easiest Way to Retrieve Twitter Timeline with PHP & jQuery

Easiest Way to Retrieve Twitter Timeline with PHP & jQuery

Twitter terminated its old API, and all of our Twitter tutorials have stopped working! So, here is a follow up to show you how easy is it to retrieve user timeline and hashtag with Twitter REST API 1.1. Of course, I don’t just stop there. I integrated my previously written script and modified it to work with Grid-A-Licious plugin to create something that’s similar with Pinterest.

jHtmlArea : WYSIWYG HTML Editor for jQuery

jHtmlArea : WYSIWYG HTML Editor for jQuery

A simple, light weight, extensible WYSIWYG HTML Editor built on top of jQuery. This component allows you to easily display a WYSIWYG HTML Editor in place of any TextArea DOM Elements on the page.

Vertical Responsive Navigation with jQuery & CSS3

Vertical Responsive Navigation with jQuery & CSS3

Vertical Responsive Navigation is a navigation component based in CSS and Javascript code. It’s responsive navigation, collapsible on mobile devices, has two themes and 12 preset colors.

Features:

  • Light and Dark themes
  • 12 preset colors
  • Responsive
  • Collapsible
  • Major Browsers Compatible
  • 361 icons available

visualNav : jQuery navigation menu with smooth scrolls into view

visualNav : jQuery navigation menu with smooth scrolls into view

A jQuery plugin that modifies a navigation menu to highlight / change when the menu’s target smooth scrolls into view.

Features:

  • Smooth scrolling page navigation.
  • Easing can easily be defined for both horizontal and vertical scrolling.
  • Auto-updating menu which highlights both the currently viewed content & other content in view.
  • User can cancel auto-scroll by pressing any key, clicking on the page or scrolling the mousewheel.
  • Can be set up to work with any menu elements. Integrates easily with Bootstrap!

Create a Vertical, Horizontal and Diagonal Sliding Content with jQuery

Create a Vertical, Horizontal and Diagonal Sliding Content with jQuery

In this tutorial, we will learn to scroll your web content vertically, horizontally and plus diagonally! Don’t worry, we won’t rely on javascript too much, we will use css/html for the layout and javascript only do the scrolling. And hey, it will still work even if your browser doesn’t support javascript.

jQuery and PHP powered Easy Form

jQuery and PHP powered Easy Form

Looking for a simple contact form that has nice, user friendly validation? You’ve found it.This form loves validation. All fields (except for Company) are all validated through jQuery and PHP. JavaScript mainly for normal users who just love to fill in forms (and to save sending unnecessary requests to the server). PHP validation for those who love to try to break forms or just simply have JS disabled.

Features:

  • jQuery animation for validation rules.
  • JavaScript validation so no page reload! Saves bandwidth.
  • PHP validation if the user has JavaScript disabled the form will still validate.
  • Field specific validation, phone requires numbers, email requires a valid email format etc.
  • Anti spam measures (captcha) to deter spam emails. Easy to read.
  • Very easy to implement into an existing HTML or PHP web page. ‘Plug in and Play’ – Simply change the email address and place on your page.
  • Thank you message animation on submission.
  • Error message animation without reloading the page on submission attempt.
  • Customise the HTML email message that is sent

Scroll Activated Fixed Header Animations with jQuery & CSS3

Scroll Activated Fixed Header Animations with jQuery & CSS3

It’s become somewhat of a trend in web design to have a header that attaches to the top of the page as the user scrolls in order to provide the user with navigation or something along those lines. When the header attaches to the screen, we can use this point to create some pretty cool effects. In this tutorial we’re going to be looking at animations that activate as the user scrolls down.

html2canvas : Screenshots with JavaScript

html2canvas : Screenshots with JavaScript

This script allows you to take “screenshots” of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM and as such may not be 100% accurate to the real representation as it does not make an actual screenshot, but builds the screenshot based on the information available on the page.

The script renders the current page as a canvas image, by reading the DOM and the different styles applied to the elements.It does not require any rendering from the server, as the whole image is created on the clients browser.

Create a Minimal Coming Soon Page using HTML5 and CSS3

Create a Minimal Coming Soon Page using HTML5 and CSS3

In this tutorial we are going to create a Coming Soon page using HTML5 and CSS3 with a minimalist style and light colors. We will use the minimal Coming Soon page designed in Photoshop by Stelian a few days ago. For the countdown timer we will use jQuery and the jQuery countdown plugin from tutorialzine.com. Of course we will customize it a bit to match our design.