Difference between revisions of "Team:Greece/Model"
CharisKomos (Talk | contribs) |
CharisKomos (Talk | contribs) |
||
| Line 111: | Line 111: | ||
<a href='#' onmouseover="onHoverChanges( $(this).children('circle:first').attr('id') )" onmouseleave="onHoverHide($(this).children('circle:first').attr('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 | + | <circle class='circlez svgGraphic' id='f_circle' cx="-230" cy="365" r="135" stroke='#ffffff' stroke-width="0" fill="white" id='c_t1' onclick="displayMe(this.id)" onmouseover="onHoverChanges(this.id)" /> |
| − | <text class='animate_text' id='t1' x='0' y=' | + | <text class='animate_text' id='t1' x='0' y='335' 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')" id='f_circle_textA'>A</tspan> |
| − | <tspan x="-230" dy="1.5em" onclick="displayMe('c_t1')">a</tspan> | + | <tspan x="-230" dy="1.5em" onclick="displayMe('c_t1')" id='f_circle_textB'>a</tspan> |
</text></a> | </text></a> | ||
<a href='#' onmouseover="onHoverChanges( $(this).children('circle:first').attr('id') )" onmouseleave="onHoverHide($(this).children('circle:first').attr('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 | + | <circle class='circlez svgGraphic' id='s_circle' cx="190" cy="365" r="135" stroke='#ffffff' stroke-width="0" fill="white" id='c_t2' onclick="displayMe(this.id)" onmouseover="onHoverChanges(this.id)" /> |
| − | <text class='animate_text' id='t2' x='0' y=' | + | <text class='animate_text' id='t2' x='0' y='335' 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')" id='s_circle_textA'>B</tspan> |
| − | <tspan x="195" dy="1.5em" onclick="displayMe('c_t2')">b</tspan> | + | <tspan x="195" dy="1.5em" onclick="displayMe('c_t2')" id='s_circle_textB'>b</tspan> |
| − | <tspan x="193" dy="1.5em" onclick="displayMe('c_t2')">_b_</tspan> | + | <tspan x="193" dy="1.5em" onclick="displayMe('c_t2')" id='s_circle_textC'>_b_</tspan> |
</text></a> | </text></a> | ||
<a href='#' onmouseover="onHoverChanges( $(this).children('circle:first').attr('id') )" onmouseleave="onHoverHide($(this).children('circle:first').attr('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 | + | <circle class='circlez svgGraphic' id='t_circle' cx="610" cy="365" r="135" stroke='#ffffff' stroke-width="0" fill="white" id='c_t3' onclick="displayMe(this.id)" onmouseover="onHoverChanges(this.id)" /> |
| − | <text class='animate_text' id='t3' x='0' y=' | + | <text class='animate_text' id='t3' x='0' y='335' 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')" id='t_circle_textA'>C</tspan> |
| − | <tspan x="610" dy="1.5em" onclick="displayMe('c_t3')">c</tspan> | + | <tspan x="610" dy="1.5em" onclick="displayMe('c_t3')" id='t_circle_textB'>c</tspan> |
| − | <tspan x="610" dy="1.5em" onclick="displayMe('c_t3')">_c_</tspan> | + | <tspan x="610" dy="1.5em" onclick="displayMe('c_t3')" id='t_circle_textC'>_c_</tspan> |
</text></a> | </text></a> | ||
<a href='#' onmouseover="onHoverChanges( $(this).children('circle:first').attr('id') )" onmouseleave="onHoverHide($(this).children('circle:first').attr('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 | + | <circle class='circlez svgGraphic' id='fo_circle' cx="1020" cy="365" r="135" stroke='#ffffff' stroke-width="0" fill="white" id='c_t4' onclick="displayMe(this.id)" onmouseover="onHoverChanges(this.id)" /> |
| − | <text class='animate_text' id='t4' x='0' y=' | + | <text class='animate_text' id='t4' x='0' y='335' 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')" id='fo_circle_textA'>D</tspan> |
| − | <tspan x="1023" dy="1.5em" onclick="displayMe('c_t4')">d</tspan> | + | <tspan x="1023" dy="1.5em" onclick="displayMe('c_t4')" id='fo_circle_textB'>d</tspan> |
</text></a> | </text></a> | ||
</svg> | </svg> | ||
| Line 212: | Line 212: | ||
.menu_wrap{ | .menu_wrap{ | ||
position:relative; | position:relative; | ||
| − | margin:- | + | margin:-7px 0px 0px 0px; |
| − | width: | + | width: 100%; |
height: 85px; | height: 85px; | ||
/*No left or right margins - menu wides fullscreen*/ | /*No left or right margins - menu wides fullscreen*/ | ||
| Line 220: | Line 220: | ||
.menu{ | .menu{ | ||
position:absolute; | position:absolute; | ||
| − | width: | + | width: 100%; |
| − | margin: - | + | margin: -84px 0px 0px 0px; |
} | } | ||
| Line 233: | Line 233: | ||
#just_to_align{ | #just_to_align{ | ||
| − | right: | + | right: 48px; |
| − | margin: | + | margin: 19px 10px 0px 0px; |
} | } | ||
.logo{ | .logo{ | ||
| − | margin: - | + | margin: -21px 0px 0px -52px; |
} | } | ||
| + | |||
| + | #f_circle{ cx: -210 } | ||
| + | #s_circle{ cx: 200 } | ||
| + | #t_circle{ cx: 615 } | ||
} | } | ||
| Line 280: | Line 284: | ||
} | } | ||
</style> | </style> | ||
| + | |||
| + | <!-- This script exists due to the innability of changing the <x> attribute of <tspan> in circles --> | ||
| + | <script> | ||
| + | /* Media Queries in JavaScript using nested if statements */ | ||
| + | if(window.innerWidth > 1025){ | ||
| + | if(window.innerWidth < 1367){ | ||
| + | document.getElementById('f_circle_textA').setAttribute('x', '-210'); | ||
| + | document.getElementById('f_circle_textB').setAttribute('x', '-210'); | ||
| + | document.getElementById('s_circle_textA').setAttribute('x', '200'); | ||
| + | document.getElementById('s_circle_textB').setAttribute('x', '200'); | ||
| + | document.getElementById('t_circle_textA').setAttribute('x', '615'); | ||
| + | document.getElementById('t_circle_textB').setAttribute('x', '615'); | ||
| + | } | ||
| + | } | ||
| + | </script> | ||
<!--Styling script--> | <!--Styling script--> | ||
Revision as of 20:20, 5 September 2017
