/    Sign up×
Community /Pin to ProfileBookmark

layer (div) on top of iframe?

Copy linkTweet thisAlerts:
Mar 08.2005

Hi,

I use dreamweaver and I need to know if it is possible to have a layer (div attribute) on top of a iframe… Right now I have that, but I don’t see my layer when I preview. I thought this could e because of the z-index, but then I read that iframe doesn’t have a z-index property… Is this true? I really need to get the layer on top of the Iframe in the same document the Iframe is in…

Please help me out here! Thanks

to post a comment
HTML

9 Comments(s) ↴

Copy linkTweet thisAlerts:
@phpnoviceMar 08.2005 — That is true, IFRAME does not have that property:

http://msdn.microsoft.com/workshop/author/dhtml/reference/objects/iframe.asp

Your choice is to hide the IFRAME so that you can see the DIV layer. Then reverse the settings to hide the DIV layer and see the IFRAME.
Copy linkTweet thisAlerts:
@PeOfEoMar 08.2005 — [COLOR=deeppink]z-index is not an html attribute, it is a css attribute. But even if you can slide something over an iframe, what good would it do? It would just make your iframe inaccessible to the user, he would no longer be able to see it. Are you trying to do this, like make the iframe visible and then no longer visible to the user, as phpnovice was saying? Also why is an iframe neccessary?[/COLOR]
Copy linkTweet thisAlerts:
@phpnoviceMar 08.2005 — Oops, yes, I knew that, [b]z-index[/b] is a style -- not an attribute. Sorry to add to the confusion. So, [b]niixxx[/b], did you try the style setting and that didn't help your situation?

Maybe you're trying to slide a transparent GIF over the IFRAME in an attempt to prevent copying of the source? Don't bother. If the browser can display it, then it is already on the visitors harddrive -- in their Internet cache.
Copy linkTweet thisAlerts:
@niixxxauthorMar 11.2005 — thanks for the comment!

the idea is to have a draggable layer on top of the Iframe. I use an Iframe, because the content of it has to be scrollable in the window the Iframe is in. I could also be using tables, but I noticed that different browsers have a different way of displaying scrollable tables. But I also need to find a way to drag the layer (with text) and I cant seem to find a way to do this without selecting all the text when you drag it... Right now I use a standard dreamweaver behaviour to make it draggable, but I have a feeling I should be using javascript or something to make the cursor change into something like a draggable symbol. Do you have any ideas on how to do this?
Copy linkTweet thisAlerts:
@phpnoviceMar 11.2005 — DreamWeaver behaviors usually use JavaScript -- at least, where dynamic actions are concerned. Otherwise, yes, you can change layer's [b]cursor[/b] style through CSS and the [b]hover[/b] state, but IE only supports [b]hover[/b] for the [b]A[/b] tag. I believe there are workarounds for this, but I'm not really up on all the cross-browser CSS stuff. But, here, you can try this and see what it does for you:

style="cursor:pointer;"

Otherwise, you can use JavaScript to create a DHTML dragable element.
Copy linkTweet thisAlerts:
@PittimannMar 11.2005 — Hi!

This [URL=http://www.pit-r.de/scripts/dragDiv.htm]example[/URL] works in NS7, FF and IE.

Cheers - Pit
Copy linkTweet thisAlerts:
@PeOfEoMar 11.2005 — If you just want to scroll do not use an iframe.

<div style="height:500px; width:500px; overflow:auto;">

This will scroll when the content gets bigger than the div. You can put a table within this. It is also pretty well accepted, if a browser does not accept it it will just display the unstyled content.

</div>
Copy linkTweet thisAlerts:
@niixxxauthorMar 15.2005 — why not use an Iframe?
Copy linkTweet thisAlerts:
@PeOfEoMar 16.2005 — [i]Originally posted by niixxx [/i]

[B]why not use an Iframe? [/B][/QUOTE] [COLOR=deeppink]Because iframes are not very accessible, they will inconveiniance the user, they will cripple your ability to design, and they will hurt search engine ratings.[/COLOR]
×

Success!

Help @niixxx 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.18,
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,
)...