Category: jQuery

Categories
css featured html jQuery

Free jQuery page peel (updated)

There is now a javascript based WordPress plugin for adding Page Peels to your site. Take a look at it on Code Canyon.

The jQuery version of the page peel script has been very popular on SmartRedFox.com, and I’ve finally got round to making some updates and changes to it.

Since I wrote the original article I found this site, which seems to have the original Flash files for the peel effect, as well as a copy of the non-jQuery version of the files. So, if you want to edit the .fla files, or you don’t want to use jQuery to display the page peel you may want to head over there now.

Updates:

  • The most requested feature for the original script was for it to open the link in the same window. This is now a configurable option. (Note: I’ve changed the default to be that the link opens in the same window).
  • I’ve changed the default images to make it easier to create your own.
  • Stopped the dotted outline from appearing when you click on the advert.
  • Assorted other fixes.

To use the new page peel edit the peel.js file to match your set-up:

  • smartredfox.link_url – This is the full url (including http://) that you want users to go to when they click your advert.
  • smartredfox.newWindow – Set this to true if you want the link_url to be opened in a new window.
  • smartredfox.small_image – This is the full path to the image users see when the image loads.
  • smartredfox.big_image – This is the full path to the big image that appears when users roll over the page peel.
  • smartredfox.small_path – This is the full path to the small.swf file.
  • smartredfox.big_path – This is the full path to the large.swf file.

Then include the peel.js file and jQuery in the head of your website:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="peel.js" type="text/javascript"></script>

Download now View demo

If you have any feedback or feature requests please post them in the comments below.

[ad#ad-3]

Categories
featured jQuery plugin

Totaliser – make your numbers roll

UPDATE 24/08/2010: Various fixes and updates have now been incorporated, and the instructions below have been updated.

SmartRedFox is pleased to announce it’s first ever jQuery plugin – the Totaliser.

It’s a simple plugin that takes a text box and turns it into a fruit machine style number updater. It’s easier to see than explain, so take a look at the demo.

There are a couple of things you need to know to use it:

1> Include the js file after your jquery include:

<script type=”text/javascript” src=”YOURPATHHERE/jquery.totaliser.js”></script>

2> Call the totaliser against a textbox to create it:

$(‘#textboxid’).totaliser();

3> When you want to update it just call UpdateTotaliser with a new number:

$(‘#textboxid’).totaliser(45545666);

or

$.fn.totaliser(45545666);

There are a few configurable options for the totaliser:

  • digits – this sets how many digits the totaliser displays (default is 9)
  • currency – set this to false if you don’t want to show the currency symbol
  • currencySign – this sets what currency symbol shows before the number (default is british pounds).

So for example to load it up with the dollar sign and only 6 digits you’d call the following:

$(‘#textboxid’).totaliser({digits:6,currencySign:”$”});

Download Totaliser View demo
If you have any bugs, suggestions, improvements, or just want to let me know that you’re using it, please leave a comment.

[ad#ad-3]

Categories
Development Frameworks jQuery

Very simple Jquery tooltips

UPDATE: I’ve made a couple of changes to the script to make it easier to use and there’s now a demo available.

A few weeks back I was looking for a nice simple way of adding tooltips to some buttons on a site – sometimes an image alone doesn’t quite convey what the button does in enough detail.

I found the excellent coda popup bubbles on jQuery for designers, this seemed to do everything I wanted it to, but it meant going through all of my html and adding an additional div with the popup content. That’s fine for me, but other developers are never going to remember to do this and we really want a consistent user interface.

A little bit more looking led to Web Designer Wall (#5 in the list). They have a very simple technique that pulls the Title text from an image and creates the popup out of this. All of dev’s are told to add title text to images so this was almost perfect. I say almost perfect because unlike the code bubbles the hover events queue up. This means that if you run you cursor back and forth over the buttons the popups keep firing for a few seconds/minutes after you stop.

So my final stop was to combine the two. I also incorporated any fixes I saw in the comments Smart red fox tooltips.section of jQuery for Designers.

You can download the script here.

Or see a demo here.

The image file I use for the tooltips can be downloaded here, and is free for anyone to use.

[ad]

Categories
Development jQuery

Free Jquery page peel script

Update 21/01/2013 – There is now a javascript based WordPress plugin for adding Page Peels to your site. Take a look at it on Code Canyon.

UPDATE 09/10/10 – There is an updated version of the jQuery page peel script now available.

page_curlJust recently I needed a page peel script for a client. A look around the ‘net lead me to a script that seemed to do everything I needed it to, but it used the document.write method which I’m not a big fan of, and it all seemed a bit inefficient.

My client was already including jQuery in their pages so it made sense to rewrite the javascript using jQuery. This also has the added benefit of meaning you no longer have to include the script inside the body tag to get it work in IE7.

While we were testing with users I also spotted a problem with some earlier versions of flash not showing the pictures. The simple but strange solution for this was to use two large images, instead of one small and one large. If you’re not worried about users with old versions of flash you can just use a 100px x 100px image instead of two 650px x 650px images.

You can download the script here.

Or see a demo here.

To use this script you need to edit the peel.js file and put the link and image paths in that you want to use, then put the following in the head of your page:

&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;script src=&amp;amp;amp;amp;quot;/pathtojquery/jquery-1.2.6.min.js&amp;amp;amp;amp;quot; type=&amp;amp;amp;amp;quot;text/javascript&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/script&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;
&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;script src=&amp;amp;amp;amp;quot;/pathtopeel/peel.js&amp;amp;amp;amp;quot; type=&amp;amp;amp;amp;quot;text/javascript&amp;amp;amp;amp;quot;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;lt;/script&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;gt;

That’s it. Just add those lines and the script does the rest. Obvisously change /pathtojquery/ to the path to jQuery for your site, and change /pathtopeel/to point to where you uploaded the peel.js file.

[ad#ad-3]