Implements Interactive Box Model Sitemap, all links in one place, fixes ...

index.html

@@ -410,6 +410,7 @@
     <div id="footer" data-l10n-id="credits"></div>
   </div>
   <footer>
+    <a href="sitemap.html" style="text-align:center">Sitemap</a>
     <script src="//mozorg.cdn.mozilla.net/tabzilla/tabzilla.js"></script>
   </footer>
 </body>

jquery.color.js

@@ -0,0 +1,123 @@
+/*
+ * jQuery Color Animations
+ * Copyright 2007 John Resig
+ * Released under the MIT and GPL licenses.
+ */
+
+(function(jQuery){
+
+	// We override the animation for all of these color styles
+	jQuery.each(['backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'color', 'outlineColor'], function(i,attr){
+		jQuery.fx.step[attr] = function(fx){
+			if ( fx.state == 0 ) {
+				fx.start = getColor( fx.elem, attr );
+				fx.end = getRGB( fx.end );
+			}
+
+			fx.elem.style[attr] = "rgb(" + [
+				Math.max(Math.min( parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0]), 255), 0),
+				Math.max(Math.min( parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1]), 255), 0),
+				Math.max(Math.min( parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2]), 255), 0)
+			].join(",") + ")";
+		}
+	});
+
+	// Color Conversion functions from highlightFade
+	// By Blair Mitchelmore
+	// http://jquery.offput.ca/highlightFade/
+
+	// Parse strings looking for color tuples [255,255,255]
+	function getRGB(color) {
+		var result;
+
+		// Check if we're already dealing with an array of colors
+		if ( color && color.constructor == Array && color.length == 3 )
+			return color;
+
+		// Look for rgb(num,num,num)
+		if (result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color))
+			return [parseInt(result[1]), parseInt(result[2]), parseInt(result[3])];
+
+		// Look for rgb(num%,num%,num%)
+		if (result = /rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(color))
+			return [parseFloat(result[1])*2.55, parseFloat(result[2])*2.55, parseFloat(result[3])*2.55];
+
+		// Look for #a0b1c2
+		if (result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color))
+			return [parseInt(result[1],16), parseInt(result[2],16), parseInt(result[3],16)];
+
+		// Look for #fff
+		if (result = /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(color))
+			return [parseInt(result[1]+result[1],16), parseInt(result[2]+result[2],16), parseInt(result[3]+result[3],16)];
+
+		// Otherwise, we're most likely dealing with a named color
+		return colors[jQuery.trim(color).toLowerCase()];
+	}
+
+	function getColor(elem, attr) {
+		var color;
+
+		do {
+			color = jQuery.curCSS(elem, attr);
+
+			// Keep going until we find an element that has color, or we hit the body
+			if ( color != '' && color != 'transparent' || jQuery.nodeName(elem, "body") )
+				break; 
+
+			attr = "backgroundColor";
+		} while ( elem = elem.parentNode );
+
+		return getRGB(color);
+	};
+
+	// Some named colors to work with
+	// From Interface by Stefan Petre
+	// http://interface.eyecon.ro/
+
+	var colors = {
+		aqua:[0,255,255],
+		azure:[240,255,255],
+		beige:[245,245,220],
+		black:[0,0,0],
+		blue:[0,0,255],
+		brown:[165,42,42],
+		cyan:[0,255,255],
+		darkblue:[0,0,139],
+		darkcyan:[0,139,139],
+		darkgrey:[169,169,169],
+		darkgreen:[0,100,0],
+		darkkhaki:[189,183,107],
+		darkmagenta:[139,0,139],
+		darkolivegreen:[85,107,47],
+		darkorange:[255,140,0],
+		darkorchid:[153,50,204],
+		darkred:[139,0,0],
+		darksalmon:[233,150,122],
+		darkviolet:[148,0,211],
+		fuchsia:[255,0,255],
+		gold:[255,215,0],
+		green:[0,128,0],
+		indigo:[75,0,130],
+		khaki:[240,230,140],
+		lightblue:[173,216,230],
+		lightcyan:[224,255,255],
+		lightgreen:[144,238,144],
+		lightgrey:[211,211,211],
+		lightpink:[255,182,193],
+		lightyellow:[255,255,224],
+		lime:[0,255,0],
+		magenta:[255,0,255],
+		maroon:[128,0,0],
+		navy:[0,0,128],
+		olive:[128,128,0],
+		orange:[255,165,0],
+		pink:[255,192,203],
+		purple:[128,0,128],
+		violet:[128,0,128],
+		red:[255,0,0],
+		silver:[192,192,192],
+		white:[255,255,255],
+		yellow:[255,255,0]
+	};
+
+})(jQuery);

sitemap.css

@@ -0,0 +1,49 @@
+*{ 
+	margin: 0; padding: 0; 
+}
+body{ 
+	font: 14px serif; 
+	background: url("data:image/png;base64,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"); 
+	background-image: url("./bg.png")
+}
+
+#page-wrap{ 
+	width: 800px; 
+	margin: 0 auto; 
+	background: url() no-repeat; 
+}
+#page-wrap div{ 
+	width: 500px; 
+	margin: 0 auto; 
+}
+
+a{
+	text-decoration: none; 
+	color: #eee; 
+	display: block; 
+	padding: 4px 0;
+}
+a:hover{ 
+	text-decoration: underline; 
+}
+a#topic{
+	font-size: 20px;
+}
+
+ul{ 
+	padding: 8px 25px; 
+	list-style: none;
+    -webkit-box-shadow: 2px 2px 5px black;
+    background: #282828; 
+} 
+ul ul{ 
+	background: #393939; 
+}
+ul ul ul{ 
+	background: #4b4b4b; 
+}
+ul ul ul ul { 
+	background: #5a5a5a;
+}
+
+

sitemap.html

@@ -0,0 +1,153 @@
+<!DOCTYPE html>
+
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+
+<head>
+
+	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+
+	<title>Sitemap | What Can I Do for Mozilla</title>
+
+	<link rel="stylesheet" type="text/css" href="sitemap.css" />
+	<script src="http://www.google.com/jsapi" type="text/javascript"></script>
+    <script type="text/javascript">
+        google.load("jquery", "1.2.6");
+    </script>
+    <script type="text/javascript" src="jquery.color.js"></script>
+    <script type="text/javascript" src="sitemap.js"></script>
+
+</head>
+
+<body>
+    <h1 style="text-align:center">Sitemap</h1>
+    <br>
+    <div id="page-wrap"><div>
+
+        <ul>
+        	<li>
+        		<a href="#" id="topic">Translation</a>
+        		<ul>
+        			<li>
+                        <a href="https://webmaker.org/en-US/teach" target="_blank">Web Maker</a>
+        			</li>
+        			<li><a href="http://hackasaurus.org/" target="_blank">Hackasaurus</a></li>
+        		</ul>
+        	</li>
+        	<li>
+                <a href="#" id="topic">User Support</a>
+                <ul>
+                    <li>
+                        <a href="https://wiki.mozilla.org/Advocacy" target="_blank">User Advocacy</a>
+                        <a href="https://support.mozilla.org/en-US/get-involved/army-of-awesome" target="_blank">Army of Awesome</a>
+                        <a href="https://support.mozilla.org/en-US/get-involved/kb" target="_blank">Mozilla Knowledge Base</a>
+                        <a href="https://support.mozilla.org/en-US/get-involved/questions" target="_blank">support.mozilla.org</a>
+                    </li>
+                </ul>
+            </li>
+        	<li>
+                <a href="#" id="topic">Writing Code</a>
+                <ul>
+                    <li>
+                        <a href="#">Rust</a>
+                        <ul>
+                            <li><a href="https://github.com/mozilla/rust/wiki" target="_blank">rustc</a></li>
+                            <li><a href="https://github.com/mozilla/servo/blob/master/CONTRIBUTING.md" target="_blank">Servo</a></li>
+                        </ul>
+                        <a href="#">C++</a>
+                        <ul>
+                            <li><a href="https://wiki.mozilla.org/MathML:Home_Page" target="_blank">MathML</a></li>
+                            <li><a href="https://wiki.mozilla.org/B2G/Hacking" target="_blank">Boot2Gecko</a></li>
+                            <li><a href="http://developer.mozilla.org/En/Simple_Thunderbird_build" target="_blank">Thunderbird</a></li>
+                            <li><a href="http://www.seamonkey-project.org" target="_blank">SeaMonkey</a></li>
+                            <li><a href="https://wiki.mozilla.org/Firefox/Windows_8_Integration#Platform_Integration_Windows_8_Development" target="_blank">Windows 8 Integration</a></li>
+                            <li><a href="https://wiki.mozilla.org/SVG:Contribute" target="_blank">SVG Project</a></li>
+                            <li><a href="https://github.com/kripken/emscripten/" target="_blank">emscipten</a></li>
+                        </ul>
+                        <a href="#">C</a>
+                        <ul>
+                            <li><a href="https://developer.mozilla.org/en-US/docs/Getting_Started_With_NSS" target="_blank">NSS</a></li>
+                            <li><a href="https://xiph.org/daala/" target="_blank">Daala</a></li>
+                            <li><a href="http://www.opus-codec.org/development/" target="_blank">OPUS</a></li>
+                        </ul>
+                        <a href="#">JavaScript</a>
+                        <ul>
+                            <li><a href="http://telemetry.mozilla.org/docs.html" target="_blank">Telemetry</a></li>
+                            <li><a href="https://wiki.mozilla.org/DXR" target="_blank">DXR</a></li>
+                            <li><a href="https://wiki.mozilla.org/Persona" target="_blank">Persona</a></li>
+                            <li><a href="https://getfirebug.com/getinvolved" target="_blank">Firebug</a></li>
+                            <li><a href="https://wiki.mozilla.org/Webdev/GetInvolved" target="_blank">Web Development</a></li>
+                            <li><a href="https://developer.mozilla.org/docs/Mozilla/Firefox_OS/Platform/Gaia" target="_blank">Gaia</a></li>
+                            <li><a href="http://www.benmoskowitz.com/?p=527" target="_blank">Popcorn</a></li>
+                            <li><a href="https://github.com/mozilla/shumway/wiki" target="_blank">Shumway</a></li>
+                            <li><a href="https://wiki.mozilla.org/Mobile/Get_Involved" target="_blank">Mobile Firefox</a></li>
+                            <li><a href="https://wiki.mozilla.org/Firefox/Windows_8_Integration#Platform_Integration_Windows_8_Development" target="_blank">Windows 8 Integration</a></li>
+                            <li><a href="http://www.seamonkey-project.org" target="_blank">Sea Monkey</a></li>
+                            <li><a href="https://wiki.mozilla.org/Jetpack" target="_blank">The Addon SDK</a></li>
+                            <li><a href="https://github.com/mozilla/pdf.js/wiki" target="_blank">PDF.js</a></li>
+                            <li><a href="http://developer.mozilla.org/En/Simple_Thunderbird_build" target="_blank">Thunderbird</a></li>
+                            <li><a href="https://wiki.mozilla.org/Talkilla" target="_blank">Talkilla</a></li>
+                            <li><a href="https://support.mozilla.org/en-US/kb/contribute-webmaker-code" target="_blank">Webmaker</a></li>
+                            <li><a href="#" target="_blank">Firefox</a></li>
+                        </ul>
+                        <a href="#">PHP</a>
+                        <ul>
+                            <li><a href="https://github.com/mozfr/transvision" target="_blank">Transvision</a></li>
+                            <li><a href="https://github.com/mozilla/Marketplace.PHP" target="_blank">Marketplace</a></li>
+                            <li><a href="https://github.com/mozilla/mediawiki-bugzilla" target="_blank">Mediawiki - Bugzilla plugin</a></li>
+                            <li><a href="https://wiki.mozilla.org/Webdev/GetInvolved/WordPress" target="_blank">Wordpress</a></li>
+                        </ul>
+                        <a href="#">Python</a>
+                        <ul>
+                            <li><a href="http://developer.mozilla.org/En/Introduction" target="_blank">Firefox</a></li>
+                            <li><a href="https://wiki.mozilla.org/Webdev/GetInvolved" target="_blank">Web Development</a></li>
+                            <li><a href="https://wiki.mozilla.org/QA/Execution/Web_Testing" target="_blank">Web QA</a></li>
+                            <li><a href="https://wiki.mozilla.org/DXR" target="_blank">DXR</a></li>
+                            <li><a href="https://wiki.mozilla.org/Auto-tools/New_Contributor" target="_blank">Tools &amp; Automation</a></li>
+                        </ul>
+                        <a href="#">Java</a>
+                        <ul>
+                            <li><a href="https://wiki.mozilla.org/CloudServices/Location" target="_blank">MozStumbler</a></li>
+                            <li><a href="https://wiki.mozilla.org/Mobile/Get_Involved" target="_blank">Mobile Firefox</a></li>
+                        </ul>
+                        <a href="#">Perl</a>
+                        <ul>
+                            <li><a href="http://www.bugzilla.org/contribute/" target="_blank">Bugzilla</a></li>
+                        </ul>
+                    </li>
+                </ul>
+            </li>
+        	<li>
+                <a href="#" id="topic">Advocacy</a></li>
+            <ul>
+                <li><a href="https://wiki.mozilla.org/Evangelism" target="_blank">Evangelising the Web</a></li>
+                <li><a href="https://wiki.mozilla.org/Netpolicy" target="_blank">Public Policy</a></li>
+                <li><a href="https://affiliates.mozilla.org/" target="_blank">Mozilla Affilates</a></li>
+                <li><a href="https://wiki.mozilla.org/Compatibility/Guide" target="_blank">Web Compatitbility</a></li>
+            </ul>
+        	<li>
+                <a href="#" id="topic">User Experience Design</a></li>
+            <ul>
+                <li><a href="https://wiki.mozilla.org/MDN/Development/Contribute/Design" target="_blank">Mozilla Creative</a></li>
+            </ul>
+        	<li>
+                <a href="#" id="topic">Testing Software</a></li>
+            <ul>
+                <li><a href="#" target="_blank">Firefox QA</a></li>
+                <li><a href="https://wiki.mozilla.org/QA/Execution/Web_Testing" target="_blank">Web QA</a></li>
+                <li><a href="https://wiki.mozilla.org/Thunderbird:Testing" target="_blank">Thunderbird QA</a></li>
+            </ul>
+            <li>
+                <a href="#" id="topic">Translation</a></li>
+            <ul>
+                <li><a href="https://wiki.mozilla.org/L10n:Web_parts" target="_blank">Mozilla Websites</a></li>
+                <li><a href="https://wiki.mozilla.org/L10n" target="_blank">Thunderbird</a></li>
+                <li><a href="https://wiki.mozilla.org/L10n" target="_blank">Firefox</a></li>
+            </ul>
+        </ul>
+
+    </div>
+</div>
+
+</body>
+
+</html>

sitemap.js

@@ -0,0 +1,44 @@
+jQuery.fn.doFade = function(settings) {
+
+    // if no paramaters supplied...
+	settings = jQuery.extend({
+		fadeColor: "black",
+		duration: 200,
+		fadeOn: 0.95,
+		fadeOff: 1.0 //0.5
+	}, settings);
+
+    var duration = settings.duration;
+    var fadeOff = settings.fadeOff;
+    var fadeOn = settings.fadeOn;
+    var fadeColor = settings.fadeColor;
+
+    $(this).hover(function(){
+	  $(this)
+	      .stop()
+	      .data("origColor", $(this).css("background-color"))
+	      .animate({
+	          opacity: fadeOn,
+	          backgroundColor: fadeColor
+	      }, duration)
+	}, function() {
+	  $(this)
+	      .stop()
+	      .animate({
+	          opacity: fadeOff,
+	          backgroundColor: $(this).data("origColor")
+	      }, duration)
+	});
+
+};
+
+$(function(){
+
+   $("ul").css("opacity", "1.0"); //0.5
+
+   $("ul").doFade({ fadeColor: "#362b40" });
+   $("ul ul").doFade({ fadeColor: "#354668" });
+   $("ul ul ul").doFade({ fadeColor: "#304531" });
+   $("ul ul ul ul").doFade({ fadeColor: "#72352d" });
+
+});