SGF Contact

by Koubenec

HTML

<link href='http://fonts.googleapis.com/css?family=Ledger' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://cherne.net/brian/resources/jquery.hoverIntent.js"></script>
<div class="contactcontainer"><div class="contactpic"></div><span class="name">Jared Kohl</span><br><span class="desc">Citadel class of 2004</span><br><span class="title">VICE PRESIDENT for NETWORKING SERVICES</span><br><a class="phone" href="callto:3364292018">336-429-2018</a><br><div id="emailsquare"></div><div id="fbmsgsquare"></div><div id="biobutton"></div></div>

CSS

.contactcontainer {
    width: 630px;
    height: 80px;
    background-color: #414042;
    overflow: hidden;
    border: 10px solid #414042;
}

/*.contactcontainer:hover {
    width: 650px;
    height: 100px;
    background-color: #BE1E2D;
}*/

.contactcontainer:hover .mail {
    bottom: 52px;
}

#emailsquare {
    width: 50px;
    height: 50px;
    background-color: #6D6D6D;
    background-image: url('http://summerallguardfoundation.org/wp-content/uploads/2012/10/50px_mail_off2.png');
    position: absolute;
    top: 0px;
    left: 600px;
    z-index: 999;
}

#emailsquare:hover {
    background-color: #414042;
}

#fbmsgsquare {
    width: 50px;
    height: 50px;
    background-color: #6D6D6D;
    background-image: url('http://summerallguardfoundation.org/wp-content/uploads/2012/10/50px_fbmail_off1.png');
    position: absolute;
    top: 50px;
    left: 600px;
    z-index: 999;
}

#fbmsgsquare:hover {
    background-color: #414042;
}

#biobutton {
    width: 210px;
    height: 50px;
    background-color: red;
    position: absolute;
    z-index: 9999;
    top: 100px;
    left: 0px;
}

.contactpic {
    width: 80px;
    height: 80px;
    background-color: #939393;
    background-image: url('http://summerallguardfoundation.org/wp-content/uploads/2012/10/Kohl_contactpic_sm.jpg');
    position: absolute;
    top: 10px;
    left: 10px;
}

.name {
    font-size: 16px;
    color: #fff;
    font-family: 'Ledger', serif;
    position: relative;
    top: 0px;
    left: 90px;
}

.desc {
    font-size: 14px;
    color: #BCBCBC;
    font-family: 'Ledger', serif;
    font-style: italic;
    position: relative;
    top: 0px;
    left: 90px;
}

.title {
    font-size: 14px;
    color: #ffffff;
    font-family: 'Ledger', serif;
    position: relative;
    top: 0px;
    left: 90px;
}

.phone {
    font-size: 14px;
    color: #BCBCBC;
    font-family: 'Ledger', serif;
    position: relative;
    top: 0px;
    left: 90px;
    text-decoration:none;
}

.mail {
    width: 83px;
   ...

JavaScript

//$(document).ready(function(){
//  $(".contactcontainer").hover(function(){
//    $(".contactcontainer").animate({height:130},200);
//    $("#right").animate({width:"100%"},200);  
//  },function(){
//    $(".contactcontainer").animate({height:80},200);
//     $(".contactcontainer").animate({width:150},200);    
//  });
//});

$(".contactcontainer").hoverIntent(
  function () {
    $(".contactcontainer").stop().animate({height:130},200);
  }, 
  function () {
    $(".contactcontainer").stop().animate({height:80},200);
  }
);



//$(".contactcontainer").hover(function() {
//    var curElement = this;
//    var timeoutId = setTimeout(function(){
//    $(".contactcontainer").animate({height:130},200);

    // Use data so trigger can be cleared.
//    $(curElement).data('timeoutId', timeoutId);
//}, function() {
//    clearTimeout($(this).data('timeoutId'));
//});