Ajax Updates

Posted by education training on Thursday, September 17, 2009

Ajax Updates

Leopard Desktop jQuery Plugin

Posted: 16 Sep 2009 09:59 AM PDT

A neat looking Dashboard/Desktop. You guys are gonna totally FLIP when you hear what’s in this jam packed tutorial! More focus on the Dashboard (I swear it’s cooler than it sounds, and requires a lot of code), and I’ll even go into how to create a stack (seperate from the dock, sorry jqDock doesn’t like nestled

    s), and some extra little bits to make it all click.

    Preface

    As with the previous tutorial, I must note this disclaimer! I don’t own any of the images used in this tutorial, nor do you. They are copyright to their vendors, whether it be Apple, inc, Adobe, etc. Using icons is a bit of an integrity issue, so don’t abuse it!

    Secondly, a new jQuery.UI file will replace the draggable js file. This is basically all the interaction packs. Download jQuery.UI code. You’ll also need the final product of last week’s tutorial! Make sure you expand that into it’s own directory! We’ll be adding onto that. A whole lot if images are needed too. New Images. Make sure you expand that zip into the ‘images’ directory, so that any new folders are merged with their counter parts from last week. I apologise for the confusion with this. Stupid file structure, my bad. So. Files that need adding:

    * jQuery.ui package
    * Last week’s code (If you didn’t follow it)
    * All new images needed. (A few widgets and widget thumbs, so merge the folder rather than replacing!)

    Just the same, the jQuery.ui links need editing.

    Plan of Attack

    Though it might not look like it, a whole lot of code is needed for these few things:

    1. Stacks
    2. Dashboard
    1. Opening/Closing the Adding Widgets Panel
    2. Dragging Widgets onto the Dashboard list
    3. Closing Widgets
    3. Some extra bits (improving dock, adding desktop items)

    Changes

    Just before we start, I really do apologise, but there were a few things that needed changing from last week. the #dock css should read:
    #dock{
    position: fixed;
    margin: 0 auto;
    bottom: 38px;
    left: 40%;
    z-index: 0;
    list-style: none;
    }

    The #closeZone’s zIndex in dashboard.js on line 24 should be 99 not 9999
    Step 1 – Stacks

    So lets dive right into it, and start with Stacks. Or more a Stack. Unfortunately due to the way that jqDock works, it’s impossible to nestle stacks within the jqDock without editing the core js, which is much further than this tutorial intends. So instead, we’ll be creating a stack to the bottom right of the page. The harder parts of coding stacks is a) the incrementing height for each item, and the curve. Luckily, a loop combined with maths can do this hard work for us.

    Step 1:1 – HTML

    Lets begin with adding the HTML structure of the stack. Now due to the nature of the stack, if you wish to use it on a different website, you can! Basically anything inline within the < li >s work. The positioning just needs tweaking. Regardless, we use spans (and you could always wrap the images in < a >.

    stack

    • Acrobat
    • Aperture
    • Photoshop
    • Safari
    • Finder


    The first image is the folder placeholder. This is what activates the dock, so it’s necessary. (When we use the jQuery selectors, however, I’m sure you could use :first to get the first dock item if you /really/ don’t want a containing basket).
    Step 1:2 – CSS

    Contrary to the first tutorial, I’m going to include the CSS and jQuery for each step, just so the design doesn’t muddle up completely. Open up style.css from last week and add to the bottom:

    .stack{
    position: absolute;
    bottom: 0;
    right: 100px;
    }

    .stack ul{
    list-style: none;
    position: absolute;
    top: -30px;
    z-index: -9;
    }

    .stack ul li{
    position: absolute;
    }

    .stack ul li span{
    display: none;
    }

    /*I'm for the jquery*/
    .stack .openStack li span{
    display:block;
    position:absolute;
    top: 17px;
    right:60px;
    height: 14px;
    line-height: 14px;
    border: 0;
    background-color:#000;
    color: #fcfcfc;
    text-align: center;
    opacity: .85;
    padding: 3px 10px;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    opera-border-radius: 10px;
    text-shadow: #000 1px 1px 1px;
    }
    Your stack will now look like a closed stack, but you can’t open it. This just stacks (hah, no pun intended) all the icons on top of each other, so they’re compressed into a small square. The last selector is for the jQuery. When the stack is opened, the class ‘openStack is added to the ul. I apologise to those CSS3 haters, It’s the fastest most efficient way to get it right in most modern browsers.

    Step 1:3 – jQuery

    In plain english, the stack needs to open when the img is clicked, pushing each (hint…) li up in incrememnts, and to the right a little, whilst resizing to a smaller size. Then when clicked again, everything returns to normal.
    $('.stack>img').toggle(function(){
    //this function, for each element increases the top position to by 50px,
    //and across using, the equation: value = (value+1)*2. Both variables
    //start at 0.

    }, function(){
    //this one just reverses the above.

    });
    The second function is easy, but the first is a pain.
    var vertical = 0;
    var horizontal = 0;
    $('~ul>li'this).each(function(){
    $(this).animate({top: '-' +vertical + 'px', left: horizontal + 'px'}, 300);
    vertical = vertical + 50;
    horizontal = (horizontal+1)*2;
    });
    $('~ul', this).animate({top: '-50px', left: '10px'}, 300).addClass('openStack');
    $('~ul>li>img', this).animate({width: '50px', marginLeft: '9px'}, 300);
    Woo, jampacked with string interrupting, variables and math. Interesting selectors, huh? The ~ is ’siblings of’ Erg. Math. Let me explain. The first 2 variables are for the vertical position and the horizontal position (curve).

    Top incrementing is the same each time, where as unless you want a horizontal straight line, each horizontal position has to be slightly more than the rest. In this case, it increases by the previous number plus one, times 2. so it’ll go 2, 6, 14, 30, 62, 126, etc. I know they’re weird numbers, but it works. Use any equation you like!

    The ‘each’ function is similar to, say a WordPress loop. This function happens every time the next element is used. The equation ‘value = (value+1)*2′, means ‘new value equals old value plus one, then this times two.

    The first animate line adds the variables (within the plus) every time it’s looped via string splitting. The last two lines are just the size. The other half of the toggle function, just resets everything back to normal:

    $('~ul', this).removeClass('openStack').children('li').animate({top: '20px', left: '-10px'}, 300);
    $('~ul>li>img', this).animate({width: '79px', marginLeft: '0'}, 300);
    Simple! Now your jQuery stacks will successfully animate, even curving! Unfortunately rotation is a tad more difficult. Though when HTML5 comes out in 2022 (-_-) the canvas tag might have full support for that.




Demo: http://nettuts.s3.amazonaws.com/082_leopard2/preview/index.html
Download: http://nettuts.s3.amazonaws.com/082_leopard2/source.zip
Source: http://net.tutsplus.com/tutorials/javascript-ajax/adding-to-our-leopard-desktop-with-jquery/

Related Listings:

  1. slideViewer Images – JQuery Plugin What’s this? slideViewer is a lightweight (1.5Kb) jQuery plugin wich...
  2. Dynamic Poll with jQuery When you combine some neat functionality courtesy of PHP with...
  3. Filterable Portfolio with jQuery If you have worked in your field for a while,...

Photo Effects using jQuery Plugin

Posted: 16 Sep 2009 09:11 AM PDT

This is a class inspired by http://www.netzgesta.de/cvi/ and their great http://www.netzgesta.de/instant/ instant.js class of images being little rotated. This class uses excanvas – google implementation that solves problem with canvas in IE. In future versions I planing little animation on mouseover/mouseout.

Use:

Just put Wilq32.PhotoEffect into your class in your image:

Parameters:

Wilq32.PhotoEffects(width,height,angle)

- width – width of border
- height – height of border
- angle – rotation angle

Known Bugs:
Using

around image in Internet Explorer makes unproper behaviour, to solve this put image in

if you plan to use

around your img.



Demo: http://wilq32.googlepages.com/wilq32.rollimage22
Source: http://wilq32.googlepages.com/wilq32.rollimage22

Related Listings:

  1. mRotate Pictures Script mRotate.js is a plugin for mootools.js framework. It is an...
  2. Pretty Photo Script with jQuery Plugin Here’s my jQuery lightbox clone, I did it because those...
  3. Animated Image Panel like WII Photo browser You can download it at http://www.thesoul75.de/anipan/anipan.zip This snippet mimics the...

0 comments:

Post a Comment

Note: Only a member of this blog may post a comment.