A close button and text on top of centered fluid images
(done without css3 and jquery)
DEMOS:
liszt (position: absolute, some text on top)
chopin (position: fixed, no text on top)
Centering elements (horizontally and vertically)
Using javascript, we can horizontally and vertically center virtually any absolute or fixed direct child of the body (a div, for instance) by doing something like:
<div id="some_div" style="position: absolute; width: 400px; height: 350px; border: 1px solid black">centered</div>
<script>
var left_pos=(window.innerWidth-document.getElementById('some_div').clientWidth)/2;
var top_pos=(window.innerHeight-document.getElementById('some_div').clientHeight)/2;
document.getElementById('some_div').style.left=left_pos+"px";
document.getElementById('some_div').style.top=top_pos+"px";
</script>
The result of leaving out the width or the height, or both, is an element whose width/height will (partially or completely) depend on its content.
Examples:
If we apply this method to images, we should not give them both a value for width and a value for height since that might destroy their width/height ratio. And if we want the images to be fluid, we should use percentages, not pixels. We'll give the images only a percent-height here (not only a percent-width) since that allows us to make them 'full window' (height: 100%).
Example (height of the image: 80%):
<!-- I turned the javascript into a function used by the image's onload handler-->
<script>
function center_fluid()
{
var left_pos=(window.innerWidth-document.getElementById('some_img').clientWidth)/2;
var top_pos=(window.innerHeight-document.getElementById('some_img').clientHeight)/2;
document.getElementById('some_img').style.left=left_pos+"px";
document.getElementById('some_img').style.top=top_pos+"px";
}
</script>
<img id="some_img" alt="" style="position: absolute; height: 80%; border: 1px solid black;" src="chopin.jpg" onload="center_fluid()">
A close button on top of centered fluid images
We can combine the 'div-method' and the 'image-method' to produce a fluid image that has a close button on top of it. We have to make sure that:
- the image and the div have the same left position: document.getElementById('some_div').style.left=document.getElementById('some_img').style.left;
- the image and the div have the same top position: document.getElementById('some_div').style.top=document.getElementById('some_img').style.top;
- the image and the div have the same width: document.getElementById('some_div').style.width=document.getElementById('some_img').clientWidth+"px";
- the image and the div have the same position type (absolute or fixed): document.getElementById('some_div').style.position=document.getElementById('some_img').style.position;
- the div's z-index is higher than the image's z-index: document.getElementById('some_div').style.zIndex=document.getElementById('some_img').style.zIndex+1;
- the close button inside the div has float: right; as this only works if 'some_div' is the container for the element (div, span, whatever we like) where the button is located, we must have: <div id="some_div" ><div style="float: right">X</div></div>.
This is the result (I added some inline css for the button and an alert telling that the close button is not working yet):
<script>
function center_fluid()
{
var left_pos=(window.innerWidth-document.getElementById('some_img').clientWidth)/2;
var top_pos=(window.innerHeight-document.getElementById('some_img').clientHeight)/2;
document.getElementById('some_img').style.left=left_pos+"px";
document.getElementById('some_img').style.top=top_pos+"px";
document.getElementById('some_div').style.left=document.getElementById('some_img').style.left;
document.getElementById('some_div').style.top=document.getElementById('some_img').style.top;
document.getElementById('some_div').style.width=document.getElementById('some_img').clientWidth+"px";
document.getElementById('some_div').style.position=document.getElementById('some_img').style.position;
document.getElementById('some_div').style.zIndex=document.getElementById('some_img').style.zIndex+1;
}
</script>
<div id="some_div"><div style="float: right; font-family: verdana; font-size:14px; background: black; color: white; padding-left: 3px; padding-right: 3px; cursor: pointer" onclick="alert('Close button not working yet')">X</div></div>
<img id="some_img" alt="" style="position: absolute; height: 80%; border: 1px solid black;" src="http://www.library.yale.edu/musiclib/exhibits/chopin/large_jpg/ChopinPoster_largejpg.jpg" onload="center_fluid()">
Text on top of centered fluid images
Of course, a close button is not the only thing we can put on top of a fluid image. We can also add text. The following lines would be a possible way to do it:
<script>
function center_fluid()
{
var left_pos=(window.innerWidth-document.getElementById('some_img').clientWidth)/2;
var top_pos=(window.innerHeight-document.getElementById('some_img').clientHeight)/2;
document.getElementById('some_img').style.left=left_pos+"px";
document.getElementById('some_img').style.top=top_pos+"px";
document.getElementById('some_div').style.left=document.getElementById('some_img').style.left;
document.getElementById('some_div').style.top=document.getElementById('some_img').style.top;
document.getElementById('some_div').style.width=document.getElementById('some_img').clientWidth+"px";
document.getElementById('some_div').style.position=document.getElementById('some_img').style.position;
document.getElementById('some_div').style.zIndex=document.getElementById('some_img').style.zIndex+1;
}
</script>
<div id="some_div"><div style="float: right; font-family: verdana; font-size:14px; background: black; color: white; padding-left: 3px; padding-right: 3px; cursor: pointer" onclick="alert('Close button not working yet')">X</div>
<div style="text-align: center; font-family: verdana; font-size: 11px; margin-left: 1px; margin-top: 1px; background: #dedede">Some text</div></div>
<img id="some_img" alt="" style="position: absolute; height: 80%; border: 1px solid black;" src="http://www.library.yale.edu/musiclib/exhibits/chopin/large_jpg/ChopinPoster_largejpg.jpg" onload="center_fluid()">
Dynamically creating the image and the div used for the close button / the text
In all the above examples, the div and the image are static elements. We can use createElement and appendChild to generate them with the help of a script:
<script>
var create_the_div_and_the_img = document.createElement("DIV");
create_the_div_and_the_img.innerHTML="<div id='some_div'><div style='float: right; font-family: verdana; font-size:14px; background: black; color: white; padding-left: 3px; padding-right: 3px; cursor: pointer' onclick='alert(\"Close button not working yet\")'>X</div><div style='text-align: center; font-family: verdana; font-size: 11px; margin-left: 1px; margin-top: 1px; background: #dedede'>Some text</div></div><img id='some_img' alt='' style='position: absolute; height: 80%; border: 1px solid black;' src='http://www.library.yale.edu/musiclib/exhibits/chopin/large_jpg/ChopinPoster_largejpg.jpg' onload='center_fluid()'>"
document.documentElement.appendChild(create_the_div_and_the_img)
function center_fluid()
{
var left_pos=(window.innerWidth-document.getElementById('some_img').clientWidth)/2;
var top_pos=(window.innerHeight-document.getElementById('some_img').clientHeight)/2;
document.getElementById('some_img').style.left=left_pos+"px";
document.getElementById('some_img').style.top=top_pos+"px";
document.getElementById('some_div').style.left=document.getElementById('some_img').style.left;
document.getElementById('some_div').style.top=document.getElementById('some_img').style.top;
document.getElementById('some_div').style.width=document.getElementById('some_img').clientWidth+"px";
document.getElementById('some_div').style.position=document.getElementById('some_img').style.position;
document.getElementById('some_div').style.zIndex=document.getElementById('some_img').style.zIndex+1;
}
</script>
Example here.
We can take this a step further by making it so that the appearance of the fluid centered image(s), its/their position type (absolute or fixed) and size and the text on top are only activated via a click on a link. And we must make sure, of course, that the close button starts doing what its name suggests. The following lines accomplish this:
<script>
var create_the_div_and_the_img = document.createElement("DIV");
function create_div_and_img()
{
create_the_div_and_the_img.innerHTML="<div id='some_div'><div style='float: right; font-family: verdana; font-size:14px; background: black; color: white; padding-left: 3px; padding-right: 3px; cursor: pointer' onclick='document.documentElement.removeChild(create_the_div_and_the_img)'>X</div><div id='img_info' style='text-align: center; font-family: verdana; font-size: 11px; margin-left: 1px; margin-top: 1px; background: #dedede'></div></div><img id='some_img' alt='' style='border: 1px solid black;' onload='center_fluid()'>"
document.documentElement.appendChild(create_the_div_and_the_img)
}
function center_fluid()
{
var left_pos=(window.innerWidth-document.getElementById('some_img').clientWidth)/2;
var top_pos=(window.innerHeight-document.getElementById('some_img').clientHeight)/2;
document.getElementById('some_img').style.left=left_pos+"px";
document.getElementById('some_img').style.top=top_pos+"px";
document.getElementById('some_div').style.left=document.getElementById('some_img').style.left;
document.getElementById('some_div').style.top=document.getElementById('some_img').style.top;
document.getElementById('some_div').style.width=document.getElementById('some_img').clientWidth+"px";
document.getElementById('some_div').style.position=document.getElementById('some_img').style.position;
document.getElementById('some_div').style.zIndex=document.getElementById('some_img').style.zIndex+1;
}
function center_fluid_img(which_img, which_height, which_position_type, which_text)
{
if(!document.getElementById('some_img')&&!document.getElementById('some_img'))create_div_and_img();
document.getElementById('some_img').src=which_img;
document.getElementById('some_img').style.height=which_height+'%';
document.getElementById('some_img').style.position=which_position_type;
document.getElementById('img_info').innerHTML=which_text;
if(document.getElementById('img_info').innerHTML=='undefined'){document.getElementById('img_info').style.display='none'} else {document.getElementById('img_info').style.display='block'};
}
</script>
USAGE:
Image with text (parameters: url, height, absolute/fixed, image-info):
<a href="javascript: void(0)" onclick="center_fluid_img('http://alfahir.hu/sites/barikad.hu/files/2010/december/januar/kata/liszt_1.jpg','60','absolute', 'liszt'); return false">liszt</a>
Image without text (parameters: url, height, absolute/fixed):
<a href="javascript: void(0)" onclick="center_fluid_img('http://www.library.yale.edu/musiclib/exhibits/chopin/large_jpg/ChopinPoster_largejpg.jpg','40','fixed'); return false">chopin</a>
Example
here.
(We added a function center_fluid_img, the appendChild is now done via a function ('create_div_and_img()'), removeChild is used for destroying the image (and the div) when the close button is clicked on, in create_the_div_and_the_img.innerHTML we don't have values anymore for the image's src, height and position type, the div for the image-info has a ID now: 'img_info', and no initial text, and finally we added text links for the images).
The end: adding fade, resize, max-width and min-width
In certain browsers (IE!), loading an image may sometimes produce a jumpy effect depending on loading time. We can avoid this by giving the div and the image zero opacity onload, and then let them fade in at a certain speed.
Let's also make it so that the image and the div fade out when the close button is clicked on.
And finally, let's make sure that the div and the image not only center when they are loaded via a click on a link, but also when the window is resized, and that they don't get too small or too big (by giving them a max-height and a min-height).
Here's the final version of the script. The parts in red may be edited:
<script>
var create_the_div_and_the_img = document.createElement("DIV");
function create_div_and_img()
{
create_the_div_and_the_img.innerHTML="<div id='some_div'><div style='float: right;
font-family: verdana; font-size:14px; background: black; color: white; padding-left: 3px; padding-right: 3px; cursor: pointer' onclick='
fade_out(); setTimeout(\"document.documentElement.removeChild(create_the_div_and_the_img)\",800)'>X</div><div id='img_info' style='text-align: center;
font-family: verdana; font-size: 11px; margin-left: 1px; margin-top: 1px; background: #dedede'></div></div><img id='some_img' alt='' style='
border: 1px solid black; max-height: 100%; min-height: 100px' onload='
fade_index=0; fade_in(); center_fluid()'>"
document.documentElement.appendChild(create_the_div_and_the_img)
}
var fade_index;
function fade_in() {
document.getElementById('some_img').style.opacity = fade_index/100;
document.getElementById('some_div').style.opacity = fade_index/100;
fade_index += 7;
goIn = setTimeout("fade_in()", 50);
if(fade_index >= 100)
clearTimeout(goIn);
}
function fade_out() {
document.getElementById('some_img').style.opacity = fade_index/100;
document.getElementById('some_div').style.opacity = fade_index/100;
fade_index -= 7;
goOut = setTimeout("fade_out()", 50);
if(fade_index <= 0)
clearTimeout(goOut);
}
function center_fluid()
{
var left_pos=(window.innerWidth-document.getElementById('some_img').clientWidth)/2;
var top_pos=(window.innerHeight-document.getElementById('some_img').clientHeight)/2;
document.getElementById('some_img').style.left=left_pos+"px";
document.getElementById('some_img').style.top=top_pos+"px";
document.getElementById('some_div').style.left=document.getElementById('some_img').style.left;
document.getElementById('some_div').style.top=document.getElementById('some_img').style.top;
document.getElementById('some_div').style.width=document.getElementById('some_img').clientWidth+"px";
document.getElementById('some_div').style.position=document.getElementById('some_img').style.position;
document.getElementById('some_div').style.zIndex=document.getElementById('some_img').style.zIndex+1;
}
function center_fluid_img(which_img, which_height, which_position_type, which_text) {
if(!document.getElementById('some_img')&&!document.getElementById('some_img'))create_div_and_img();
document.getElementById('some_img').style.opacity = 0;
document.getElementById('some_div').style.opacity = 0;
document.getElementById('some_img').src=which_img;
document.getElementById('some_img').style.height=which_height+'%';
document.getElementById('some_img').style.position=which_position_type;
document.getElementById('img_info').innerHTML=which_text;
if(document.getElementById('img_info').innerHTML=='undefined'){document.getElementById('img_info').style.display='none'} else {document.getElementById('img_info').style.display='block'};
}
window.onresize=function(){center_fluid()}
</script>
USAGE:
Image with text (parameters: url, height, absolute/fixed, image-info):
<a href="javascript: void(0)" onclick="center_fluid_img('http://alfahir.hu/sites/barikad.hu/files/2010/december/januar/kata/liszt_1.jpg', '60', 'absolute', 'liszt'); return false">liszt</a>
Image without text (parameters: url, height, absolute/fixed):
<a href="javascript: void(0)" onclick="center_fluid_img('http://www.library.yale.edu/musiclib/exhibits/chopin/large_jpg/ChopinPoster_largejpg.jpg', '40', 'fixed'); return false">chopin</a>
Arie Molendijk, mesdomaines.nu