Team:UCLondon/Templates/bottom-contentv2

From 2012e.igem.org

(Difference between revisions)
Line 177: Line 177:
  #test-slides .slides_container .triangle-isosceles { height:500px;}
  #test-slides .slides_container .triangle-isosceles { height:500px;}
 +
 +
 +
 +
 +
#shadow {
 +
 +
          background-image:  -webkit-gradient(linear, 0% 0%, 0% 100%, from( rgba(255, 255, 255, 1) ), to( rgb(249, 249, 249) ) );
 +
          background-image:  -webkit-linear-gradient(top, rgba(255, 255, 255, 1), rgb(249, 249, 249) );
 +
          background-image:  -moz-linear-gradient(top,  rgba(255, 255, 255, 1), rgb(249, 249, 249) );
 +
          background-image:  -ms-linear-gradient(top,  rgba(255, 255, 255, 1), rgb(249, 249, 249) );
 +
          background-image:  -o-linear-gradient(top,  rgba(255, 255, 255, 1), rgb(249, 249, 249) );
 +
          background-image:  linear-gradient(top,  rgba(255, 255, 255, 1), rgb(249, 249, 249) );
 +
         
 +
 +
          box-shadow: 1px 2px 5px 5px #888;
 +
          border-radius: 5px;
 +
 +
              position:fixed;
 +
              height: 400px;
 +
              width:50%;
 +
              margin:auto;
 +
              z-index: 2;
 +
  }
 +
   </style>
   </style>
Line 277: Line 301:
 +
<div id="shadow" style="display:none;" >
 +
<div id="close-box" style="background:url(http://db.tt/N9CUKlnO) no-repeat 0 0; height:35px; width:35px; cursor:pointer;"></div>
 +
 +
<div id="box-content" style="width:95%; height:95%; margin:auto;">
 +
<div id="load" style="background:url(http://db.tt/UTRvh0fQ) no-repeat center center; height:100px; width:100px; margin:auto;"></div>
 +
</div>
 +
</div>
   
   
<script type="text/javascript">
<script type="text/javascript">
 +
 +
var loading = "";
$(document).ready(function() {
$(document).ready(function() {
Line 286: Line 319:
         console.log('height' + nHeight);
         console.log('height' + nHeight);
         //$('#footer-boxes').css('height', nHeight);
         //$('#footer-boxes').css('height', nHeight);
-
        /*$('.footer-box.left').outerHeight(nHeight);
+
/*     $('.footer-box.left').outerHeight(nHeight);
         $('.footer-box.middle').outerHeight(nHeight);
         $('.footer-box.middle').outerHeight(nHeight);
         $('.footer-box.right').outerHeight(nHeight);
         $('.footer-box.right').outerHeight(nHeight);
*/
*/
 +
 +
        loading = $('#load').parent().html();
});
});
 +
 +
 +
jQuery.fn.center = function () {
 +
  var w = $(window);
 +
  var b = $('body');
 +
  var mt = w.scrollTop() + (w.height() > b.height()) ? 0: (  -1 *Math.abs( w.outerHeight() - b.outerHeight() )/2  );
 +
  this.css({
 +
    'position':'fixed',
 +
    'left':  '50%',
 +
    'margin-left': 0 - (this.width() / 2),
 +
    'top': '50%',
 +
    'margin-top':  (0 - (this.height() / 2))
 +
  });
 +
  return this;
 +
}
 +
 +
 +
var openBox = function () {
 +
  $('#shadow').center();
 +
 +
 +
  $('#shadow').toggle('slow', function() {
 +
      $(this).children('#box-content').html('<p>Hello World</p>");
 +
    });
 +
 
 +
   
 +
     
 +
    return false;
 +
}
 +
   
   
-
  function sponsoring(){  }
+
  function sponsoring(){ openBox(); }
 +
 
 +
 
 +
$(document).ready(function(event) {
 +
  loading = $('#load').parent().html();
 +
 
 +
  $('body').off('click', '#close-box', closeBox);
 +
  $('body').on('click', '#close-box', closeBox);
 +
     
 +
});
        
        
</script>
</script>

Revision as of 03:47, 19 September 2012