centering an image script...help!! [Archive]

Click to See Complete Forum and Search --> : centering an image script...help!!

missblue

03-03-2003, 06:04 PM

Hi,

I'm trying to center an image script in my web page...on macs its centered but on pcs its over on the lefthand side of the screen. Here's an excerpt of the code ..can anyone help me...i just want it to be in the center : ( Tried it in a table and within <DIV></DIV> and <CENTER></CENTER> but nothing works...help!!

Thanks

miss blue

<---------------------------------------------the code----------------------------------------------------------->

this is in the head....

<HEAD>
<style>
.s {
position:absolute;
left:-5000px;
top:-5000px;
}
</style>
</HEAD>

this is in the body........

<BODY>

// target of the picture-links (HTML conventions)
var target_url="_blank"

// horizontal position of the slideshow (distance to the left margin of the window)
var horizontal_pos=10

// vertical position of the slideshow (distance to the top margin of the window)
var vertical_pos=150

// number of lamellas.
var x_slices=10

// pause beween the pictures (seconds)
var pause=2

</BODY>

Nedals

03-03-2003, 06:11 PM

This code does nothing but display what you show in your body section!! Post the actual code you are using for the Mac and maybe someone can help.

missblue

03-03-2003, 06:54 PM

Hi

Thanks for info...will try <style> tags though am not sure how to 'build your image tags with the different class for Windows' ?

More advice would be great .....

Thanks

miss blue :)

missblue

03-04-2003, 02:54 PM

Hi Dave..

Here's my code...any ideas??

I've attached the.js doc

<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01
Transitional//EN">
<HTML>
<HEAD>
<TITLE>The Code</TITLE>
<style type=text/css>

</style><style>
.s {
position:absolute;
left:-5000px;
topt:-5000px;
}
</style><script language=JavaScript type=text/JavaScript>

</script></HEAD><BODY BGCOLOR=White TEXT=Black
onLoad="MM_preloadImages('images/sred.gif','images/swhite.gif')">

<TABLE WIDTH=100% HEIGHT=98% BORDER=0 align=center CELLPADDING=0
CELLSPACING=0><TR>
<TD WIDTH=100% HEIGHT=416 border=0 bordercolor=Black>
<center><p align=center> <script>
var picture = new Array()
picture[0]="images/sample1.jpg"
picture[1]="images/sample2.jpg"
picture[2]="images/sample3.jpg"
picture[3]="images/sample11.jpg"
picture[4]="images/sample12.jpg"
picture[5]="images/sample6.jpg"

var pictureurl = new Array()
pictureurl[0]="#"
pictureurl[1]="#"
pictureurl[2]="#"
pictureurl[3]="#"
pictureurl[4]="#"
pictureurl[5]="#"
pictureurl[6]="#"

var target_url="_self"

var horizontal_pos=0

var vertical_pos=150

var x_slices=40

var pause=2
// - End of JavaScript - -->
</script> <script src=lamellas.js></script>
</p></center></TD></TR><TR> <TD
HEIGHT=56 align=center valign=middle>

<OBJECT
CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
WIDTH="3"HEIGHT="3"
CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">

<PARAM name="SRC" VALUE="didili.mov">
<PARAM name="AUTOPLAY" VALUE="true">
<PARAM name="CONTROLLER" VALUE="false">
<EMBED SRC="sounds/didili.mov" WIDTH="3"
HEIGHT="3" AUTOPLAY="true"
CONTROLLER="false" PLUGINSPAGE="http://www.apple.com/quicktime/download/">

</EMBED>
</OBJECT></p>
<table width=100% height=47 border=0 cellpadding=0
cellspacing=0><TR align=center valign=bottom>
<td width=9%><div align=left>
<a href=../indexpeople.html
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image1','','images/sred.gif',1)">

<img src=images/swhite.gif name=Image1 width=56 height=46
border=0></a></div></td> <td width=81%
valign=middle>
<div align=center><font color=999999 size=4
face="Verdana,Arial,Helvetica,sans-serif">
<a
href=../indexpeople.html>back</a></font></div></td>
<td width=10%><div align=right>
<a href=documents/j.html
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image2','','images/swhite.gif',1)">

<img src=images/sred.gif name=Image2 width=56 height=46
border=0></a></div></td></TR></TABLE>

</TD></TR>
</TABLE>
</body>
</html>

--------------------------------------------------------------------------------

<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01
Transitional//EN">
<HTML>
<HEAD>
<TITLE>The Code</TITLE>
<style type=text/css>

</style><style>
.s {
position:absolute;
left:-5000px;
topt:-5000px;
}
</style><script language=JavaScript type=text/JavaScript>

</script></HEAD><BODY BGCOLOR=White TEXT=Black
onLoad="MM_preloadImages('images/sred.gif','images/swhite.gif')">

<TABLE WIDTH=100% HEIGHT=98% BORDER=0 align=center CELLPADDING=0
CELLSPACING=0><TR>
<TD WIDTH=100% HEIGHT=416 border=0 bordercolor=Black>
<center><p align=center> <script>
var picture = new Array()
picture[0]="images/sample1.jpg"
picture[1]="images/sample2.jpg"
picture[2]="images/sample3.jpg"
picture[3]="images/sample11.jpg"
picture[4]="images/sample12.jpg"
picture[5]="images/sample6.jpg"

var pictureurl = new Array()
pictureurl[0]="#"
pictureurl[1]="#"
pictureurl[2]="#"
pictureurl[3]="#"
pictureurl[4]="#"
pictureurl[5]="#"
pictureurl[6]="#"

var target_url="_self"

var horizontal_pos=0

var vertical_pos=150

var x_slices=40

var pause=2
// - End of JavaScript - -->
</script> <script src=lamellas.js></script>
</p></center></TD></TR><TR> <TD
HEIGHT=56 align=center valign=middle>

<OBJECT
CLASSID="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
WIDTH="3"HEIGHT="3"
CODEBASE="http://www.apple.com/qtactivex/qtplugin.cab">

<PARAM name="SRC" VALUE="didili.mov">
<PARAM name="AUTOPLAY" VALUE="true">
<PARAM name="CONTROLLER" VALUE="false">
<EMBED SRC="sounds/didili.mov" WIDTH="3"
HEIGHT="3" AUTOPLAY="true"
CONTROLLER="false" PLUGINSPAGE="http://www.apple.com/quicktime/download/">

</EMBED>
</OBJECT></p>
<table width=100% height=47 border=0 cellpadding=0
cellspacing=0><TR align=center valign=bottom>
<td width=9%><div align=left>
<a href=../indexpeople.html
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image1','','images/sred.gif',1)">

<img src=images/swhite.gif name=Image1 width=56 height=46
border=0></a></div></td> <td width=81%
valign=middle>
<div align=center><font color=999999 size=4
face="Verdana,Arial,Helvetica,sans-serif">
<a
href=../indexpeople.html>back</a></font></div></td>
<td width=10%><div align=right>
<a href=documents/j.html
onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('Image2','','images/swhite.gif',1)">

<img src=images/sred.gif name=Image2 width=56 height=46
border=0></a></div></td></TR></TABLE>

</TD></TR>
</TABLE>
</body>
</html>

:)

missblue

03-05-2003, 12:15 PM

Hi Dave,

Am not sure what a 'class' is here's the .js file that has to be stored at the same level as the html

Is this helpful??

thanks

: )

var imgpreload=new Array()

for (i=0;i<=picture.length;i++) {

imgpreload[i]=new Image()

imgpreload[i].src=picture[i]

}

var picturewidth

var pictureheight

var i_loop=0

var i_picture=0

var width_slice

var cliptop=0

var clipbottom

var i_clipright=1

var content=""

pause=pause*1000

function initiate() {

getcontent()

if (document.all) {

for (i=0;i<=x_slices;i++) {

var thisinners=eval("s"+i)

thisinners.innerHTML=content

var thiss=eval("document.all.s"+i+".style")

thiss.posLeft=horizontal_pos

thiss.posTop=vertical_pos

}

var thisspan = eval("document.all.s"+0)

picturewidth=thisspan.offsetWidth

pictureheight=thisspan.offsetHeight

width_slice=Math.ceil(picturewidth/x_slices)

clipbottom=pictureheight

document.all.whole.style.posLeft=horizontal_pos

document.all.whole.style.posTop=vertical_pos

i_picture++

openlamellar()

}

if (document.layers) {

for (i=0;i<=x_slices;i++) {

var thisinners=eval("document.s"+i+".document")

thisinners.write(content)

thisinners.close()

var thiss=eval("document.s"+i)

thiss.left=horizontal_pos

thiss.top=vertical_pos

}

var thisspan=eval("document.s"+0+".document")

picturewidth=thisspan.width

pictureheight=thisspan.height

width_slice=Math.ceil(picturewidth/x_slices)

clipbottom=pictureheight

document.whole.document.write(" ")

document.whole.document.close()

document.whole.left=horizontal_pos

document.whole.top=vertical_pos

i_picture++

openlamellarNN()

}

}

function openlamellar() {

clipleft=-width_slice

clipright=0

if (i_clipright<=width_slice) {

for (i=0;i<=x_slices;i++) {

var thiss=eval("document.all.s"+i+".style")

thiss.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"

clipleft+=width_slice

clipright=clipleft+i_clipright

}

i_clipright++

var timer=setTimeout("openlamellar()",20)

}

else {

clearTimeout(timer)

whole.innerHTML=content

var timer=setTimeout("changepicture()",pause)

}

}

function openlamellarNN() {

clipleft=-width_slice

clipright=0

if (i_clipright<=width_slice) {

for (i=0;i<=x_slices;i++) {

var thiss=eval("document.s"+i)

thiss.clip.left=clipleft

thiss.clip.right=clipright

thiss.clip.top=cliptop

thiss.clip.bottom=clipbottom

clipleft+=width_slice

clipright=clipleft+i_clipright

}

i_clipright++

var timer=setTimeout("openlamellarNN()",20)

}

else {

clearTimeout(timer)

document.whole.document.write(content)

document.whole.document.close()

var timer=setTimeout("changepictureNN()",2000)

}

}

function getcontent() {

content="<a href="+pictureurl[i_picture]+" target="+target_url+">"

content+="<img src="+picture[i_picture]+" border=0>"

content+="</a>"

}

function changepicture() {

i_clipright=0

clipleft=0

clipright=0

for (i=0;i<=x_slices;i++) {

var thiss=eval("document.all.s"+i+".style")

thiss.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"

}

if (i_picture>picture.length-1) {i_picture=0}

getcontent()

for (i=0;i<=x_slices;i++) {

var thisinners=eval("s"+i)

thisinners.innerHTML=content

}

i_picture++

openlamellar()

}

function changepictureNN() {

i_clipright=0

clipleft=0

clipright=0

for (i=0;i<=x_slices;i++) {

var thiss=eval("document.s"+i)

thiss.clip.left=clipleft

thiss.clip.right=clipright

thiss.clip.top=cliptop

thiss.clip.bottom=clipbottom

clipleft+=width_slice

clipright=clipleft+i_clipright

}

if (i_picture>picture.length-1) {i_picture=0}

getcontent()

for (i=0;i<=x_slices;i++) {

var thisinners=eval("document.s"+i+".document")

thisinners.write(content)

thisinners.close()

}

i_picture++

openlamellarNN()

}

document.write("<span id='whole' class='s'></span>")

for (i=0;i<=x_slices;i++) {

document.write("<span id='s"+i+"' class='s'></span>")

}

document.close()

window.onload=initiate

missblue

03-05-2003, 09:07 PM

Hi Dave,

This looks great ..am off to try it : )

Will let you know what happens

thanks lots : )

Code One

03-05-2003, 10:07 PM

<p align="center"></center>

may work .. .

Code One

missblue

03-10-2003, 11:54 AM

HI,

Thanks for all your suggestions so far...but I'm still not able to center the image I tried out the coding suggestions but cant make it work..........: (

I've ul a test page

http://www.misfit.org.uk

and have used the original code - if you look at it on a pc its way over on the left....

Any other suggestiond would be great...

thanks

:)

Nedals

03-10-2003, 01:55 PM

The picture position is controlled by the 'var horizontal_pos = 0' in the script (in the table) on the 'original.html' doc. No amount of centering with HTML tags will help. In fact you can take all that javascript and move it into the <HEAD> section and its position will still not change!! It is controlled 'absolutely', so will not vary with screen width. You can change its position by changing the value of horizontal_pos

Any help??

Code One

03-10-2003, 02:43 PM

How bout putting a table around it and turning off the border, and centering the table something like this . . .

<center><table border=0 cellspacing=0 cellpadding=0>
<td><img src="your pic" border=0></td>
</table>

------------------------------------------------>
Try that one Miss Blue and let me know how it worked.

Good Luck

Code One

Nedals

03-10-2003, 03:36 PM

code one...
As stated above, the image uses 'absolute' positioning and is NOT part of the normal document flow. It CANNOT be positioned using HTML tags. (DIV's, TABLE's, CENTER's etc)

There are some techniques that could be used but that means delving into the script that creates the animated image and that takes quite a bit of work. Of course, the easiest way to solve the problem is to create a true animated gif and then you can position it as you would any other image. But you will loose the flexibility of being able to change the image frames easily or change them 'on the fly'.

Code One

03-10-2003, 07:27 PM

all she has to do is get rid of the <div> tag. That tag is about as useful as a headache anyway. Of course the postion of the image will change when it is postioned using pixels, from x to y. I think that tag is absoulty ridiculous. Like I said she is better off using a table to position the image, and also to get rid of the <div> tag.

Code One

edit: Oh ok she isnt using a <div> tag, well then why dont she get rid of that script tag that positions it, that too is useless, . . . Miss blue I suggest you get rid of that script, that positions your image, and use a borderless table.

Co

Nedals

03-10-2003, 08:17 PM

Dave..
I downloaded the page and took a quick look at the JS script that creates the image and, totallly distracted, I must admit I missed your earlier post. Reading though the threads here, I conclude that your proposed change is a little beyond missblue (no offence meant). It will likely need a line by line explanation.
As I said, quite a bit of work. :)

Nedals

03-10-2003, 09:46 PM

missblue..
A little messing around and here's what i came up with..

In the 'original.html'
1. Move all that javascript into the <HEAD> section
2. Get rid of the <p> and <center> stuff and add the <DIV> tag as shown.
<TABLE height="98%" cellSpacing=0 cellPadding=0 width="98%" align=center border=0>
<TR><TD borderColor=black width="100%" height=416 border="0">
<div id="pict" style="position:relative; text-align:center"></div>
</TD></TR>

in the 'lamellas.js' file do the following...
1. edit lines 22-27 (approximately) like this.
// var thisinners=eval("s"+i)
var thisinners=eval('pict') // added...........
thisinners.innerHTML=content
var thiss=eval("document.all.s"+i+".style")
//thiss.position="relative"
//thiss.text-align="center"
2. comment out 37 and 38
//document.all.whole.style.posLeft=horizontal_pos
//document.all.whole.style.posTop=vertical_pos

That should get you going in IE. I did not included the changes for NS

Update
Forget this. It centered the image but the animation stopped working. I'll mess with it a bit more!! :confused:

missblue

03-11-2003, 07:02 AM

Hi,

Thanks for all this help everybody and nedals thankyou loads for trying to work the script out - it is a bit difficult for me...

:) :) :)

cyberade

03-11-2003, 10:21 AM

Try this:

In the <BODY> tag, add
onresize="self.location.reload();"

..and in the script change

var horizontal_pos=0

to

var horizontal_pos=(parseInt(document.body.clientWidth) / 2)-120

The idea is to establish the width of the browser window and center on that. If the browser window is resized the image then appears off-center so the 'onresize' tag causes the window to be reloaded.
I don't know whether this works in all browsers or not - maybe someone can comment?

Nedals

03-11-2003, 12:26 PM

After further review (too much) I came to the same conclusion as cyberade for a simple fix. Modify the latter part his script to this..
var scrWidth = (document.layers) ? window.innerWidth : document.body.clientWidth;
var horizontal_pos = parseInt(scrWidth/2)-110;
(110 not 120 because the pict width is 220)
..and it should work in IE5,IE6,NS4,NS7,Opera.

:mad: But I still going to figure out how to position this 'relatively' :mad:
:)

Dave..
I tried the position relative tag
.sWIN { position:relative; text-align: center; }
and the animation simply fell apart. The script generates multipule slices of two pictures and interlaces them (sort of) and it 'appears' that everything gets positioned 'absolutely' so each slice element can overlap another. (again, sort of)

missblue

03-13-2003, 04:14 PM

Hi Nedles,

Your code's great...its centered now on the pcs.....but the mac's not happy with it and its way over on the right...

So..I'm making 2 links on my page one for the pc and one for the mac..

RESULT!!!!!

Thanks everyone for your time and help

:)

Nedals

03-13-2003, 05:58 PM

This may interest you. I said I would work on it, but never really solved the 'relative position' issue. I re-posted to see if I could get some answers.
http://forums.webdeveloper.com/showthread.php?s=&threadid=5843

It's been recoded and is NOT cross browser friendly. I also edited a couple of the images to make them all the same size.

Nedals

03-15-2003, 02:32 PM

Greetings! missblue,

A little (no! a lot) more time and, with a lot of help from Gil, I've now completed (almost ) a cross-browser version. This was a really interesting lesson in DHTML.

http://forums.webdeveloper.com/showthread.php?s=&threadid=5843

Could you check it out on your Mac and, if you like the script, take it (after all, it is partly yours! :) ). Post a reply on the other thread to let me (us) know how it worked.