PDA

View Full Version : [JS] General Purpose Visual Effects Library



BYK
12-02-2007, 03: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, 04:13 PM
Renewed

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

GenuineRolla
01-02-2008, 09: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, 05: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:


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, 02: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, 03: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:


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

GenuineRolla
01-03-2008, 03: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, 03:44 PM
This is as far as I got with my "test" page...I don't know where to go from here:


<!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, 06: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

<script language="JavaScript" src="http://www.projectjaydem.com/newhome/visual_main_comp.js"></script>
Yo do not need to insert this line

<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

<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:


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

GenuineRolla
01-04-2008, 01:07 PM
Thank you so much for your help..! Its greatly appreciated..! I'll be sure to let you know how things turn out..!

boogyman
01-04-2008, 06:22 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..!

this is a great question
You have a good page set up as a "demo" of how its implemented but I would suggest developing some support / documentation for this slideshow.
The support could be very limited, and actually just be documentation, however some sort of documentation on how to set it up would be very helpful. Also as this script evolves you might be releasing multiple versions, thus you should probably give some feedback about the difference between versions... eg 1.0 1.5 etc...

just my two sense, but your description of how to implement this on your demo page, or at least a link to a page that has the setup steps would prevent alot of questions such as this one being asked.


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:


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 :)

see above explanation

BYK
01-04-2008, 07:44 PM
Hello,

First of all thank you for your helpful message, thus I understood that I have to make clear some points :)

The first thing I want to mention is that this is not a slideshow script This is a general purpose visual effects library which includes animated moving, animated fiex elements, fade in/out and slide down/up capable functions and a little bit other stuff.

I wrote

For now we have 4 libraries which are completely commented and the usage of the functions are broadly explained again in the code comments.
at the page whose link is given as the "URL TO THE CODE" but people instinctively wait some other type of documentation which I find not very strange.

I paid very much attention and effort on commenting in the uncompressed versions but this does not change the fact that we need a more simple and guidng demo page which I have in my to do list but not have enough time for now :)

Thank you very very much again for your helping message, thus, I think I can help more with our libararies with the help of those useful feedbacks.

PS: If you have time, your suggestions about the code commentation and explanations would be great help :)

BYK
02-03-2008, 04:16 PM
The commentary system is changed to ScriptDoc standard which made the whole libarary much more easy to understand.

The whole comments are rewritten and the library is definetly is very easy to understand and use now. A more varied live demo is on the way ;)
The InfoBox (http://www.dynamicdrive.com/forums/showthread.php?t=28998) script is also based on this library and it is a good example to clearly understand the workings of the library.

You may find the complete specification for ScriptDoc @ http://www.scriptdoc.org/specification.htm

A direct link to the commented libarary: http://amplio-vita.net/JSLib_files/visual_main.js
And a direct link to its compressed version: http://amplio-vita.net/JSLib_files/visual_main_comp.js

Comments are appreciated.