How to center something in javascript

[pwallyholly]

I have a fading slideshow on my website that is done in javascript. I would like the slideshow to appear centered on the page, but nothing I have tried thus far has worked. Any ideas? Here's the code if that helps:




<div id="EmilyPictureBackground">
<img id="EmilyPicture" alt="slide show" width="900" src="http://i41.tinypic.com/20igeo0.jpg" height="350" />
</div>



<script type="text/javascript">

// Browser Slide-Show script. With image cross fade effect for those browsers
// that support it.
// Script copyright (C) 2004-2008 www.cryer.co.uk.
// Script is free to use provided this copyright header is included.

var FadeDurationMS=1000;
function SetOpacity(object,opacityPct)
{
// IE.
object.style.filter = 'alpha(opacity=' + opacityPct + ')';
// Old mozilla and firefox
object.style.MozOpacity = opacityPct/100;
// Everything else.
object.style.opacity = opacityPct/100;
}
function ChangeOpacity(id,msDuration,msStart,fromO,toO)
{
var element=document.getElementById(id);
var msNow = (new Date()).getTime();
var opacity = fromO + (toO - fromO) * (msNow - msStart) / msDuration;
if (opacity>=100)
{
SetOpacity(element,100);
element.timer = undefined;
}
else if (opacity<=0)
{
SetOpacity(element,0);
element.timer = undefined;
}
else
{
SetOpacity(element,opacity);
element.timer = window.setTimeout("ChangeOpacity('" + id + "'," + msDuration + "," + msStart + "," + fromO + "," + toO + ")",10);
}
}
function FadeInImage(foregroundID,newImage,backgroundID)
{
var foreground=document.getElementById(foregroundID);
if (foreground.timer) window.clearTimeout(foreground.timer);
if (backgroundID)
{
var background=document.getElementById(backgroundID);
if (background)
{
if (background.src)
{
foreground.src = background.src;
SetOpacity(foreground,100);
}
background.src = newImage;
background.style.backgroundImage = 'url(' + newImage + ')';
background.style.backgroundRepeat = 'no-repeat';
var startMS = (new Date()).getTime();
foreground.timer = window.setTimeout("ChangeOpacity('" + foregroundID + "'," + FadeDurationMS + "," + startMS + ",100,0)",10);
}
} else {
foreground.src = newImage;
}
}
var slideCache = new Array();
function RunSlideShow(pictureID,backgroundID,imageFiles,dis playSecs)
{
var imageSeparator = imageFiles.indexOf(";");
var nextImage = imageFiles.substring(0,imageSeparator);
FadeInImage(pictureID,nextImage,backgroundID);
var futureImages = imageFiles.substring(imageSeparator+1,imageFiles.l ength)+ ';' + nextImage;
setTimeout("RunSlideShow('"+pictureID+"','"+backgr oundID+"','"+futureImages+"',"+displaySecs+")",dis playSecs*1000);
// Cache the next image to improve performance.
imageSeparator = futureImages.indexOf(";");
nextImage = futureImages.substring(0,imageSeparator);
if (slideCache[nextImage] == null)
{
slideCache[nextImage] = new Image;
slideCache[nextImage].src = nextImage;
}
}
</script>



<script type="text/javascript">
RunSlideShow("EmilyPicture","EmilyPictureBackgroun d","http://i41.tinypic.com/20igeo0.jpg;http://i39.tinypic.com/hvdjch.jpg;http://i43.tinypic.com/2eovdxl.jpg",4);
</script>

[MagicToolbox]

Re: How to center something in javascript

Try centering the div using CSS. For example:

#EmilyPictureBackground {text-align:center;}

Or:

#EmilyPictureBackground {margin:0 auto;width:740px;}

If you can't figure it out, we provide free support for our JavaScript slideshow which is easy to center on the page.