// Stylesheet parsing regexp's var RE_COMMENT = /(///*[^*]*/*+([^//][^*]*/*+)*//)/s*/g; var RE_IMPORT = /@import/s*(?:(?:(?:url/(/s*(['"]?)(.*)/1)/s*/))|(?:(['"])(.*)/3))[^;]*;/g; var RE_ASSET_URL = //burl/(/s*(["']?)(?!data:)([^"')]+)/1/s*/)/g; var RE_PSEUDO_STRUCTURAL = /^:(empty|(first|last|only|nth(-last)?)-(child|of-type))$/; var RE_PSEUDO_ELEMENTS = /:(:first-(?:line|letter))/g; var RE_SELECTOR_GROUP = /(^|})/s*([^/{]*?[/[:][^{]+)/g; var RE_SELECTOR_PARSE = /([ +~>])|(:[a-z-]+(?:/(.*?/)+)?)|(/[.*?/])/g; var RE_LIBRARY_INCOMPATIBLE_PSEUDOS = /(:not/()?:(hover|enabled|disabled|focus|checked|target|active|visited|first-line|first-letter)/)?/g; var RE_PATCH_CLASS_NAME_REPLACE = /[^/w-]/g;
// HTML UI element regexp's var RE_INPUT_ELEMENTS = /^(INPUT|SELECT|TEXTAREA|BUTTON)$/; var RE_INPUT_CHECKABLE_TYPES = /^(checkbox|radio)$/;</p><p> // Broken attribute selector implementations (IE7/8 native [^=""], [$=""] and [*=""]) var BROKEN_ATTR_IMPLEMENTATIONS = ieVersion>6 ? /[/$/^*]=(['"])/1/ : null;</p><p> // Whitespace normalization regexp's var RE_TIDY_TRAILING_WHITESPACE = /([(/[+~])/s+/g; var RE_TIDY_LEADING_WHITESPACE = //s+([)/]+~])/g; var RE_TIDY_CONSECUTIVE_WHITESPACE = //s+/g; var RE_TIDY_TRIM_WHITESPACE = /^/s*((?:[/S/s]*/S)?)/s*$/;
// String constants var EMPTY_STRING = ""; var SPACE_STRING = " "; var PLACEHOLDER_STRING = "$1"; function patchStyleSheet( cssText ) { return cssText.replace(RE_PSEUDO_ELEMENTS, PLACEHOLDER_STRING). replace(RE_SELECTOR_GROUP, function(m, prefix, selectorText) { var selectorGroups = selectorText.split(","); for (var c = 0, cs = selectorGroups.length; c < cs; c++) { var selector = normalizeSelectorWhitespace(selectorGroups[c]) + SPACE_STRING; var patches = []; selectorGroups[c] = selector.replace(RE_SELECTOR_PARSE, function(match, combinator, pseudo, attribute, index) { if (combinator) { if (patches.length>0) { applyPatches( selector.substring(0, index), patches ); patches = []; } return combinator; } else { var patch = (pseudo) ? patchPseudoClass( pseudo ) : patchAttribute( attribute ); if (patch) { patches.push(patch); return "." + patch.className; } return match; } } ); } return prefix + selectorGroups.join(","); }); }; function patchAttribute( attr ) { return (!BROKEN_ATTR_IMPLEMENTATIONS || BROKEN_ATTR_IMPLEMENTATIONS.test(attr)) ? { className: createClassName(attr), applyClass: true } : null; }; function patchPseudoClass( pseudo ) { var applyClass = true; var className = createClassName(pseudo.slice(1)); var isNegated = pseudo.substring(0, 5) == ":not("; var activateEventName; var deactivateEventName; if (isNegated) { pseudo = pseudo.slice(5, -1); } var bracketIndex = pseudo.indexOf("(") if (bracketIndex > -1) { pseudo = pseudo.substring(0, bracketIndex); }
// check we're still dealing with a pseudo-class if (pseudo.charAt(0) == ":") { switch (pseudo.slice(1)) {</p><p> case "root": applyClass = function(e) { return isNegated ? e != root : e == root; } break;</p><p> case "target": // :target is only supported in IE8 if (ieVersion == 8) { applyClass = function(e) { var handler = function() { var hash = location.hash; var hashID = hash.slice(1); return isNegated ? (hash == EMPTY_STRING || e.id != hashID) : (hash != EMPTY_STRING && e.id == hashID); }; addEvent( win, "hashchange", function() { toggleElementClass(e, className, handler()); }) return handler(); } break; } return false;
case "checked": applyClass = function(e) { if (RE_INPUT_CHECKABLE_TYPES.test(e.type)) { addEvent( e, "propertychange", function() { if (event.propertyName == "checked") { toggleElementClass( e, className, e.checked !== isNegated ); } }) } return e.checked !== isNegated; } break;
case "disabled": isNegated = !isNegated;</p><p> case "enabled": applyClass = function(e) { if (RE_INPUT_ELEMENTS.test(e.tagName)) { addEvent( e, "propertychange", function() { if (event.propertyName == "$disabled") { toggleElementClass( e, className, e.$disabled === isNegated ); } }); enabledWatchers.push(e); e.$disabled = e.disabled; return e.disabled === isNegated; } return pseudo == ":enabled" ? isNegated : !isNegated; } break;
case "focus": activateEventName = "focus"; deactivateEventName = "blur";
case "hover": if (!activateEventName) { activateEventName = "mouseenter"; deactivateEventName = "mouseleave"; } applyClass = function(e) { addEvent( e, isNegated ? deactivateEventName : activateEventName, function() { toggleElementClass( e, className, true ); }) addEvent( e, isNegated ? activateEventName : deactivateEventName, function() { toggleElementClass( e, className, false ); }) return isNegated; } break; default: if (!RE_PSEUDO_STRUCTURAL.test(pseudo)) { return false; } break; } } return { className: className, applyClass: applyClass }; }; function applyPatches(selectorText, patches) { var elms; var domSelectorText = selectorText.replace(RE_LIBRARY_INCOMPATIBLE_PSEUDOS, EMPTY_STRING); if (domSelectorText == EMPTY_STRING || domSelectorText.charAt(domSelectorText.length - 1) == SPACE_STRING) { domSelectorText += "*"; } try { elms = selectorMethod( domSelectorText ); } catch (ex) { // #DEBUG_START log( "Selector '" + selectorText + "' threw exception '" + ex + "'" ); // #DEBUG_END }</p><p> if (elms) { for (var d = 0, dl = elms.length; d < dl; d++) { var elm = elms[d]; var cssClasses = elm.className; for (var f = 0, fl = patches.length; f < fl; f++) { var patch = patches[f];
if (!hasPatch(elm, patch)) { if (patch.applyClass && (patch.applyClass === true || patch.applyClass(elm) === true)) { cssClasses = toggleClass(cssClasses, patch.className, true ); } } } elm.className = cssClasses; } } }; function hasPatch( elm, patch ) { return new RegExp("(^|//s)" + patch.className + "(//s|$)").test(elm.className); }; function createClassName( className ) { return namespace + "-" + ((ieVersion == 6 && patchIE6MultipleClasses) ? ie6PatchID++ : className.replace(RE_PATCH_CLASS_NAME_REPLACE, function(a) { return a.charCodeAt(0) })); }; function log( message ) { if (win.console) { win.console.log(message); } }; function trim( text ) { return text.replace(RE_TIDY_TRIM_WHITESPACE, PLACEHOLDER_STRING); }; function normalizeWhitespace( text ) { return trim(text).replace(RE_TIDY_CONSECUTIVE_WHITESPACE, SPACE_STRING); }; function normalizeSelectorWhitespace( selectorText ) { return normalizeWhitespace(selectorText. replace(RE_TIDY_TRAILING_WHITESPACE, PLACEHOLDER_STRING). replace(RE_TIDY_LEADING_WHITESPACE, PLACEHOLDER_STRING) ); }; function toggleElementClass( elm, className, on ) { var oldClassName = elm.className; var newClassName = toggleClass(oldClassName, className, on); if (newClassName != oldClassName) { elm.className = newClassName; elm.parentNode.className += EMPTY_STRING; } }; function toggleClass( classList, className, on ) { var re = RegExp("(^|//s)" + className + "(//s|$)"); var classExists = re.test(classList); if (on) { return classExists ? classList : classList + SPACE_STRING + className; } else { return classExists ? trim(classList.replace(re, PLACEHOLDER_STRING)) : classList; } };
// --[ addEvent() ]----------------------------------------------------- function addEvent(elm, eventName, eventHandler) { elm.attachEvent("on" + eventName, eventHandler); };</p><p> // --[ getXHRObject() ]------------------------------------------------- function getXHRObject() { if (win.XMLHttpRequest) { return new XMLHttpRequest; } try { return new ActiveXObject('Microsoft.XMLHTTP'); } catch(e) { return null; } }; function loadStyleSheet( url ) { xhr.open("GET", url, false); xhr.send(); return (xhr.status==200) ? xhr.responseText : EMPTY_STRING; }; function resolveUrl( url, contextUrl ) {
function getProtocolAndHost( url ) { return url.substring(0, url.indexOf("/", 8)); }; if (/^https?://///i.test(url)) { return getProtocolAndHost(contextUrl) == getProtocolAndHost(url) ? url : null; } if (url.charAt(0)=="/") { return getProtocolAndHost(contextUrl) + url; } var contextUrlPath = contextUrl.split(/[?#]/)[0]; // ignore query string in the contextUrl if (url.charAt(0) != "?" && contextUrlPath.charAt(contextUrlPath.length - 1) != "/") { contextUrlPath = contextUrlPath.substring(0, contextUrlPath.lastIndexOf("/") + 1); }
// --[ init() ]--------------------------------------------------------- function init() { // honour the <base> tag var url, stylesheet; var baseTags = doc.getElementsByTagName("BASE"); var baseUrl = (baseTags.length > 0) ? baseTags[0].href : doc.location.href; for (var c = 0; c < doc.styleSheets.length; c++) { stylesheet = doc.styleSheets[c] if (stylesheet.href != EMPTY_STRING) { url = resolveUrl(stylesheet.href, baseUrl); if (url) { stylesheet.cssText = patchStyleSheet( parseStyleSheet( url ) ); } } } if (enabledWatchers.length > 0) { setInterval( function() { for (var c = 0, cl = enabledWatchers.length; c < cl; c++) { var e = enabledWatchers[c]; if (e.disabled !== e.$disabled) { if (e.disabled) { e.disabled = false; e.$disabled = true; e.disabled = true; } else { e.$disabled = e.disabled; } } } },250) } }; ContentLoaded(win, function() { // Determine the "best fit" selector engine for (var engine in selectorEngines) { var members, member, context = win; if (win[engine]) { members = selectorEngines[engine].replace("*", engine).split("."); while ((member = members.shift()) && (context = context[member])) {} if (typeof context == "function") { selectorMethod = context; init(); return; } } } }); function ContentLoaded(win, fn) {</p><p> var done = false, top = true, init = function(e) { if (e.type == "readystatechange" && doc.readyState != "complete") return; (e.type == "load" ? win : doc).detachEvent("on" + e.type, init, false); if (!done && (done = true)) fn.call(win, e.type || e); }, poll = function() { try { root.doScroll("left"); } catch(e) { setTimeout(poll, 50); return; } init('poll'); };</p><p> if (doc.readyState == "complete") fn.call(win, EMPTY_STRING); else { if (doc.createEventObject && root.doScroll) { try { top = !win.frameElement; } catch(e) { } if (top) poll(); } addEvent(doc,"readystatechange", init); addEvent(win,"load", init); } }; })(this); </script> <![endif]--> </head> <body> <ul class="menu"> <li tabindex="1"> <span class="title">One</span> <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div> </li> <li tabindex="1"> <span class="title">Two</span> <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div> </li> <li tabindex="1"> <span class="title">Three</span> <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div> </li> <li tabindex="1"> <span class="title">Four</span> <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div> </li> <li tabindex="1"> <span class="title">Five</span> <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div> </li> <li tabindex="1"> <span class="title">Six</span> <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div> </li> <li tabindex="1"> <span class="title">Seven</span> <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div> </li> <li tabindex="1"> <span class="title">Eight</span> <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div> </li> <li tabindex="1"> <span class="title">Nine</span> <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse interdum dictum scelerisque. Morbi eu euismod lorem.</div> </li> </ul> <script> (function(){
// Append a close trigger for each block $('.menu .content').append('<span class="close">x</span>'); // Show window function showContent(elem){ hideContent(); elem.find('.content').addClass('expanded'); elem.addClass('cover'); } // Reset all function hideContent(){ $('.menu .content').removeClass('expanded'); $('.menu li').removeClass('cover'); }
// When a li is clicked, show its content window and position it above all $('.menu li').click(function() { showContent($(this)); }); // When tabbing, show its content window using ENTER key $('.menu li').keypress(function(e) { if (e.keyCode == 13) { showContent($(this)); } });</p><p> // When right upper close element is clicked - reset all $('.menu .close').click(function(e) { e.stopPropagation(); hideContent(); }); // Also, when ESC key is pressed - reset all $(document).keyup(function(e) { if (e.keyCode == 27) { hideContent(); } });
