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 jQuery Basics (2014) Creating a Simple Lightbox Perform: Part 3

Gabriel Ward
Gabriel Ward
20,222 Points
Posted by Gabriel Ward
Gabriel Ward
20,222 Points

appending links/buttons

I'm wanting to add button/links to the overlay, not images and captions.

Does anyone have any advice on how to do this?

Here's an idea of what I'm after

http://tympanus.net/Development/FullscreenOverlayStyles/

Any help is much appreciated.

3 Answers

Mark Shaw
Mark Shaw
10,449 Points
Mark Shaw
Mark Shaw
10,449 Points

Here's a very simple example of what I think you want. Obviously there is some functionality I didn't include and it needs to be styled. Hope this helps.

http://teamtreehouse.com/workspaces/2371912

Gabriel Ward
Gabriel Ward
20,222 Points
Gabriel Ward
Gabriel Ward
20,222 Points

Hi Mark,

I've tried clicking on the link and it doesn't work. Any alternative way I can see the code?

Cheers,

Gabe

Mark Shaw
Mark Shaw
10,449 Points
Mark Shaw
Mark Shaw
10,449 Points

I'll just add the code here and you can paste it into your own workspace.

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Overlay With Links</title>
    <link rel="stylesheet" href="main.css">
  </head>
  <body>
    <h1>I'm a Header!</h1>
    <button id="push">I'm a button!</button>
    <script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="script.js"></script>
  </body>
</html>

main.css

body {
  text-align: center;
}

.new {
  position: absolute;
  top: 0;
  left:0;
  width: 100%;
  height:100%;
  background:rgba(0,0,0,0.7);
}

.new p {
  margin-top:15%;
}

script.js

var $newDiv = $('<div class="new"><p><a href="www.google.com">Click here to go to google</a></p></div>');





//Click event on the button


$("#push").click(function() {
  $("body").append($newDiv);
});
Gabriel Ward
Gabriel Ward
20,222 Points
Gabriel Ward
Gabriel Ward
20,222 Points

Ok thanks for the code.

What I'm after is to have the image on the page, like in the lightbox example that the video tutorial goes through. And then when you click on that, the overlay appears. Then on the overlay the links/buttons appear. So specifically I'm wanting to work out how to attach the button to the overlay without it appearing in the normal page. Do you have any suggestions for this?

I'm assuming it would go somewhere within 

var $newDiv = $('<div class="new"><p><a href="www.google.com">Click here to go to google</a></p></div>');

?

Mark Shaw
Mark Shaw
10,449 Points
Mark Shaw
Mark Shaw
10,449 Points

So you want to click the image. When the image is clicked an overlay appears with links and buttons on it. What functionality should the buttons have?

Raúl Barrera C.
Raúl Barrera C.
18,943 Points
Raúl Barrera C.
Raúl Barrera C.
18,943 Points

You can include any element to overlay and style with css:

<div class="overlay">
 ... any html element
</div>
Gabriel Ward
Gabriel Ward
20,222 Points
Gabriel Ward
Gabriel Ward
20,222 Points

Hi Rau,

So just to clarify, this goes in the jquery?

Gabriel Ward
Gabriel Ward
20,222 Points
Gabriel Ward
Gabriel Ward
20,222 Points

Ok I think I'm getting it. I just realised that instead of having the buttons in html markup, I can have the image as per usual. Then as you show in your example, the links can be within var $newDiv.

The functionality is just to link to other pages on the website. So the links would be to the About page, Contact, etc.. Basically instead of those being in a normal nav set up on the Homepage, they would appear on the overlay.

If you click on the first overlay example here on this page, labelled Huge, you'll get a feel for it I think. http://tympanus.net/Development/FullscreenOverlayStyles/

Again, really appreciate your help.

Mark Shaw
Mark Shaw
10,449 Points
Mark Shaw
Mark Shaw
10,449 Points

Awesome. It's my pleasure to help. Not that I'm any sort of expert cause I'm certainly not!