Difference between revisions of "Team:Greece/Model"

Line 46: Line 46:
 
     <script>
 
     <script>
 
function onHoverChanges(idz){
 
function onHoverChanges(idz){
−
$('.circlez').removeClass('opace');
 
 
$('#'+idz).addClass('opace');
 
$('#'+idz).addClass('opace');
 +
}
 +
 +
function onHoverHide(idz){
 +
$('.circlez').removeClass('opace');
 
}
 
}
 
     </script>
 
     </script>
Line 97: Line 100:
 
  <li style='width:' class='li_indiv'><a target='_self' href='https://2017.igem.org/Team:Greece/Model'>MODELING</a></li>
 
  <li style='width:' class='li_indiv'><a target='_self' href='https://2017.igem.org/Team:Greece/Model'>MODELING</a></li>
 
  <li style='width:' class='li_indiv'><a target='_self' href='https://2017.igem.org/Team:Greece/human_practices'>HUMAN PRACTICES</a></li>
 
  <li style='width:' class='li_indiv'><a target='_self' href='https://2017.igem.org/Team:Greece/human_practices'>HUMAN PRACTICES</a></li>
−
  <li style='width:' class='li_indiv'><a target='_self' href='https://2017.igem.org/Team:Greece/Contribute'>CONTRIBUTION</a></li>
+
  <li style='width:' class='li_indiv'><a target='_self' href='https://2017.igem.org/Team:Greece/Achievements'>ACHIEVEMENTS</a></li>
 
  <li style='width:' class='li_indiv'><a target='_self' href='https://2017.igem.org/Team:Greece/Team'>TEAM</a></li>
 
  <li style='width:' class='li_indiv'><a target='_self' href='https://2017.igem.org/Team:Greece/Team'>TEAM</a></li>
 
</span>
 
</span>
Line 107: Line 110:
 
                               <!--min-x, min-y, width, height-->
 
                               <!--min-x, min-y, width, height-->
  
−
<circle class='circlez' cx="-230" cy="365" r="135" stroke='#ffffff' stroke-width="0" fill="white" id='c_t1' class='svgGraphic' onclick="displayMe(this.id)" onmouseover="onHoverChanges(this.id)" />
+
<a href='#' onmouseover="onHoverChanges( $(this).children('circle:first').attr('id') )" onmouseleave="onHoverHide($(this).children('circle:first').attr('id'))">
 +
        <circle class='circlez' cx="-230" cy="365" r="135" stroke='#ffffff' stroke-width="0" fill="white" id='c_t1' class='svgGraphic' onclick="displayMe(this.id)" onmouseover="onHoverChanges(this.id)" />
 
<text class='animate_text' id='t1' x='0' y='295' text-anchor='middle' fill='#000000'>
 
<text class='animate_text' id='t1' x='0' y='295' text-anchor='middle' fill='#000000'>
 
<tspan x="-230" dy="2.5em" onclick="displayMe('c_t1')">A</tspan>
 
<tspan x="-230" dy="2.5em" onclick="displayMe('c_t1')">A</tspan>
 
<tspan x="-230" dy="1.5em" onclick="displayMe('c_t1')">a</tspan>
 
<tspan x="-230" dy="1.5em" onclick="displayMe('c_t1')">a</tspan>
−
</text>
+
</text></a>
−
<circle class='circlez' cx="190" cy="365" r="135" stroke='#ffffff' stroke-width="0" fill="white" id='c_t2' class='svgGraphic' onclick="displayMe(this.id)" onmouseover="onHoverChanges(this.id)" />
+
 +
<a href='#' onmouseover="onHoverChanges( $(this).children('circle:first').attr('id') )" onmouseleave="onHoverHide($(this).children('circle:first').attr('id'))">
 +
        <circle class='circlez' cx="190" cy="365" r="135" stroke='#ffffff' stroke-width="0" fill="white" id='c_t2' class='svgGraphic' onclick="displayMe(this.id)" onmouseover="onHoverChanges(this.id)" />
 
<text class='animate_text' id='t2' x='0' y='300' text-anchor='middle' fill='#000000'>
 
<text class='animate_text' id='t2' x='0' y='300' text-anchor='middle' fill='#000000'>
 
<tspan x="195" dy="1.5em" onclick="displayMe('c_t2')">B</tspan>
 
<tspan x="195" dy="1.5em" onclick="displayMe('c_t2')">B</tspan>
 
<tspan x="195" dy="1.5em" onclick="displayMe('c_t2')">b</tspan>
 
<tspan x="195" dy="1.5em" onclick="displayMe('c_t2')">b</tspan>
 
<tspan x="193" dy="1.5em" onclick="displayMe('c_t2')">_b_</tspan>
 
<tspan x="193" dy="1.5em" onclick="displayMe('c_t2')">_b_</tspan>
−
</text>
+
</text></a>
−
<circle class='circlez' cx="610" cy="365" r="135" stroke='#ffffff' stroke-width="0" fill="white" id='c_t3' class='svgGraphic' onclick="displayMe(this.id)" onmouseover="onHoverChanges(this.id)" />
+
 +
<a href='#' onmouseover="onHoverChanges( $(this).children('circle:first').attr('id') )" onmouseleave="onHoverHide($(this).children('circle:first').attr('id'))">
 +
        <circle class='circlez' cx="610" cy="365" r="135" stroke='#ffffff' stroke-width="0" fill="white" id='c_t3' class='svgGraphic' onclick="displayMe(this.id)" onmouseover="onHoverChanges(this.id)" />
 
<text class='animate_text' id='t3' x='0' y='300' text-anchor='middle' fill='#000000'>
 
<text class='animate_text' id='t3' x='0' y='300' text-anchor='middle' fill='#000000'>
 
<tspan x="615" dy="1.6em" onclick="displayMe('c_t3')">C</tspan>
 
<tspan x="615" dy="1.6em" onclick="displayMe('c_t3')">C</tspan>
 
<tspan x="610" dy="1.5em" onclick="displayMe('c_t3')">c</tspan>
 
<tspan x="610" dy="1.5em" onclick="displayMe('c_t3')">c</tspan>
 
<tspan x="610" dy="1.5em" onclick="displayMe('c_t3')">_c_</tspan>
 
<tspan x="610" dy="1.5em" onclick="displayMe('c_t3')">_c_</tspan>
−
</text>
+
</text></a>
−
<circle class='circlez' cx="1020" cy="365" r="135" stroke='#ffffff' stroke-width="0" fill="white" id='c_t4' class='svgGraphic' onclick="displayMe(this.id)" onmouseover="onHoverChanges(this.id)" />
+
 +
<a href='#' onmouseover="onHoverChanges( $(this).children('circle:first').attr('id') )" onmouseleave="onHoverHide($(this).children('circle:first').attr('id'))">
 +
        <circle class='circlez' cx="1020" cy="365" r="135" stroke='#ffffff' stroke-width="0" fill="white" id='c_t4' class='svgGraphic' onclick="displayMe(this.id)" onmouseover="onHoverChanges(this.id)" />
 
<text class='animate_text' id='t4' x='0' y='300' text-anchor='middle' fill='#000000'>
 
<text class='animate_text' id='t4' x='0' y='300' text-anchor='middle' fill='#000000'>
 
<tspan x="1025" dy="2.3em" onclick="displayMe('c_t4')">D</tspan>
 
<tspan x="1025" dy="2.3em" onclick="displayMe('c_t4')">D</tspan>
 
<tspan x="1023" dy="1.5em" onclick="displayMe('c_t4')">d</tspan>
 
<tspan x="1023" dy="1.5em" onclick="displayMe('c_t4')">d</tspan>
−
</text>
+
</text></a>
 
</svg>
 
</svg>
  
Line 166: Line 176:
 
.hide{ display:none;}
 
.hide{ display:none;}
 
.reveal{ display: block; }
 
.reveal{ display: block; }
 +
</style>
 +
 +
<style>
 +
/* Responsive stylesheets */
 +
/* DEFAULT PROPERTIES ARE INHERITED FROM 1920px - 1080px RESOLUTION */
 +
 +
/* DEFAULT PROPERTIES ARE INHERITED FROM 1535px WIDTH*/
 +
 +
/* < 1024px Resolution Desktop Screen */
 +
 +
/* < 1366px Resolution Desktop Screen*/
 +
 +
@media screen and (min-width: 1025px) and (max-width: 1367px) {
 +
 +
.menu_wrap{
 +
position:relative;
 +
                margin:-5px 0px 0px 0px;
 +
                width: 1348px;
 +
                height: 85px;
 +
/*No left or right margins - menu wides fullscreen*/
 +
}
 +
 +
.menu{
 +
position:absolute;
 +
width: 1348px;
 +
margin: -83px 0px 0px 0px;
 +
}
 +
 +
.menu > ul > li{
 +
margin-left:12px;
 +
}
 +
.menu li{
 +
margin-right: 35px;
 +
margin-left: 35px;
 +
}
 +
 +
#just_to_align{
 +
right: 60px;
 +
margin: 17px 10px 0px 0px;
 +
}
 +
.logo{
 +
margin: -23px 0px 0px -52px;
 +
}
 +
}
 +
 +
@media screen and (min-width: 1367px) and (max-width: 1921px){
 +
       
 +
        .logo{
 +
                margin: -21px 0px 0px -48px;
 +
        }
 +
     
 +
        .menu li {
 +
                margin-right: 4%;
 +
                margin-left: 4%;
 +
        }
 +
 +
@media screen and (min-width: 1367px) and (max-width: 1770px){
 +
    .menu li{
 +
          margin-right: 3%;
 +
          margin-left: 3%;
 +
    }
 +
 +
    .menu{ margin:-5px 0px 0px 0px; height: 80px;}
 +
    .menu_wrap{ margin: -5px 0px 0px 0px;}
 +
}
 +
 +
@media screen and (min-width: 1770px) and (max-width: 1921px){
 +
       
 +
        .menu_wrap{ margin: -12px 0px 0px 0px; }
 +
 +
        .menu{ margin: -83px 0px 0px 0px; }
 +
 +
        #just_to_align{ margin: 13px 10px 0px 0px; }
 +
 +
}
 +
 +
}
 
</style>
 
</style>
  

Revision as of 18:18, 2 September 2017

Loading...