// SHOW/HIDE/TOGGLE script // ============ // =TODO: Make links to local anchors (other FAQ questions) open the answer div on the same page - http://stackoverflow.com/questions/4648446/jquery-load-retrieve-page-div-by-id-in-anchor-link $(document).ready(function(){ $("div.answer").hide(); $("h3").click(function(){ $(this).next().toggle("fast"); // trying to get the H3 to turn black when clicking: http://api.jquery.com/toggleClass/ $(this).toggleClass("darkheadings"); // stopping local anchor from being followed so the page doesn't jump // return false; }); // http://stackoverflow.com/questions/2848627/use-anchor-to-display-div $(function() { if(location.hash != "") { // $(location.hash + ":hidden").toggle('fast').prev("h3").toggleClass('darkheadings'); $(location.hash).next("div").toggle("fast").prev("h3").toggleClass("darkheadings"); } }); // http://andylangton.co.uk/jquery-show-hidecomment by morvi on 10.01.2010 at 23:46 $("a.hideall").click(function() { $("div.answer").hide("fast"); $("h3").removeClass("darkheadings"); }); $("a.showall").click(function() { $("div.answer").show("fast"); $("h3").addClass("darkheadings"); }); }); // ANCHOR HIGHLIGHTER script - can't find author info for this script // ============ // Highlighting FAQ's using anchors and the ever popular yellow-fade technique. // Including this script in a page will automatically do two things when the page loads: // 1. Highlight a target item from the URL (browser address bar) if one is present. // 2. Setup all anchor tags with targets pointing to the current page to cause a fade on the target element when clicked. // This is the amount of time (in milliseconds) that will lapse between each step in the fade var FadeInterval = 75; // This is where the fade will start, if you want it to be faster and start with a lighter color, make this number smaller // It corresponds directly to the FadeSteps below var StartFadeAt = 25; // This is list of steps that will be used for the color to fade out var FadeSteps = new Array(); FadeSteps[1] = "ff"; FadeSteps[2] = "ee"; FadeSteps[3] = "dd"; FadeSteps[4] = "cc"; FadeSteps[5] = "bb"; FadeSteps[6] = "aa"; FadeSteps[7] = "99"; // FadeSteps[8] = "99"; // FadeSteps[9] = "aa"; // FadeSteps[10] = "bb"; // FadeSteps[11] = "cc"; // FadeSteps[12] = "dd"; // FadeSteps[13] = "ee"; // FadeSteps[14] = "ee"; // FadeSteps[15] = "ee"; // FadeSteps[16] = "ee"; // FadeSteps[17] = "dd"; // FadeSteps[18] = "cc"; // FadeSteps[19] = "bb"; // FadeSteps[20] = "aa"; FadeSteps[21] = "99"; FadeSteps[22] = "99"; FadeSteps[23] = "aa"; FadeSteps[24] = "bb"; FadeSteps[25] = "cc"; FadeSteps[26] = "dd"; FadeSteps[27] = "ee"; FadeSteps[28] = "ff"; // These are the lines that "connect" the script to the page. var W3CDOM = (document.createElement && document.getElementsByTagName); addEvent(window, 'load', initFades); // This function automatically connects the script to the page so that you do not need any inline script // See http://www.scottandrew.com/weblog/articles/cbs-events for more information function addEvent(obj, eventType,fn, useCapture) { if (obj.addEventListener) { obj.addEventListener(eventType, fn, useCapture); return true; } else { if (obj.attachEvent) { var r = obj.attachEvent("on"+eventType, fn); return r; } } } // The function that initializes the fade and hooks the script into the page function initFades() { if (!W3CDOM) return; // This section highlights targets from the URL (browser address bar) // Get the URL var currentURL = unescape(window.location); // If there is a '#' in the URL if (currentURL.indexOf('#')>-1) // Highlight the target DoFade(StartFadeAt, currentURL.substring(currentURL.indexOf('#')+1,currentURL.length)); // This section searches the page body for anchors and adds onclick events so that their targets get highlighted // Get the list of all anchors in the body var anchors = document.body.getElementsByTagName('a'); // For each of those anchors for (var i=0;i-1) // Add an onclick event that calls the highlight function for the target anchors[i].onclick = function(){Highlight(this.href);return true}; } // This function is just a small wrapper to use for the oncick events of the anchors function Highlight(target) { // Get the target ID from the string that was passed to the function var targetId = target.substring(target.indexOf('#')+1,target.length); DoFade(StartFadeAt, targetId); } // This is the recursive function call that actually performs the fade function DoFade(colorId, targetId) { if (colorId >= 1) { var target = document.getElementById(targetId); if (target) { target.style.backgroundColor = "#ffff" + FadeSteps[colorId]; // If it's the last color, set it to transparent if (colorId==1) { document.getElementById(targetId).style.backgroundColor = "transparent"; } colorId--; // Wait a little bit and fade another shade setTimeout("DoFade("+colorId+",'"+targetId+"')", FadeInterval); } } }