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

CSS

Posted by Eduardo Mejía
Eduardo Mejía
36,816 Points

Popup position.

How does Treehouse show the popups in the current positions of the page? For example, when I clicked Ask, the popup always appears maybe 10 or 15 px from the top of the browser and I can scroll up and scroll down. Sorry my English.

4 Answers

Eduardo Mejía
Eduardo Mejía
36,816 Points

Thank you Erik. I used window.pageYOffset. This is my code:

function fadeInWindowContainer() {
    showTransparentBackground();
    $('.overlay-container').fadeIn(function () {
        $(this).css("top", window.pageYOffset);
        window.setTimeout(function () {
            $('.window-container').addClass('window-container-visible');
        }, 100);
    });
}
Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

I'm not quite sure what you are referring to, and you didn't provide a link to an example.

But it sounds like you are describing a modal dialog that uses the position: absolute property.

If that's not what you meant, please be more specific and provide an example.

eck
eck
43,038 Points
eck
eck
43,038 Points

Treehouse is using a CSS property called position with the value absolute. It allows elements to be removed from the normal document flow and placed at specific points, potentially overlapping other elements. Learn more about the position property here.

So, if you wanted to find out how something is styled for yourself there are some very handy tools built into some browsers. On Chrome, you can right click an element on the page and an options menu appears. Selecting Inspect will open Chrome's Developer tools and allow you to explore the elements on the page and the CSS that affects them.

Using browser developing tools is very important for front-end web developers. While they can seem confusing at first, with a bit of exposure you can start getting a lot of value from using them.

Eduardo Mejía
Eduardo Mejía
36,816 Points
Eduardo Mejía
Eduardo Mejía
36,816 Points

Thank you for your answers Steven and Erik. I know how to use the property position with its value absolute. But if I'm working at the bottom of a page and I click a button that displays a popup, the popup will appear at the top of the page. On the other hand, If I set the position: absolute and top: 500px and my button is the top of the page the popup will appear at the bottom of the page. In Theeouse when I click the button Watch trailer, the popup appears exactly where I am. If I scroll the page and I click the button again, the popup appears in my current position with the property position: absolute. How does Treehouse calculate that??? I think it's javascript because when I Inspect the popup, its value of top property changes.

eck
eck
43,038 Points

You are probably correct that they are using JavaScript to determine the top position for the popup. In Chrome, the window.pageYOffset property stores an integer value that corresponds to the distance the user has scrolled from the top of the screen. You could use this to figure out the best absolute top position to set for a popup.