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
David Jarrin
Courses Plus Student 11,182 Pointsgetting lightbox to center on page no matter the portal width
ok so I have a basic lightbox with the following js
var $overlay = $('<div id="overlay"></div>');
var $image = $("<img>");
var $caption = $("<p id='caption'></p>");
//Add image to overlay
$overlay.append($image);
//Add caption to overlay
$overlay.append($caption);
//click event that will add overlay and everything it includes
$("#sitePreview a").click(function(event){
event.preventDefault();
var imageLocation = $(this).attr("href");
//Update overlay with the image linked in the link
$image.attr("src", imageLocation);
//Add overlay
$("body").append($overlay);
//Show the overlay.
$overlay.show();
//Get child's alt attribute and set caption
var captionText = $(this).children("img").attr("alt");
$caption.text(captionText);
});
//When overlay is clicked
$overlay.click(function(){
//Hide the overlay
$overlay.hide();
});
I have some CSS that is associated with the $image variable to try to move it absolutely to the center of the screen (fixed) so that it stays in the same place even if you scroll. My main problem is that since I am moving it with things like
#overlay img {
height: 200px;
width: 300px;
border: 3px solid grey;
border-radius: 5%;
position: fixed;
top: 200px;
left: 550px;
}
it is hard to keep the image in the middle of the screen with all portal widths......any advice? It's probably really more of a CSS question.
3 Answers
Sean T. Unwin
28,690 PointsThere is this recent article that is helpful at CSSTricks - Centering in CSS: A Complete Guide.
I also came up with this method a little while ago, Codepen experiment, which should work well with children of lightboxes which are of a known width and height. The experiment is in Sass, but you can click the eye icon in the css/scss viewport to see the rendered CSS.
My example boils down to using half the view-width and view-height (50vw and 50vh, respectively) subtracted by half the width and height of the element you want to center to screen dimensions. I have output it using translate3d() because I animated the example, but feel free to fork it and experiment on your own using other properties such as top, bottom, left, or right. vw and vh work in all modern versions of browsers, except Opera Mini - source.
sammarxz
Front End Web Development Techdegree Student 7,815 Points#overlay{
background: rgba(0,0,0,.8);
width: 100%;
height: 100%;
position: fixed;
overflow: hidden;
top: 0;
left: 0;
display: none;
text-align: center;
}
#overlay img{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
jessicapei
7,885 PointsExactly what I needed; thanks!
Tara Tamburello
1,092 PointsYou probably have an answer by now, but I had some troubles with this too. I found the "Absolute Positioning and Negative Margin" section on this page helpful.
Basically, if you have a defined height and width, you can set the image's top- and left-margins to -50% of whatever your defined height/width are. (e.g., height:200px; width: 300; margin:-100px 0 0 -150px)