CSS positioning with javascript [Archive]

johnmorris2801

06-01-2009, 07:48 PM

Hi,

I am building a site using the Image Thumbnail viewer on this site. I have created the site and done all the css but when i insert a referal to the thumbnailviewer.js file it moves all my text up in the titles and mess's with the css.

Can someone look at the .js file and offer any suggestions? im unsure with java script, is there any reason why the .js file should alter the css?

Please see code below

but other than that the image viewer works! lol

any help would be appreciated!

[thumbnailviewer.js]
// -------------------------------------------------------------------
// Image Thumbnail Viewer Script- By Dynamic Drive, available at: http://www.dynamicdrive.com
// Last updated: July 7th, 2008- Fixed enlarged image not showing in IE sometimes
// -------------------------------------------------------------------

var thumbnailviewer={
enableTitle: true, //Should "title" attribute of link be used as description?
enableAnimation: true, //Enable fading animation?
definefooter: '<div class="footerbar">CLOSE X</div>', //Define HTML for footer interface
defineLoading: '<img src="loading.gif" /> Loading Image...', //Define HTML for "loading" div

/////////////No need to edit beyond here/////////////////////////

scrollbarwidth: 16,
opacitystring: 'filter:progid:DXImageTransform.Microsoft.alpha(opacity=10); -moz-opacity: 0.1; opacity: 0.1',
targetlinks:[], //Array to hold links with rel="thumbnail"

createthumbBox:function(){
//write out HTML for Image Thumbnail Viewer plus loading div
document.write('<div id="thumbBox" onClick="thumbnailviewer.closeit()"><div id="thumbImage"></div>'+this.definefooter+'</div>')
document.write('<div id="thumbLoading">'+this.defineLoading+'</div>')
this.thumbBox=document.getElementById("thumbBox")
this.thumbImage=document.getElementById("thumbImage") //Reference div that holds the shown image
this.thumbLoading=document.getElementById("thumbLoading") //Reference "loading" div that will be shown while image is fetched
this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
},

centerDiv:function(divobj){ //Centers a div element on the page
var ie=document.all && !window.opera
var dom=document.getElementById
var scroll_top=(ie)? this.standardbody.scrollTop : window.pageYOffset
var scroll_left=(ie)? this.standardbody.scrollLeft : window.pageXOffset
var docwidth=(ie)? this.standardbody.clientWidth : window.innerWidth-this.scrollbarwidth
var docheight=(ie)? this.standardbody.clientHeight: window.innerHeight
var docheightcomplete=(this.standardbody.offsetHeight>this.standardbody.scrollHeight)? this.standardbody.offsetHeight : this.standardbody.scrollHeight //Full scroll height of document
var objwidth=divobj.offsetWidth //width of div element
var objheight=divobj.offsetHeight //height of div element
var topposition=(docheight>objheight)? scroll_top+docheight/2-objheight/2+"px" : scroll_top+10+"px" //Vertical position of div element: Either centered, or if element height larger than viewpoint height, 10px from top of viewpoint
divobj.style.left=docwidth/2-objwidth/2+"px" //Center div element horizontally
divobj.style.top=Math.floor(parseInt(topposition))+"px"
divobj.style.visibility="visible"

[html code]

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link href="css/layout.css" rel="stylesheet" type="text/css" />

</head>
<script src="java/thumbnailviewer.js" type="text/javascript">

/***********************************************
* Image Thumbnail Viewer Script- © Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for legal use.
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>
<body>
<div class="maincontainer">
<div class="header">
<p>galleries</p>
</div>

<div class="sub_header">
<h5>mammals</h5>
<h3>portraits</h3>
<div class="pages">
<p>page <span class="current">1</span> <a href="galleries_mammals_portraits_2.html">2</a> <a href="galleries_mammals_portraits_3.html">3</a></p>
</div>

</div>

<div class="nav">
<p><a href="index.html">home ></a></p>
<ul>
<li><a href="biography.html">biography ></a></li>
<li class="onstate"><a href="galleries.html">galleries ></a></li>
<li><a href="print.html">in print ></a></li>
<li><a href="news.html">news ></a></li>
<li><a href="latest.html">latest images ></a></li>
<li><a href="wild.html">wild nature ></a></li>
<li><a href="contact.html">contact ></a></li>
</ul>
<div class="nav_footer">
<h4>abc photographer</h4>
<h3>images of wild nature</h3>
</div>
</div>

<div class="content">
<div class="four_col"> <a href="images/galleries/gallery/Autumn/FallowDeer_fawn_AP1.GETTY.jpg" alt="Photo Mammals Portraits" rel="thumbnail"><img src="images/galleries/gallery small/Autumn/FallowDeer_fawn_AP1.GETTY.jpg" alt="mountain hare" width="145" height="145" border="0" /></a>
<a href="images/galleries/gallery/Autumn/FallowDeer_fawn_AP1.GETTY.jpg" alt="Photo Mammals Portraits" rel="thumbnail"><img src="images/galleries/gallery small/Autumn/FallowDeer_fawn_AP1.GETTY.jpg" alt="mountain hare" width="145" height="145" border="0" /></a><a href="images/galleries/gallery/Autumn/FallowDeer_fawn_AP1.GETTY.jpg" alt="Photo Mammals Portraits" rel="thumbnail"><img src="images/galleries/gallery small/Autumn/FallowDeer_fawn_AP1.GETTY.jpg" alt="mountain hare" width="145" height="145" border="0" /></a>
</div>

<div class="four_col"> <img src="images/galleries/mammals/galleries_mammals_photo_2.jpg" alt="Photo Mammals Portraits" /> <img src="images/galleries/mammals/galleries_mammals_photo_6.jpg" alt="Photo Mammals Portriats" /> <img src="images/galleries/mammals/galleries_mammals_photo_10.jpg" alt="Photo Mammals Portriats" /> </div>

<div class="four_col"> <img src="images/galleries/mammals/galleries_mammals_photo_3.jpg" alt="Photo Mammals Portraits" /> <img src="images/galleries/mammals/galleries_mammals_photo_7.jpg" alt="Photo Mammals Portriats" /> <img src="images/galleries/mammals/galleries_mammals_photo_11.jpg" alt="Photo Mammals Portriats" /> </div>

<div class="four_col"> <img src="images/galleries/mammals/galleries_mammals_photo_4.jpg" alt="Photo Mammals Portraits" /> <img src="images/galleries/mammals/galleries_mammals_photo_8.jpg" alt="Photo Mammals Portriats" /> <img src="images/galleries/mammals/galleries_mammals_photo_12.jpg" alt="Photo Mammals Portriats" /> </div>

</div>

<div class="clear">
<p> </p>
</div>
</div>

</body>
</html>

[css]

/*javascript gallery */

#thumbBox{ /*Outermost DIV for thumbnail viewer*/
position: absolute;
left: 0;
top: 0;
width: auto;
padding: 10px;
padding-bottom: 0;
background: #d8d5cc;
visibility: hidden;
z-index: 10;
cursor: hand;
cursor: pointer;
}

#thumbBox .footerbar{ /*Footer DIV of thumbbox that contains "close" link */
font: bold 14px Tahoma;
letter-spacing: 5px;
line-height: 1.1em;
color: white;
padding: 5px 0;
text-align: right;

}

#thumbBox #thumbImage{ /*DIV within thumbbox that holds the enlarged image */
background-color: white;
font-family:"Myriad Pro Light", "Century Gothic";
font-size:18px;
color:#968d78;
font-weight: normal;
text-align:centre;
}

#thumbLoading{ /*DIV for showing "loading" status while thumbbox is being generated*/
position: absolute;
visibility: hidden;
border: 1px solid black;
background-color: #EFEFEF;
padding: 5px;
z-index: 5;
}