Team:UCLondon/Templates/bottom-contentv2

From 2012e.igem.org

(Difference between revisions)
 
(72 intermediate revisions not shown)
Line 22: Line 22:
                 border-width: 1px;
                 border-width: 1px;
                 padding: 0 10px 10px 10px;
                 padding: 0 10px 10px 10px;
 +
                padding-right:1px;
               // height: 60px;
               // height: 60px;
                
                
Line 33: Line 34:
     .left {
     .left {
           float:left;  
           float:left;  
-
           width: 30%;
+
           width: 20%;
           clear: left;
           clear: left;
       }
       }
   
   
-
     .middle { float:left; width:30%; border-left-color: rgb(230, 230, 230);
+
     .middle { float:left; width:45%; border-left-color: rgb(230, 230, 230);
             border-left-style: solid;
             border-left-style: solid;
             border-left-width: 1px;  
             border-left-width: 1px;  
Line 48: Line 49:
             float: left;
             float: left;
             width: 30%;
             width: 30%;
-
             padding-left: 20px;
+
             padding-left: 5px;
             border-left-color: rgb(230, 230, 230);
             border-left-color: rgb(230, 230, 230);
             border-left-style: solid;
             border-left-style: solid;
Line 57: Line 58:
     #sponsor-slides .slides_container {
     #sponsor-slides .slides_container {
-
width:400px;
+
width:100%;
                         margin:auto;
                         margin:auto;
display:none;
display:none;
 +
                        left:10px;
                       // overflow: none;
                       // overflow: none;
     }
     }
     #sponsor-slides .slides_container div {
     #sponsor-slides .slides_container div {
-
width:400px;
+
width:100%;
-
height:170px;
+
height:200px;
display:block;
display:block;
     }
     }
-
     #sponsor-slides .pagination { width: 10%; margin-top: 5px;  }
+
     #sponsor-slides .pagination { margin-top: 1px; width:30px; margin:auto; }
 +
 
 +
 
 +
 
 +
 
 +
 
 +
 
 +
#test-slides .slides_container {
 +
width:100%;
 +
                        height:200px;
 +
                        margin:auto;
 +
display:none;
 +
                      overflow: auto;
 +
    }
 +
 
 +
    #test-slides .slides_container div, #test-slides .slides_container div.slide {
 +
width:100%;
 +
height:200px;
 +
display:block;
 +
    }
 +
 
 +
    #test-slides .pagination {  margin-top: 1px;  }
 +
 
     /* sponsor grid */
     /* sponsor grid */
-
   #sponsor-slides { width: 100%; margin: auto; }
+
   #sponsor-slides { width: 100%; margin-left: auto; }
      
      
-
     .sponsor-list { padding-left:0;  width: 10cm; }
+
     .sponsor-list { padding-left:0;  width: 85%; }
     .sponsor-list li {
     .sponsor-list li {
     border: 1px solid silver;
     border: 1px solid silver;
Line 107: Line 131:
.triangle-isosceles {
.triangle-isosceles {
-
  position:relative;
+
      position:relative;
-
padding:15px;
+
padding:1px;
margin:1em 0 3em;
margin:1em 0 3em;
-
border:5px solid #5a8f00;
+
border:2px solid #5a8f00;
color:#333;
color:#333;
background:#fff;
background:#fff;
Line 119: Line 143:
-moz-border-radius:10px;
-moz-border-radius:10px;
border-radius:10px;
border-radius:10px;
 +
 +
       
}
}
Line 153: Line 179:
       height:60px;
       height:60px;
   }
   }
 +
 +
.testimonial,  #test-slides .slides_container .triangle-isosceles { width:360px !important; height:70px !important; }
 +
.test-author { position:relative; top: -15px; }
 +
 +
 +
 +
 +
#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: 999999999999999999;
 +
  }
 +
   </style>
   </style>
Line 166: Line 219:
$('#sponsor-slides').slides({
$('#sponsor-slides').slides({
preload: true,
preload: true,
-
play: 5000,
+
play: 15000,
pause: 2500,
pause: 2500,
hoverPause: true,
hoverPause: true,
generateNextPrev: false
generateNextPrev: false
});
});
 +
 +
                        $('#test-slides').slides({
 +
preload: true,
 +
play: 15000,
 +
pause: 2500,
 +
hoverPause: true,
 +
generateNextPrev: false
 +
});
 +
 +
 +
});
});
Line 221: Line 285:
<ul class="sponsor-list">
<ul class="sponsor-list">
<a href="http://www.clcbio.com" class="sponsor-logo"><li><img src="http://www.clcbio.com/fileadmin/template/main/images/clcbio_logo_no_mirror.png"/></li></a>
<a href="http://www.clcbio.com" class="sponsor-logo"><li><img src="http://www.clcbio.com/fileadmin/template/main/images/clcbio_logo_no_mirror.png"/></li></a>
-
<a href="mailto:zcbtfi0@live.ucl.ac.uk?Subject=I'll%20Sponsor%20you" class="sponsor-logo" onclick="sponsoring()"><li>click to sponsor!</li></a>
+
<a href="#" class="sponsor-logo nothing" onclick="sponsoring()"><li>click to sponsor!</li></a>
-
<a href="mailto:zcbtfi0@live.ucl.ac.uk?Subject=I'll%20Sponsor%20you" class="sponsor-logo" onclick="sponsoring()"><li>click to sponsor!</li></a>
+
<a href="#" class="sponsor-logo nothing" onclick="sponsoring()"><li>click to sponsor!</li></a>
-
<a href="mailto:zcbtfi0@live.ucl.ac.uk?Subject=I'll%20Sponsor%20you" class="sponsor-logo" onclick="sponsoring()"><li>click to sponsor!</li></a>
+
<a href="#" class="sponsor-logo nothing" onclick="sponsoring()"><li>click to sponsor!</li></a>
-
<a href="mailto:zcbtfi0@live.ucl.ac.uk?Subject=I'll%20Sponsor%20you" class="sponsor-logo" onclick="sponsoring()"><li>click to sponsor!</li></a>
+
-
<a href="mailto:zcbtfi0@live.ucl.ac.uk?Subject=I'll%20Sponsor%20you" class="sponsor-logo" onclick="sponsoring()"><li>click to sponsor!</li></a>
+
</ul>
</ul>
</div>
</div>
<div>
<div>
<ul class="sponsor-list">
<ul class="sponsor-list">
-
<a href="mailto:zcbtfi0@live.ucl.ac.uk?Subject=I'll%20Sponsor%20you" class="sponsor-logo" onclick="sponsoring()"><li>click to sponsor!</li></a>
+
<a href="#" class="sponsor-logo nothing" onclick="sponsoring()"><li>click to sponsor!</li></a>
-
<a href="mailto:zcbtfi0@live.ucl.ac.uk?Subject=I'll%20Sponsor%20you" class="sponsor-logo" onclick="sponsoring()"><li>click to sponsor!</li></a>
+
<a href="#" class="sponsor-logo nothing" onclick="sponsoring()"><li>click to sponsor!</li></a>
-
<a href="mailto:zcbtfi0@live.ucl.ac.uk?Subject=I'll%20Sponsor%20you" class="sponsor-logo" onclick="sponsoring()"><li>click to sponsor!</li></a>
+
<a href="#" class="sponsor-logo nothing" onclick="sponsoring()"><li>click to sponsor!</li></a>
-
<a href="mailto:zcbtfi0@live.ucl.ac.uk?Subject=I'll%20Sponsor%20you" class="sponsor-logo" onclick="sponsoring()"><li>click to sponsor!</li></a>
+
<a href="#" class="sponsor-logo nothing" onclick="sponsoring()"><li>click to sponsor!</li></a>
-
<a href="mailto:zcbtfi0@live.ucl.ac.uk?Subject=I'll%20Sponsor%20you" class="sponsor-logo" onclick="sponsoring()"><li>click to sponsor!</li></a>
+
-
<a href="mailto:zcbtfi0@live.ucl.ac.uk?Subject=I'll%20Sponsor%20you" class="sponsor-logo" onclick="sponsoring()"><li>click to sponsor!</li></a>
+
</ul>
</ul>
</div>
</div>
Line 246: Line 306:
 +
<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 255: Line 324:
         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);
*/
*/
 +
});
});
 +
 +
 +
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();
 +
 +
    var input = '<form method="post" id="cntctfrm_contact_form" action="http://codonusageoptimizer.org/contact/" enctype="multipart/form-data"><div style="text-align: left; padding-top: 5px;"><label for="cntctfrm_contact_name">Name:<span class="required"> *</span></label></div><div style="text-align: left;"><input class="text" type="text" size="40" value="" name="cntctfrm_contact_name" id="cntctfrm_contact_name" style="text-align: left; margin: 0;"></div><div style="text-align: left;"><label for="cntctfrm_contact_email">E-Mail Address:<span class="required">*</span></label></div><div style="text-align: left;"><input class="text" type="text" size="40" value="" name="cntctfrm_contact_email" id="cntctfrm_contact_email" style="text-align: left; margin: 0;"></div><div style="text-align: left;"><label for="cntctfrm_contact_subject">Subject:<span class="required"> *</span></label></div><div style="text-align: left;"><input class="text" type="text" size="40" value="" name="cntctfrm_contact_subject" id="cntctfrm_contact_subject" style="text-align: left; margin: 0;"></div><div style="text-align: left;"><label for="cntctfrm_contact_message">Message:<span class="required"> *</span></label></div><div style="text-align: left;"><textarea rows="5" cols="30" name="cntctfrm_contact_message" id="cntctfrm_contact_message"></textarea></div><div style="text-align: left;"><label for="cntctfrm_contact_attachment">Attachment:</label><div style="text-align: left;"><input type="file" name="cntctfrm_contact_attachment" id="cntctfrm_contact_attachment"><label style="font-size:10px;"><br>You can attach files of the following types: html, txt, css, gif, png, jpeg, jpg, tiff, bmp, ai, eps, ps, rtf, pdf, doc, docx, zip, rar, wav, mp3, ppt</label></div></div><div style="text-align: left; padding-top: 8px;"><input type="hidden" value="send" name="cntctfrm_contact_action"><input type="hidden" value="Version: 3.13"><input type="submit" value="Submit" style="cursor: pointer; margin: 0pt; text-align: center;margin-bottom:10px;"> </div></form>';
 +
 +
 +
  $('#shadow').toggle('slow', function() {
 +
      $(this).children('#box-content').html(input);
 +
    });
 +
 
 +
   
 +
     
 +
    return false;
 +
}
 +
 +
var closeBox = function() {
 +
  $('#shadow').toggle('slow', function() {
 +
      $(this).children('#box-content').html(loading);
 +
  });
 +
}
 +
 +
 +
   
   
-
function sponsoring(){ }
+
$(document).ready(function(event) {
 +
  loading = $('#load').parent().html();
 +
 
 +
  $('body').off('click', '.nothing', openBox);
 +
  $('body').on('click', '.nothing', openBox);
 +
 
 +
  $('body').off('click', '#close-box', closeBox);
 +
  $('body').on('click', '#close-box', closeBox);
 +
     
 +
});
 +
 
 +
 
 +
 
        
        
</script>
</script>

Latest revision as of 17:20, 19 September 2012