Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

JavaScript

Gabriel Ward
Gabriel Ward
20,222 Points

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

Hugo Paz
Hugo Paz
15,620 Points

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);
});
Gabriel Ward
Gabriel Ward
20,222 Points

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

Hugo Paz
Hugo Paz
15,620 Points

It is working on my end,

I put it up on a workplace - here

Gabriel Ward
Gabriel Ward
20,222 Points

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.

Hugo Paz
Hugo Paz
15,620 Points

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.

Gabriel Ward
Gabriel Ward
20,222 Points

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.

Gabriel Ward
Gabriel Ward
20,222 Points

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?

Hugo Paz
Hugo Paz
15,620 Points

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.

Gabriel Ward
Gabriel Ward
20,222 Points

Wow thanks for all your help.

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

Hugo Paz
Hugo Paz
15,620 Points

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.

Gabriel Ward
Gabriel Ward
20,222 Points

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?

Hugo Paz
Hugo Paz
15,620 Points

Im currently working as a front end developer.

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

Gabriel Ward
Gabriel Ward
20,222 Points

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?

Hugo Paz
Hugo Paz
15,620 Points

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

Gabriel Ward
Gabriel Ward
20,222 Points

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?

Hugo Paz
Hugo Paz
15,620 Points

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

Gabriel Ward
Gabriel Ward
20,222 Points

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

Hugo Paz
Hugo Paz
15,620 Points

Hi Gabriel,

Could you post your code here?

Gabriel Ward
Gabriel Ward
20,222 Points

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.

Hugo Paz
Hugo Paz
15,620 Points

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.

Gabriel Ward
Gabriel Ward
20,222 Points

Hmm,

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

Gabriel Ward
Gabriel Ward
20,222 Points

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.

Hugo Paz
Hugo Paz
15,620 Points

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>
Gabriel Ward
Gabriel Ward
20,222 Points

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.

Hugo Paz
Hugo Paz
15,620 Points

Please post your full html, css and jquery.

Gabriel Ward
Gabriel Ward
20,222 Points

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>
Gabriel Ward
Gabriel Ward
20,222 Points

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>
Gabriel Ward
Gabriel Ward
20,222 Points

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;
}
Gabriel Ward
Gabriel Ward
20,222 Points

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);
});
Gabriel Ward
Gabriel Ward
20,222 Points

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.