Template:Team:Cambridge/CAM 2012 TEMPLATE HEAD PROJECT1
From 2012.igem.org
(Difference between revisions)
Pdmallaband (Talk | contribs) (Created page with "<html> <head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="/Team:Cambridge/s...") |
Pdmallaband (Talk | contribs) |
||
(7 intermediate revisions not shown) | |||
Line 54: | Line 54: | ||
p:first-child { display: none;} | p:first-child { display: none;} | ||
/* Wiki Hacks - END */ | /* Wiki Hacks - END */ | ||
+ | |||
+ | /* required to avoid jumping */ | ||
+ | #camLeftWrapper { | ||
+ | left: 20px; | ||
+ | position: absolute; | ||
+ | margin-left: 35px; | ||
+ | width: 200px; | ||
+ | } | ||
+ | |||
+ | #cam_left { | ||
+ | position: absolute; | ||
+ | top: 0; | ||
+ | /* just used to show how to include the margin in the effect */ | ||
+ | margin-top: 0px; | ||
+ | border-top: 1px solid purple; | ||
+ | padding-top: 19px; | ||
+ | } | ||
+ | |||
+ | #cam_left.fixed { | ||
+ | position: fixed; | ||
+ | top: 0; | ||
+ | } | ||
+ | |||
+ | |||
</style> | </style> | ||
Line 60: | Line 84: | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
$(document).ready(function() { | $(document).ready(function() { | ||
+ | |||
+ | var top = $('#cam_left').offset().top - parseFloat($('#cam_left').css('marginTop').replace(/auto/, 0)); | ||
+ | $(window).scroll(function (event) { | ||
+ | // what the y position of the scroll is | ||
+ | var y = $(this).scrollTop(); | ||
+ | |||
+ | // whether that's below the form | ||
+ | if (y >= top) { | ||
+ | // if so, ad the fixed class | ||
+ | $('#cam_left').addClass('fixed'); | ||
+ | } else { | ||
+ | // otherwise remove it | ||
+ | $('#cam_left').removeClass('fixed'); | ||
+ | } | ||
+ | }); | ||
$('.cam_grid_headover h6').css("display","none"); | $('.cam_grid_headover h6').css("display","none"); | ||
Line 146: | Line 185: | ||
<div id='cam_page'> | <div id='cam_page'> | ||
+ | <div id = 'camLeftWrapper'> | ||
<div id='cam_left'> | <div id='cam_left'> | ||
<a href='https://2012.igem.org/Team:Cambridge' title='Team:Cambridge'> | <a href='https://2012.igem.org/Team:Cambridge' title='Team:Cambridge'> | ||
Line 244: | Line 284: | ||
</div> | </div> | ||
</div> | </div> | ||
+ | </div> | ||
+ | |||
</div> | </div> | ||
Latest revision as of 15:26, 20 September 2012