Cool Javascripts...

Technical Website Design/Showcase
1

OK, I started this thread because as we speak I am working on the layout/design/coding of my teams new website. And so I am trying to throw in some cool javascript to add a) functionality and b) good appearance to our site. So it made me think, “What other cool javascripts are other teams using or planning on using?”… So here you can post the actual code (if you are comfortable doing so.), the use of the javascript (an overview of what the script accomplishes), or ideas for something that you have no clue how to make, but want to know if anyone can help you.

-Sam

SIDE NOTE:
If you got your javascript from a website or someone else, be sure to post links.

2

I’m currently working on an AJAX script to load different frames over a certain portion of our team’s site without reloading the entire site, for example login, upcoming events, and one other thing that’s slipping my mind right now, will be called up through Javascript rather than the page load. AJAX is great stuff if you have the time to learn it.

I might also use Javascript in the menus, but I haven’t decided on that yet. I might try to avoid it for that just because JS menus can become a little overkill for my organizational goal.

3

My personal site has some cool Javascripting using the Moo.fx Javascript library.

http://www.twoplustwoequalsfive.com/

Mouse over the icons, and click and double click the ‘twoplustwo’. If you want to do simple animation type things, check out moo.fx. If you want to do complicated animation things, check out Scriptaculous. They are both Javascript libraries that will save you lots of work (but probably still leave you pulling your hair out to get them functioning).

4

i use some drop down menu scrips for the links on the green team website. i got them from Dynamic Drive most of them work good. they also have the browser capability for each script.

5

Well, I guess i’ll post one of the scripts I am trying to integrate into our site. I don’t have a link to the js but I will post the code in case anyone else wants to use it.


  <script type="text/javascript">
    function preloadImages() {
      for(var i = 0; i < arguments.length; ++i)
        (preloadImages.store[preloadImages.store.length] = new Image()).src = arguments*;
    }
    preloadImages.store = ];

    preloadImages("/path/to/loaded_image.png", "/path/to/mouseover_image.png", "/path/to/timed_image.png");

    window.onload = function() {
      var e = document.images'header_image'];

      new FadableObject(e, 1, 10, 0, 99, false, false);

      e.src = preloadImages.store[0].src;
      e.onmouseover = function() {
        this.fadeThread.fadeOut(function(){
          this.element.src = preloadImages.store[1].src;
          this.fadeIn();
        });
      };
      e.onmouseout = function() {
        function() {
          document.images'header_image'].fadeThread.fadeOut(function(){
            this.element.src = preloadImages.store[0].src;
            this.fadeIn();
          });
      };
      window.setTimeout(
        function() {
          document.images'header_image'].fadeThread.fadeOut(function(){
            this.element.src = preloadImages.store[2].src;
            this.fadeIn();
          });
        },
        3000
      );
      e = null;
    };
  </script>
</head>
<body>
  <h1>
    <img src="/path/to/initial_image.png" id="header_image" alt="Header Text">
  </h1>

This script is modified from this script. Pretty much what it is for, is to make a flash/splash type header. Their are 2 images (3 if you want), 1 that is loaded once you are at the site, 1 that is loaded after 3 seconds of being at the site, then 1 that is loaded when you roll-over the header(i make it return to the 1st image)…I just need to add a skip button to it.*

6

Theres alot of cool AJAX stuff you can do if you choose to do that. Just be aware that not everyone has JS enabled, so make sure your site works with and without it. If it doesnt work without it make a simple check on the site and have it tell the user they need to enable it for your site to function properly.

7

I’ve been able to create XHTML Strict and CSS standards-compliant drop-down menus (with semantic markup) that work flawlessly in Firefox, Opera, Safari, and IE7 without Javascript. The only Javascript I needed was a helper file for Internet Explorer 6. :-/

Remember: don’t use Javascript/AJAX just for the sake of using Javascript/AJAX. If it doesn’t serve a useful purpose, then it’s just a waste of bandwidth. I almost always stick to a maximum file size of 100 kilobytes per page; that number includes everything - the XHTML, CSS, Javascript, and all of the images and graphics. That way, on fast Internet connections the page should load in under 1 second, while even on dial-up the page will still load in under 5-10 seconds. :wink:

8

i dont remember where(who?) this is from, but im pretty sure it was on CD.

javascript:R=0; x1=.1; y1=.05; x2=.25; y2=.24; x3=1.6; y3=.24; x4=300; y4=200; x5=300; y5=200; DI=document.images; DIL=DI.length; function A(){for(i=0; i<DIL; i++){DIS=DI i ].style; DIS.position=‘absolute’; DIS.left=Math.sin(Rx1+ix2+x3)*x4+x5; DIS.top=Math

put that in your address bar. (works better if you go to a page with many many pictures :slight_smile: )