Reputation: 47
i create a page with small Image and i want when it's clicked then open large Image in a absolute div, it's work truly. but when window show bottom of page and we wat click on small image it's appare in top of screen and i don't like it.I want it appear in center of screen in every time ,please see it in this page: http://www.3dcreate.ir/New3DCreate/Pages/Gallery/3DGallery/3dg_Chosen.php
My Code Sample is:
HTML CODE:
<!-- This is Div of Large Image and Background Shade -->
<div class="BackgroudShade"></div>
<div class="DivOfImage"><img class="LargeImage"/></div>
CSS CODE:
.DivOfImage {
border: 8px solid #FFF;
color:#FFF;
background-color:#FFF;
border-radius:10px;
position:absolute;
}
JQuery CODE:
function LoadShowDiv () {
$('.BackgroudShade').slideDown(800); // shade of background will be visible
$(".DivOfImage").show(); // Div of Large Image will be visible
// When Image loaded successful then set width,height and top,left of Large Image Div
// but i want set top,left when screen is scroll down to bottom of page
// then show Div at middle of screen in every time
$('.LargeImage').load(function() {
$('.DivOfImage').width($('.LargeImage').width());
$('.DivOfImage').height($('.LargeImage').height());
var LeftPostion = (WidthOfScreen - $('.LargeImage').width()) / 2;
var TopPostion = (HeightOfScreen - $('.LargeImage').height()) / 2;
$(".DivOfImage").offset({ top: TopPostion, left: LeftPostion});
$('.LargeImage').show(1000);
})
}
$('#SmallImage').click(function(){
$('.LargeImage').attr('src','LargeImage.jpg');
LoadShowDiv();
})
Upvotes: 0
Views: 1152
Reputation: 13866
If you want to center it to the entire screen both horizontally and vertically and completely ignore other elements on the webpage you can use
#yourElement{
position: fixed;
height: 40px;
width: 20px;
left: 50%;
top: 50%;
margin-left: -10px; //half of width
margin-top: -20px; //half of height
}
This places the element on the center of the user's screen.
Upvotes: 0
Reputation: 119
You don't need to use all of this JS to calculate and show an image in the middle of the screen. You can use CSS to style and position and then JS to hide/show. You position:fixed; and you can then define the position on the screen a lot easier.
Try something like this:
CSS
.LargeImage {
position: fixed;
top: 50%;
left: 50%;
margin-top: -(half of image height);
margin-left: -(half of image width);
}
This will leave the image in the centre of the screen
Upvotes: 2
Reputation: 26989
Add left
and right
as 0
and use margin:0 auto
.DivOfImage {
border: 8px solid #FFF;
color:#FFF;
background-color:#FFF;
border-radius:10px;
position:absolute;
left:0;
right:0;
margin:0 auto
}
This is to make the div horizontally center not vertically middle.
Upvotes: 1