Archive for 2013

    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.

    jQuery Terminal Emulator : Creating Command line interpreters

    jQuery Terminal Emulator : Creating Command line interpreters

    jQuery Terminal Emulator is a plugin for creating command line interpreters in your applications. It can automatically call JSON-RPC service when user type commands or you can provide you own function in which you can parse user command. It’s ideal if you want to provide additional functionality for power users. It can also be used to debug your aplication.

    Features:

    • You can create interpreter for your JSON-RPC service with one line of code.
    • Support for authentication (you can provide function when user enter login and password or if you use JSON-RPC it can automatically call login function on the server and pass token to all functions)
    • Stack of interpreters – you can create commands that trigger additional interpreters (eg. you can use couple of JSON-RPC service and run them when user type command)
    • Support for command line history it use Local Storage if posible
    • Include keyboard shortcut from bash like CTRL+A, CTRL+D, CTRL+E etc.

    IMCrypt : Image Protection with PHP & JavaScript

    IMCrypt : Image Protection with PHP & JavaScript

    IMCrypt is an image protection script that basically scrambles and descrambles images you choose on your website so that they can be easily viewed, but not as easily downloaded. This is accomplished by “encrypting” the image one-time on the server side using PHP and “decrypting” it when the client needs it through a piece of Javascript.

    jQuery Upvote : A Voting plugin

    jQuery Upvote : A Voting plugin

    jQuery Upvote is a plugin that generates a voting widget like the one used on Stack Exchange sites.