This is actually reall simple (probably not a surprise).
I assume you have html code somewhat like the following:
<div class="Button">..</div>
<div class="Button">..</div>
...
<div class="ContentArea">..</div>
Of course, I'll leave the CSS to you for how to make these position
correctly to look like that flash mockup.
your jquery looks like this:
$(document).ready(function(){
$("div.Button").click(function(){
$("div.ContentArea").animate({
width: "0px",
opacity: 0.0},
"slow",
function() { //this function should hold AJAX calls etc
$("div.ContentArea").animate({ // this animation should
instead be in the AJAX callback
width: "500px",
opacity: 1.0},
"slow"
);
}
);
}
});
Braces might not match right...
That will provide the simple mockup for you (i tested this). You'll
need to add the "cursor: hand" or whatever CSS attributes as well, and
adjust the width/opacity I used to your desired values. Obviously,
you'd like to also make an AJAX call to give new information to the
ContentArea. I would put that AJAX call into the callback to the
animation (right before the reanimation). I've marked this above,
then that AJAX should use as its callback the updating of information
and reshowing the area. You can of course approach this other ways as
well (I would do it differently, but its a little more complicated to
explain and relies on globals and such).
Cheers!
Ben Cherry
On Mar 25, 2:11 pm, makgik <[EMAIL PROTECTED]> wrote:
> At first hello to everybody! I'm new to jquery and this group.
>
> I'm just starting to dig into the framework, and I need some kind of
> more concise guidelines on my very first project I'm trying to create
> with jquery.
>
> What I want is to clone this flash functionality
> here:http://asaucerfulofpixels.com/files/mockup.swfwith jquery.
>
> Can somebody please point me to some resources where I can learn how I
> can do this? Are there any specific plugins/extensions that I can use?
> Also, if it is possible, can I use some sort of simple backend cms to
> change the contents on the panels? And What's best to use for dynamic
> source: XML, Database or?
>
> Thank you so much in advance!
