Difference between revisions of "Template:Team:NUS Singapore/new template"

Line 1: Line 1:
<html>
+
<!DOCTYPE html>
 +
<html lang="en" class="no-js">
 +
<head>
 +
<meta charset="UTF-8" />
 +
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 +
<meta name="viewport" content="width=device-width, initial-scale=1">
 +
<title>Interactive Points | Codrops</title>
 +
<meta name="keywords" content="opacity, background, hover, transparency, effect, css, html, javascript, template, point of interest, map" />
 +
<meta name="author" content="Codrops" />
 +
 
 
<style>
 
<style>
  
 
/********************************* DEFAULT WIKI SETTINGS  ********************************/
 
/********************************* DEFAULT WIKI SETTINGS  ********************************/
  
#sideMenu, #top_title {display:none;}
+
    #sideMenu, #top_title {display:none;}
#content { padding:0px; width:101.7%; margin-top:-5px; margin-left:-24px;}
+
    #content { padding:0px; width:101.7%; margin-top:-5px; margin-left:-24px;}
body {background-color:black; }
+
    body {background-color:black; }
#bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
+
    #bodyContent h1, #bodyContent h2, #bodyContent h3, #bodyContent h4, #bodyContent h5 { margin-bottom: 0px; }
 +
   
  
/********************************* MENU ********************************/
+
</style>
/* Wrapper for the menu */
+
.menu_wrapper {
+
width:150px;
+
height:100vh;
+
position:fixed;
+
padding:0px;
+
float:left;
+
background-color:#f2f2f2;
+
text-align:left;
+
}
+
  
/* styling for the menu items */
 
.menu_item {
 
width:100%;
 
margin:-2px 0px 0px -20px;
 
padding: 10px 10px; 
 
border-bottom: 1px solid #d3d3d3;
 
font-weight:bold;
 
color:#000000;
 
cursor: pointer;
 
}
 
  
/* when hovering on a menu item */
 
.menu_item:hover {
 
color:#000000;
 
background-color: #72c9b6;
 
}
 
  
/* decoration icon for the menu buttons*/
 
.icon {
 
float:right; 
 
font-size:16px;
 
font-weight:bold;
 
}
 
 
/* this is the icon for when the content is collapsed */
 
.plus::before {
 
content: "+";
 
}
 
/* this is the icon for when the content is expanded */
 
.less::before {
 
content: "–";
 
}
 
  
/* styling for the ul that creates the buttons */
+
<!--- THIS IS WHERE THE HTML BEGINS --->
ul.menu_items {
+
width:100%;
+
margin-left:0px;
+
padding:0px;
+
list-style: none;
+
}
+
  
/* styling for the li that are the menu items */
 
.menu_items li {
 
width:100%;
 
margin-top:-2px;
 
padding: 15px 0px 15px 15px ;
 
display:block;
 
border-bottom: 1px solid #d3d3d3; 
 
text-align:left;
 
font-weight:bold;
 
text-decoration:none;
 
color:#000000;
 
list-style-type:none;
 
cursor:pointer;
 
-webkit-transition: all 0.4s ease;
 
-moz-transition: all 0.4s ease;
 
-ms-transition: all 0.4s ease;
 
-o-transition: all 0.4s ease; transition: all 0.4s ease; 
 
}
 
  
.menu_item a {
+
<!-- This tells the browser that your page is responsive -->
width: 100%;
+
margin-left: -20px;
+
padding: 11px 90px 12px 20px;
+
text-decoration: none;
+
color:black;
+
}
+
  
/* When hovering on a menu item */
 
.menu_items li:hover {
 
background-color:#72c9b6;
 
color: #000000;
 
}
 
  
/* styling for the submenus */
 
.submenu {
 
width:100%;
 
display: none; 
 
font-weight:bold;
 
cursor:pointer;
 
  
}
 
  
/* moving the margin for the submenu ul list */
+
<script>
ul.submenu {
+
width: 100%;
+
margin: 10px 0px -11px 0px;
+
list-style: none;
+
}
+
  
/*styling for the submenu buttons */
+
// This is the jquery part of your template.  Try not modify any of this code since it makes your menu work.
.submenu li {
+
width: 100%;
+
margin-left: 10px;
+
margin-bottom: 0px;
+
}
+
  
 +
    $(document).ready(function() {
  
/* hover state for the submenu buttons */
+
        $("#HQ_page").attr('id','');
.submenu li a {
+
       
width: 100%;
+
padding: 5px 10px;
+
display: inline-block;
+
border-bottom: 1px solid #d3d3d3;
+
background-color:white;
+
text-decoration:none;
+
color:#000000;  
+
}
+
  
 +
        if ( wgPageName.substring( 0,  8) == "Template")  {  // if the page is a template it displays the full name in a single line
 +
            $("#team_name").html( wgPageName );
 +
        }
  
 +
        else if (  ( (wgPageName.match(/\//g) || []).length ) == 0 ) {  // if it is the home page , just print the team's name
 +
            $("#team_name").html( wgPageName.substring( 5, wgPageName.length ) );
 +
        }
  
.submenu li a:hover  {
+
        else {
background-color:#000000;
+
            // this adds the team's name as an h1
color: #72c9b6;
+
            $("#team_name").html( wgPageName.substring( 5 , wgPageName.indexOf("/")  ) );  
}
+
  
 +
            // this adds the page's title as an h4 
 +
            $("#page_name").html (    ( wgPageName.substring( wgPageName.indexOf("/") + 1, wgPageName.length ) ).replace( /\/|_/g , " ")  );
 +
        }
  
/* When the screen is smaller than 680px, the menu has the option to hide/show - this button controls that */
 
.collapsable_menu_control {
 
width:100%;
 
padding: 15px 0px;
 
display:none;
 
background-color:#000000;
 
text-align:center; 
 
font-weight:bold;
 
color:#72c9b6;
 
cursor:pointer;
 
-webkit-transition: all 0.4s ease;
 
-moz-transition: all 0.4s ease;
 
-ms-transition: all 0.4s ease;
 
-o-transition: all 0.4s ease;
 
transition: all 0.4s ease;
 
}
 
  
/* when hovering on that button */
 
.collapsable_menu_control:hover {
 
background-color: #72c9b6;
 
color:#000000; 
 
}
 
  
/********************************* CONTENT OF THE PAGE ********************************/
 
  
/* Wrapper for the content */
+
        $('#accordion').find('.menu_item').click(function(){
.content_wrapper {
+
width: 100%;
+
margin-left:150px;
+
padding:10px 0px;
+
float:left;
+
background-color:white;
+
}
+
  
/*LAYOUT */
+
            //Expand or collapse this panel
.column  {
+
            submenu = $(this).find('.submenu');
padding: 10px 0px;
+
            submenu.toggle();
float:left;  
+
background-color:white;
+
}
+
  
.full_size {
+
            icon = $(this).find('.icon');
width:100%;  
+
}
+
  
.full_size img {  
+
            if ( !$( submenu ).is(':visible') ) {
padding: 10px 15px;
+
                icon.removeClass("less").addClass("plus");
width:100%;  
+
            }
}
+
            else {
 +
                icon.removeClass("plus").addClass("less");
 +
            }
  
.half_size {
+
            //Hide the other panels
width: 100%;  
+
            $(".submenu").not(submenu).hide();
}
+
            $(".icon").not(icon).removeClass("less").addClass("plus");
.half_size img {
+
        });
padding: 10px 15px;
+
width: 100%;
+
}
+
  
  
.clear {
+
        $(".collapsable_menu_control").click(function() {  
clear:both;
+
            $(".menu_item").toggle();
}
+
        });
  
.highlight {  
+
        $( window ).resize(function() {
width: 100%;  
+
            $(".menu_item").show();
margin: auto;  
+
        });
padding: 15px 5px;
+
background-color: #f2f2f2;
+
}
+
  
.judges-will-not-evaluate {
 
border: 4px solid #72c9b6;
 
display: block;
 
margin: 5px 15px;
 
width: 100%;
 
font-weight:bold;
 
}
 
  
 +
    });
  
/*STYLING */
 
  
/* styling for the titles */
 
.content_wrapper h1, .content_wrapper h2 {
 
padding:5px 15px;
 
border-bottom:0px;
 
color:#72c9b6;
 
  
}
 
.content_wrapper h3, .content_wrapper h4, .content_wrapper h5, .content_wrapper h6 {
 
padding:5px 15px;
 
border-bottom:0px;
 
color: #000000; 
 
}
 
  
 
+
</script>
/* font and text */
+
.content_wrapper p {
+
<link rel="shortcut icon" href="favicon.ico">
padding:0px 15px;
+
<link rel="stylesheet" type="text/css" href="css/collapse.css" />
font-size: 13px;
+
<link rel="stylesheet" type="text/css" href="css/googleleapis1.css" />
font-family:Tahoma, Geneva, sans-serif;
+
<link rel="stylesheet" type="text/css" href="css/googleleapis2.css" />
}
+
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
 
+
<link rel="stylesheet" type="text/css" href="css/demo.css" />
/* Links */
+
<link rel="stylesheet" type="text/css" href="css/component.css" />
.content_wrapper a {
+
<link rel="stylesheet" type="text/css" href="css/sidebar_transitions_normalize.css" />
font-weight: bold;
+
<link rel="stylesheet" type="text/css" href="css/sidebar_transitions_demo.css" />
text-decoration: underline;
+
<link rel="stylesheet" type="text/css" href="css/sidebar_transitions_icons.css" />
text-decoration-color:#72c9b6;
+
<link rel="stylesheet" type="text/css" href="css/sidebar_transitions_component.css" />
color: #72c9b6;
+
<link rel="stylesheet" type="text/css" href="css/buttons.css" />
-webkit-transition: all 0.4s ease;
+
<link rel="stylesheet" type="text/css" href="css/header_component.css" />
-moz-transition: all 0.4s ease;
+
<script src="js/modernizr.custom.js"></script>
-ms-transition: all 0.4s ease;
+
-o-transition: all 0.4s ease;
+
transition: all 0.4s ease;
+
}
+
 
+
/* hover for the links */
+
.content_wrapper a:hover {
+
text-decoration:none;
+
color:#000000;
+
}
+
 
+
/* non numbered lists */
+
.content_wrapper ul {
+
padding:0px 20px;
+
font-size: 13px;
+
font-family:Tahoma, Geneva, sans-serif;
+
}
+
 
+
/* numbered lists */
+
.content_wrapper ol {
+
padding:0px;
+
font-size: 13px;
+
font-family:Tahoma, Geneva, sans-serif;
+
}
+
 
+
/* Table */
+
.content_wrapper table {
+
width: 100%;
+
margin:15px 10px;
+
border: 1px solid #d3d3d3;
+
border-collapse: collapse;
+
}
+
 
+
/* table cells */
+
.content_wrapper  td {
+
padding: 10px;
+
vertical-align: text-top;
+
border: 1px solid #d3d3d3;
+
border-collapse: collapse;
+
}
+
 
+
/* table headers */
+
.content_wrapper th {
+
padding: 10px;
+
vertical-align: text-top;
+
border: 1px solid #d3d3d3;
+
border-collapse: collapse;
+
background-color:#f2f2f2;
+
}
+
 
+
/* Button class */
+
.button_click {
+
margin: 10px auto;
+
padding: 15px; width:100%; 
+
text-align:center;
+
font-weight:bold;
+
background-color: #72c9b6;
+
cursor:pointer; 
+
-webkit-transition: all 0.4s ease;
+
-moz-transition: all 0.4s ease;
+
-ms-transition: all 0.4s ease;
+
-o-transition: all 0.4s ease;
+
transition: all 0.4s ease;
+
}
+
 
+
/* button class on hover */
+
.button_click:hover { 
+
background-color:#000000;
+
color:#72c9b6;
+
}
+
 
+
/********************************* RESPONSIVE STYLING ********************************/
+
 
+
 
+
 
+
</style>
+
 
+
 
+
 
+
 
+
<!--- THIS IS WHERE THE HTML BEGINS --->
+
 
+
 
+
<!-- This tells the browser that your page is responsive -->
+
 
+
 
+
 
+
 
+
<script>
+
 
+
// This is the jquery part of your template. Try not modify any of this code since it makes your menu work.
+
 
+
$(document).ready(function() {
+
 
+
$("#HQ_page").attr('id','');
+
 
 
 +
<!--[if IE]>
 +
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 +
<![endif]-->
 +
</head>
 +
<body>
 +
<main>
 +
<div id="st-container" class="st-container">
 +
<div class="st-pusher">
 +
 +
<!--Sidebar button-->
 +
<div id="st-trigger-effects">
 +
<button data-effect="st-effect-1" class="button button--rayen button--border button--round-m" data-text="More">
 +
<span><img src="img/scroll-down-arrow.png"></span>
 +
</button>
 +
</div>
 +
<!--End of Sidebar button-->
 +
 +
<!--Header-->
 +
<header id="ha-header" class="ha-header ha-header-large">
 +
<div class="ha-header-perspective">
 +
<div class="ha-header-front" style="height: 120px">
 +
<h1><span>IGem Default Header</span></h1>
 +
<nav>
 +
<a href="http://tympanus.net/Development/AnimatedBooks/">Login</a>
 +
<a>Something</a>
 +
<a>Anything</a>
 +
<a href="http://tympanus.net/codrops/?p=15935">Back to the article</a>
 +
</nav>
 +
</div>
 +
<div class="ha-header-bottom">
 +
<h1 style="margin-left: 40%;">IGem Team NUS</h1>
 +
</div>
 +
</div>
 +
</header>
 +
<!--End of Header-->
  
if ( wgPageName.substring( 0,  8) == "Template") // if the page is a template it displays the full name in a single line
+
<!--Side Bar-->
$("#team_name").html( wgPageName );
+
<nav class="st-menu st-effect-1 list-group panel" id="menu-1" style="overflow: auto;">
}
+
<h2 class="icon icon-lab">Sidebar</h2>
 +
<ul>
 +
<li><a class="icon icon-data" onclick="growDiv('1')" id="menu-item-1" href="#">Data Management</a>
 +
<div class="grow" id="grow-1">
 +
<div class='measuringWrapper'>
 +
  <a href="#" class="list-group-item">Subitem 1</a>
 +
  <a href="#" class="list-group-item">Subitem 2</a>
 +
  <a href="#" class="list-group-item">Subitem 3</a>
 +
</div>
 +
</div>
 +
</li>
 +
<li><a class="icon icon-location" onclick="growDiv('2')" id="menu-item-2" href="#">Location</a>
 +
<div class="grow" id="grow-2">
 +
<div class='measuringWrapper'>
 +
  <a href="#" class="list-group-item">Subitem 1</a>
 +
  <a href="#" class="list-group-item">Subitem 2</a>
 +
  <a href="#" class="list-group-item">Subitem 3</a>
 +
</div>
 +
</div>
 +
</li>
 +
<li><a class="icon icon-study" onclick="growDiv('3')" id="menu-item-3" href="#">Study</a>
 +
<div class="grow" id="grow-3">
 +
<div class='measuringWrapper'>
 +
  <a href="#" class="list-group-item">Subitem 1</a>
 +
  <a href="#" class="list-group-item">Subitem 2</a>
 +
  <a href="#" class="list-group-item">Subitem 3</a>
 +
</div>
 +
</div>
 +
</li>
 +
<li><a class="icon icon-photo" onclick="growDiv('4')" id="menu-item-4" href="#">Collections</a>
 +
<div class="grow" id="grow-4">
 +
<div class='measuringWrapper'>
 +
  <a href="#" class="list-group-item">Subitem 1</a>
 +
  <a href="#" class="list-group-item">Subitem 2</a>
 +
  <a href="#" class="list-group-item">Subitem 3</a>
 +
</div>
 +
</div>
 +
</li>
 +
<li><a class="icon icon-wallet" onclick="growDiv('5')" id="menu-item-5" href="#">Credits</a>
 +
<div class="grow" id="grow-5">
 +
<div class='measuringWrapper'>
 +
  <a href="#" class="list-group-item">Subitem 1</a>
 +
  <a href="#" class="list-group-item">Subitem 2</a>
 +
  <a href="#" class="list-group-item">Subitem 3</a>
 +
</div>
 +
</div>
 +
</li>
 +
</ul>
 +
</nav>
 +
<!--End of Side Bar-->
  
else if (  ( (wgPageName.match(/\//g) || []).length ) == 0 ) {  // if it is the home page , just print the team's name
+
<!--Sub header-->
$("#team_name").html( wgPageName.substring( 5, wgPageName.length ) );
+
<p class="message">Please view this wiki site on a larger screen.</p>
}
+
 +
<section class="content">
 +
<div class="content__inner">
 +
<h2 class="content__title">Project Intro</h2>
 +
<h3 class="content__subtitle">Sub-title</h3>
 +
<p class="margin-paragraph"><strong>margin-paragraph</strong></p>
 +
<p class="margin-paragraph"><strong>margin-paragraph</strong></p>
 +
</div>
 +
</section>
 +
<!--End of Sub header-->
  
else {
 
// this adds the team's name as an h1
 
$("#team_name").html( wgPageName.substring( 5 , wgPageName.indexOf("/")  ) );
 
  
// this adds the page's title as an h4
+
<!-- End of Map -->
$("#page_name").html (     ( wgPageName.substring( wgPageName.indexOf("/") + 1, wgPageName.length ) ).replace( /\/|_/g , " ")  );
+
<section class="interactive-points interactive-points--alter" id="interactive-2" tabindex="0">
}
+
<img class="static" src="img/map.png" alt="Map of London" />
 +
<div class="backgrounds">
 +
<div class="background__element" style="background-image: url(img/1.jpg)"></div>
 +
<div class="background__element" style="background-image: url(img/2.jpg)"></div>
 +
<div class="background__element" style="background-image: url(img/3.jpg)"></div>
 +
<div class="background__element" style="background-image: url(img/4.jpg)"></div>
 +
<div class="background__element" style="background-image: url(img/5.jpg)"></div>
 +
<div class="background__element" style="background-image: url(img/6.jpg)"></div>
 +
</div>
 +
<svg class="points" viewBox="0 0 1885 1080" width="100%" height="100%">
 +
<path class="point" d="M409.2,195.4L409.2,195.4c-7.1-7.1-18.6-7.1-25.7,0l0,0c-6.4,6.4-7.1,18.4-1.7,25.7l14.5,21l14.5-21C416.3,213.8,415.6,201.8,409.2,195.4z"/>
 +
<path class="point" d="M1069.3,589.7L1069.3,589.7c-7.1-7.1-18.6-7.1-25.7,0l0,0c-6.4,6.4-7.1,18.4-1.7,25.7l14.5,21l14.5-21C1076.4,608.2,1075.7,596.1,1069.3,589.7z"/>
 +
<path class="point" d="M1533.8,114.2L1533.8,114.2c-7.1-7.1-18.6-7.1-25.7,0l0,0c-6.4,6.4-7.1,18.4-1.7,25.7l14.5,21l14.5-21C1541,132.6,1540.2,120.6,1533.8,114.2z"/>
 +
<path class="point" d="M878.9,247.4L878.9,247.4c-7.1-7.1-18.6-7.1-25.7,0l0,0c-6.4,6.4-7.1,18.4-1.7,25.7l14.5,21l14.5-21C886,265.8,885.3,253.8,878.9,247.4z"/>
 +
<path class="point" d="M615.2,658.3L615.2,658.3c-7.1-7.1-18.6-7.1-25.7,0l0,0c-6.4,6.4-7.1,18.4-1.7,25.7l14.5,21l14.5-21C622.3,676.8,621.6,664.7,615.2,658.3z"/>
 +
<path class="point" d="M183.5,524L183.5,524c-7.1-7.1-18.6-7.1-25.7,0l0,0c-6.4,6.4-7.1,18.4-1.7,25.7l14.5,21l14.5-21C190.6,542.5,189.9,530.4,183.5,524z"/>
 +
</svg>
 +
<div class="points-tooltips">
 +
<div class="point-tooltip"><h2 class="point-tooltip__title">Rupert Street</h2><br><p class="point-tooltip__description">The connection to London Bridge that no one knew about</p></div>
 +
<div class="point-tooltip"><h2 class="point-tooltip__title">Swiss Court</h2><br><p class="point-tooltip__description">The crazy story of a rebel</p></div>
 +
<div class="point-tooltip"><h2 class="point-tooltip__title">Bear Street</h2><br><p class="point-tooltip__description">Hidden gems and stories</p></div>
 +
<div class="point-tooltip"><h2 class="point-tooltip__title">Leicester Square</h2><br><p class="point-tooltip__description">A never ending love story</p></div>
 +
<div class="point-tooltip"><h2 class="point-tooltip__title">Oxendon Street</h2><br><p class="point-tooltip__description">No need to panik, rescue is close</p></div>
 +
<div class="point-tooltip"><h2 class="point-tooltip__title">Haymarket</h2><br><p class="point-tooltip__description">Adventures to be discovered</p></div>
 +
</div>
 +
<div class="points-content">
 +
<div class="point-content">
 +
<h3 class="point-content__title">The Rupert Connection</h3>
 +
<p class="point-content__subtitle">24<sup>th</sup> of February, 1927</p>
 +
<p class="point-content__text">Descended from astronomers encyclopaedia galactica from which we spring worldlets intelligent beings gathered by gravity billions.</p>
 +
</div>
 +
<div class="point-content">
 +
<h3 class="point-content__title">Swiss Court, Miss</h3>
 +
<p class="point-content__subtitle">3<sup>rd</sup> of March, 1928</p>
 +
<p class="point-content__text">Hydrogen atoms circumnavigated Cambrian explosion, a mote of dust suspended in a sunbeam Hypatia.</p>
 +
</div>
 +
<div class="point-content">
 +
<h3 class="point-content__title">Hiding in Bear Street</h3>
 +
<p class="point-content__subtitle">19<sup>th</sup> of July, 1927</p>
 +
<p class="point-content__text">From which we spring the ash of stellar alchemy from which we spring emerged into consciousness, great turbulent clouds rich in heavy atoms. </p>
 +
</div>
 +
<div class="point-content">
 +
<h3 class="point-content__title">Leicester Square Love</h3>
 +
<p class="point-content__subtitle">12<sup>th</sup> of August, 1930</p>
 +
<p class="point-content__text">A mote of dust suspended in a sunbeam are creatures of the cosmos decipherment, Orion's sword corpus callosum galaxies shores of the cosmic ocean.</p>
 +
</div>
 +
<div class="point-content">
 +
<h3 class="point-content__title">Oxendon of Oxes</h3>
 +
<p class="point-content__subtitle">26<sup>th</sup> of March, 1927</p>
 +
<p class="point-content__text">Extraplanetary concept of the number one vanquish the impossible culture trillion the sky calls to us.</p>
 +
</div>
 +
<div class="point-content">
 +
<h3 class="point-content__title">Haymarket Forever</h3>
 +
<p class="point-content__subtitle">14<sup>th</sup> of January, 1927</p>
 +
<p class="point-content__text">Birth, are creatures of the cosmos Cambrian explosion colonies great turbulent clouds cosmos are creatures of the cosmos! Great turbulent clouds.</p>
 +
</div>
 +
</div>
 +
</section>
 +
<!-- End of Map -->
  
  
 +
<section class="ha-waypoint" data-animate-down="ha-header-rotate" data-animate-up="ha-header-rotateBack">
 +
<p>At the present time, eminent breeders try by methodical selection, with a distinct object in view, to make a new strain or sub-breed, superior to anything of the kind in the country. But, for our purpose, a form of selection, which may be called unconscious, and which results from every one trying to possess and breed from the best individual animals, is more important. Thus, a man who intends keeping pointers naturally tries to get as good dogs as he can, and afterwards breeds from his own best dogs, but he has no wish or expectation of permanently altering the breed. Nevertheless we may infer that this process, continued during centuries, would improve and modify any breed, in the same way as Bakewell, Collins, etc., by this very same process, only carried on more methodically, did greatly modify, even during their lifetimes, the forms and qualities of their cattle. Slow and insensible changes of this kind could never be recognised unless actual measurements or careful drawings of the breeds in question have been made long ago, which may serve for comparison. In some cases, however, unchanged, or but little changed, individuals of the same breed exist in less civilised districts, where the breed has been less improved. There is reason to believe that King Charles' spaniel has been unconsciously modified to a large extent since the time of that monarch. Some highly competent authorities are convinced that the setter is directly derived from the spaniel, and has probably been slowly altered from it. It is known that the English pointer has been greatly changed within the last century, and in this case the change has, it is believed, been chiefly effected by crosses with the foxhound; but what concerns us is, that the change has been effected unconsciously and gradually, and yet so effectually that, though the old Spanish pointer certainly came from Spain, Mr. Borrow has not seen, as I am informed by him, any native dog in Spain like our pointer.</p>
 +
<p>By a similar process of selection, and by careful training, English race-horses have come to surpass in fleetness and size the parent Arabs, so that the latter, by the regulations for the Goodwood Races, are favoured in the weights which they carry. Lord Spencer and others have shown how the cattle of England have increased in weight and in early maturity, compared with the stock formerly kept in this country. By comparing the accounts given in various old treatises of the former and present state of carrier and tumbler pigeons in Britain, India, and Persia, we can trace the stages through which they have insensibly passed, and come to differ so greatly from the rock-pigeon.</p>
 +
<p>Youatt gives an excellent illustration of the effects of a course of selection which may be considered as unconscious, in so far that the breeders could never have expected, or even wished, to produce the result which ensued—namely, the production of the distinct strains. The two flocks of Leicester sheep kept by Mr. Buckley and Mr. Burgess, as Mr. Youatt remarks, "Have been purely bred from the original stock of Mr. Bakewell for upwards of fifty years. There is not a suspicion existing in the mind of any one at all acquainted with the subject that the owner of either of them has deviated in any one instance from the pure blood of Mr. Bakewell's flock, and yet the difference between the sheep possessed by these two gentlemen is so great that they have the appearance of being quite different varieties."</p>
 +
<p>If there exist savages so barbarous as never to think of the inherited character of the offspring of their domestic animals, yet any one animal particularly useful to them, for any special purpose, would be carefully preserved during famines and other accidents, to which savages are so liable, and such choice animals would thus generally leave more offspring than the inferior ones; so that in this case there would be a kind of unconscious selection going on. We see the value set on animals even by the barbarians of Tierra del Fuego, by their killing and devouring their old women, in times of dearth, as of less value than their dogs.</p>
 +
</section>
  
  
$('#accordion').find('.menu_item').click(function(){
+
<section class="content content--related">
 +
<p><strong>Content Section here</strong></p>
 +
</section>
 +
</div><!-- /st-pusher -->
 +
</div><!-- /st-container -->
 +
</main>
 +
<script src="js/lunar.js"></script>
 +
<script src="js/imagesloaded.pkgd.min.js"></script>
 +
<script src="js/main.js"></script>
 +
<script>
 +
(function() {
 +
new PointsMap(document.querySelector('#interactive-2'), {
 +
// Maximum opacity that the background element of a Point can have when the point is active (mouse gets closer to it).
 +
maxOpacityOnActive : 1,
 +
// When the mouse is [activeOn]px away from one point, its image gets opacity = point.options.maxOpacity.
 +
activeOn : 90
 +
});
 +
})();
 +
</script>
 +
<script src="js/classie.js"></script>
 +
<script src="js/sidebarEffects.js"></script>
 +
<script src="js/jquery.min.js"></script>
 +
<script src="js/waypoints.min.js"></script>
 +
<script>
 +
function growDiv(param) {
 +
var id = param;
 +
    var growDiv = document.getElementById('grow-'+id);
 +
    if (growDiv.clientHeight) {
 +
      growDiv.style.height = 0;
 +
    } else {
 +
      var wrapper = document.querySelector('.measuringWrapper');
 +
      growDiv.style.height = wrapper.clientHeight + "px";
 +
    }
  
//Expand or collapse this panel
+
    if(document.getElementById("menu-item-"+id).className.indexOf("focus") >= 0){
submenu = $(this).find('.submenu');
+
    document.getElementById("menu-item-"+id).className = document.getElementById("menu-item-"+id).className.replace("focus", "");
submenu.toggle();
+
    }else{
 
+
    document.getElementById("menu-item-"+id).className += " focus";
icon = $(this).find('.icon');
+
    }
 
+
if ( !$( submenu ).is(':visible') ) {
+
icon.removeClass("less").addClass("plus");
+
}
+
else {
+
icon.removeClass("plus").addClass("less");
+
 
}
 
}
  
//Hide the other panels
+
var $head = $( '#ha-header' );
$(".submenu").not(submenu).hide();
+
$( '.ha-waypoint' ).each( function(i) {
$(".icon").not(icon).removeClass("less").addClass("plus");
+
var $el = $( this ),
});
+
animClassDown = $el.data( 'animateDown' ),
 +
animClassUp = $el.data( 'animateUp' );
  
 
+
$el.waypoint( function( direction ) {
$(".collapsable_menu_control").click(function() {
+
if( direction === 'down' && animClassDown ) {
$(".menu_item").toggle();
+
$head.attr('class', 'ha-header ' + animClassDown);
});
+
}
 
+
else if( direction === 'up' && animClassUp ){
$( window ).resize(function() {
+
$head.attr('class', 'ha-header ' + animClassUp);
$(".menu_item").show();
+
}
});
+
}, { offset: '100%' } );
 
+
} );
 
+
</script>
});
+
</body>
 
+
 
+
 
+
 
+
</script>
+
 
</html>
 
</html>

Revision as of 15:38, 18 September 2016

<!DOCTYPE html> Interactive Points | Codrops

IGem Team NUS

Please view this wiki site on a larger screen.

Project Intro

Sub-title

margin-paragraph

margin-paragraph

Map of London

Rupert Street


The connection to London Bridge that no one knew about

Swiss Court


The crazy story of a rebel

Bear Street


Hidden gems and stories

Leicester Square


A never ending love story

Oxendon Street


No need to panik, rescue is close

Haymarket


Adventures to be discovered

The Rupert Connection

24th of February, 1927

Descended from astronomers encyclopaedia galactica from which we spring worldlets intelligent beings gathered by gravity billions.

Swiss Court, Miss

3rd of March, 1928

Hydrogen atoms circumnavigated Cambrian explosion, a mote of dust suspended in a sunbeam Hypatia.

Hiding in Bear Street

19th of July, 1927

From which we spring the ash of stellar alchemy from which we spring emerged into consciousness, great turbulent clouds rich in heavy atoms.

Leicester Square Love

12th of August, 1930

A mote of dust suspended in a sunbeam are creatures of the cosmos decipherment, Orion's sword corpus callosum galaxies shores of the cosmic ocean.

Oxendon of Oxes

26th of March, 1927

Extraplanetary concept of the number one vanquish the impossible culture trillion the sky calls to us.

Haymarket Forever

14th of January, 1927

Birth, are creatures of the cosmos Cambrian explosion colonies great turbulent clouds cosmos are creatures of the cosmos! Great turbulent clouds.

At the present time, eminent breeders try by methodical selection, with a distinct object in view, to make a new strain or sub-breed, superior to anything of the kind in the country. But, for our purpose, a form of selection, which may be called unconscious, and which results from every one trying to possess and breed from the best individual animals, is more important. Thus, a man who intends keeping pointers naturally tries to get as good dogs as he can, and afterwards breeds from his own best dogs, but he has no wish or expectation of permanently altering the breed. Nevertheless we may infer that this process, continued during centuries, would improve and modify any breed, in the same way as Bakewell, Collins, etc., by this very same process, only carried on more methodically, did greatly modify, even during their lifetimes, the forms and qualities of their cattle. Slow and insensible changes of this kind could never be recognised unless actual measurements or careful drawings of the breeds in question have been made long ago, which may serve for comparison. In some cases, however, unchanged, or but little changed, individuals of the same breed exist in less civilised districts, where the breed has been less improved. There is reason to believe that King Charles' spaniel has been unconsciously modified to a large extent since the time of that monarch. Some highly competent authorities are convinced that the setter is directly derived from the spaniel, and has probably been slowly altered from it. It is known that the English pointer has been greatly changed within the last century, and in this case the change has, it is believed, been chiefly effected by crosses with the foxhound; but what concerns us is, that the change has been effected unconsciously and gradually, and yet so effectually that, though the old Spanish pointer certainly came from Spain, Mr. Borrow has not seen, as I am informed by him, any native dog in Spain like our pointer.

By a similar process of selection, and by careful training, English race-horses have come to surpass in fleetness and size the parent Arabs, so that the latter, by the regulations for the Goodwood Races, are favoured in the weights which they carry. Lord Spencer and others have shown how the cattle of England have increased in weight and in early maturity, compared with the stock formerly kept in this country. By comparing the accounts given in various old treatises of the former and present state of carrier and tumbler pigeons in Britain, India, and Persia, we can trace the stages through which they have insensibly passed, and come to differ so greatly from the rock-pigeon.

Youatt gives an excellent illustration of the effects of a course of selection which may be considered as unconscious, in so far that the breeders could never have expected, or even wished, to produce the result which ensued—namely, the production of the distinct strains. The two flocks of Leicester sheep kept by Mr. Buckley and Mr. Burgess, as Mr. Youatt remarks, "Have been purely bred from the original stock of Mr. Bakewell for upwards of fifty years. There is not a suspicion existing in the mind of any one at all acquainted with the subject that the owner of either of them has deviated in any one instance from the pure blood of Mr. Bakewell's flock, and yet the difference between the sheep possessed by these two gentlemen is so great that they have the appearance of being quite different varieties."

If there exist savages so barbarous as never to think of the inherited character of the offspring of their domestic animals, yet any one animal particularly useful to them, for any special purpose, would be carefully preserved during famines and other accidents, to which savages are so liable, and such choice animals would thus generally leave more offspring than the inferior ones; so that in this case there would be a kind of unconscious selection going on. We see the value set on animals even by the barbarians of Tierra del Fuego, by their killing and devouring their old women, in times of dearth, as of less value than their dogs.