Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Posted January 9, 2015 12:26am by

transitions and overlays

I have an overlay with links on it, and the links are html pages.

When I click on one of the links, it goes to that html page.

I want to fade the html page in when i click on the link but I'm not having any luck so far.

I've tried a bit of code, the most obvious being

jQuery
$('.link').click(function() {
      $('.link').fadeIn();
});

but that doesn't seem to work.

3 Answers

January 11, 2015 8:50am

HI Gabriel,

Try substituting you app.js with this code:

var $overlay = $('<div id="overlay"><div id="close-btn"><img src="cross.png" height="25px" width="25px" alt="close" /></div></div>');
var $ul = $("<ul></ul>");
var $largeOverlay = $("<li id='largeOverlay'><a href='about.html'>About</a></li>");
var $largeOverlay2 = $("<li id='largeOverlay2'><a href='venue.html'>Venue</a></li>");
var $largeOverlay3 = $("<li id='largeOverlay3'><a href='program.html'>Program</a></li>");
//appending
($ul).append($largeOverlay).append($largeOverlay2).append($largeOverlay3);
$($overlay).append($ul);
$("body").append($overlay);
//
$('.menu').click(function() {
    //event.preventDefault();
    $overlay.slideDown(200, 'linear');
    $ul.fadeIn(200, 'linear');
    $('a').click(function(event){
        event.preventDefault();
        newLocation = this.href;
        /*
        *   You can change the value it takes to fade out in milliseconds (900)
        *   You can either fade out the overlay using $overlay or the full page with $('body')
        */
        $("body").fadeOut(900, newpage);
    });

    function newpage() {
    window.location = newLocation;
    }


});
$('#close-btn').click(function() {
    $ul.slideUp(200, 'linear');
    $overlay.slideUp(200, 'linear');
});
$(document).ready(function() {
            $('body').css('display', 'none');
            $('body').fadeIn(900);
});

January 11, 2015 9:26am

I just put this is. The overlay fades out but it stays on the same page. The new page doesn't appear.

January 11, 2015 9:33am

It is working on my end,

I put it up on a workplace - here

January 11, 2015 9:40am

Ok I got it. Thanks so much Hugo.

I was wondering as well, and I can't work this out, when the close button is clicked the overlay will slideUp. But if I try slideDown, it doesn't work. Do you know why this might be? It's the same for the links I think. THe overlay will not slideDown.

January 11, 2015 9:45am

You want to use slideDown on an element that is visible? slideDown only works on elements that have their display set to none. If the element is visible, it wont work.

January 11, 2015 9:48am

Yes, if I can use the overlay on http://hugeinc.com/work as an example. The overlay slides down, then when a link is clicked, it slides down and disappears.

But that's fine, I can just use slideUP, fadeIn, fadeOut.

January 11, 2015 9:53am

I'm also trying to work out how to get the overlay to appear in the window after I've scrolled down the page. The menu icon is fixed so that it's always visible when scrolling down. But the overlay is fixed in position at the top of the page and it's not visible in the window if I've scrolled down. Any ideas?

January 11, 2015 9:59am

Substitute

$("body").fadeOut(900, newpage);

with

$overlay.animate({top: 200}, 500).fadeOut(900, newpage);

This will take care of the sliding motion.

For the overlay being always visible, change display:absolute to display:fixed in your css.

January 11, 2015 10:20am

Wow thanks for all your help.

Any tips for me on improving? Other than just code everday?

January 11, 2015 10:28am

Sounds cliche but experience is key. If you want to be a front end developer, get a few good books on javascript. "Pro JavaScript Development" and "Learning JavaScript Design Patterns" are excellent. They will provide you with advanced techniques that will improve your code immensely.

Set a few goals after you finished a chapter or learned a new skill. For instance develop a hangman game that the computer can play alone and check how many times it wins. Create a movie library using webms and prototyping.

And also very important, help fellow students here at treehouse. You will have to read other peoples code, like you would in a company and you are required to do some investigation to help. That will expand your knowledge greatly.

January 11, 2015 10:34am

Ok cool. I am wanting to become a web developer.

Do you work professionally in the industry? Did you study web development formally at university?

January 11, 2015 10:36am

Im currently working as a front end developer.

I did not go to uni, i did some web dev courses, books and treehouse.

January 11, 2015 10:47am

ok and what sort of time frame do you think it takes a person to get their skills up to scratch so they can get employment?

January 11, 2015 10:50am

That depends on your commitment. Coding everyday you should have some decent skills in a year.

January 11, 2015 10:54am

nice. Yea I generally try and do at least 20 hours a week. Hopefully going to push that up to 30 to 40 hours a week.

How long were you coding for before you turned it into your job?

January 11, 2015 10:57am

I've been coding for 2.5 years before i got my job.

January 11, 2015 10:17pm

Cool. Do you have a website/portfolio? Also, is it ok if I ask for your email address?

January 9, 2015 3:09am

Hi Gabriel,

Could you post your code here?

January 9, 2015 3:19am

Sure, here's the jQuery:

//variables
var $overlay = $('<div id="overlay"><div id="close-btn"><img src="cross.png" height="25px" width="25px" alt="close" /></div></div>')
var $ul = $("<ul></ul>")
var $largeOverlay = $("<li id='largeOverlay' class='link'><a href='about.html'>About</a></li><")
var $largeOverlay2 = $("<li id='largeOverlay2'><a href='venue.html'>Venue</a></li>")
var $largeOverlay2 = $("<li id='largeOverlay2'><a href='venue.html'>Venue</a></li>")
var $largeOverlay2 = $("<li id='largeOverlay2'><a href='venue.html'>Venue</a></li>")
//appending
$($ul).append($largeOverlay).append($largeOverlay2);
$($overlay).append($ul);
$("body").append($overlay);
//show overlay
("#imageGallery img").click(function(event) {
  event.preventDefault();
$overlay.slideDown(350, 'linear');
  $ul.fadeIn(300, 'linear');
});
//hide overlay
$('#close-btn').click(function() {
    $ul.fadeOut(300, 'linear');
    $overlay.slideUp(350, 'linear');
});

I have no problem with showing the overlay and getting it to fade in and fade out on the close button. But I want to be able to click on the About and Venue links (as seen in the largeOverlay and largeOverlay2 variables) and then fade those in. At the moment, when I click on them, it goes straight from the overlay to the location of the clicked link normally, with no fade in.

January 9, 2015 9:50am

See if this example helps

<!DOCTYPE html>
<html>
    <head>

    <link href='css.css' rel='stylesheet'>
    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src='app.js'></script>
    </head>

    <body>
        <div id='main'>
            <a href='about.html' class='link'>Go</a>

        </div>


        <script>
            $(document).ready(function() {

            $('body').css('display', 'none');

            $('body').fadeIn(1000);



                $('.link').click(function(event) {

                event.preventDefault();

                newLocation = this.href;

                $('body').fadeOut(1000, newpage);

                });

                function newpage() {

                window.location = newLocation;

                }

                });

        </script>
    </body>
</html>

Basically the page fades in and when you click on the link the page fades out and the new page fades in.

January 9, 2015 9:00pm

Hmm,

still no success. I've seen this solution before. Should it not go in the app.js?

January 10, 2015 2:06am

I feel like it's something to do with preventDefault(),

because I want to go to the link that's being clicked on and fade the overlay out.

You can see an example here:

http://hugeinc.com/

If you click on the menu on the top right to show the overlay. THen click on one of the links the overlay slides out and the link appears. That's what I'm after.

January 10, 2015 6:20am

Try this to see if its the effect you want, dont put your code in here yet.

<!DOCTYPE html>
<html>
    <head>

    <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>


    <style>
        html{
            width:100%;
            height:100%;
        }
        body{
            width:100%;
            height:100%;
        }

        #overlay{
            width:100%;
            height:100%;
            position: absolute;
            top:0;
            left:0;
            background-color: red;
            opacity: .7;
        }

        #overlay ul{
            margin: 100px 0 0 0;
            padding:0;
            list-style-type: none;

        }


        #overlay li {
            display: block;
        }

        #overlay a{
            text-align: center;
            display: block;
            background-color: tomato;
            color: white;
            text-decoration: none;
            margin-bottom: 5px;
            border:1px solid darkred;
            padding: 5px 0;

        }


    </style>
    </head>

    <body>
        <div id='main'>

            <button id='nav'>Navigation</button>
        </div>
        <script>
            $(document).ready(function() {


            var overlay = '<div id="overlay"><ul><li><a href="about.html">About</a><li><li><a href="about.html">About</a><li><li><a href="about.html">About</a><li><li><a href="about.html">About</a><li><li><a href="about.html">About</a><li></ul><div>';

                $('#nav').click(function(){
                    $('body').append(overlay);
                    $('a').click(function(event) {

                    event.preventDefault();

                    newLocation = this.href;

                    $('#overlay').fadeOut(3000, newpage);

                    });

                    function newpage() {

                    window.location = newLocation;

                    }



                });



        });

        </script>
    </body>
</html>

January 10, 2015 7:11pm

Hi Hugo,

Still no luck. I've tried incorporating this into my app.js file.

I've seen examples similar to this before. I'm stumped!

I really appreciate your help.

January 11, 2015 2:47am

Please post your full html, css and jquery.

January 11, 2015 4:16am

Homepage

<!DOCTYPE html>
<html>
<head>
    <title>Patrick Sherratt</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class='main-header'>
        <span class='title'>
            <div id='homepage' class='title'>
                <a href='startagain.html'><h1 class='first-name'>Patrick</h1></a>
            </div>
            <div>
                <a href='startagain.html'><h1 class='second-name'>Sherratt</h1></a>
            </div>  
                <img class='menu' src='menu.png' alt='overlaymenu'>
            </div>
        </span> 
    </header>   
    </span>
    <div class='about-content'>
        <div class='about-content-paragraph'>
        <p>Jim Harry Larry
        </div>
    </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>

January 11, 2015 4:18am

About Page

<!DOCTYPE html>
<html>
<head>
    <title>Patrick Sherratt</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class='main-header'>
        <span class='title'>
            <div class='title'>
                <a href='startagain.html'><h1 class='first-name'>Patrick</h1></a>
            </div>
                <a href='startagain.html'><h1 class='second-name'>Sherratt</h1></a>
            <div>
            </div>  
                <img class='menu' src="menu.png" alt='overlaymenu'>
            </div>
        </span>
    </header>
    <div class='about-content'>
        <h1 class='about-content-header'>About</h1>
        <div class='about-content-paragraph'>
        <p>JIM

        </p>
        </div>
    </div>
    <div class='secondary-content'>
        <p></p>
    </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>

January 11, 2015 4:19am

CSS

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-size: 1em;
    font-family: 'Lato', 'Avenir Next', Arial, sans-serif;
}

a {
    color: #000;
}


h1,
.first-name {
    font-size: 4em;
}

.first-name {
    position: fixed;
    left: 70px;
    top: 5px;
    letter-spacing: 6px;
}

.second-name {
    position: fixed;
    left: 70px;
    top: 60px;
}

.menu {
    max-width: 7%;
    max-height: 7%;
    position: fixed;
    right: 80px;
    top: 40px;
}

p {
    font-size: 3em;
}

.about-content {
    max-width: 100%;
    margin: 200px auto;
    /*background-image: url('fiji.jpg');*/
    height: 100%;
    background: #000;
    color: #fff;
}

.about-content-header {
    text-align: center;
    color: #000;
    background-color: #fff;
    font-size: 7em;
}

.about-content-paragraph {
    max-width: 65%;
    margin: 0 auto;
}

#homepage {
    background-image: url('fiji.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center; 
    height: 1025px;
    width: 100%;
}

/*OVERLAY*/
#overlay {
  background:rgba(98,167,220,0.9);
  width:100%;
  height:100%;
  position:absolute;
  top:0;
  left:0;
  display:none;
  text-align:center;
}

#overlay ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    display: inline-block;
    height: 100%;
    position: relative;
    text-align: center;
    top: 15%;
    height: 60%;
    font-size: 54px;
    width: 100%;
}

#overlay ul li {
    display: block;
    height: 20%;
    height: calc(100% / 5);
    min-height: 54px;
    width: 100%;
}

#overlay ul li a {
    font-weight: 300;
    display: block;
    color: #fff;
    text-decoration: none;
    width: 100%;
}

#overlay ul li a:hover,
#overlay ul li a:focus {
    color: #e3fcb1;
    background: white;
}

January 11, 2015 4:22am

jQuery

var $overlay = $('<div id="overlay"><div id="close-btn">
<img src="cross.png" height="25px" width="25px" alt="close" />
</div></div>')
var $ul = $("<ul></ul>")
var $largeOverlay = $("<li id='largeOverlay'><a href='about.html'>About</a></li><")
var $largeOverlay2 = $("<li id='largeOverlay2'><a href='venue.html'>Venue</a></li>")
var $largeOverlay3 = $("<li id='largeOverlay3'><a href='program.html'>Program</a></li>")
//appending
($ul).append($largeOverlay).append($largeOverlay2).append($largeOverlay3);
$($overlay).append($ul);
$("body").append($overlay);
//
$('.menu').click(function(event) {
  event.preventDefault();
$overlay.slideDown(200, 'linear');
  $ul.fadeIn(200, 'linear');
});
$('#close-btn').click(function() {
    $ul.slideUp(200, 'linear');
    $overlay.slideUp(200, 'linear');
});
$(document).ready(function() {
            $('body').css('display', 'none');
            $('body').fadeIn(900);
});

January 11, 2015 4:25am

Thanks for your help Hugo.

I'd be happy with just sliding the overlay down when a link is clicked and the new page appears normally.

Posting to the forum is only allowed for members with active accounts.
Please sign in or sign up to post.

Welcome to the Treehouse Community

Looking to learn something new?

Gabriel Ward

Gabriel Ward

transitions and overlays

3 Answers

Hugo Paz

Hugo Paz

Gabriel Ward

Gabriel Ward

Hugo Paz

Hugo Paz

Gabriel Ward

Gabriel Ward

Hugo Paz

Hugo Paz

Gabriel Ward

Gabriel Ward

Gabriel Ward

Gabriel Ward

Hugo Paz

Hugo Paz

Gabriel Ward

Gabriel Ward

Hugo Paz

Hugo Paz

Gabriel Ward

Gabriel Ward

Hugo Paz

Hugo Paz

Gabriel Ward

Gabriel Ward

Hugo Paz

Hugo Paz

Gabriel Ward

Gabriel Ward

Hugo Paz

Hugo Paz

Gabriel Ward

Gabriel Ward

Hugo Paz

Hugo Paz

Gabriel Ward

Gabriel Ward

Hugo Paz

Hugo Paz

Gabriel Ward

Gabriel Ward

Gabriel Ward

Gabriel Ward

Hugo Paz

Hugo Paz

Gabriel Ward

Gabriel Ward

Hugo Paz

Hugo Paz

Gabriel Ward

Gabriel Ward

Gabriel Ward

Gabriel Ward

Gabriel Ward

Gabriel Ward

Gabriel Ward

Gabriel Ward

Gabriel Ward

Gabriel Ward