I think this is a javascript query rather than css.
The script opens and resizes images centering div on the screen. I have inserted function opendiv(id) so that one can go forward and back through the images on the webpage. This part works except that the images no longer center on the screen, they are linked to the thumbnail as top:0px and left:0px if you understand. After several actions forward and/or backward the process settles to centering correctly.
Can someone see the error ? I am not too skilful with javascript.
The code is:
<script type="text/javascript" >
function toggle(div_id) {
var el = document.getElementById(div_id);
if ( el.style.display == 'none' ) {
el.style.display = 'block';}
else {
el.style.display = 'none';}
}
function opendiv(id) {
for (i=1;i<=15;i++) { // so you can add more than 2
var divname = 'popUpDiv'+i;
var divStyle = document.getElementById(divname).style;
divStyle.display=(id==divname)?'block':'none'; //id== removed all images open up together(not centered but at top:0px left:0px of thumbnail) and blanket does not close at end
}
}
function blanket_size(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportheight = window.innerHeight; }
else {
viewportheight = document.documentElement.clientHeight; }
if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
blanket_height = viewportheight; }
else {
if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
blanket_height = document.body.parentNode.clientHeight;
} else{
blanket_height = document.body.parentNode.scrollHeight; }
}
var blanket = document.getElementById('blanket');
blanket.style.height = blanket_height + 'px';
var popUpDiv = document.getElementById(popUpDivVar);
popUpDiv_height=blanket_height/300; //300 is half popup's height
popUpDiv.style.top = popUpDiv_height + 'px';}
function window_pos(popUpDivVar) { //has to be popUpDivVar not divname!
if (typeof window.innerWidth != 'undefined') {
viewportwidth = window.innerHeight;
} else {
viewportwidth = document.documentElement.clientHeight;
}
if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
window_width = viewportwidth; } else {
if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
window_width = document.body.parentNode.clientWidth; } else {
window_width = document.body.parentNode.scrollWidth; } }
var popUpDiv = document.getElementById(popUpDivVar);
window_width=window_width/2.5-400; //400 is half popup's width
popUpDiv.style.left = window_width + 'px';
}
function popup(windowname) {
blanket_size(windowname);
window_pos(windowname);
toggle('blanket');
toggle(windowname);
}
</script>
<link rel="stylesheet" type="text/css" href="css/newstyle.css">
<link rel="stylesheet" type="text/css" href="css/gridtest.css">
<div class="grid"><!----this is for positioning images--->
<div class="assortment" />
</div><!-- end of assortment -->
<div id="blanket" style="display:none;"></div>
<div class="pop1" />
<div id="popUpDiv1" style="display:none;"><!---necessary even though in newstyle.css----->
<a href="#" onclick="popup('popUpDiv1')"><img alt="Aida Vita(4)" src="MasterImage/Aida Vita(4).jpg" class="resize" /></a><br />Aida Vita at Malaga 2012<input type="button" value="forward" onclick="opendiv('popUpDiv2');"></a></div>
<a href="#" onclick="popup('popUpDiv1')"><img alt="Aida Vita(4)" src="MasterImage/Aida Vita(4).jpg" height="160" width="241" /></a></div>
<div class="pop2" />
<div id="popUpDiv2" style="display:none;">
<a href="#" onclick="popup('popUpDiv2')"><img alt="Arcadia(4)" src="MasterImage/Arcadia(4).jpg" class="resize"/></a><br /><input type="button" value="back" onClick="opendiv('popUpDiv1');">Arcadia at Malaga 2012<input type="button" value="forward" onclick="opendiv('popUpDiv3');"></div>
<a href="#" onclick="popup('popUpDiv2')"><img alt="Arcadia(4)" src="MasterImage/Arcadia(4).jpg" height="162" width="249" /></a></div>
<div class="pop3" />
<div id="popUpDiv3" style="display:none;">
<a href="#" onclick="popup('popUpDiv3')"><img alt="Aida Vita(2)" src="MasterImage/Aida Vita(2).jpg" class="resize"/></a><br /><input type="button" value="back" onClick="opendiv('popUpDiv2');">Aida Vita at Malaga 2012<input type="button" value="forward" onclick="opendiv('popUpDiv4');"></div>
<a href="#" onclick="popup('popUpDiv3')"><img alt="Aida Vita(2)" src="MasterImage/Aida Vita(2).jpg" height="160" width="234" /></a></div>
<div class="pop4" />
<div id="popUpDiv4" style="display:none;">
<a href="#" onclick="popup('popUpDiv4')"><img alt="Costa Neo Romantica(10)" src="MasterImage/NeoRomantica%20(10).jpg" class="resize" /></a><br /><input type="button" value="back" onClick="opendiv('popUpDiv3');">Costa NeoRomantica at Malaga 2012</div>
<a href="#" onclick="popup('popUpDiv4')"><img alt="Costa Neo Romantica(10)" src="MasterImage/NeoRomantica%20(10).jpg" height="160" width="241" /></a></div>
</div><!----end of div grid--->