This is related to http://forums.webdeveloper.com/showthread.php?s=&threadid=5251 regarding positioning a Javascript animated image.
I'm TRYING to place a 'clipped' image RELATIVE to a table cell. The only way to get the clipping to work is to use 'position:absolute', but the positioning is no longer controlled by the table. In fact I have no idea what controls it. The clipped image drops down about 100px and moves right about 10px. Strange!
I am aware of all the fancy tricks to get the table cell position and then use absolute position control. That's NOT what I want!
Are there some magical CSS tricks that will solve the problem?
Declare the TD "position: relative" and then place an object declared "position: absolute" inside that TD.<html><head><title>Untitled</title>
<style type="text/css">
#pict { position:absolute; clip:rect(0,20,200,0) }
</style>
</head>
<body bgcolor="#ffffff">
<center>
<table width=260 border=1>
<tr>
<td height=240 align="center" style="position: relative">
<div id="frame">
<span id="pict"><img src="sample1.jpg" width=220 height=200></span>
</div>
</td>
</tr>
</table>
</center>
</body>
</html>I added commas to the "clip", because NS 4 wants commas and IE doesn't seem to care.
Nedals
03-13-2003, 02:23 PM
Gil,
Thanks for your response. It worked as advertised but has not solved the problem. Perhaps my example didn't really represent what I'm TRYING to do.
Here's a link to the working animation. Give it a couple of seconds to download if you're on a modem. There are 6 moderately sized images. I've included comments in the code to help understand what's happening.
http://www.fulspec.com/test/rollingblind.html
I'm thinking this should be in the DHTML forum, but it started here, so there we are!
Gil.
Yes, and I've used it to order the layers on a page but did not think of using it here. Anyway, I added your suggestion but, alas, to no avail. For simplicity, I added <center> tags around the <div> and edited out the X/Y positioning (and tried other things). The effect fell apart!
The plan:
position the animation as I would any image tag
I think I'll approach the problem a different way. Get the position of a 'marker' element and use absolute positioning as suggested in the original post. To be honest, the effect is not mine. It came from the original post. I re-coded it to understand what's going on.
Again, thanks! :)
Too much time later:
Here's the image tag solution
http://www.fulspec.com/test/rollingblind1.html
gil davis
03-14-2003, 05:57 AM
Are you sure you didn't get bit by the cache? It works consistently in IE 5.5 on W2000 and W98. I've attached my example.
Nedals
03-14-2003, 11:04 AM
Gil,
Thank's for the look-see. I got your code and (I think) you added the zindex in a couple of places which I had tried after your previous post.
Here's the issue:
If you attempt to center the image (using, god forbid) <center>, nothing happens because of the absolute positioning. If you remove the positioning, the animation falls apart.
As stated in my previous post, I'm currently going with 'forced' positioning. See the latest version.
Does this new version work with W2000 OK, including a screen resize?
gil davis
03-14-2003, 11:51 AM
Originally posted by nedals
Does this new version work with W2000 OK, including a screen resize? On my example, I can resize the window with no problems. IE 5.5 & W2000.
gil davis
03-14-2003, 07:35 PM
Well, my head hurts, but I got it to work in NS 4.8 - but I probably broke it in IE.
Nedals
03-14-2003, 07:49 PM
That's great! :D
I haven't checked it out yet, but I'll let you know how it goes.
So many posts and so little time. :)
Nedals
03-15-2003, 02:17 PM
OK, Gil, I've posted the working script for IE5/6, NS7 and NS4! (some yours and some mine). I greatly modified your NS4 solution (but it was relatively easy because you had done the hard stuff BUT many, to many, span tags :D )
http://www.fulspec.com/test/rollingblind2.html
I would really like your comments, public or private; polite or other.
I'm a long time programmer (hobby+) from days long passed when RAM was ferrite beads on a wire frame, 'AND' gates used triodes (what's that?) and the whole basement was devoted to the cooling system. I've yet to adapt to this Object Oriented style, hence the request for comments.
gil davis
03-15-2003, 04:01 PM
Originally posted by nedals
I greatly modified your NS4 solution (but it was relatively easy because you had done the hard stuff BUT many, to many, span tags :D )I got lazy. NS 4 allows you to create layer tags on the fly, but I wasn't up to trying to create 30 new layers. It was easier to code them in the HTML so I could get on with the task at hand.I would really like your commentsI'll take a look and get back to you.I'm a long time programmer (hobby+) from days long passed when RAM was ferrite beads on a wire frame, 'AND' gates used triodes (what's that?) and the whole basement was devoted to the cooling system. I've yet to adapt to this Object Oriented style, hence the request for comments. My hobby experiences date back to SWTP MC6800 projects, but I've had to repair calculators that used nixie tubes and core memories.
gil davis
03-15-2003, 04:12 PM
My first impression - Hey, there's a flash of the picture rolling through. I thought I fixed that!
Wasn't that your original complaint?
You may not see it on a fast machine (mine is Pentium 200MMX), but when the new picture is written to the slices, you can see it roll through. If you look at my code, you'll see that I make the slices 0 width by setting clip.right & clip.left to 0 before I start changing the image in the slices.
Nedals
03-15-2003, 04:31 PM
I noticed the flash on the NS4 code you sent as well.
When you get a chance to look at the code, you may notice that I'm one of those programmers that reduces the code to it's bare minium. (gotta conserve memory :) ). So anything I don't understand gets ripped out. What do I know? :). I'll go back and I figure out what you did.
gil davis
03-16-2003, 09:26 AM
from your example page:
Issues:
Could not get the border to work in NS4. (no CSS allowed. my rule.). I thought of using another layer, but how do you get
it positioned BELOW the 'RollingBlind' image? Gil, I left some of your code in (commented out) in case you need it.
For some reason the is a stutter in NS 4.79. Any thoughts? I was thinking I could use the visibilty to fix itHere is what I coded to place a "border" around the image:var it = document.layers["bg"] = new Layer(imgAry[0].width + 2 * borderWidth);
it.bgColor = "black";
it.height = imgAry[0].height + 2 * borderWidth;
it.width = imgAry[0].width + 2 * borderWidth;
it.top = document.images["RollingBlind"].y - borderWidth;
it.left = document.images["RollingBlind"].x - borderWidth;
it.clip.left = 0;
it.clip.top = 0;
it.clip.right = 0;
it.clip.bottom = it.height;
it.clip.width = it.width;
it.clip.height = it.height;
it.zIndex = 1;
it.visibility = "show";You have to change the z-index of the slices using this:it.zIndex = (i == 0) ? 2 : 3;I made an error at one point and set the bgColor of the slices to "black". There are more slices than necessary (like maybe 6) because of the sliceWidth math. I changed it to sliceWidth = 10 and calculate how many slices I need usingslices = Math.ceil(imgAry[0].width / sliceWidth) + 1;Probably a wash.
Nedals
03-16-2003, 12:16 PM
Thanks Gil;
After messing with the main script, and failing, I created a mini script that tiles 4 images, using 'new layer()' over a static image ( <img src=....> ). I dropped in your code and, low and behold, a big black square; just as expected. So here's the problem. I can change the index values of the layers and everything changes EXCEPT for that static layer, ( Z-positioned using document.images[0].zIndex = 2; )
I've attached the mini script, if you want it.
Also, I don't understand why LyrObj = document.layers[n]; works but LyrObj = document.layers['layername']; will not. (with or without an eval)
(LyrObj has no properties.. )
Re the flashing.. I tried the clipleft/right=0 to little avail. So I used visibilty=hide @ reload; show @ slice; and that solved it;
On to the Math issue!
Oh, one other thing on the main script...
All works in table cell, but if put in <div>, I get positioning problems with IE (ok in NS4 would you believe) due to IE's handling of borders, I think. (border=0 and it's ok,)
And, Gil, if you want to stop, please say so. I, and hopefully others, am getting a lot out of this.
gil davis
03-16-2003, 03:36 PM
Originally posted by nedals
I can change the index values of the layers and everything changes EXCEPT for that static layer, ( Z-positioned using document.images[0].zIndex = 2; )NS 4 does not obey z-index for images, only for positioned content.Also, I don't understand why LyrObj = document.layers[n]; works but LyrObj = document.layers['layername']; will not.Neither do I. It seems to work ok in my examples.(with or without an eval)I hate eval anyway.Re the flashing.. I tried the clipleft/right=0 to little avail. So I used visibilty=hide @ reload; show @ slice; and that solved it;Cool.All works in table cell, but if put in <div>, I get positioning problems with IE (ok in NS4 would you believe) due to IE's handling of borders, I think. (border=0 and it's ok,)Maybe you should just adjust for the borders.And, Gil, if you want to stop, please say so. I, and hopefully others, am getting a lot out of this. No problem. That's the purpose of the forum.
Nedals
03-18-2003, 02:17 AM
Gil,
This thing is driving me a little nuts. I took the working animation out of the table cell and got strange results. I'm going to take a break from it and hopefully I'll get a fresh perspective when I re-look at it.
Thanks again for your help and I'LL BE BACK :)
webdeveloper.com
Copyright Internet.com Inc., All Rights Reserved.