// JavaScript Document /* EXPANDABLE CONTENT BOX CLASS javascript class for controling the 'show more' button on a content box. Clicking 'show more' epands the box, un-hiding any elements that are set to display:none Clicking 'show less' after expansion will hide any elements that were previously un-hidden */ var Expandable_Box = Class.create({ initialize: function(strId, intNoToShow){ //attributes this.id = strId; //ID of content box this.debug = true; //debug messages true/false this.collapsed_height = this.GetHeight(); // height of box in it's collapsed state this.expanded_height = 0; // height of the box in its expanded state (calculated whilst box is expanding) this.calc_expanded_height = false; this.hidden_elements = new Array(1); //Array of hidden objects this.browser = BrowserDetect.browser; this.browser_version = BrowserDetect.version; this.quick_transition = false; }, GetHeight:function(){ var height =0; height = $(this.id).getDimensions().height; $(this.id).childElements().each(function(s, index){ if(s.style.position == "absolute"){ height=height + s.getDimensions().height; } }); return height; }, /* SHOW MORE CLICK EVENT */ Expand:function(q){ if (typeof(q) == "boolean"){ this.quick_transition = q; } else { this.quick_transition = false; } try{ // if expanded height has not been calculated yet, then set calc_expanded_height to true allow us to calculate the height of the box after expansion if (this.expanded_height == 0){ this.expanded_height = this.collapsed_height; this.calc_expanded_height = true; } else { this.calc_expanded_height = false; } // apply current hight to content box css styles $(this.id).style.height = this.collapsed_height + "px"; me = this; // Loop through all child elements of the content_box and apply an appear effect. this.FindChildElements($(this.id), me) // Expand the Content box to fit the newly appeared elements. if (!this.quick_transition){ new Effect.Morph(this.id, { style: { height: this.expanded_height + "px" }, // CSS Properties duration: 1 // Core Effect properties }); } else { $(this.id).style.height = this.expanded_height + "px"; } // Jiggle icons to show user the correct link - hide 'show more' and show 'show less' this.HideExpandIcon(); this.ShowCollapseIcon(); } catch (e) { this.DisplayError(e); } }, /* SHOW LESS CLICK EVENT */ Collapse:function(q){ if (typeof(quick) == "boolean"){ this.quick_transition = q; } else { this.quick_transition = false; } try{ me = this; this.hidden_elements.each(function(s, index){ if (typeof(s) == "object"){ if (s.readAttribute("name") == "hide_on_expand"){ me.ShowElement(s, me); } else { me.HideElement(s); } } }); if (!this.quick_transition){ new Effect.Morph(this.id, { style: { height: me.collapsed_height + "px" }, // CSS Properties duration: 1.5 // Core Effect properties }); } else { $(this.id).style.height = this.collapsed_height + "px"; } this.HideCollapseIcon(); this.ShowExpandIcon(); } catch(e){ this.DisplayError(e); } }, /* PRIVATE FUNCTIONS */ FindChildElements:function(e, objRef){ // grab reference to current object. for use in 'each' loop (this. will not work) e.childElements().each(function(s, index){ if (s.style.display == "none"){ // If the element is hidden // 1. Add the element to the hidden elements array objRef.hidden_elements.push(s); // 2. Show the element on screen with a cool effect. objRef.ShowElement(s,objRef ); id = Element.identify(s); // 3. If not already calculated, add on the height of this element to the 'epanded_height' variable. if (objRef.calc_expanded_height && !(id.substring(id.length - 9, id.length) == "_collapse") && !(id.substring(id.length - 7, id.length) == "_expand")){ objRef.expanded_height = objRef.expanded_height + s.getDimensions().height; // this is a quick bodge. // if the element is a span, then it's quite likely to be overlapping the element before it. // in this case we minus 15px from the expanded height total to compensate for the overlap. // need to find a way of working out the overlap programatically or calculate the hight of the box in a different way. //if (s.tagName =="SPAN"){ objRef.expanded_height = objRef.expanded_height - 12; } } } else { if (s.readAttribute("name") == "hide_on_expand"){ objRef.hidden_elements.push(s); objRef.HideElement(s); } } // 4. Loop through the child elements of this object objRef.FindChildElements(s, objRef); }); }, // show an element with an appear effect, only if the browser isn't ie6/7 // ie 6/7 seem to have problems with the effect.appear, so will not use that effect here for them. ShowElement:function(s, objRef){ if ((objRef.browser == "Explorer" && objRef.browser_version < 8) || objRef.quick_transition){ if (s.tagName == "SPAN"){ s.style.display = "inline"; } else { s.style.display = "block"; } } else { Effect.Appear(s, {duration:2} ); } }, HideElement:function(s){ if (this.browser == "Explorer" && this.browser_version < 8 || this.quick_transition){ s.style.display = "none"; } else { Effect.Fade(s, {duration:1.5}); } }, ShowExpandIcon:function(){ if (this.quick_transition){ $(this.id + "_expand").style.display = "block"; } else { Effect.Appear($(this.id + "_expand"), {duration:2} ); } }, HideExpandIcon:function(){ if (this.quick_transition){ $(this.id + "_expand").style.display = "none"; } else { Effect.Fade($(this.id + "_expand"), {duration:2} ); } }, ShowCollapseIcon:function(){ if (this.quick_transition){ $(this.id + "_collapse").style.display = "block"; } else { Effect.Appear($(this.id + "_collapse"), {duration:2} ); } }, HideCollapseIcon:function(){ if (this.quick_transition){ $(this.id + "_collapse").style.display = "none"; } else { Effect.Fade($(this.id + "_collapse"), {duration:2} ); } }, DisplayError:function(e){ if (this.debug){ alert(e);} } }); var BrowserDetect={init:function(){this.browser=this.searchString(this.dataBrowser)||"An unknown browser";this.version=this.searchVersion(navigator.userAgent)||this.searchVersion(navigator.appVersion)||"an unknown version";this.OS=this.searchString(this.dataOS)||"an unknown OS"},searchString:function(a){for(var i=0;i