/    Sign up×
Community /Pin to ProfileBookmark

Tricky relative Positioning question with Applets and Flash

Copy linkTweet thisAlerts:
Sep 17.2003

I am currently trying to place a flash creative in a page and then dynamically show an applet on top of it.

I can do this with absolute positioning if I contain the applet in a div tag. I place the flash object on the screen and the absolutely position the div tag with the applet on top of it.

Now this solution doesnt work because I need the applet to maintain its position over the flash object regardless of <center> tags or anything else.

When I try to make the div tag relative to a div containing both objects, it automatically pushes the div containing the applet below the flash. It seems to not let me overlap them with relative positioning.

I can get them to over lap by changing the left and top.. but then the div applet will shift left or right depending on how far over the applet is. I assume because it still thinks its in the right place.. and not jammed beneath the flash.

So I’m stumped. Is this a bug in flash? Maybe I should stick this in the flash forum as well.

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@Khalid_AliSep 17.2003 — how about position them using relative positioning,and then show one at a time and make other hidden(visibility=hidden)
Copy linkTweet thisAlerts:
@eewaldauthorSep 17.2003 — Yep. Thats what im doing. But with relative positioning it still forces the applet beneath the flash object. Or if I place the div applet code above the object code.. the applet appears above the flash object. I can change the visibility but cant get them to overlap.

Also if I had some idea of where the flash object was.. I could probably calculate a percentage error to shift the applet around. But I dont know of a way to find the absolute positioning of an element without actually setting it to be absolutely positioned. Is there such a property?

Thanks for the help!
Copy linkTweet thisAlerts:
@Khalid_AliSep 17.2003 — i am rather confused right now..why? dont't ask...?

there are couple of things you can try.

set the z-index for both objects or show me the code/url of the page will be better
Copy linkTweet thisAlerts:
@ScriptageSep 17.2003 — have you set the relative position to a minus number?

relative positioning is (obviously) positioning relative to the last object rendered so... if the top relative position is 10 then the absolute position of the applet will be the top position of the flash movie +10. You can alter this by changing top:10, to top:-10; etc.

Regards
Copy linkTweet thisAlerts:
@eewaldauthorSep 17.2003 — THanks for the replies. I'll try to give more details.. its pretty hard for me to explain..

Here is some sample code

<center>

<div id="flashStuff" style="position:relative;left:0px; top:0px; visibility:visible; z-index:1">

<OBJECT></OBJECT> //flash object

<div id="appletStuff" style="position:relative;left:24px; top:24px; visibility:visible; z-index:3">

<APPLET></APPLET>//applet

</div>

</div>

</center>

Ok.. so if I put this on the screen... the applet shows up beneath the flash object offset by 24 pixels. I was hoping it would appear on top of the flash object offset by 24 pixels.

If I change the left and top values of the applet to something like -235, 24.. it will appear where I want it.. but then if I remove the center tags.. the applet shifts over a bit.

Now if I could determine where the flash was on the page dynamically.. I could just set the applet absolutely.. but I dont know any properties that will show up when you use a <center> tag. It always shows up as 0,0 for me.

thanks for bearing with me.
Copy linkTweet thisAlerts:
@Khalid_AliSep 17.2003 — How about setting the initial visibility for appelt set to hidden, somethng like this

<center>

<div id="flashStuff" style="position:relative;left:0px; top:0px; visibility:visible; z-index:1">

<OBJECT></OBJECT> //flash object

<div id="appletStuff" style="position:relative;left:24px; top:24px; visibility:hidden; z-index:3">

<APPLET></APPLET>//applet

</div>

</div>

</center>

then at a certain action switch it like this

<center>

<div id="flashStuff" style="position:relative;left:0px; top:0px; visibility:hidden; z-index:1">

<OBJECT></OBJECT> //flash object

<div id="appletStuff" style="position:relative;left:24px; top:24px; visibility:visible; z-index:3">

<APPLET></APPLET>//applet

</div>

</div>

</center>

by default

<object> element takes precedent when a window is painted.Which means it will always be on top.
Copy linkTweet thisAlerts:
@eewaldauthorSep 17.2003 — I'm able to get the applet to appear over the object by changing the left and top values for the applet div. The problem is, since its being shifted initially below the object it messes up when you take away the center tag. I tried changing the visibility options but it still forces the object outside.

Is there any way to determine the position of the top and left properties of the Div tag at runtime. I would need the actual position.. not just hte value in the style tag.

argh.. why cant it all be simple.. ?
×

Success!

Help @eewald spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...