Difference between revisions of "Team:NAIT Edmonton/Trial11"

Line 8: Line 8:
 
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
 
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro' rel='stylesheet' type='text/css'>
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
 +
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
 +
<script type="text/javascript">
  
 +
$(function() {
 +
    var moveLeft = 0;
 +
    var moveDown = 0;
 +
    $('a.popper').hover(function(e) {
 +
 
 +
        var target = '#' + ($(this).attr('data-popbox'));
 +
       
 +
        $(target).show();
 +
        moveLeft = $(this).outerWidth();
 +
        moveDown = ($(target).outerHeight() / 2);
 +
    }, function() {
 +
        var target = '#' + ($(this).attr('data-popbox'));
 +
        $(target).hide();
 +
    });
 +
 +
    $('a.popper').mousemove(function(e) {
 +
        var target = '#' + ($(this).attr('data-popbox'));
 +
       
 +
        leftD = e.pageX + parseInt(moveLeft);
 +
        maxRight = leftD + $(target).outerWidth();
 +
        windowLeft = $(window).width() - 40;
 +
        windowRight = 0;
 +
        maxLeft = e.pageX - (parseInt(moveLeft) + $(target).outerWidth() + 20);
 +
       
 +
        if(maxRight > windowLeft && maxLeft > windowRight)
 +
        {
 +
            leftD = maxLeft;
 +
        }
 +
   
 +
        topD = e.pageY - parseInt(moveDown);
 +
        maxBottom = parseInt(e.pageY + parseInt(moveDown) + 20);
 +
        windowBottom = parseInt(parseInt($(document).scrollTop()) + parseInt($(window).height()));
 +
        maxTop = topD;
 +
        windowTop = parseInt($(document).scrollTop());
 +
        if(maxBottom > windowBottom)
 +
        {
 +
            topD = windowBottom - $(target).outerHeight() - 20;
 +
        } else if(maxTop < windowTop){
 +
            topD = windowTop + 20;
 +
        }
 +
   
 +
        $(target).css('top', topD).css('left', leftD);
 +
   
 +
   
 +
    });
 +
 +
});
 +
</script>
  
 
</head>
 
</head>
Line 14: Line 64:
 
<body>
 
<body>
  
 +
<style type="text/css">
  
 +
.popbox {
 +
    display: none;
 +
    position: absolute;
 +
    z-index: 99999;
 +
    width: 400px;
 +
    padding: 10px;
 +
    background: #EEEFEB;
 +
    color: #000000;
 +
    border: 1px solid #4D4F53;
 +
    margin: 0px;
 +
    -webkit-box-shadow: 0px 0px 5px 0px rgba(164, 164, 164, 1);
 +
    box-shadow: 0px 0px 5px 0px rgba(164, 164, 164, 1);
 +
}
 +
.popbox h2
 +
{
 +
    background-color: #4D4F53;
 +
    color:  #E3E5DD;
 +
    font-size: 14px;
 +
    display: block;
 +
    width: 100%;
 +
    margin: -10px 0px 8px -10px;
 +
    padding: 5px 10px;
 +
}
 +
 +
</style>
  
  
Line 80: Line 156:
 
<img src="https://static.igem.org/mediawiki/2015/6/61/NAIT_AttributionsGel.gif">
 
<img src="https://static.igem.org/mediawiki/2015/6/61/NAIT_AttributionsGel.gif">
 
</center>
 
</center>
 +
  
 
<img src="https://static.igem.org/mediawiki/2015/5/5e/NAIT_Band_Marcelo.png" style="position:absolute;top:500px">
 
<img src="https://static.igem.org/mediawiki/2015/5/5e/NAIT_Band_Marcelo.png" style="position:absolute;top:500px">
 +
 +
This is a popbox test.  <a href="#" class="popper" data-popbox="pop1">Hover here</a> to see how it works.  You can also hover <a href="#" class="popper" data-popbox="pop2">here</a> to see a different example.
 +
  
 
   </div>
 
   </div>
 
   </div>
 
   </div>
 +
 +
<div id="pop1" class="popbox">
 +
    <h2>Success!</h2>
 +
    <p>This is an example popbox.</p>
 +
</div>
 +
<div id="pop2" class="popbox">
 +
    <h2>Danger!</h2>
 +
    <p>Don't let this popbox go off the screen!</p>
 +
</div>
 +
  
 
   <div class="clear"></div>  
 
   <div class="clear"></div>  

Revision as of 05:45, 23 July 2015