aaron vanderzwan » jQuery 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 Dynamic Absolute Positioning with jQuery http://www.aaronvanderzwan.com/blog/2010/10/dynamic-absolute-positioning-with-jquery/?utm_source=rss&utm_medium=rss&utm_campaign=dynamic-absolute-positioning-with-jquery http://www.aaronvanderzwan.com/blog/2010/10/dynamic-absolute-positioning-with-jquery/#comments Thu, 07 Oct 2010 16:38:22 +0000 Aaron Vanderzwan http://www.aaronvanderzwan.com/blog/?p=278 I had to build a website recently that used fixed positioning on most items except for a content area that scrolled. The fixed items (or absolutely positioned ones) still needed to shift when the page re-sized if content would roll to the next line. So I had to come up with a clever way to handle dynamic absolutely positioned elements. The following is what I came up with. It just loops through each child of the body. On each child, it finds the previous item (without a ‘skip’ class) and calculates that item’s top css attribute plus it’s height.

<script type=”text/javascript” charset=”utf-8″>
$(function(){
  jQuery(window).resize(function(){
    jQuery(‘body’).children().each(function(){
      var $this = jQuery(this);
      var $prev = jQuery(this).prevAll().not(‘.skip’).first();
      if($prev.length > 0){
          var newTop = $prev.outerHeight(true) + parseFloat($prev.css(‘top’));
          jQuery(this).css({top:newTop+’px’});
      }
    });
  });
  jQuery(window).trigger(‘resize’);
});
</script>

Check out the demo:
http://www.aaronvanderzwan.com/playground/dynamic_absolutes/index.html

]]> http://www.aaronvanderzwan.com/blog/2010/10/dynamic-absolute-positioning-with-jquery/feed/ 0 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 maxImage: jQuery image scaler – Now with center-ability! http://www.aaronvanderzwan.com/blog/2009/09/maximage-jquery-image-scaler/?utm_source=rss&utm_medium=rss&utm_campaign=maximage-jquery-image-scaler http://www.aaronvanderzwan.com/blog/2009/09/maximage-jquery-image-scaler/#comments Mon, 14 Sep 2009 03:02:30 +0000 Aaron Vanderzwan http://aaronvanderzwan.com/blog/?p=207 maxImage Demo Screenshot


Update – November-04-2011: MaxImage 2.0, an update that finally utilizes jQuery Cycle Plugin to create dramatic background images is finally in beta. Please take a look and help me test it. I’d love to hear what everyone thinks. maxImage is a jquery plugin that I wrote a few months ago that automatically scales images based [...]]]> maxImage Demo Screenshot


Update – November-04-2011: MaxImage 2.0, an update that finally utilizes jQuery Cycle Plugin to create dramatic background images is finally in beta. Please take a look and help me test it. I’d love to hear what everyone thinks.

maxImage is a jquery plugin that I wrote a few months ago that automatically scales images based on how much room they have in the browser window. The image will always fill your browser window. I have built a basic demo mini site for the plugin.

Note: For some reason I have lost the post that originally contained the release of my plugin. I would like a place for users of the plugin to contact me and let me know how use of the plugin is going. Please use this space, the comment area to let me know how using maxImage is going, what you would like to see added or changed.

]]> http://www.aaronvanderzwan.com/blog/2009/09/maximage-jquery-image-scaler/feed/ 269