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!

CSS Print Stylesheet Tips & Tricks

CSS print stylesheets often get put on the back burner, if they ever get made at all. Most front-end developers and designers out there are more obsessed with pixels than printers. This can cause a gap in your site’s consistency when users attempt to print pages on your site. Often times, what get’s printed and what they see on the screen are two completely different things. From images wrapping in odd places to pages getting cut off on the sides, printing webpages can sometimes be a big headache for users.

CSS print stylesheets often get put on the back burner, if they ever get made at all. Most front-end developers and designers out there are more obsessed with pixels than printers. This can cause a gap in your site’s consistency when users attempt to print pages on your site. Often times, what get’s printed and what they see on the screen are two completely different things. From images wrapping in odd places to pages getting cut off on the sides, printing webpages can sometimes be a big headache for users.

Coding CSS print stylesheets doesn’t have to be a monumental task. Let’s go through some simple tips and tricks that can save you both time and headaches.

Place styles in a print media query.

Remember, you don’t need to recreate your entire CSS. Most all styles are inherited by the print query, only the differences should be defined.

Make color changes explicit.

Most browsers will automatically reverse colors to save toner ink. This can sometimes cause problems with the quality of the printed page. For best results, make color changes explicit.

Remove unneeded page elements.

Generally, the goal for printed pages isn’t to provide an exact screenshot of what’s seen on the screen. Instead, to provide a well-designed print version of it. Elements like navigation bars and search forms aren’t needed on printed versions, so remove those to save both room and ink.

Set page width & margins.

Make sure your content is getting printed edge to edge by setting the body width to 100% and defining the page margin. I’ve seen some sites that go a little further and provide users some extra space for handwritten notes on the page.

Avoid odd page breaks.

Make sure your content doesn’t get spilt up across multiple pages at odd points. This can sometimes be the biggest headache when creating print stylesheets.

Force background images & colors.

Some pages require background images and colors to appear correctly. You can force these colors to show when printed in color with WebKit browsers (Chrome or Safari) using a separate media query. Unfortunately, at the time of writing this article, there’s no equivalent for Firefox, Opera or Internet Explorer (no big surprise there).

Display link URLs.

Remember, this is a printed version of the page so users have no way to access links without knowing the URL of those links. Providing a reference to the linked URLs tell’s users where those links go to. Take a look at the HTML code below:

Here’s the printed result of the code above:

With the holidays coming around the corner, many people are looking for unique gift ideas < http://www.knowgifts.com > to surprise their loved ones.

One problem with the code above is that both anchor links and linked images will also get expanded. We can fix that with a countermand CSS rule:

Selecting links around images can be more difficult since CSS doesn’t currently allow for selections of elements based on its children. This get’s remedied with the CSS4 parent selector:

CSS4 also makes expanding external links easier:

Provide QR codes for easy URL references.

Using Google’s Chart API, you can provide users a QR code on printed pages. There’s a downside to this approach, because you have to define the URL in the style. If you’re running PHP or another dynamic scripting language, this can be fixed by providing the URL automatically:


Worth-while CSS Print Articles & Tutorials

Check out these other great articles and tutorials regarding CSS printing:

WordPress or Drupal: Compare to learn what’s best for your site!

I recently received a message from a local Austin computer technician, Sergio Garcia. His question is a common one among business owners looking for a quick and easy solution to setup and mange their new sites, which is better, WordPress or Drupal.

Hey I just have a quick question, I fix computers in the South Austin area for a living and it has been time for me to have a website. Nothing too complicated but a good-looking simple and effective page where guests can find my business phone number, map where they can find me, maybe with a slider in the first page with pictures of my work and the office, blog and all that.

I don’t know much but I hear Drupal and WordPress are good options but I do not know which one is better.

Thanks,
Sergio

Do a quick Google search for WordPress or Drupal and you’ll find article after article proclaiming one over another. It’s a never-ending debate that’s been taking place for decades. Years ago, there may have been a right and wrong answer to that question, but with time comes technology and technology is what builds advanced CMS. Since the release of WordPress 3.0 on June 17, 2010 and Drupal 7 on January 5, 2011, the line between which is better has become fuzzy. It’s no longer a question which is best, but which is best for each person site’s needs. I might take some flak for this statement, but I challenge my readers to prove me wrong; There’s nothing a WordPress site can do that a Drupal site can’t and nothing a Drupal site can do that a WordPress site can’t.

Continue reading “WordPress or Drupal: Compare to learn what’s best for your site!”

Introduction to Drupal Preprocess & Process Functions

[dropcap type=”v2″]I[/dropcap]n this post, I’m going to give you an introduction to Drupal’s powerful preprocess and process functions. If you’re not already familiar with these functions, I like to think of them as both a front-enders nightmare and best friend. A nightmare only because it’s Drupal and with everything Drupal, has a steep learning curve. A best friend because, it provides the front-ender more control over the output of rendered code allowing for more efficient, clean, and crisp markup. It does need some basic PHP knowledge, but hopefully after reading this post everything will make sense.

Continue reading “Introduction to Drupal Preprocess & Process Functions”