By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,474 Members | 1,283 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,474 IT Pros & Developers. It's quick & easy.

Please help - question

P: n/a
Could someone help me with how to center or pocission this document to the
center of the page?

<body onload="ImageBook()">
<script type="text/javascript">

// 7 variables to control behavior
var Book_Image_Width=240;
var Book_Image_Height=325;
var Book_Border=true;
var Book_Border_Color="gray";
var Book_Speed=15;
var Book_NextPage_Delay=1500; //1 second=1000
var Book_Vertical_Turn=0;

// array to specify images and optional links. At least 4
// If Link is not needed keep it ""

Book_Image_Sources=new Array(
"photo1.jpg","",
"photo2.jpg","",
"photo3.jpg","",
"photo4.jpg","" // NOTE No comma after last line
);

var B_LI,B_MI,B_RI,B_TI,B_Angle=0,B_CrImg=6,B_MaxW,B_D irection=1;
var B_MSz,B_Stppd=false;B_Pre_Img=new Array(Book_Image_Sources.length);

function ImageBook(){
if(document.getElementById){
for(i=0;i<Book_Image_Sources.length;i+=2){
B_Pre_Img[i]=new Image();B_Pre_Img[i].src=Book_Image_Sources[i]}
Book_Div=document.getElementById("Book");
B_LI=document.createElement("img");Book_Div.append Child(B_LI);
B_RI=document.createElement("img");Book_Div.append Child(B_RI);
B_MI=document.createElement("img");Book_Div.append Child(B_MI);
B_LI.style.position=B_MI.style.position=B_RI.style .position="absolute";
B_LI.style.zIndex=B_RI.style.zIndex=0;B_MI.style.z Index=1;
B_LI.style.top=(Book_Vertical_Turn?Book_Image_Heig ht+1:0)+"px";
B_LI.style.left=0+"px";
B_MI.style.top=0+"px";
B_MI.style.left=(Book_Vertical_Turn?0:Book_Image_W idth+1)+"px";
B_RI.style.top=0+"px";
B_RI.style.left=(Book_Vertical_Turn?0:Book_Image_W idth+1)+"px";
B_LI.style.height=Book_Image_Height+"px";
B_MI.style.height=Book_Image_Height+"px";
B_RI.style.height=Book_Image_Height+"px";
B_LI.style.width=Book_Image_Width+"px";
B_MI.style.width=Book_Image_Width+"px";
B_RI.style.width=Book_Image_Width+"px";
if(Book_Border){

B_LI.style.borderStyle=B_MI.style.borderStyle=B_RI .style.borderStyle="solid"
;
B_LI.style.borderWidth=1+"px";
B_MI.style.borderWidth=1+"px";
B_RI.style.borderWidth=1+"px";

B_LI.style.borderColor=B_MI.style.borderColor=B_RI .style.borderColor=Book_Bo
rder_Color}
B_LI.src=B_Pre_Img[0].src;
B_LI.lnk=Book_Image_Sources[1];
B_MI.src=B_Pre_Img[2].src;
B_MI.lnk=Book_Image_Sources[3];
B_RI.src=B_Pre_Img[4].src;
B_RI.lnk=Book_Image_Sources[5];
B_LI.onclick=B_MI.onclick=B_RI.onclick=B_LdLnk;
//B_LI.onmouseover=B_MI.onmouseover=B_RI.onmouseover =B_Stp;
B_LI.onmouseout=B_MI.onmouseout=B_RI.onmouseout=B_ Rstrt;
BookImages()}}

function BookImages(){
if(!B_Stppd){
if(Book_Vertical_Turn){
B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_I mage_Height));
MidOffset=!B_Direction?Book_Image_Height+1:Book_Im age_Height-B_MSz;
B_MI.style.top=MidOffset+"px";
B_MI.style.height=B_MSz+"px"}
else{ B_MSz=Math.abs(Math.round(Math.cos(B_Angle)*Book_I mage_Width));
MidOffset=B_Direction?Book_Image_Width+1:Book_Imag e_Width-B_MSz;
B_MI.style.left=MidOffset+"px";
B_MI.style.width=B_MSz+"px"}
B_Angle+=Book_Speed/720*Math.PI;
if(B_Angle>=Math.PI/2&&B_Direction){
B_Direction=0;
if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
B_MI.src=B_Pre_Img[B_CrImg].src;
B_MI.lnk=Book_Image_Sources[B_CrImg+1];
B_CrImg+=2}
if(B_Angle>=Math.PI){
B_Direction=1;
B_TI=B_LI;
B_LI=B_MI;
B_MI=B_TI;
if(Book_Vertical_Turn)B_MI.style.top=0+"px";
else B_MI.style.left=Book_Image_Width+1+"px";
B_MI.src=B_RI.src;
B_MI.lnk=B_RI.lnk;

setTimeout("Book_Next_Delay()",Book_NextPage_Delay )}
else setTimeout("BookImages()",50)}
else setTimeout("BookImages()",50)}

function Book_Next_Delay(){
if(B_CrImg==Book_Image_Sources.length)B_CrImg=0;
B_RI.src=B_Pre_Img[B_CrImg].src;
B_RI.lnk=Book_Image_Sources[B_CrImg+1];
B_MI.style.zIndex=2;
B_LI.style.zIndex=1;
B_Angle=0;
B_CrImg+=2;
setTimeout("BookImages()",50)}

function B_LdLnk(){if(this.lnk)window.location.href=this.ln k}
function
B_Stp(){B_Stppd=true;this.style.cursor=this.lnk?"p ointer":"default"}
function B_Rstrt(){B_Stppd=false}
</script>
<div id="Book" style="position:relative">
<p align="left">
<img src="placeholder.gif" width="144" height="227">
</div>
</body>
Jul 20 '05 #1
Share this Question
Share on Google+
1 Reply


P: n/a
Brian Wilson wrote:
Could someone help me with how to center or pocission this document to the
center of the page?


How about this approach, use clientWidth to center it? You could shorten
this up, I wanted to see if it would work..

var alignment="middle"; //"left";
var leftedge;

if (alignment=="left") {
B_LI.style.left=0+"px";
B_MI.style.left=(Book_Vertical_Turn?0:Book_Image_W idth+1)+"px";
B_RI.style.left=(Book_Vertical_Turn?0:Book_Image_W idth+1)+"px";
}
if (alignment=="middle") {
leftedge=(document.body.clientWidth-(2*Book_Image_Width))/2;
B_LI.style.left=leftedge+"px";
B_MI.style.left=(Book_Vertical_Turn?leftedge:lefte dge+Book_Image_Width+1)+"px";

B_RI.style.left=(Book_Vertical_Turn?leftedge:lefte dge+Book_Image_Width+1)+"px";
}

// if(Book_Vertical_Turn){
....
B_MI.style.left=leftedge+MidOffset+"px";

//if(B_Angle>=Math.PI){
....
B_MI.style.left=leftedge+Book_Image_Width+1+"px";

<div id="Book" style="position:relative">
<img src="placeholder.gif" width="144" height="227">
</div>

Jul 20 '05 #2

This discussion thread is closed

Replies have been disabled for this discussion.