[JS] General Purpose Visual Effects Library

**BYK** · 12-02-2007, 04:47 PM

1) CODE TITLE: General Purpose Visual Effects Library

2) AUTHOR NAME/NOTES: BYK

3) DESCRIPTION: This library includes useful visual functions for fade, slide and transition effects and they are really easy to use. Some asynchronus operations use callBack functions to perform other user defined operations after the effect is finished.

4) URL TO CODE: http://amplio-vita.net/JSLib

Demos are on the given URL but a direct link to a very brief(uses the fadeNSlide function and the "fixedElement" system with ajax_main.js's loadDynamicContent function) the demo site is here: http://goeker.amplio-vita.net/heart

Note: This library is a part of the amplio-vita JSLib project. All explanations are made on the uncompressed library as comments. Please give feedback to improve our library.

**BYK** · 12-24-2007, 05:13 PM

Renewed

*Changed the fadeNSlide function to handle both horizontal and vertical slides.

**GenuineRolla** · 01-02-2008, 10:47 PM

I really want to use this on my site, But I don't know how to go about "installing it". I'm pretty HTML and Java savy but I'm confused as to what I need to do in order for this to run as shown, on my page. Any help would be great..!

**BYK** · 01-03-2008, 06:42 AM

Alright

First of all there's nothing but to include the file to your document to "install" this script.
Since I did not used a class approach, you do not have to create objects etc. to use the effects.

The general usage for the functions is like this:

Code:

fadeNSlide(document.getElementById('content'), 0, -1, false, true, callbackFunction);

The above function contracts the element whose id is "content" to a height of 0 pixels with fading it to 0 opacity. And calls the "callbackFunction".

The first parameters is the object as you may understand,
the second oarameter, "0" is the target dimension(not height yet

),
following "-1" tells that this is a contraction(not an expansion) to the function so it fades out,
following "false" tells the function that you want this slide in vertical direction not horizontal,
Following "true" means you are calling the function, not the function itself so it should always be true while you are using.
The callbackFunction is called when the sliding is finished. You just write here the function's name or you may define a function right in here. The fadeNSlide function gives its object (in this case the element whose id is "content") as the first and only parameter to the callbackFunction when calling it. This parameter is optional so if you did not understand or do not need, you can simply not give anything

The above explanation is valid for fadeMe, and moveMe functions.

All other explanation's are on the code as comments just after the function's titles.

If you have any other questions please post here and I'll try to help

**GenuineRolla** · 01-03-2008, 03:42 PM

Sorry for the newb questions but...Do I need to have the libraries uploaded to my site in order for this to work or..?

**BYK** · 01-03-2008, 04:06 PM

As usual like other libraries, you have to copy the file to your server and add a line to your page something like this:

HTML Code:

<script type="text/javascript" src="/js/visual_main_comp.js"></script>

**GenuineRolla** · 01-03-2008, 04:12 PM

Ok, I think I know what I need to do now. I'm going to try to impliment it into a test page now to see if I got it down right..!

I'll let ya know in a little bit..!

Thanks!

**GenuineRolla** · 01-03-2008, 04:44 PM

This is as far as I got with my "test" page...I don't know where to go from here:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!--
Design by Free CSS Templates
http://www.projectjaydem.com
Released for free under a Creative Commons Attribution 2.5 License
--><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Sitename.com by Free Css Templates</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords">
<meta name="description">
<link href="default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="http://www.projectjaydem.com/newhome/visual_main_comp.js"></script>
<script language="JavaScript" src="http://www.projectjaydem.com/newhome/ajax_main_comp.js"></script>
<script language="JavaScript" src="http://www.projectjaydem.com/newhome/visual_main_comp.js"></script>
</head>
<body>
<div id="header">
<h1><a href="#">woot</a></h1>
<h2><a href="http://www.projectjaydem.com/">yeah</a></h2></div>
<div id="menu">
<ul>
<li class="active"><a title="" accesskey="1" href="#">Home</a> </li>
<li><a title="" accesskey="2" href="#">About Us</a> </li>
<li><a title="" accesskey="3" href="#">Products</a> </li>
<li><a title="" accesskey="4" href="#">Services</a> </li>
<li><a title="" accesskey="5" href="#">Contact Us</a> </li></ul></div>
<div id="content">
<div id="colOne">
<h2>Recent Updates</h2>
<h3>Etiam suscipit et</h3>
<p>Rhoncus ac, lacinia, nisl. Aliquam gravida massa eu arcu. <a href="#">More…</a></p>
<h3>Fusce dolor totique</h3>
<p>Sed eu eros imperdiet eros interdum blandit. Vivamus sagittis bibendum erat. Curabitur malesuada lorem ipsum dolorem. <a href="#">More…</a></p>
<h3>Nunc pellentesque</h3>
<p>Sed vestibulum blandit nisl. Quisque elementum convallis purus. Suspendisse lorem ipsum dolorem potenti. Donec nulla est, laoreet quis, pellentesque in. <a href="#">More…</a></p>
<h3>Suspendis potenti</h3>
<p>Donec nulla est, laoreet quis, pellentesque in, congue in, dui. Nunc rhoncus lorem ipsum dolorem placerat augue. Donec justo odio, eleifend varius, volutpat venenatis, sagittis ut, orci. <a href="#">More…</a></p></div>
<div id="colTwo">
<h2>Welcome to Primitive Element!</h2>
<p><em><strong>Primitive Element</strong></em> is a free template from <a href="http://www.autoloanse.com/bankruptcycarloans.html"><strong>Bankruptcy Car Loans</strong></a> released under a <a href="http://creativecommons.org/licenses/by/2.5/">Creative Commons Attribution 2.5 License</a>. The header photo is from <a href="http://www.pdphoto.org/">PDPhoto.org</a>. You're free to use it for both commercial or personal use. I only ask that you link back to <a href="http://www.autoloanse.com/bankruptcycarloans.html/">my site</a> in some way. Enjoy :)</p>
<p>Suspendisse potenti. Donec nulla est, laoreet quis, pellentesque in, congue in, dui. Nunc rhoncus placerat augue. Donec justo odio, eleifend varius, volutpat venenatis, sagittis ut, orci. Donec nulla est, laoreet quis, pellentesque in, congue in, dui. Nunc rhoncus placerat augue. Donec justo odio, eleifend varius, volutpat venenatis, sagittis ut, orci. Nullam et orci in erat viverra ornare. Nunc pellentesque.</p>
<p>Sed vestibulum blandit nisl. Quisque elementum convallis purus. Quisque pellentesque semper massa:</p>
<ul>
<li><a href="#">Suspendisse quis gravida massa felis.</a> </li>
<li><a href="#">Vivamus sagittis bibendum erat.</a> </li>
<li><a href="#">Nullam et orci in erat viverra ornare.</a> </li>
<li><a href="#">Suspendisse quis gravida massa felis.</a> </li>
<li><a href="#">Curabitur malesuada turpis nec ante.</a> </li></ul>
<p>Aliquam gravida massa eu arcu. Fusce mollis tristique sem. Sed eu eros imperdiet eros interdum blandit. Vivamus sagittis bibendum erat. Curabitur malesuada turpis nec ante. Suspendisse quis felis. Suspendisse potenti. Nullam et orci in erat viverra ornare.</p></div>
<div id="colThree">
<h2>Ipsum Dolorem</h2>
<ul>
<li><a href="#">Sed bibendum tellus id</a> </li>
<li><a href="#">Vivamus commodo</a> </li>
<li><a href="#">Sed bibendum risus atis</a> </li>
<li><a href="#">Nulla ullamcorper arcu</a> </li>
<li><a href="#">Vestibulum ultricies dui</a> </li>
<li><a href="#">Proin a dui non elit</a> </li>
<li><a href="#">Praesent utumsan</a> </li>
<li><a href="#">In posuere risus ac felis</a> </li>
<li><a href="#">Proin facilisis sagittis</a> </li>
<li><a href="#">In fringilla aliquet odio</a> </li>
<li><a href="#">Quisque sodales arcu</a> </li>
<li><a href="#">Nam tincidunt consec</a> </li></ul>
<h2>Nulla vel mollis</h2>
<ul>
</div>
<div style="clear: both">&nbsp;</div></div>
<div id="footer">
<p>woot, test page<a href=""><strong>test</strong></a></p></div>
</body>
</html>

**BYK** · 01-04-2008, 07:27 AM

Oh, you want to use all the same efect with the demo page I think.
First of all, if you inserted this line

HTML Code:

<script language="JavaScript" src="http://www.projectjaydem.com/newhome/visual_main_comp.js"></script>

Yo do not need to insert this line

HTML Code:

<script type="text/javascript" src="http://www.projectjaydem.com/newhome/visual_main_comp.js"></script>

They do the same thing

So since you want to do the same effect, edit the code below and insert it into your page

HTML Code:

<script type="text/javascript">
var docTitlePrefix="HE-ART DESIGN STUDIO - ";
function menuClick(sid,url) {
	menuitems = document.getElementById('cmenu').getElementsByTagName('span'); //get all the menu items
	for(var i=0;i<menuitems.length;i++)
	menuitems[i].style.background = "#000"; //set all of the menu item's backgrounds to black
	document.getElementById(sid).style.background = "#CE2B2C"; //set the clicked menu item's background to a different color
	document.getElementById(sid).blur(); //remove focus from the clicked menu item
	fadeNSlide(document.getElementById('content')/*slide the 'content' div up*/, 0, -1, false, true, /*when the slide is completed*/function(obj) {loadDynamicContent(url, obj/*load the given url to the content div*/, /*when the loading is completed, slide the content down again*/function(obj) {fadeNSlide(obj, 420, 1, false, true); document.title=docTitlePrefix + sid;window.status='';}, function(element, theURL) {document.title=docTitlePrefix + "Loading [" + theURL + "]";window.status=document.title;})});
}
</script>

Then put the url's you want to your links and add your links the code below:

Code:

onclick="menuClick(this.id, this.href);return false;"

**GenuineRolla** · 01-04-2008, 02:07 PM

Thank you so much for your help..! Its greatly appreciated..! I'll be sure to let you know how things turn out..!

Thread: [JS] General Purpose Visual Effects Library

Thread Tools

Search Thread

[JS] General Purpose Visual Effects Library

Bookmarks

Bookmarks

Posting Permissions