Articles Tagged with javascript

You are currently browsing 4 articles tagged with javascript.

  • How to Create a Carousel with CSS and jQuery

    Published Saturday 19th of March 2011

    Almost every website I visit nowadays has one of those fancy carousel's in the top to display the most valuable content to visitors.

    In this article I'll explain how you can create one yourself using jQuery, the jQuery.scrollTo-plug-in and CSS.

    First, we'll start with the HTML.

    Join 1 others and post a comment

  • How to Build an aFramework Module

    Published Friday 16th of April 2010

    As a follow up to "How aFramework Works" I thought I'd explain how to build your own modules for aFramework.

    It's actually very simple. Of course you'll need to know the languages you'll be writing but I assume you do. The simplest modules consist of nothing but HTML.

    Be the first to post a comment

  • Accessible, Stylish Modal Windows With Modern CSS

    Published Wednesday 12th of August 2009

    With this tutorial I will try to show you a way to do accessible, stylish modal windows (complete with an overlay-div) without using a single image and just a couple of div-elements.

    Our goal is to create a generic modal that can be re-used and that has these basic features:

    • Modals should be hidden by default, except if the user has JavaScript disabled

    • The modal should be centered in the view port, even as the user scrolls

    • The modal should have those semi-transparent, rounded corners I've been seeing a lot of lately :)

    • There should (obviously) be an overlay behind the modal, preventing the user from interacting with anything behind it

    • Clicking outside the modal (i.e. on the overlay) should hide the overlay as well as all open modals (could be optional)

    • Clicking a link pointing to a modal (a[href=#login] for example) should open the modal and display the overlay

    • Don't use any images and keep it accessible!

    You can check out the example here. We'll kick off simple with the HTML.

    Join 7 others and post a comment

  • Super Simple Ajax (Without a Framework)

    Published Friday 12th of June 2009

    If you're looking for the bare minimum when it comes to doing cross-browser GET or POST XHR then this might be the script for you.

    I know there's hundreds (probably thousands) of these scripts out there already but even the most lightweight ones I could find seemed kind of bloated.

    Example

    // GET latest-comments.php and update the #latest-comments element
    superSimpleAjax({url'latest-comments.php'}, 'latest-comments');

    // GET article with ID 12 and alert its contents
    superSimpleAjax({
        
    url:        'get-article.php'
        
    data:        'id=12'
        
    callback:    function (data) {
            
    alert(data);
        }
    });

    // POST a comment to post-comment.php
    superSimpleAjax({
        
    method:        'POST'
        
    url:        'post-comment.php'
        
    data:        'author=John Doe&email=johndoe@johndoe.com&content=Hi, my name is John Doe'
        
    callback:    function (data) {
            
    alert('Thanks for your comment!');
        }
    });

    Grab the code from Google Code. It's about 1k uncompressed.

    Enjoy!

    Be the first to post a comment

Random jQuery Plug-ins

  • Super Simple Tabs

    This is an extremely basic tabs-plugin which allows you to create tabbed content from the ever-so-common list of in-page-links. You can set the select...

    Details

  • Colour Picker

    Use this plug-in on a normal <select>-element filled with colours to turn it in to a colour-picker widget that allows users to view all the colours in...

    Details

  • Vibrate

    This plug-in makes any element you want "vibrate" every now and then. Can be used in conjunction with blink for maximum annoyance!

    Details

More Plug-ins

Recent Comments

  1. Andreas on "SleekPHP User Handling"

    Thank you for showing interest :) Were the docs en...

  2. ciptard on "SleekPHP User Handling"

    Ok, thank you

  3. Andreas on "SleekPHP User Handling"

    I might write a "getting started" article for Slee...

Page cached. Loaded in: 0.0072 second(s).
Last DB change: 2012-02-04 08:04:40
Last file change: 2011-10-03 07:42:35
Cache created: 2012-02-04 12:59:22