Clearing footer from light box overlay?

Question

Hello,

I'm working on the mobile layout of a project for a friend implementing some Jquery in my project. Using some code from the light box overlay lesson on treehouse. I want to keep a fixed header and footer above and below the gallery. When an image is selected I would like to maximize the view port and have the footer slide down while not being covered by the overlay.

I would like the overlay to meet but not go past footer.

bonus points if you can help me center the image within the overlay viewing area.

Screenshot with notes: https://www.dropbox.com/s/4hbsv2bk9qfyz2i/Screen%20Shot%202016-02-29%20at%202.33.49%20PM.png?dl=0

Code:

Gallery HTML

<!DOCTYPE html>
<html>
<head>
    <title>Chris Pernula</title>
    <meta charset="utf-8"/>
    <link type="text/css" rel="stylesheet" href="normalize.css">
    <link type="text/css" rel="stylesheet" href="main.css">
    <link href='https://fonts.googleapis.com/css?family=Luckiest+Guy|Marcellus' rel='stylesheet' type='text/css'>
</head>
<body>
    <header class="main-header">
        <div class="header-container">
            <img src="img/chrisp.png" alt="Chris Pernula Logo">
            <h4 class="tagline">Minneapolis based visual artist</h4>
            <div id="menu"> 
                <ul class="home-nav">
                    <a href="index.html"><li>Home</li></a>
                    <a class="selected" href="gallery.html"><li>Look</li></a>
                    <a href="shop.html"><li>Buy</li></a>
                </ul>
            </div>  
            <div class="header-border"></div>
        </div>
    </header>
    <div class="overlay">
        <section> 
            <div class="gallery-container">
                <h3 class="gallery-heading">GALLERY</h3>
                <ul class="gallery-images" id="imageGallery">
                    <li><a href="img/one.png"><img src="img/one.png" alt="Mouths by Chris Pernula"></a></li>
                    <li><a href="img/two.png"><img src="img/two.png" alt="Chatty Kathy by Chris Pernula"></a></li>
                    <li><a href="img/three.png"><img src="img/three.png" alt="Sexy Lady by Chris Pernula"></a></li>
                    <li><a href="img/four.png"><img src="img/four.png" alt="Zit's by Chris Pernula"></a></li>
                    <li><a href="img/five.png"><img src="img/five.png" alt="Mouth Drip by Chris Pernula"></a></li>
                    <li><a href="img/six.png"><img src="img/six.png" alt="Dope Track by Chris Pernula"></a></li>
                    <li><a href="img/seven.png"><img src="img/seven.png" alt="Hot Zombie by Chris Pernula"></a></li>
                    <li><a href="img/eight.png"><img src="img/eight.png" alt="Slick Rick by Chris Pernula"></a></li>
                    <li><a href="img/nine.png"><img src="img/nine.png" alt="Kitty by Chris Pernula"></a></li>
                    <li><a href="img/ten.png"><img src="img/ten.png" alt="Wrong Socks by Chris Pernula"></a></li>
                    <li><a href="img/eleven.png"><img src="img/eleven.png" alt="Pizza Fight by Chris Pernula"></a></li>
                    <li><a href="img/twelve.png"><img src="img/twelve.png" alt="Mermaid Cutout by Chris Pernula"></a></li>
                    <li><a href="img/thirteen.png"><img src="img/thirteen.png" alt="Pizza Bodies by Chris Pernula"></a></li>
                    <li><a href="img/fourteen.png"><img src="img/fourteen.png" alt="Zit Boy by Chris Perula"></a></li>
                    <li><a href="img/fifteen.png"><img src="img/fifteen.png" alt="Richard Yellowstone by Chris Pernula"></a></li>
                    <li><a href="img/sixteen.png"><img src="img/sixteen.png" alt="Tweet by Chris Pernula"></a></li>
                    <li><a href="img/seventeen.png"><img src="img/seventeen.png" alt="Food Inhale by Chris Pernula"></a></li>
                    <li><a href="img/eighteen.png"><img src="img/eighteen.png" alt="Death By Tacos by Chris Pernula"></a></li>
                    <li><a href="img/nineteen.png"><img src="img/nineteen.png" alt="Paul Paint Drip by Chris Pernula"></a></li>
                    <li><a href="img/twenty.png"><img src="img/twenty.png" alt="Big Baby by Chris Pernula"></a></li>
                    <li><a href="img/twentyone.png"><img src="img/twentyone.png" alt="Salami Sunset by Chris Pernula"></a></li>
                    <li><a href="img/twentytwo.png"><img src="img/twentytwo.png" alt="OH Lord! I've been bit by Chris Pernula"></a></li>
                </ul>
            </div>
        </section>
    </div>
        <footer class="main-footer gallery-footer">
            <h3><a href="mailto:chrispernula@gmail.com">Contact: chrispernula@gmail.com</a></h3>
            <ul>
                <li><a href="http://www.instagram.com/chrispernula/"><img src="img/instagram.png" alt="Instagram Logo"></a></li>
                <li><a href="http://www.twitter.com/chris_pernula"><img src="img/twitterbird.png" alt="Twitter Logo"></a></li>
                <li><a href="http://www.youtube.com//channel/UCVD2seHt1JFJV-5Qp2ML2UA"><img src="img/youtube.png" alt="Youtube Logo"></a></li>
                <li><a href="http://www.facebook.com/Chris-Pernula-Art-1693099427601708/?fref=ts"><img src="img/facebook.jpg" alt="Facebook Logo"></a></li>
            </ul>
            <h5>&copy; Chris Pernula 2016 - All Rights Reserved<h5>
        </footer>
    </div>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="app.js" type="text/javascript" charset="utf-8"></script>
</body>

</html>

CSS

/********** Cursor pizza ******************/

/* Start http://www.cursors-4u.com */ body, a:hover {cursor: url(http://cur.cursors-4u.net/food/foo-2/foo165.cur), progress !important;} /* End http://www.cursors-4u.com */


/***********START DEFAULTS ****************/

html, body { 
    margin: 0px; 
    padding: 0px; 
    border: 0px; 
}


a {
    text-decoration: none;
    font-family: 'Luckiest Guy', cursive;
    color: white;
    font-size: 2em;

}


/* Homepage Background ***************************************************************/

.home-background {
  background: url(img/one.png) no-repeat center 170px fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover; 
  height: 100vh;
  max-width: 100vw;
  overflow: scroll;

  }


  h4 {
    text-align: center;
    margin-bottom: -5px;
    font-size: 1.2em;
    margin-top: 5px;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

/* main header ***************************************************************/

.main-header {
    text-align: center;
}

.main-header img {
    max-height: 150px;
    margin-bottom: none;
    max-width: 90%;
    margin-top: 10px;
}

.header-border {
    border-bottom: 6px solid black;
    margin-top: 5px;
}

#menu {
    position: relative;
    border-bottom: none;
}

.header-container {
    position: fixed;
    width: 100%;
    background: white;
    z-index: 1000;
    top: 0;
}
/* main section  ***************************************************************/

h1, h5, h4{
    font-family: 'Luckiest Guy', cursive;
    letter-spacing: 1px;
}

ul {
    list-style: none;
}


h1 {
    text-align: center;
    left: 0;
    right: 0;
    position: fixed;
    top: 45%;
    margin: auto;
    color: white;
    letter-spacing: 3px;
    font-size: 2em;
    -webkit-text-stroke: 1px black;
   text-shadow:
       3px 3px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
}


.home-nav a {
    display: none;
}


select {
    -webkit-text-stroke: 1px black;
   text-shadow:
       3px 3px 0 #000,
     -1px -1px 0 #000,  
      1px -1px 0 #000,
      -1px 1px 0 #000,
       1px 1px 0 #000;
    font-family: 'Luckiest Guy', cursive;
    width: 225px;
    height: 30px;
    padding-top: 3px;
    text-align: center;
    color: white;
    letter-spacing: 3px;
    font-size: 1.4em;
  text-align: center;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  margin-top: -20px;
  margin-bottom: 5px;
}

.container {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

/* main footer  ***************************************************************/

.main-footer {
    border-top: 6px solid black;
    text-align: center;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: white;
    max-width: 100%;

}

.main-footer img {
    max-height: 30px;
    max-width: 30px;
    margin-bottom: 15px;
    margin-top: 3px;
}

.main-footer ul {
    list-style: none;
    text-align: center;
    margin-top: -10px;
    padding-left: 0;
}

.main-footer li {
    display: inline;
    padding: 10px;
}

.main-footer a {
    color: black;
    font-size: 1.5em;
}

.main-footer h3 {
    margin-top: 10px;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
    font-size: .9em;
    margin-bottom: 10px;
}

.main-footer h5 {
    margin-top: -30px;
    padding-bottom: 3px;
    margin-bottom: 20px;
}


/* gallery  ***************************************************************/

.gallery-container {
    margin-bottom: 140px;
    margin-top: 205px;
    min-height: 100%;
    max-width: 90%;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.gallery-heading {
    text-align: center;
    font-family: 'impact', sans-serif;
    letter-spacing: 1px;
    font-size: 1.4em;
    opacity: .9;
}

.gallery-images {
    text-align: center;
    margin: 0;
    padding: 0;
}

.gallery-images img {
    height: 100px;
    width: 100px;
    border: 1px solid black;
}

.gallery-images li {
    display: inline-block;
}


.gallery-footer {
    position: fixed;
    bottom: 0;
    max-height: 125px;

}

/************************************OVERLAY STYLING*****************************************************************/

#overlay {
  background: rgba( 0,0,0,.7);
  min-width: 100%;
  min-height: 100%;
  position: fixed;
  left: 0;
  top: 160px;
  display: none;
  text-align: center;
  margin-bottom: 0;
  vertical-align: center;
}

#overlay img {
  margin-top: 15%;
  max-width: 90%; 
  max-height: 50vh;
  min-height: 40%;
 position: absolute;
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  vertical-align: center;
}

JS

//Problem : create drop down nav for mobile 
//Solution: hide text links and swap out to more appropriate nav

//Create a select and append to #menu
$(document).ready(function(){


var $select = $("<select></select>");
$("#menu").append($select);

//Cycle over links
$("#menu a").each(function(){
  var $anchor = $(this);
  //Create options in select
  var $option = $("<option></option>");
  //Create options in select
  if ($anchor.hasClass("selected")){
      $option.prop("selected", true);
      }
  //options value is href
  $option.val($anchor.attr("href"));
  //options text is text of link
  $option.text($anchor.text());
  //append option to select
  $select.append($option);


//bind click to select location
$select.change(function(){
  window.location = $select.val();
  $(this).fadeOut(500);
    }).css({'cursor': 'pointer'});


}); //end ready


//*****************************************************************

//user when clicking image goes to a dead end
//Soulution: Create an overlay with the large image - lightbox

$(document).ready(function(){

var $overlay = $('<div id="overlay"></div>');
var $image = $("<img>");
//var $caption = $("<p></p>");

//Add an overlay
$overlay.append($image);

  //A caption
//$overlay.append($caption);

//An image
$("body").append($overlay);



//Capture click event when clicking link on image
$("#imageGallery a").click(function(event){
  event.preventDefault();
  var imageLocation = $(this).attr("href");
    // Update overlay with image clicked on link
  $image.attr("src", imageLocation);  
   // Show overlay
  $overlay.show();//.css({
    //  "max-width": '100vw',
     // "max-height": '100vh'
    });
  // Get childs alt attribute and set caption
 // var captionText = $(this).children("img").attr("alt");
  //$caption.text(captionText);
//});

// When overlay is cliked
// Hide overlay
$overlay.click(function (){
  $overlay.hide();
});

}); //end ready

//*****************************************************************
//cursor pointer

$(document).ready(function(){

$("home-nav").click(function(){
        $(this).fadeOut(500);
    }).css({'cursor': 'pointer'});


$("home-nav").click(function(){
        $("home-nav").fadeOut(500);
    }).css({'cursor': 'pointer'});

});

}); //end ready

THANK YOU if you try to help!!!

Answer 1 · 2016-02-29T23:53:36Z

February 29, 2016 11:53pm

Change min-height to max-height in overlay settings and play around with this value until it doesn't descend over the footer part of your html page.

Welcome to the Treehouse Community

Looking to learn something new?

Joseph Zimmerman

Joseph Zimmerman

Clearing footer from light box overlay?

1 Answer

Dylan Aresu

Dylan Aresu

Joseph Zimmerman

Joseph Zimmerman