"
Team:Calgary/Sandbox
From 2012.igem.org
| Line 1: | Line 1: | ||
<html> | <html> | ||
<!-- | <!-- | ||
| - | This version | + | This version attempts to switch CSS stylesheets. A jsnotice is also added for those with javascript disabled. |
--> | --> | ||
<head> | <head> | ||
| Line 14: | Line 14: | ||
<!--desktop--> | <!--desktop--> | ||
| - | <link rel='stylesheet' | + | <link rel='stylesheet' type='text/css' media="only screen and (min-device-width:481px)" href='https://2012.igem.org/Team:Calgary/static/basicpagedesktop.css?action=raw&ctype=text/css' /> |
<!--mobile--> | <!--mobile--> | ||
<link rel='stylesheet' title="mobile sheet" type='text/css' media="only screen and (-webkit-min-device-pixel-ratio: 1.5), | <link rel='stylesheet' title="mobile sheet" type='text/css' media="only screen and (-webkit-min-device-pixel-ratio: 1.5), | ||
only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5), only screen and (max-device-width: 480px)" href='https://2012.igem.org/Team:Calgary/static/basicpagemobile.css?action=raw&ctype=text/css' /> | only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5), only screen and (max-device-width: 480px)" href='https://2012.igem.org/Team:Calgary/static/basicpagemobile.css?action=raw&ctype=text/css' /> | ||
| + | |||
<style> | <style> | ||
| Line 45: | Line 46: | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
jQuery(document).ready(function($){ | jQuery(document).ready(function($){ | ||
| + | |||
| + | //eliminate jsnotice | ||
| + | $('#jsnotice').hide(); | ||
| + | |||
| + | //switch to desktop if the viewport is appropriate | ||
| + | activeCSS('Desktop Style'); | ||
/* prepend menu icon */ | /* prepend menu icon */ | ||
| Line 56: | Line 63: | ||
}); | }); | ||
| - | $( | + | $('#css-full').click(function(){ |
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
| - | + | ||
}); | }); | ||
}); | }); | ||
</script> | </script> | ||
| + | <script type='text/javascript'> | ||
| + | // activeCSS: Set the active stylesheet | ||
| + | function activeCSS(title) { | ||
| + | var i, oneLink; | ||
| + | for (i = 0; (oneLink = document.getElementsByTagName("link")[i]); i++) { | ||
| + | if (oneLink.getAttribute("title") && findWord("stylesheet", oneLink.getAttribute("rel"))) { | ||
| + | oneLink.disabled = true; | ||
| + | if (oneLink.getAttribute("title") == title) { | ||
| + | oneLink.disabled = false; | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | } | ||
| + | |||
| + | // findWord: Used to find a full word (needle) in a string (haystack) | ||
| + | function findWord(needle, haystack) { | ||
| + | return haystack.match(needle + "\\b"); | ||
| + | } | ||
| + | </script> | ||
| + | |||
| + | <!--switching function: thanks to http://www.digital-web.com/articles/strategies_for_css_switching/--> | ||
</head> | </head> | ||
<body> | <body> | ||
| + | |||
| + | <div id="jsnotice"> | ||
| + | <p>iGEM Calgary's wiki functions best with Javascript enabled, especially for mobile devices. Please enable Javascript on your device for the best wiki-viewing experience you can get.</p> | ||
| + | <br></br> | ||
| + | </div> | ||
| + | |||
<header> | <header> | ||
<a id="css-full" href="#default">Full View</a> | <a id="css-full" href="#default">Full View</a> | ||
Revision as of 22:13, 4 July 2012
iGEM Calgary's wiki functions best with Javascript enabled, especially for mobile devices. Please enable Javascript on your device for the best wiki-viewing experience you can get.
Header Stuff!
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut convallis eleifend interdum. Pellentesque libero magna, dignissim vitae blandit et, tincidunt nec felis. Proin et risus eget lectus lacinia mollis. Quisque rhoncus posuere lectus, eget vestibulum dolor feugiat bibendum. Vestibulum scelerisque commodo eros, in vulputate arcu tempus varius. Donec ornare malesuada mi vitae rhoncus. Nulla facilisi.
Subheader Stuff!
Viverra nisl a bibendum. Etiam cursus ultrices arcu, pretium sodales tellus euismod id. Pellentesque congue aliquam urna, commodo iaculis massa pellentesque eget. Vivamus et sem non massa tincidunt ultrices. Sed luctus justo nec dui venenatis sodales. Proin sit amet risus nibh. In hac habitasse platea dictumst. Sed pretium egestas augue, sed varius nibh consequat ac. In orci.
