JQuery .toggle()

by Christopher O

HTML

<div id="nav">
    <button class="showit">Show!</button>
    <button class="hideit">Hide!</button>
    <button class="toggleit">Toggle!</button>
</div>
<div id="target">A nice day at the Grand Prix!<br><span id="details"></span></div>
<div id="bodystuff">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam facilisis vestibulum urna id vestibulum. Vivamus ullamcorper pharetra ante, vel ullamcorper ante elementum sed. Sed mauris enim, viverra vel felis et, accumsan tempor ipsum. Vestibulum ultricies augue non vulputate mollis. Vestibulum in nisi dictum leo rhoncus molestie eget et tortor. Ut at dignissim sem. Integer tempor nulla risus, non consectetur magna aliquam et. Sed semper iaculis elit, nec bibendum ipsum eleifend eu. Fusce sit amet semper orci. Curabitur sapien erat, aliquam et ornare vitae, vehicula eget felis. Nulla interdum scelerisque lacinia. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus non eros malesuada, lacinia elit a, porta neque. Sed auctor diam quis justo gravida, ac rutrum eros dignissim. Nam tempus aliquam diam in hendrerit. Donec purus mauris, malesuada a tincidunt ornare, tempus sed est.

Morbi mi erat, interdum at sapien non, gravida egestas arcu. Etiam lobortis in sem dapibus semper. Donec et lorem urna. Nam accumsan pellentesque ligula, in dignissim felis rhoncus in. Vestibulum tristique, purus eget pulvinar commodo, ligula nisi cursus magna, tincidunt semper massa eros vel mauris. Duis scelerisque, lectus eget consectetur malesuada, urna sem luctus lectus, sit amet mollis libero arcu non tellus. Nunc sit amet mi placerat, eleifend ligula quis, sodales mauris. Nulla nec mauris sit amet velit porta adipiscing sed vel mi. Quisque nec leo vestibulum, ornare mi at, egestas enim. Cras sapien diam, vulputate vitae bibendum eu, pretium eget odio. Fusce viverra, sem ut vehicula facilisis, neque justo convallis quam, ac fringilla nibh enim et leo. Praesent fermentum elit quis scelerisque convallis. Cras imperdiet...

CSS

body {padding:0; margin:0;}

#nav {
    background:blue;
    height:35px;
    padding:5px;   
    position:absolute;
    top: 0px;
    left: 0px;
}

#target {
    color:#fff;
    font-size:26px;
    background:#9D0053;
    /*background-color:rgba(0, 0, 0, 0.5);*/
    padding:15px;
    /*display: none;*/
    position:absolute;
    top: 55px;
    width:500px;
    height:300px;
}

#bodystuff{margin-top: 55px;}

JavaScript

$('.showit').click(function() {
    $('#target').show(300);
});
$('.hideit').click(function() {
    $('#target').hide(300);
});
$('.toggleit').click(function() {
    $('#target').toggle('slow');
});


$(function() {

    $('#target').append('<br></br>Window inner dimentions: ' + $(window).width() + 'x' + $(window).height());
    
    
    
    correctsize();
    
    // run on rindow resize
    $(window).resize(function() {
          correctsize();
    });

});

function correctsize() {
    
    var newW = Math.round($(window).width() * .8);
    var newM = Math.round($(window).width() * .1);
    var newH = $(window).height() - 100;
    
    $('#target').width(newW);
    $('#target').css('margin-left', newM + 'px');
    $('#target').height(newH);
    
    
    $('#details').html('<br></br>New W: ' + newW + '<br>Margin: ' + newM + '<br>New H: ' + newH);
    
}