/** Name: togler.js Desc: Contains functions for toggling and fading elements Orig Author: Martin Scicluna (ysu) Version info: ================================================================= 1.0 10-FEB-2008 (Ysu) Script created (c) Areanet Pty. Ltd. All Rights Reserved. ABN: 84 114 634 561 */ // time (in milliseconds) for the element to fadein/out var fadeTime = 400; // global array storing the toggle status of all elements on the page var toggleLayerIsVisible = new Array(); // Controls the visibility of a chunk of content ( element) // // elementID Id of the element to toggle // fadeInOut Whether to use the fade-in/out approach function toggleElement(elementID, fadeInOut) { //alert(toggleLayerIsVisible[elementID]); //alert( 'toggler called on '+elementID+' ...the elem '+toggleLayerIsVisible[elementID]); // check the current visibility of this element if ( !toggleLayerIsVisible[elementID] || typeof(toggleLayerIsVisible[elementID])=='undefined' ) { //display the layer document.getElementById(elementID).style.display = 'block'; if (fadeInOut) { shiftOpacity(elementID, fadeTime, false); //fade-in } toggleLayerIsVisible[elementID] = 1; } else { //hide the layer if (fadeInOut) { shiftOpacity(elementID, fadeTime, true); //fade-out //callback with fadeTime + 10% - Callback needed to ensure fading + toggling in right order setTimeout("hideElement('" + elementID + "')", fadeTime+(fadeTime/10)); } else { hideElement(elementID); } toggleLayerIsVisible[elementID] = 0; } } // Hides a element from visibility // // elementID Id of the element to toggle function hideElement(elementID) { //document.getElementById(elementID).style.visibility = 'hidden' document.getElementById(elementID).style.display = 'none'; } // Gradually changes the opacity of a element // // elementID Id of the element to fade in/out // opacStart The starting level of ocacity // opacEnd The ending level of ocacity // millisec The time to take between fading from the start to end levels of opacity function opacity(elementID, opacStart, opacEnd, millisec) { var speed = Math.round(millisec / 100); //speed for each frame var timer = 0; //determine the direction for the blending, if start and end are the same nothing happens if(opacStart > opacEnd) { for(i = opacStart; i >= opacEnd; i--) { setTimeout("changeOpac(" + i + ",'" + elementID + "')",(timer * speed)); timer++; } } else if(opacStart < opacEnd) { for(i = opacStart; i <= opacEnd; i++) { setTimeout("changeOpac(" + i + ",'" + elementID + "')",(timer * speed)); timer++; } } } // Change the opacity for different browsers // // opacity The opacity to set for the element // elementID Id of the element to fade in/out function changeOpac(opacity, elementID) { var object = document.getElementById(elementID).style; object.opacity = (opacity / 100); object.MozOpacity = (opacity / 100); object.KhtmlOpacity = (opacity / 100); object.filter = "alpha(opacity=" + opacity + ")"; } // Changes the opacity of a element // // elementID Id of the element to fade in/out // millisec The time to take between fading from the start to end levels of opacity // fadeOut Whether to fadein or fadeout function shiftOpacity(elementID, millisec, fadeOut) { //if an element is invisible, make it visible, else make it ivisible //if(document.getElementById(elementID).style.opacity == 0) { if (!fadeOut) { opacity(elementID, 0, 100, millisec); //fade-in } else { opacity(elementID, 100, 0, millisec); //fade-out } }