Team:UCLondon/Templates/Navigationv2

From 2012e.igem.org

(Difference between revisions)
 
(70 intermediate revisions not shown)
Line 13: Line 13:
       <ul class="menu icons">
       <ul class="menu icons">
               <li><a href="#"><img src="http://db.tt/KQemyPjm" height="15"/></a><ul class="hidden-menu" id="action"><li><a href="#">item</a></li></ul> </li>
               <li><a href="#"><img src="http://db.tt/KQemyPjm" height="15"/></a><ul class="hidden-menu" id="action"><li><a href="#">item</a></li></ul> </li>
-
              <li class="hov"><a class="nothing" href="#" title="Contact Us"><img src="http://db.tt/Zw3GxxwW" height="15"/></a></li>
 
-
              <li class="hov"><a href="https://igem.org/Main_Page" title="iGEM"><img src="http://db.tt/0frXWhVI" height="15"/></a></li>
 
       </ul>
       </ul>
 +
 +
    <ul class="menu links">
 +
        <li class="hov"><a class="nothing tooltip" href="#" udit="Contact Us"><img src="http://db.tt/Zw3GxxwW" height="30" /></a></li>
 +
              <li class="hov"><a class="tooltip" href="https://igem.org/Main_Page" udit="iGEM"><img src="https://static.igem.org/mediawiki/2011/d/de/IGEM_basic_Logo_stylized.png" height="30"  /></a></li>
 +
    </ul>
Line 24: Line 27:
       //body { background-color: white;  }
       //body { background-color: white;  }
       #globalWrapper { background-color: transparent; border: none; margin: 0; padding: 0; width: 100%; height:100%;}
       #globalWrapper { background-color: transparent; border: none; margin: 0; padding: 0; width: 100%; height:100%;}
-
       #content { background-color: transparent; border: none; padding: 0; margin: 0; width: 100%; overflow: hidden; height:100%;}
+
       #content { background-color: transparent; border: none; padding: 0; margin: 0; width: 100%; height:100%;}
       #search-controls { display:none; }
       #search-controls { display:none; }
       #top-section { height: 10px; margin: 0px; margin-left: auto; margin-right: auto; margin-bottom: 0 !important; padding:0; border: none; font-size: 10px;}
       #top-section { height: 10px; margin: 0px; margin-left: auto; margin-right: auto; margin-bottom: 0 !important; padding:0; border: none; font-size: 10px;}
Line 90: Line 93:
     .icons{
     .icons{
             position: absolute;
             position: absolute;
-
             right:200px;
+
             right:300px;
             margin-left: 100px;   
             margin-left: 100px;   
       }
       }
Line 159: Line 162:
-
  .hov { display: inline; }
+
  .links { position: absolute ; top: 5px; right:20px; background-color: rgba(249, 249, 249, 0.2); border-radius: 3px; height:33px; width:145px; }
 +
  .links li { padding-left: 1px; padding-right:1px; }
 +
 
 +
 
 +
  .links:before {
 +
            content:"";
 +
            border:2px black;
 +
            //display:block;
 +
            width:143px;
 +
            height:32px;
 +
          position:absolute;
 +
    }
 +
 
 +
 
 +
.tooltip{display:inline;position:relative}
 +
.tooltip:hover{text-decoration:none}
 +
.tooltip:hover:after{
 +
  background:#111;
 +
  background:rgba(0,0,0,.8);
 +
  border-radius:5px;
 +
  bottom:-26px;
 +
  color:#fff;
 +
  content:attr(udit);
 +
  display:block;
 +
  left:20%;
 +
  padding:5px 15px;
 +
  position:absolute;
 +
  white-space:nowrap;
 +
  z-index:98
 +
  }
 +
  .tooltip:hover:before{
 +
    border:solid;
 +
    border-color:#111 transparent;
 +
    border-width:0 6px 6px 6px;
 +
    bottom:-2px;
 +
    content:"";
 +
    display:block;
 +
    left:50%;
 +
    position:absolute;
 +
    z-index:99
 +
  }
   
   
Line 179: Line 222:
       $("#top-section").css('display', 'none');
       $("#top-section").css('display', 'none');
 +
 +
 +
 +
  $('.hov').mouseenter( function() {
 +
      $(this).children().children('img').animate({
 +
                          height:40
 +
              }, 100 );
 +
 +
  }).mouseleave(function(){
 +
      $(this).children().children('img').animate({
 +
                          height:30
 +
              }, 100 );
 +
});
 +
 +
 +
var loading = "";
 +
 +
 +
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 openContactBox = 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 closeContactBox = function() {
 +
  $('#shadow').toggle('slow', function() {
 +
      $(this).children('#box-content').html(loading);
 +
  });
 +
}
 +
 +
 +
 +
 +
$(document).ready(function(event) {
 +
  loading = $('#load').parent().html();
 +
 
 +
  $('body').off('click', '.nothing', openContactBox);
 +
  $('body').on('click', '.nothing', openContactBox);
 +
 +
  $('body').off('click', '#close-box', closeContactBox);
 +
  $('body').on('click', '#close-box', closeContactBox);
 +
     
 +
});
 +
      
      

Latest revision as of 21:30, 21 September 2012

Retrieved from "http://2012e.igem.org/wiki/index.php/Team:UCLondon/Templates/Navigationv2"