Ajax Updates |
- Page Peel Effect Using MooTools
- jQuery UI Multiselect – Another attempt of a sortable, searchable multiple select widget
- Animate Image Filling Up Using jQuery
- Vanadium – Simple Intuitive yet powerful client side validation
| Page Peel Effect Using MooTools Posted: 26 Oct 2009 10:33 AM PDT A great script back in May titled Simple Page Peel Effect with jQuery & CSS. The idea is that you place a "peel" image on the upper-right side of an element which, when hovered, "peels" open and peels close. I thought this was a quality, flexible idea so I've ported the jQuery code to MooTools <div id="page-flip"> <a href="http://feeds.feedburner.com/BluDice"><img src="page_flip.png" alt="Subscribe!" id="page-flip-image" /></a> <div id="page-flip-message"></div> </div> A wrapper DIV containing an image and a "message" DIV. #page-flip { position:relative; right:0; top:0; float:right; } #page-flip-image { width:50px; height:52px; z-index:99; position:absolute; right:0; top:0; -ms-interpolation-mode:bicubic; } #page-flip-message { width:50px; height:50px; overflow:hidden; position:absolute; right:0; top:0; background:url(subscribe.png) no-repeat right top; } These initial CSS is important as we'll be modifying this initial CSS with MooTools. (function($,$$) { window.addEvent('domready',function() { var flip = $('page-flip'); var flipImage = $('page-flip-image'); var flipMessage = $('page-flip-message'); flip.addEvents({ mouseenter:function() { $$(flipImage,flipMessage).set('morph',{ duration: 500 }).morph({ width: 307, height: 319 }); }, mouseleave:function() { flipImage.set('morph',{ duration: 220 }).morph({ width: 50, height: 52 }); flipMessage.set('morph',{ duration:200 }).morph({ width: 50, height:50 }); } }); }); })(document.id,$$); The peel effect is triggered by mouseenter and mouseleave events on the outter DIV element. You'd think there was more to it but the effect is driven simply by width and height animations.  Related Listings:
| |||||
| jQuery UI Multiselect – Another attempt of a sortable, searchable multiple select widget Posted: 26 Oct 2009 08:48 AM PDT It depends on jQuery 1.3 and jQuery UI 1.7. The widget is styleable using Themeroller. It works in an unobtrusive fashion, by just turning html multiple select inputs into a sexier equivalent. There’s no extra markup needed. * For installation instructions please have a look at the corresponding blogpost Features * Search within available options, if there are a lots of them There are no limitations. Do whatever you want with this plugin. If you did some nice modifications, just let me know (via Github). I’d be happy to include them. Related Listings:
| |||||
| Animate Image Filling Up Using jQuery Posted: 26 Oct 2009 08:36 AM PDT Step one requires that you use your decision making skills to figure out what image you want to use. For this example, I have selected a character which I found in this wonderful Vectortuts+ tutorial. Next we're going to want to drop it in to Photoshop for some basic preparation. We're are going to end up with three images, in order to understand what role each will play, please check out the helpful diagram below. If any of the following confuses you in any way, take a look at the images I have included in the downloadable files, it should be easier to understand once you see the final products. What we're looking to get first is a base image (in this case the actual character), which is a simple matter of saving a cropped image to the size you want. If you would like to include a border around your image, as I have in the demo, make sure the background color matches the one you plan to make the border. We will skip the middle layer for a moment and look at the top image, which will act as a frame. This image is the inverse of the base image, made so only a cutout of the character can peek through. If you want to include a 10px border around your image, similar to the one in the demo add the following step: While your base image is selected hit Select > Modify > Expand and put in your desired border size, then go ahead and select the inverse. You might need to increase your canvas size in order to prevent unwanted cropping. Finally we need to make the middle layer image, which I have drawn a box around in the layer diagram. This is the image that will slide up/down above the image and create a unique fill effect (aka paint dripping). I will let you be creative here, but I have included two in the attached files for inspiration. You will notice that I've tagged on helpful comments with each relevant element, read them to understand what you are writing. *{ margin:0; padding:0; } body { text-align: center; background: #A4CAEF; text-align: center; padding: 20px; } /*Container for the image frame aka the top image*/ .frame{ position: absolute; z-index: 2; } /*The container the character goes in for easy placement*/ #dude{ height: 575px; width: 300px; margin: 0px auto; } /*Adds padding around image to make border. Needed only for pngs.*/ img.loadpic{ margin: 10px; } /*Prevents spillover from middle layer moving up*/ #dudecontainer{ position: relative; overflow: hidden; height: 575px; width: 300px; background: #FFF; } /*The middle layer container, hiding base image initially*/ #dudeoverlay{ position: absolute; z-index: 1; } /*White div in #dudeoverlay that fill space the edge image doesn't*/ #dudeblock{ height: 625px; width: 300px; background: #FFF; } /*Image that adds effect the fill, in this case slanted*/ #dudeedge{ height: 90px; width: 300px; background: url('slash.png'); } The HTML This part is straightforward HTML, just take notice of the hierarchy when putting it all together. <div id="dude"> <div id="dudecontainer"> <div class="frame"> <img src="dudeframe.png"/> </div> <div id="dudeoverlay"> <div id="dudeblock"> </div> <div id="dudeedge"> </div> </div> <img src="dude.jpg"/> </div> </div> The jQuery This is by far the easiest cut and paste job ever. Are you ready? $(document).ready(function() { $("#dudeoverlay").stop().animate({top:'-665px'},{queue:false,duration:3500} ); }); Boom, it's that easy. Depending on the size of your image you will want to play around with the top attribute, you will want it to be large enough to completely slide the overlay layer off of the base image. Negative numbers make it go up, positive make it go down. Feel free to fool around with the duration too. Related Listings:
| |||||
| Vanadium – Simple Intuitive yet powerful client side validation Posted: 26 Oct 2009 07:57 AM PDT Vanadium is declarative client-side validation toolkit. These declaration can be done in two different ways: * Using json structure var VanadiumRules = { email: ['required', 'email'], accept: ['accept'], desc: ['required'] } Using inline markup Installation The installation is dead simple. Just include vanadium.js in header of your HTML after the dependency (jQuery) <head> ... ... <script src="/js/vanadium.js" type="text/javascript"></script> ... ... </head> Related Listings:
|
| You are subscribed to email updates from Ajax Updates To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
| Google Inc., 20 West Kinzie, Chicago IL USA 60610 | |
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.