Advanced Search

Page 1 of 2 12 LastLast
Results 1 to 10 of 13

Thread: [JS] General Purpose Visual Effects Library

  1. #1
    Join Date
    Dec 2007
    Location
    Ankara, Turkey
    Posts
    160
    Thanks
    2
    Thanked 2 Times in 2 Posts

    Default [JS] General Purpose Visual Effects Library

    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.
    Last edited by BYK; 12-05-2007 at 08:01 AM.

  2. #2
    Join Date
    Dec 2007
    Location
    Ankara, Turkey
    Posts
    160
    Thanks
    2
    Thanked 2 Times in 2 Posts

    Default

    Renewed

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

  3. #3
    Join Date
    Jan 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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..!

  4. #4
    Join Date
    Dec 2007
    Location
    Ankara, Turkey
    Posts
    160
    Thanks
    2
    Thanked 2 Times in 2 Posts

    Default

    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

  5. #5
    Join Date
    Jan 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

  6. #6
    Join Date
    Dec 2007
    Location
    Ankara, Turkey
    Posts
    160
    Thanks
    2
    Thanked 2 Times in 2 Posts

    Default

    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>

  7. #7
    Join Date
    Jan 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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!
    Last edited by GenuineRolla; 01-03-2008 at 03:18 PM.

  8. #8
    Join Date
    Jan 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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>

  9. #9
    Join Date
    Dec 2007
    Location
    Ankara, Turkey
    Posts
    160
    Thanks
    2
    Thanked 2 Times in 2 Posts

    Default

    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;"

  10. #10
    Join Date
    Jan 2008
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •