JJ's Webs

jQuery-UI: Chaining Effects

2010-03-01T17:14:00.000-08:00

IMPORTANT: This requires the jQuery-UI API.

Using effects for callbacks in other effects, or chaining effects, can be done quite easily really. As an example, lets say you have two block elements with separate identification variables, or divs with ids. Your code may look something like this:


<div id="pg1">
<p>Page 1</p>
<p><a href="#"><img src="img/128-1.png" /></a></p>
<p><a href="#"><img src="img/128-2.png" /></a></p>
<p><a href="#"><img src="img/128-3.png" /></a></p>
</div>
<div id="pg2" style="visibility:hidden">
<p>Page 2</p>
<a href="#"><img src="img/128-1.png" /></a>
<a href="#"><img src="img/128-2.png" /></a>
<a href="#"><img src="img/128-3.png" /></a>
</div>

Now if you want to use one page, and then click something, and move to the next, most people would utilize separate functions and jump between the two, this is where the [callback] portion of the calls comes in handy. This is assuming you have a block element with an id of p1.


$("#p1").click(function(){
$("#pg1").hide("bounce",{ times:1, direction:"left" },300, function(){
$("#pg2").removeAttr('style').show("bounce",{ times:1, direction:"right" },300);
});
});

Notice the second function() call within the hide effect. That's how you chain effects. Just declare that the value is a function, and run your code, simple as that.

NOTE: The extra block elements, or pages, need to be hidden, notice the removeAttr() function in the script, that way everything is done for you.

Template and jQuery

2010-02-27T13:13:00.000-08:00

Well, the flash part of my website is done and fully customized, now it's on to bigger things, and a few bug fixes. I noticed that the flash site doesn't operate correctly in Google Chrome. While it would be nice to track down the issue within the flash files. I believe that it's best if I leave it as is, and create a static HTML version from its base. Being that flash isn't really SEO friendly, it just makes more sense to create the HTML version and optimize it for Google and other search engines.

This isn't to say that I will not be using the flash, it's just that instead of having a "splash" page with options for flash or HTML, there will be a sort of "View Flash Version" link on the HTML version of the site. Furthermore, the HTML version is the first version that the user will see, and the flash version will be located within a subdirectory of the root site.

First thing is to create a slider out of jQuery so the thumbnails operate similar to the flash version of the site. Hopefully I'll put up some jQuery tutorials or findings in the later days. I also have to template this "Blogger" theme as to match my original site, this should be fun!

Workin' on it!

2010-02-22T12:38:00.001-08:00

Go figure, it's not even worked on! Well it's kind of new so gimme some time, I'll have code for ya.