jQuery Slider Menu

Tired of those standard click ‘n drop menus? Need something with a little more pazazz? Yes & yes! Here’s the answer to your prayers, the jQuery Slider Menu.

Tired of those standard click ‘n drop menus? Need something with a little more pazazz? Yes and yes! Here’s the answer to your prayers, the jQuery Slider Menu based of off the Agile WordPress theme.

See Demo | Fork on GitHub Continue reading “jQuery Slider Menu”

Simple Drupal 7 AJAX Implementation

Boost the performance of your Drupal 7 website, improve usability and help with SEO by making content load via AJAX in just a few steps.

Drupal AJAX is a cinch to implement—as it should be since core is loaded with it. In just a few of steps I’ll show you how to use jQuery and Drupal’s hook_menu() function to quickly build a AJAX function to return anything from HTML to a JSON array.

Continue reading “Simple Drupal 7 AJAX Implementation”

JavaScript Module Design Pattern

Moving beyond adding simple JavaScript enhancements to your website to developing full-blown client-side applications is going to require organization. In this article, we’ll take a look at JavaScript Module Design Patterns and how to use them in your development.

I’m a huge fan of the JavaScript Module Design Pattern so thought it would be worthwhile for other developers to explain some use cases, the differences and why they’re important. The Module Pattern is what we’d call a “design pattern” and it’s extremely useful for a vast amount of reasons. The biggest reason I’m a fan — it makes scoping a breeze and doesn’t overcomplicate program design.

Great design is a product of care and attention applied to areas that matter, resulting in a useful, understandable, and hopefully beautiful user interface. But don’t be fooled into thinking that design is left only for designers.

Anthony Colangelo

The JavaScript Module Design Pattern also keeps things very simple, easy-to-read, use and uses Objects in a very nice way. Even better, it won’t bloat your code with repetitive this and prototype declarations. Continue reading “JavaScript Module Design Pattern”

Interaction Points jQuery Plugin

Trying to come up with a fun way to keep user’s on your site? Try the Interaction Points jQuery plugin. It’s a simple script that enables a point system for your site’s users. It’s fully customizable and is easily integrated into existing point systems. There’s nothing like a little competition to keep people engaged and coming back to your site.

This is also great from and SEO perspective to boost your site’s CTR and decrease its bounce rate. It will keep your users active while they surf and is perfect for gaming sites and other user interactive sites.

Features

  • Allows you to customize your own script to handle storing and processing user points
  • Users only occur points when their actually doing something
  • Set how many points the user earns each second while being active on the site
  • Allows additional data to be passed to your script
  • Includes a debugging feature to help you track down problems
  • Control how often the script get’s pinged to update user points

Download Now (Version 1.0) Fork on GitHub

Implementation

It’s simple to integrate. Just include the JS and modify the script that handles the post information to suit your site’s needs.

Here’s a sample PHP script you can use as a template to create your own:

I haven’t had a chance to throughly test it in all browsers, but don’t foresee any problems. If you run into any, let me know and I’ll get it fixed and updated. Let me know what you think!

jQuery Traffic Pop Plugin

Tired of those overly priced simple scripts on sites like CodeCanyon? Me too! I can understand why others that aren’t developers spend money on them, but if you’re a dev purchasing scripts like Social Traffic Pop or Facebook Traffic Pop, you’re throwing your money away. To help stay true to the open-source philosophy, here’s an alternative Traffic Pop jQuery plugin that can be fully customized to suit your needs.

See it in action!

Traffic Pop jQuery Plugin


You content here (ex. social network sharing buttons)

Download Now (Version 1.1) Fork on GitHub

Implementation

Simple stuff! Just a disclaimer, I’ve haven’t throughly tested this in all browsers so let me know if you run into any issues. I’ll be happy to fix and update it.

This script also uses the jQuery Cookie Plugin v1.3.1 by Klaus Hartl (already added into the jquery.trafficPop.js).

The HTML

The CSS

All of which can be customized to suit your site’s needs.

That’s it!

Quick Code: jQuery Sticky Navigation When User Scrolls

Sticky navigation is being used more and more on sites and there’s a good reason why. It improves the UX by making the menu available no matter where the user is on the page. Learn how to create a simple, light-weight jQuery sticky navigation below. Best of all, it’s easy to implement on existing site’s without having to change any existing HTML code!

Sticky navigation is being used more and more on sites and there’s a good reason why. It improves the UX by making the menu available no matter where the user is on the page. Learn how to create a simple, light-weight jQuery sticky navigation below. Best of all, it’s easy to implement on existing site’s without having to change any existing HTML code!

jQuery Sticky Navigation Effect

Without further adieu, let’s jump into the code.

The JavaScript

jQuery(function(){
  var menuOffset = jQuery('#site-navigation')[0].offsetTop;
  jQuery(document).bind('ready scroll',function() {
    var docScroll = jQuery(document).scrollTop();
    if(docScroll >= menuOffset) {
      jQuery('#site-navigation').addClass('fixed').css('width',jQuery('#masthead').width());
    } else {
      jQuery('#site-navigation').removeClass('fixed').removeAttr("width");
    }
   });
});

Fairly basic jQuery code. It will add a class to the navigation when a user scrolls beyond it. Only thing you’ll need to change here is the navigation selector, #site-navigation. Also, you may want to remove .css('width',jQuery('#masthead').width()). That part of the code is more specific to this site.

The CSS

#site-navigation.fixed{
  position:fixed;
  z-index: 9999;
  top:0;
}

Simple stuff! If you’ve got any questions or need help customizing it to meet your needs feel free to shoot me a line below.