aaron vanderzwan » Scripts http://www.aaronvanderzwan.com/blog Smile... It'll make you feel better. Tue, 31 Jan 2012 21:47:38 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 MaxImage 2.0-beta2 Release & jsFiddle with it http://www.aaronvanderzwan.com/blog/2011/11/maximage-2-0-beta-2-jsfiddle-with-it/?utm_source=rss&utm_medium=rss&utm_campaign=maximage-2-0-beta-2-jsfiddle-with-it http://www.aaronvanderzwan.com/blog/2011/11/maximage-2-0-beta-2-jsfiddle-with-it/#comments Thu, 10 Nov 2011 20:37:41 +0000 Aaron Vanderzwan http://www.aaronvanderzwan.com/blog/?p=32523 maximage2.0-b2


MaxImage 2.0 is the first fullscreen background slideshow plugin that utilizes jQuery Cycle Plugin and all it’s transitions / options.  Check out the original post. I have been testing MaxImage 2.0 beta before it’s public launch and the tests have been extremely hopeful.  I have successfully tested it in Firefox 3.6+ (Mac & PC), Safari, [...]]]> maximage2.0-b2


MaxImage 2.0 is the first fullscreen background slideshow plugin that utilizes jQuery Cycle Plugin and all it’s transitions / options.  Check out the original post.

I have been testing MaxImage 2.0 beta before it’s public launch and the tests have been extremely hopeful.  I have successfully tested it in Firefox 3.6+ (Mac & PC), Safari, Chrome, Opera and even IE back to IE7.  All of the options I have tested work as expected.  All of the 28 transitions that cycle supports have been tested and work as expected.

Here is the coolest part though… I have set up the plugin in jsFiddle so that anyone can play with it and see how sweet it is.

JSFiddle with it at http://jsfiddle.net/akv292/sLEyE/.

Check out the beta release documentation and demo.

]]> http://www.aaronvanderzwan.com/blog/2011/11/maximage-2-0-beta-2-jsfiddle-with-it/feed/ 2 MaxImage 2.0-beta1 Release http://www.aaronvanderzwan.com/blog/2011/11/maximage-2-0-beta1-release/?utm_source=rss&utm_medium=rss&utm_campaign=maximage-2-0-beta1-release http://www.aaronvanderzwan.com/blog/2011/11/maximage-2-0-beta1-release/#comments Tue, 08 Nov 2011 13:00:10 +0000 Aaron Vanderzwan http://www.aaronvanderzwan.com/blog/?p=32483 maximage2.0


Introducing the first fullscreen background slideshow plugin that utilizes jQuery Cycle Plugin and all it’s transitions / options. November 10, 2011 UPDATE: MaxImage 2.0 beta 2 has been released This 2.0 release has been in the works for a while and I am happy to say that I think it is ready for beta launch. [...]]]> maximage2.0


Introducing the first fullscreen background slideshow plugin that utilizes jQuery Cycle Plugin and all it’s transitions / options.

November 10, 2011 UPDATE: MaxImage 2.0 beta 2 has been released

This 2.0 release has been in the works for a while and I am happy to say that I think it is ready for beta launch. Please note… It is absolutely going to have a lot of bugs, but if you feel like testing it and letting me know how it goes that would be fantastic.

 

Contents

What’s New

There have been a number of changes since 1.0 but here are some of the biggest:

  • MaxImage 2.0 uses the slideshow power from jQuery Cycle Plugin and allows you to utilize all of the options from Cycle but now for a background slideshow.
  • MaxImage 2.0 determines whether your browser can use CSS3′s background-size:cover. If it can, it uses it as to limit the amount of heavy lifting that jQuery has to do. That means the majority of your users will have a slim and smooth experience. That is so important with large image animations as it is. (still working on optimizing) If CSS3 is not available it falls back to the old way of sizing and centering background images.
  • MaxImage 1.0 made the mistake of assuming certain things about your design. I have tried to limit the amount of styling that MaxImage 2.0 does to give you the maximum amount of control. I’ve even pulled styles that were originally being set by JS into an external CSS.
  • MaxImage 2.0 has been completely rewritten to comply with current best practices

Demo

Check out a demo.
I am working on official documentation to release with the plugin when it is ready for a full release.

Installation

Step 1

Download jQuery MaxImage 2.0 CSS, upload it to your server with FTP, and include it in your <head> tag:

<link rel="stylesheet" href="styles/jquery.maximage.css" type="text/css" media="screen" title="CSS" charset="utf-8" />

 

Step 2

Link to jQuery Library, download jQuery Cycle Plugin, jQuery Easing plugin (optional) and MaxImage JS and include them in your <head> tag or right before the </body> tag.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.js"></script>
<script src="js/jquery.cycle.all.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.maximage.js" type="text/javascript" charset="utf-8"></script>

 

Step 3

Call maximage and pass cycle your options (these are options used for the demo):

<script type="text/javascript" charset="utf-8">
$(function(){
    $('#maximage').maximage({
        cycleOptions: {
            fx:'scrollHorz',
            speed: 800,
            timeout: 8000,
            prev: '#arrow_left',
            next: '#arrow_right'
        },
        onFirstImageLoaded: function(){
            jQuery('#cycle-loader').hide();
            jQuery('#maximage').fadeIn('fast');
        }
    });
});
</script>

Download

You can download Maximage2.0-beta1 at the jQuery plugin repository.

You can also get the css and JS from the demo site:
Cycle – http://jquery.malsup.com/cycle/download.html
Maximage CSS – http://www.aaronvanderzwan.com/maximage/2.0/lib/css/jquery.maximage.css
Maximage JS – http://www.aaronvanderzwan.com/maximage/2.0/lib/js/jquery.maximage.js.

Feedback

As usual… let me know what you think and if you have any suggestions. I’d love to know if you encounter any bugs… as that is what I am testing right now. Along with create a forum / trac I have it in my notes to get this up to GitHub and allow people to fork / help me make this work even better.

Cheers.

 

]]> http://www.aaronvanderzwan.com/blog/2011/11/maximage-2-0-beta1-release/feed/ 24 jQuery: RegExp for all occurances; Wrap all © and ® with HTML http://www.aaronvanderzwan.com/blog/2010/03/jquery-regexp-for-all-occurances-treat-all-and-with-specific-css/?utm_source=rss&utm_medium=rss&utm_campaign=jquery-regexp-for-all-occurances-treat-all-and-with-specific-css http://www.aaronvanderzwan.com/blog/2010/03/jquery-regexp-for-all-occurances-treat-all-and-with-specific-css/#comments Fri, 26 Mar 2010 20:33:45 +0000 Aaron Vanderzwan http://www.aaronvanderzwan.com/blog/?p=246 .copy, .reg {font-size:xx-small;vertical-align:text-top;} </style> <script> $(function(){ var copy = new RegExp(‘\u00a9′,’g'); var reg = new RegExp(‘\u00ae’,'g’); var newBody = $(‘body’).html().replace(copy, ‘<span class=”copy”>&copy;</span>’).replace(reg, ‘<span class=”reg”>&reg;</span>’); $(‘body’).html(newBody); }); </script>]]> This script will find all © and ® on a page and wrap them a span around them with a “copy” or “reg” class accordingly.

<style>
.copy, .reg {font-size:xx-small;vertical-align:text-top;}
</style>

<script>
$(function(){
var copy = new RegExp(‘\u00a9′,’g');
var reg = new RegExp(‘\u00ae’,'g’);
var newBody = $(‘body’).html().replace(copy, ‘<span class=”copy”>&copy;</span>’).replace(reg, ‘<span class=”reg”>&reg;</span>’);
$(‘body’).html(newBody);
});
</script>

]]> http://www.aaronvanderzwan.com/blog/2010/03/jquery-regexp-for-all-occurances-treat-all-and-with-specific-css/feed/ 0 focusMagic jQuery Plugin http://www.aaronvanderzwan.com/blog/2009/09/focusmagic-jquery-plugin/?utm_source=rss&utm_medium=rss&utm_campaign=focusmagic-jquery-plugin http://www.aaronvanderzwan.com/blog/2009/09/focusmagic-jquery-plugin/#comments Thu, 17 Sep 2009 18:35:42 +0000 Aaron Vanderzwan http://aaronvanderzwan.com/blog/?p=216 This plugin is meant to expedite the basic process of making form fields empty or clear on focus and refill on blur, depending on a few specs… a watermark. The three different scenarios that I have built for are represented.

  1. A normal form field watermark that empties on focus and refills on blur.
  2. A value that is set by the server trumps anything that the plugin does. (Note: this way, if a user has to fill out the form again because one of the fields didn’t validate, the server can send values so that the user doesn’t have to refill the whole form)
  3. There may be a time when you want to ignore the plugin and keep your label visible. Just add a ‘ignore’ class to your label and the plugin doesn’t touch it.
  4. This is an extra couple of lines written so that validation works correctly. What it does is it empties the fields that have not been touched by the user on submit. That way, we can run our validation against those fields, and we don’t submit our label.

This solution focuses on accessibility as it does not remove the label, just moves it off the viewport. This way, if a user does not have Javascript, CSS, or uses a screen reader, they will still get normal labels.

View a demo
Download plugin (link to jQuery plugins)

Please let me know what you think about it, or if there is anything I should do to improve.

]]> http://www.aaronvanderzwan.com/blog/2009/09/focusmagic-jquery-plugin/feed/ 6 Movable Type 4.2: Custom Fields on registration / sign up form http://www.aaronvanderzwan.com/blog/2008/08/movable-type-42-custom-fields-on-registration-sign-up-form/?utm_source=rss&utm_medium=rss&utm_campaign=movable-type-42-custom-fields-on-registration-sign-up-form http://www.aaronvanderzwan.com/blog/2008/08/movable-type-42-custom-fields-on-registration-sign-up-form/#comments Thu, 21 Aug 2008 16:10:37 +0000 Aaron Vanderzwan http://aaronvanderzwan.com/blog/?p=146 This is a blog post about Movable Type development. If you are uninterested in Movable Type development, then you don’t need to read this. I have been working on building a pretty substantial website with Movable Type for the last couple of months and have learned a few things along the way. This is one of those things that I learned that isn’t really documented anywhere. I thought I would try.

The website that I am building allows for users to signup/create usernames/login/post entries/etc. The goal was to require a user, when signing up, to add what company they worked for. This is not one of the standard fields that come with Movable Type’s sign up form (we purchased the Community Solution). What is baked in to Movable Type is the ability to create custom fields on the user object. This is good. It means that we can add as many fields as we want, and associate the data to a specific user, (i.e. Company, Job Title, Birthday, etc.). MT has some documentation on allowing a user to update this custom information on their profile page (http://www.movabletype.org/documentation/community/user-profiles.html). Here is the code they suggest:




id="$field_id"
label="$name"
hint="$description"
shown="$show_field"
show_hint="$show_hint"
required="$required">




This is great if you want a user to be able to enter all of the created custom field data at once because it just loops through all of your custom fields and creates input fields for each of them. We had about 10 custom fields on the user object and only wanted the person signing up to enter the ‘Company’ information on signup (as to not make them feel overwhelmed with so much information to input).

How I accomplished only writing one field is to throw an MT if statement in there based on what the $field_id is. In other words what your custom field’s basename is preceded by “customfield_”.



With “company” my field’s basename, that made the field_id I was looking for, customfield_company.

My final code to display only the company custom field on the user signup form (with MT4.2):





id="$field_id"
label="$name"
hint="$description"
shown="$show_field"
show_hint="$show_hint"
required="$required">





Note: This is only possible on the user registration page after the release of MovableType 4.2. Before that, I think this could only be done on the profile page.

I will update this if I learn any discrepancies in what I said. If you find any, please let me know.

]]> http://www.aaronvanderzwan.com/blog/2008/08/movable-type-42-custom-fields-on-registration-sign-up-form/feed/ 22 RMagick & ImageMagick from Source: Mac OSX Leopard http://www.aaronvanderzwan.com/blog/2008/04/rmagick-imagemagick-from-source-mac-osx-leopard/?utm_source=rss&utm_medium=rss&utm_campaign=rmagick-imagemagick-from-source-mac-osx-leopard http://www.aaronvanderzwan.com/blog/2008/04/rmagick-imagemagick-from-source-mac-osx-leopard/#comments Wed, 09 Apr 2008 17:23:35 +0000 Aaron Vanderzwan http://aaronvanderzwan.com/blog/?p=108 The Problem

I know that there are a lot of dependencies that go along with installing RMagick from source on Leopard.  For this reason, I was very interested in the idea of packing all of the commands into a script and just letting it run.  If you are like me, your past with scripts has been grey at best; i.e. there always seems to be some sort of problem that kills your script. Then you have to search through it to find where it broke and you spend a lot of time aligning yourself with something that might not even work.

The reason most of these scripts will fail is that references are now broken or code deprecated. If it fails, I then have to make sure that http://whatever.com still exists and is hosting the file and version that I need. I got to thinking… so often I would like (at least) the option of using something that is a bit older, but can be run smoothly.

The ‘Dependencies’/Libraries

This script uses Ruby to install ImageMagick and RMagick, with the necessary dependencies for gif, jpg, png, freetype, tiff,¬†libwmf (?),¬†littlecms (?), and¬†ghostscript (?). ¬†It rely’s on these libraries:

JPEG:
ftp://ftp.uu.net/graphics/jpeg/jpegsrc.v6b.tar.gz

PNG:
http://superb-west.dl.sourceforge.net/sourceforge/libpng/libpng-1.2.22.tar.bz2

Freetype:
http://download.savannah.gnu.org/releases/freetype/freetype-2.3.5.tar.gz

TIFF:
ftp://ftp.remotesensing.org/libtiff/tiff-3.8.2.tar.gz

http://jaist.dl.sourceforge.net/sourceforge/wvware/libwmf-0.2.8.4.tar.gz

LittleCMS:
http://www.littlecms.com/lcms-1.17.tar.gz

Ghostscript:
ftp://mirror.cs.wisc.edu/pub/mirrors/ghost/GPL/gs860/ghostscript-8.60.tar.gz

Ghostscript Fonts:
ftp://mirror.cs.wisc.edu/pub/mirrors/ghost/GPL/current/ghostscript-fonts-std-8.11.tar.gz

ImageMagick:
ftp://ftp.imagemagick.org/pub/ImageMagick/ImageMagick-6.3.8-11.tar.gz

When I found this script these URLs were built in so that if one of the URLs didn’t work, it would break. That is fine, but it is not built to find the newest and greatest, or make sure that the newest still works with everything else. So why not just package all of those url’s libraries together and make that downloadable here. I may be breaking a law or something… (if I am let me know) but I think these are all open-source.

The Instructions

So here is how it is done.

– Download the zip (39.5 MB)
– Unpack it
– Open Terminal.app

cd /to/inside/the/unzipped/dir
ruby setup.rb

Now just let it run. (You may have to put in your password every once in a while because of the ‘sudo’s).

I should also note that I had X11 (Applications > Utilities > X11) and Xcode 3.0 (Macintosh HD > Developer > Applications > Xcode) installed when I ran this script.  I am not sure how much this helped/effected the script running, but I do have these installed and runnable.

The Original

Again, a special thanks to Solomon White who originally posted this script at his blog.

Here are some other references for this technique.

John Ford:
http://www.aldenta.com/2007/11/26/installing-imagemagickrmagick-on-leopard/

Ben Reubenstein:
http://www.benr75.com/articles/2008/03/16/install-rmagick-on-mac-os-x-leopard-from-source

Here is what I found at Solomon’s website.

#!/bin/sh
curl -O http://download.savannah.gnu.org/releases/freetype/freetype-2.3.5.tar.gz
tar xzvf freetype-2.3.5.tar.gz
cd freetype-2.3.5
./configure --prefix=/usr/local
make
sudo make install
cd ..

curl -O http://superb-west.dl.sourceforge.net/sourceforge/libpng/libpng-1.2.22.tar.bz2
tar jxvf libpng-1.2.22.tar.bz2
cd libpng-1.2.22
./configure --prefix=/usr/local
make
sudo make install
cd ..

curl -O ftp://ftp.uu.net/graphics/jpeg/jpegsrc.v6b.tar.gz
tar xzvf jpegsrc.v6b.tar.gz
cd jpeg-6b
ln -s `which glibtool` ./libtool
export MACOSX_DEPLOYMENT_TARGET=10.5
./configure --enable-shared --prefix=/usr/local
make
sudo make install
cd ..

curl -O ftp://ftp.remotesensing.org/libtiff/tiff-3.8.2.tar.gz
tar xzvf tiff-3.8.2.tar.gz
cd tiff-3.8.2
./configure --prefix=/usr/local
make
sudo make install
cd ..

curl -O http://jaist.dl.sourceforge.net/sourceforge/wvware/libwmf-0.2.8.4.tar.gz
tar xzvf libwmf-0.2.8.4.tar.gz
cd libwmf-0.2.8.4
make clean
./configure
make
sudo make install
cd ..

curl -O http://www.littlecms.com/lcms-1.17.tar.gz
tar xzvf lcms-1.17.tar.gz
cd lcms-1.17
make clean
./configure
make
sudo make install
cd ..

curl -O ftp://mirror.cs.wisc.edu/pub/mirrors/ghost/GPL/gs860/ghostscript-8.60.tar.gz
tar zxvf ghostscript-8.60.tar.gz
cd ghostscript-8.60/
./configure --prefix=/usr/local
make
sudo make install
cd ..

curl -O ftp://mirror.cs.wisc.edu/pub/mirrors/ghost/GPL/current/ghostscript-fonts-std-8.11.tar.gz
tar zxvf ghostscript-fonts-std-8.11.tar.gz
sudo mv fonts /usr/local/share/ghostscript

curl -O ftp://ftp.imagemagick.org/pub/ImageMagick/ImageMagick-6.3.8-11.tar.gz
tar -xzvf ImageMagick-6.3.8-11.tar.gz
cd ImageMagick-6.3.8
export CPPFLAGS=-I/usr/local/include
export LDFLAGS=-L/usr/local/lib
./configure --prefix=/usr/local --disable-static --with-modules --without-perl --without-magick-plus-plus --with-quantum-depth=8 --with-gs-font-dir=/usr/local/share/ghostscript/fonts
make
sudo make install
cd ..

sudo gem install rmagick

]]> http://www.aaronvanderzwan.com/blog/2008/04/rmagick-imagemagick-from-source-mac-osx-leopard/feed/ 1