ProTech's home page

ProTech-Online.com

McCueSoft homepage that has a javascript moving images and resizes to fit browser.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="scripts/raphael.js"></script>
<script type="text/javascript" src="scripts/imagesQueue.js"></script>
<script type="text/javascript">
       var client = navigator.userAgent;
       var bclientWidth;
       var bclientHeight;
       var scaleFactor;
       var iconScaleFactor;
       window.onresize = window_onresize;
       var paper;
       var background;
       var banner;
       var networks;
       var networks_mo;
       var networks_up = false;
       var systems;
       var systems_mo;
       var systems_up = false;
       var developer;
       var developer_mo;
       var developer_up = false;
       var ball;
       var ball_mo;
       var ball_on = false;
       var ball_bounce = true;
       var ball_x = 0;
       var ball_y = 0;
       var xbounce = 4;
       var ybounce = 4;
       var preload = false;
       function window_onresize(){
              if(preload){
                     updateBrowserClientSize();
                     paper.setSize(bclientWidth, bclientHeight);
                     background.attr("width", bclientWidth);
                     background.attr("height", bclientHeight);
                     banner.attr("width", bclientWidth);
                     banner.attr("height", Math.floor(scaleFactor*150));
                     networks.attr("x", 0);
                     networks.attr("y", Math.floor(scaleFactor*150));
                     networks.attr("width", Math.floor(iconScaleFactor*355));
                     networks.attr("height", Math.floor(iconScaleFactor*345));
                     networks_mo.attr("x", 0);
                     networks_mo.attr("y", Math.floor(scaleFactor*150));
                     networks_mo.attr("width", Math.floor(iconScaleFactor*355));
                     networks_mo.attr("height", Math.floor(iconScaleFactor*345));
                     systems.attr("x", Math.floor((bclientWidth/2) - ((iconScaleFactor*355)/2)));
                     systems.attr("y", Math.floor(Math.floor(scaleFactor*150)));
                     systems.attr("width", Math.floor(iconScaleFactor*355));
                     systems.attr("height", Math.floor(iconScaleFactor*345));
                     systems_mo.attr("x", Math.floor((bclientWidth/2) - ((iconScaleFactor*355)/2)));
                     systems_mo.attr("y", Math.floor(Math.floor(scaleFactor*150)));
                     systems_mo.attr("width", Math.floor(iconScaleFactor*355));
                     systems_mo.attr("height", Math.floor(iconScaleFactor*345));
                     developer.attr("x", bclientWidth - Math.floor(iconScaleFactor*355));
                     developer.attr("y", Math.floor(scaleFactor*150));
                     developer.attr("width", Math.floor(iconScaleFactor*355));
                     developer.attr("height", Math.floor(iconScaleFactor*345));
                     developer_mo.attr("x", bclientWidth - Math.floor(iconScaleFactor*355));
                     developer_mo.attr("y", Math.floor(scaleFactor*150));
                     developer_mo.attr("width", Math.floor(iconScaleFactor*355));
                     developer_mo.attr("height", Math.floor(iconScaleFactor*345));
                     ball.attr("width", Math.floor((scaleFactor / 4)*86));
                     ball.attr("height", Math.floor((scaleFactor / 4)*89));
                     ball_mo.attr("width", Math.floor((scaleFactor / 4)*86));
                     ball_mo.attr("height", Math.floor((scaleFactor / 4)*89));
              }
       }
       function updateBrowserClientSize() {
              var myWidth = 0, myHeight = 0;
              if( typeof( window.innerWidth ) == 'number' ) {
                     //Non-IE
                     myWidth = window.innerWidth;
                     myHeight = window.innerHeight;
               } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
                     //IE 6+ in 'standards compliant mode'
                     myWidth = document.documentElement.clientWidth;
                     myHeight = document.documentElement.clientHeight;
               } else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
                     //IE 4 compatible
                     myWidth = document.body.clientWidth;
                     myHeight = document.body.clientHeight;
               }
               bclientWidth = myWidth;
               bclientHeight = myHeight;
               scaleFactor = bclientWidth/660;
              var iconWidthFactor = (bclientWidth/3)/355;
              var iconHeightFactor = (bclientHeight - Math.floor(scaleFactor*150))/345;
              iconScaleFactor = (iconWidthFactor <= iconHeightFactor) ? iconWidthFactor : iconHeightFactor;
              iconScaleFactor = (Math.floor(iconScaleFactor*345) < Math.floor((scaleFactor*150)/2)) ? iconWidthFactor : iconScaleFactor;
       }
       function ballbounce(){
              if (ball_bounce == true){
                     if (ball_x > bclientWidth - Math.floor((scaleFactor / 4)*86))
                           xbounce = -4;
                     if (ball_x < 1)
                           xbounce = 4;
                     if (ball_y > bclientHeight - Math.floor((scaleFactor / 4)*89))
                           ybounce = -4;
                     if (ball_y < Math.floor(scaleFactor*(150 - 20)))
                           ybounce = 4;
                     ball_x += xbounce;
                     ball_y += ybounce;
                     ball.attr("x", ball_x);
                     ball.attr("y", ball_y);
                     ball_mo.attr("x", ball_x);
                     ball_mo.attr("y", ball_y);
              }
              t=setTimeout("ballbounce()",25);
       }
       Raphael.fn.circlePath = function(x , y, r){
              var s = "M" + x + "," + (y-r) + "A"+r+","+r+",0,1,1,"+(x-0.1)+","+(y-r)+" z";
              return s;
       }
       function finishOnload(){
              preload = true;
              updateBrowserClientSize();
              paper = Raphael(0, 0, bclientWidth, bclientHeight);          
              background = paper.image("background.jpg", 0, 0, bclientWidth, bclientHeight);
              ball_y = Math.floor(scaleFactor*(150 - 20));
              banner = paper.image("mccuesoft.png", 0, 0, bclientWidth, Math.floor(scaleFactor*150));
              networks_mo = paper.image("networks_mo.png", 0, Math.floor(scaleFactor*150), Math.floor(iconScaleFactor*355), Math.floor(iconScaleFactor*345));
              networks = paper.image("networks.png", 0, Math.floor(scaleFactor*150), Math.floor(iconScaleFactor*355), Math.floor(iconScaleFactor*345));
              systems_mo = paper.image("systems_mo.png", Math.floor((bclientWidth/2) - ((iconScaleFactor*355)/2)), Math.floor(scaleFactor*150), Math.floor(iconScaleFactor*355), Math.floor(iconScaleFactor*345));
              systems = paper.image("systems.png", Math.floor((bclientWidth/2) - ((iconScaleFactor*355)/2)), Math.floor(scaleFactor*150), Math.floor(iconScaleFactor*355), Math.floor(iconScaleFactor*345));
              developer_mo = paper.image("developer_mo.png", bclientWidth - Math.floor(iconScaleFactor*355), Math.floor(scaleFactor*150), Math.floor(iconScaleFactor*355), Math.floor(iconScaleFactor*345));
              developer = paper.image("developer.png", bclientWidth - Math.floor(iconScaleFactor*355), Math.floor(scaleFactor*150), Math.floor(iconScaleFactor*355), Math.floor(iconScaleFactor*345));
              networks.mouseover(function () {
                     if(!networks_up) {
                           networks.hide();
                           networks_mo.show();
                           networks_up = true;
                     }
              });
              networks_mo.mouseout(function () {
                     if(networks_up) {
                           networks.show();
                           networks_mo.hide();
                           networks_up = false;
                     }
              }).click(function () {
                     window.location.assign("http://www.protechs-online.com/about_chad.htm");
              });
              systems.mouseover(function () {
                     if(!systems_up) {
                           systems.hide();
                           systems_mo.show();
                           systems_up = true;
                     }
              });
              systems_mo.mouseout(function () {
                     if(systems_up) {
                           systems.show();
                           systems_mo.hide();
                           systems_up = false;
                     }
              }).click(function () {
                     window.location.assign("http://www.protechs-online.com/about_chad.htm");
              });
              developer.mouseover(function () {
                     if(!developer_up) {
                           developer.hide();
                           developer_mo.show();
                           developer_up = true;
                     }     
              });
              developer_mo.mouseout(function () {
                     if(developer_up) {
                           developer.show();
                           developer_mo.hide();
                           developer_up = false;
                     }
              }).click(function () {
                     window.location.assign("http://www.protechs-online.com/about_chad.htm");
              });
              ball_mo = paper.image("ball_mo.png", ball_x, ball_y, Math.floor((scaleFactor / 4)*86), Math.floor((scaleFactor / 4)*89));
              ball = paper.image("ball.png", ball_x, ball_y, Math.floor((scaleFactor / 4)*86), Math.floor((scaleFactor / 4)*89));
              ball.mouseover(function () {
                     if(!ball_on) {
                           ball.hide();
                           ball_mo.show();
                           ball_on = true;
                           ball_bounce = false;
                     }
              });
              ball_mo.mouseout(function () {
                     if(ball_on) {
                           ball.show();
                           ball_mo.hide();
                           ball_on = false;
                           ball_bounce = true;
                     }
              }).click(function () {
                     window.location.assign("http://www.protechs-online.com/about_chad.htm");
              });
              if(client.search(/msie 8/i) > -1 ||client.search(/msie 7/i) > -1){
                           //consoleDisplay.innerHTML += "MSIE7/8 delay show" + "<br />";
                           MSIE_hide();
                           d=setTimeout("MSIE_show()",1000);
              }
              ballbounce();
       }
       function MSIE_show(){
              background.show();
              banner.show();
              networks.show();
              networks_mo.show();
              systems.show();
              systems_mo.show();
              developer.show();
              developer_mo.show();
              ball.show();
              ball_mo.show();
       }
       function MSIE_hide(){
              background.hide();
              banner.hide();
              networks.hide();
              networks_mo.hide();
              systems.hide();
              systems_mo.hide();
              developer.hide();
              developer_mo.hide();
              ball.hide();
              ball_mo.hide();
       }
</script>
<title>McCueSoft</title>
</head>
<body bgcolor="#FFFFFF">
<div id=console></div>
<script type="text/javascript">
       consoleDisplay = document.getElementById("console");
       imagesQueue = imagesQ;
       imagesQueue.queue_images(["background.jpg",
                                                              "mccuesoft.png",
                                                              "networks.png",
                                                              "systems.png",
                                                              "developer.png",
                                                              "networks_mo.png",
                                                              "systems_mo.png",
                                                              "developer_mo.png",
                                                              "ball.png",
                                                              "ball_mo.png"]);
       imagesQueue.process_queue();
       imagesQueue.onComplete = function()
       {
              //consoleDisplay.innerHTML += "Image caching complete" + "<br />";
              finishOnload();
       }
       imagesQueue.onLoaded = function()
       {
              //consoleDisplay.innerHTML += "Image cached" + "<br />";
       }
</script>
</body>
</html>


Copyright © 2013 ProTechs-Online.com; All rights reserved.