// Timeliine experiment var IE = document.all?true:false; if (!IE) document.captureEvents(Event.MOUSEMOVE); var g_DAYSIZE = 200; var g_MOUSER = 0; var g_TIMEBAR_HEIGHT = 128; var g_EVENT_ITEM_WIDTH = 175; var g_IS_PAUSED = false; var g_KEY_CODE; var g_KEY_CHAR; function getElement(psID) { if(document.all) { return document.all[psID]; } else if(document.getElementById) { //IE return document.getElementById(psID); } else { for (iLayer = 1; iLayer < document.layers.length; iLayer++) { if(document.layers[iLayer].id == psID) { return document.layers[iLayer]; }} } return null; } function TimeLine( container, timeline ) { this.container = container; this.timelineArray = timeline; this.timelineContainer = ""; this.BackdropContainer = ""; this.captionContainer = ""; this.eventItems = ""; // Determine the date range in days this.dayRange = timeline.length; // SETTINGS this.mouse_x = 0; this.mouse_y = 0; this.debug = false; // Pre Set up of the container this.configureContainer(); // Create the initial timeline based on the the dates this.configureTimeLine(); // SETUP MOUSE MOVEMENT var textBox = this.captionContainer; var instance = this.container; var backDrop = this.BackdropContainer; var timeLineC = this.timelineContainer; var doDebug = false; var doBackMove = this.moveBackdrop; var dayRange = this.dayRange; container.onmousemove = function(event) { var offsets = getOffsets(event); var xCoord = (offsets.x - divWidth(instance)/2); var powerSteps = ((divWidth(instance)/2)/10); g_MOUSER = (Math.round((xCoord/powerSteps))*8); if(doDebug) { textBox.innerHTML = "X: " + offsets.x + "   Y: " + offsets.y + "   KEY: " + g_KEY_CODE; } }; container.onmousedown = function(event) { if(g_IS_PAUSED) { g_IS_PAUSED = false; textBox.innerHTML = ""; } else { g_IS_PAUSED = true; textBox.innerHTML = "PAUSED"; } }; container.onmouseout = function(event) { g_MOUSER = 0; }; this.initMouseWatcher(); if (!IE) { this.eventFader(); } } // new TimeEvent("2005/01/06","timeline/20050106/icon.jpg","Doug's Test","This is basically just a test of the CSS Time Line engine."), function TimeEvent( date, icon, title, desc ) { this.date = date; this.icon = icon; this.title = title; this.desc = desc; } TimeLine.prototype.configureContainer = function() { // Make sure our container is "positioned" if (this.container.style.position != 'ABSOLUTE') { this.container.style.position = 'relative'; } // Crop all elements outside of this ABSOLUTE size this.container.style.overflow = 'hidden'; } TimeLine.prototype.configureTimeLine = function() { // BACKDROP this.BackdropContainer = document.createElement('DIV'); this.BackdropContainer.style.position = 'ABSOLUTE'; this.BackdropContainer.style.width = px(divWidth(this.container)); this.BackdropContainer.style.height = px(divHeight(this.container)); this.BackdropContainer.style.left = px(0); this.BackdropContainer.style.top = px(0); this.BackdropContainer.style.background = "#333 url('_images/timeline_backdrop3.jpg') repeat-x bottom center"; //this.BackdropContainer.style.backgroundColor = "#000"; this.BackdropContainer.style.zIndex = "1"; this.BackdropContainer.onmousemove = function(event) { return false; }; (this.container).appendChild(this.BackdropContainer); // SHADOWS - LEFT var shadowLeft = document.createElement('DIV'); shadowLeft.style.position = 'ABSOLUTE'; shadowLeft.style.width = px(64); shadowLeft.style.height = px(divHeight(this.container)); shadowLeft.style.left = px(-32); shadowLeft.style.top = px(0); shadowLeft.style.zIndex = "10"; if(!IE) { shadowLeft.style.background = "url('_images/shadow_left.png')"; shadowLeft.style.backgroundRepeat = "repeat-y"; } else { shadowLeft.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='_images/shadow_left.png' width=64 height="+divHeight(this.container)+" sizingMethod='scale')"; } shadowLeft.onmousemove = function(event) { return false; }; (this.container).appendChild(shadowLeft); // SHADOWS - RIGHT var shadowRight = document.createElement('DIV'); shadowRight.style.position = 'ABSOLUTE'; shadowRight.style.width = px(64); shadowRight.style.height = px(divHeight(this.container)); shadowRight.style.right = px(-32); shadowRight.style.top = px(0); shadowRight.style.zIndex = "10"; if(!IE) { shadowRight.style.background = "url('_images/shadow_right.png')"; shadowRight.style.backgroundRepeat = "repeat-y"; } else { shadowRight.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='_images/shadow_right.png' width=64 height="+divHeight(this.container)+" sizingMethod='scale')"; } shadowRight.onmousemove = function(event) { return false; }; (this.container).appendChild(shadowRight); // SHADOWS - TOP var shadowTop = document.createElement('DIV'); shadowTop.style.position = 'ABSOLUTE'; shadowTop.style.width = px(divWidth(this.container)); shadowTop.style.height = px(64); shadowTop.style.left = px(0); shadowTop.style.top = px(-32); shadowTop.style.zIndex = "10"; if(!IE) { shadowTop.style.background = "url('_images/shadow_top.png')"; shadowTop.style.backgroundRepeat = "repeat-x"; } else { shadowTop.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='_images/shadow_top.png' width="+divWidth(this.container)+" height=64 sizingMethod='scale')"; } shadowTop.onmousemove = function(event) { return false; }; (this.container).appendChild(shadowTop); // MAKE SURE WE HAVE A VALID DATE RANGE if(this.dayRange) { // TIMELINE PILL this.timelineContainer = document.createElement('DIV'); this.timelineContainer.style.position = 'ABSOLUTE'; this.timelineContainer.style.width = px( g_EVENT_ITEM_WIDTH * (this.timelineArray).length + 150); this.timelineContainer.style.height = px(divHeight(this.container)); this.timelineContainer.style.left = px(100); this.timelineContainer.style.top = px( 0 ); this.timelineContainer.style.zIndex = "9"; /* PILL - LEFT SIDE */ var pillLeft = document.createElement('DIV'); pillLeft.style.position = 'ABSOLUTE'; pillLeft.style.width = px(25); pillLeft.style.height = px(g_TIMEBAR_HEIGHT); pillLeft.style.left = px(0); pillLeft.style.top = px((divHeight(this.container)/2)-(g_TIMEBAR_HEIGHT/2)); if(!IE) { pillLeft.style.background = "url('_images/timeline_pill_L.png') no-repeat top left"; } else { pillLeft.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='_images/timeline_pill_L.png' width=25 height="+g_TIMEBAR_HEIGHT+" sizingMethod='crop')"; } pillLeft.onmousemove = function(event) { return false; }; (this.timelineContainer).appendChild(pillLeft); /* PILL - RIGHT SIDE */ var pillRight = document.createElement('DIV'); pillRight.style.position = 'ABSOLUTE'; pillRight.style.width = px(25); pillRight.style.height = px(g_TIMEBAR_HEIGHT); pillRight.style.right = px(0); pillRight.style.top = px((divHeight(this.container)/2)-(g_TIMEBAR_HEIGHT/2)); if(!IE) { pillRight.style.background = "url('_images/timeline_pill_R.png') no-repeat top right"; } else { pillRight.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='_images/timeline_pill_R.png' width=25 height="+g_TIMEBAR_HEIGHT+" sizingMethod='crop')"; } pillRight.onmousemove = function(event) { return false; }; (this.timelineContainer).appendChild(pillRight); /* PILL - CENTER */ var pillCenter = document.createElement('DIV'); pillCenter.style.position = 'ABSOLUTE'; pillCenter.style.width = px( g_EVENT_ITEM_WIDTH * (this.timelineArray).length + 100 ); pillCenter.style.height = px(g_TIMEBAR_HEIGHT); pillCenter.style.left = px(25); pillCenter.style.top = px((divHeight(this.container)/2)-(g_TIMEBAR_HEIGHT/2)); if(!IE) { pillCenter.style.background = "url('_images/timeline_pill_C.png') repeat-x top left"; } else { pillCenter.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='_images/timeline_pill_C.png' width="+(this.dayRange * g_DAYSIZE)+" height="+g_TIMEBAR_HEIGHT+" sizingMethod='scale')"; } pillCenter.onmousemove = function(event) { return false; }; var timeline = this.timelineArray; var dayRange = this.dayRange; var vCenter = divHeight(this.container)/2; if(IE) vCenter +=3; // ADD THE DAY EVENTS var drawOnTop = true; this.eventItems = new Array(timeline.length-1); var xpos = -g_EVENT_ITEM_WIDTH+35; //take in account the left pill width for (var x=0; x
"+((timeline[x]).desc); (hiliteBox).appendChild(hiliteBoxInfo); (this.eventItems[x]).appendChild(hiliteBox); drawOnTop = false; } else { // THE SMALL LITTLE BLIP var blip = document.createElement('DIV'); blip.style.position = 'ABSOLUTE'; blip.style.display = 'BLOCK'; blip.style.margin = '0'; blip.style.padding = '0'; blip.style.width = px(5); blip.style.height = px(17); blip.style.fontSize = px(1); blip.style.lineHeight = px(1); blip.style.left = px( xpos - 27 ); blip.style.top = px( (g_TIMEBAR_HEIGHT/2) ); blip.style.background = "#fff"; (pillCenter).appendChild(blip); // THIS IS THE ENTIRE EVENT CONTAINER (WE CAN FAD THIS ENTIRE THING) this.eventItems[x] = document.createElement('DIV'); this.eventItems[x].style.position = 'ABSOLUTE'; this.eventItems[x].style.width = px(300); this.eventItems[x].style.height = px(150); this.eventItems[x].style.left = px(xpos); this.eventItems[x].style.top = px( vCenter + 17 ); this.eventItems[x].style.overflow = "hidden"; this.eventItems[x].style.background = "none"; this.eventItems[x].style.opacity = 1; this.eventItems[x].style.MozOpacity = 1; this.eventItems[x].style.filter = "alpha(opacity=" + 100 + ")"; this.eventItems[x].setAttribute('name', '_tl_eventItem_'+x); this.eventItems[x].setAttribute('id', '_tl_eventItem_'+x); this.eventItems[x].style.zIndex = "100"; (this.timelineContainer).appendChild(this.eventItems[x]); // DIVIDER LINE var tempLine = document.createElement('DIV'); tempLine.style.position = 'ABSOLUTE'; tempLine.style.width = px(10); tempLine.style.height = px((divHeight(this.container)/2)-64); tempLine.style.left = px(0); tempLine.style.top = px(0); tempLine.style.background = "url(_images/event_line_bottom.gif) no-repeat bottom left"; tempLine.style.overflow = "hidden"; (this.eventItems[x]).appendChild(tempLine); // HILITE BOX var hiliteBox = document.createElement('DIV'); hiliteBox.style.position = 'ABSOLUTE'; hiliteBox.style.width = px(265); hiliteBox.style.height = px(84); hiliteBox.style.left = px(0); hiliteBox.style.bottom = px(12); hiliteBox.style.background = "transparent" /* if(!IE) { hiliteBox.style.background = "url(_images/event_hilite.png) no-repeat top left"; } else { hiliteBox.style.background = "url(_images/event_hilite.gif) no-repeat top left"; } */ hiliteBox.onmouseover = function() { //alert("Hi"); }; hiliteBox.style.overflow = "hidden"; // ADD EVENT ICON SHADOW var tempIconS = document.createElement('DIV'); tempIconS.style.position = 'ABSOLUTE'; tempIconS.style.width = px(128); tempIconS.style.height = px(128); tempIconS.style.bottom = px(-24); tempIconS.style.left = px(-10); tempIconS.style.background = "none"; if(!IE) { tempIconS.style.background = "url(_images/icon_shadow.png) no-repeat top left"; } tempIconS.style.overflow = "hidden"; (this.eventItems[x]).appendChild(tempIconS); // ADD EVENT ICON var tempIcon = document.createElement('IMG'); tempIcon.style.position = 'ABSOLUTE'; tempIcon.style.width = px(64); tempIcon.style.height = px(64); tempIcon.style.bottom = px(22); tempIcon.style.left = px(10); tempIcon.src = ((timeline[x]).icon); tempIcon.style.overflow = "hidden"; tempIcon.style.zIndex = "200"; (this.eventItems[x]).appendChild(tempIcon); // HILITE BOX INFO var hiliteBoxInfo = document.createElement('DIV'); hiliteBoxInfo.style.position = 'ABSOLUTE'; hiliteBoxInfo.style.display = 'BLOCK'; hiliteBoxInfo.style.width = px(180); hiliteBoxInfo.style.height = px(74); hiliteBoxInfo.style.left = px(84); hiliteBoxInfo.style.bottom = px(0); hiliteBoxInfo.style.lineHeight = '100%'; hiliteBoxInfo.style.color = "white"; hiliteBoxInfo.style.fontSize = px(11); hiliteBoxInfo.style.fontFamily = 'Helvetica, Geneva, Arial, SunSans-Regular, sans-serif'; hiliteBoxInfo.innerHTML = ""+( ((timeline[x]).date).substring(0,4) ) +"
"+((timeline[x]).desc); (hiliteBox).appendChild(hiliteBoxInfo); (this.eventItems[x]).appendChild(hiliteBox); drawOnTop = true; } } (this.container).appendChild(this.timelineContainer); // ADD THE MONTH DIVIDERS AND BLIPS /* var nDate = jsDate((timeline[0]).date); do { var day = getDayRange((timeline[0]).date,strDate(nDate)); nDate = addDays(nDate,1); if( nDate.getDate() == 1 || day == 0 ) { var blip = document.createElement('DIV'); blip.style.position = 'ABSOLUTE'; blip.style.width = px(40); blip.style.height = px(20); blip.style.left = px(day * g_DAYSIZE); blip.style.top = px( (g_TIMEBAR_HEIGHT/2) - 11 ); blip.style.borderLeft = "1px solid #2f3700"; blip.style.textAlign = "left"; blip.style.textIndent = "5px"; blip.style.fontSize = "11px"; blip.style.fontWeight = "bold"; blip.style.color = "white"; blip.style.textShadow = "#fbe153 1px 1px 3px"; blip.style.lineHeight = px(20); blip.style.fontFamily = 'Helvetica, Geneva, Arial, SunSans-Regular, sans-serif'; var d_str = nDate.getFullYear()+"."+(nDate.getMonth()+1); blip.innerHTML = d_str; (pillCenter).appendChild(blip); } } while ( nDate <= jsDate((timeline[timeline.length-1]).date) ); */ (this.timelineContainer).appendChild(pillCenter); (this.container).appendChild(this.timelineContainer); } else { // WE DO NOT HAVE A VALID DATE RANGE var temp = document.createElement('DIV'); temp.style.position = 'ABSOLUTE'; temp.style.width = px(divWidth(this.container)); temp.style.height = px(g_TIMEBAR_HEIGHT); temp.style.left = px(0); temp.style.top = px( (divHeight(this.container)/2) - 6 ); temp.style.zIndex = "9"; temp.style.textAlign = "center"; temp.style.fontSize = "14px"; temp.style.color = "white"; temp.style.fontFamily = 'Helvetica, Geneva, Arial, SunSans-Regular, sans-serif'; temp.innerHTML = "No valid date ranges available."; (this.container).appendChild(temp); } // CAPTION BLOCK & MOUSE POSITION this.captionContainer = document.createElement('DIV'); this.captionContainer.style.position = 'ABSOLUTE'; this.captionContainer.style.display = 'BLOCK'; this.captionContainer.style.width = "auto"; this.captionContainer.style.height = "auto"; this.captionContainer.style.right = px(10); this.captionContainer.style.bottom = px(4); this.captionContainer.style.zIndex = "101"; this.captionContainer.style.color = "white"; this.captionContainer.style.fontSize = px(11); this.captionContainer.style.fontFamily = 'Helvetica, Geneva, Arial, SunSans-Regular, sans-serif'; this.captionContainer.style.fontWeight = 'BOLD'; if(this.debug) { this.captionContainer.innerHTML = ""; } else { this.captionContainer.innerHTML = ""; } this.captionContainer.onmousemove = function(event) { return false; }; (this.container).appendChild(this.captionContainer); // DIV TO FIX MOUSE COORDINATES IN SAFARI var divFix = document.createElement('DIV'); divFix.style.position = 'ABSOLUTE'; divFix.style.display = 'BLOCK'; divFix.style.width = px(divWidth(this.container)); divFix.style.height = px(divHeight(this.container)); divFix.style.left = px(0); divFix.style.bottom = px(0); divFix.style.background = "none"; divFix.style.zIndex = "100"; (this.container).appendChild(divFix); } TimeLine.prototype.moveBackdrop = function() { //this.BackdropContainer.style.backgroundPosition = px( (this.mouse_x-(depx((this.container).style.width)/2))*0.1 ); } TimeLine.prototype.initMouseWatcher = function() { // THE THING THAT MAKES THE TIMELINE MOVE AROUND var elemTimeLine = this.timelineContainer; var elemBackDrop = this.BackdropContainer; var elemMain = this.container; var textBox = this.captionContainer; if(elemTimeLine.goWatch) return false; elemTimeLine.goWatch = window.setInterval ( function() { if(!g_IS_PAUSED) { var t_width = divWidth(elemTimeLine)-(divWidth(elemMain)-100); elemTimeLine.currentLeft = parseInt(elemTimeLine.style.left) - g_MOUSER; if(elemTimeLine.currentLeft<-t_width) elemTimeLine.currentLeft = -t_width; if(elemTimeLine.currentLeft>100) elemTimeLine.currentLeft = 100; elemTimeLine.style.left = elemTimeLine.currentLeft + "px"; // BACKDROP //elemBackDrop.style.backgroundPosition = (parseInt(elemTimeLine.style.left) *.1) + "px"; } } ,50); } TimeLine.prototype.eventFader = function() { var timeLine = this.container; var elem = this.eventItems; timeLine.goWatch = window.setInterval ( function() { for(x=0;x -180 && pos.x < 800 ) { accStep += 0.1; if(accStep>1) accStep = 1; thisEventItem.style.opacity = accStep; thisEventItem.style.MozOpacity = accStep; thisEventItem.style.filter = "alpha(opacity=" + accStep*100 + ")"; } else { thisEventItem.style.opacity = 0; thisEventItem.style.MozOpacity = 0; thisEventItem.style.filter = "alpha(opacity=" + 0 + ")"; } } }, 75 ); } /********************************************************************** UTILITY FUNCTIONS ***********************************************************************/ // Utility function to convert a passed date string to a js date object function jsDate(date) { var n_date = new Date(date); return n_date; } function strDate(date) { var n_date = date.getFullYear()+"/"+(date.getMonth()<10?"0"+String(date.getMonth()+1):date.getMonth()+1)+"/"+(date.getDate()<10?"0"+String(date.getDate()):date.getDate()); return String(n_date); } function addDays(myDate,days) { return new Date(myDate.getTime() + days*24*60*60*1000); } function getDayRange(sdate,edate) { return( parseInt((jsDate(edate)-jsDate(sdate))/86400000) ); } function divWidth(elem) { if (elem.clientWidth) { return(elem.clientWidth); } else if (elem.clip.width) { return(elem.clip.width); } else { return -1 } } function divHeight(elem) { if (elem.clientHeight) { return(elem.clientHeight); } else if (elem.clip.height) { return(elem.clip.height); } else { return -1; } } // Shortcut to make integer pixel sizes into CSS pixel sizes. function px(pixelSize) { return String(parseInt(pixelSize)) + 'px'; } // Shortcut to make CSS pixel sizes into integer pixel sizes. function depx(cssSize) { var rExp = /px/gi; return parseInt(String(cssSize.replace(rExp,cssSize))); } function getPageCoords (element) { var coords = {x: 0, y: 0}; while (element) { coords.x += element.offsetLeft; coords.y += element.offsetTop; element = element.offsetParent; } return coords; } function getOffsets(event) { if(!event) var event = window.event; if (typeof event.offsetX != 'undefined') return { x: event.offsetX, y: event.offsetY } else if (event.target) { if (window.opera) var element = event.target; else var element = event.target.nodeType == 1 ? event.target : event.target.parentNode; var eventCoords = { x: event.clientX + window.pageXOffset, y: event.clientY + window.pageYOffset }; var elCoords = getPageCoords(element); return {x: eventCoords.x - elCoords.x, y: eventCoords.y - elCoords.y}; } } /**************************************************************************************************** This generic animation step value churner is my best friend. We can simply give minValue / maxValue, the totalSteps of the animation, and the actual step we request the value of, with a power (powr) so we can decide for ease-in and ease-out type values: powr > 1 produces ease-in, < 1 produces ease-out, = 1 produces linear animations. By increasing the actualStep in every animation step, we simply have each animation value on request. Choosing between ease-in and ease-out is enough for me, but you can prepare a function that will return an ease-in + ease-out values, or you can break the animation into two parts and use this cute(!) little function. *****************************************************************************************************/ function easeInOut( minValue, maxValue, totalSteps, actualStep,powr) { //Generic Animation Step Value Generator By www.hesido.com var delta = maxValue - minValue; var stepp = minValue+(Math.pow(((1 / totalSteps) * actualStep), powr) * delta); return Math.ceil(stepp) }