Solved

show div outside of iframe

Posted on 2004-04-08
14
2,549 Views
Last Modified: 2007-12-19
here is what i have set up

base page > iframe > iframe > button

i want to be able to click button and "show" a div named email located on base page

thank you
0
Comment
Question by:qwertq
14 Comments
 

Expert Comment

by:net1
ID: 10788897
As long as you have positioned the <div> through a CSS positioning statement (either absolute or relative) you can set it's z-index to be at a level above the base page. You also need to set its visibility to "hidden". Then write a javascript function to change its visiblility property ie document.getElementById(id).style.visibility = "visible"; where id is the name of the <div>. You then call this javascript fiunction with an 'onClick' statement attached to the button.

To reference the <div> from within the nested iframes you will either:
1. Attach the javascript function to the base page and the 'onClick' statement will have to reference the function by parent.parent.javascriptFunctionName() or top.javascriptFunctionName()
2. Alternatively place your function at the same level as the button and use parent.parent.document.getElementById(id).style.visibility = "visible"; in the function.

I hope this helps

Steve
0
 

Author Comment

by:qwertq
ID: 10788926
this does not seem to work....

at the top level i have:
<div id="email" style="position:absolute; left:387px; top:180px; width:263px; height:208px; z-index:1; visibility: hidden;">
  <iframe src="email.php" frameborder="0" width="239" height="250" scrolling="no" name="emailFrame"></iframe>
</div>

on the page contained within two iframes i use this as my href:
<a href="javascript:parent.parent.document.getElementById(email).style.visibility='visible';">

having it appear over the iframe is not a problem, that works (but only works with a button action on the same page as the div)

0
 

Author Comment

by:qwertq
ID: 10791228
anyone? i still have not figured it out...
i will increase the points if that is why no one is answering
0
 
LVL 19

Expert Comment

by:webwoman
ID: 10791269
Nothing is going to show OVER the iframe. It's a separate document, and will override anything on the base page.

I would consider redesigning this if that's the effect you want to get. Or, open your overlay in a new window, and position that. A new window WILL overlay anything else on the page -- it's a window, not a frame, and since you open it you control it.
0
 

Author Comment

by:qwertq
ID: 10791303
my div does appear over an iframe, that works fine. that is not my problem.

BASE PAGE > iframe > iframe > BUTTON

i am what the code would be to set a (on base page) div to visible by clicking BUTTON

0
 
LVL 3

Expert Comment

by:ljfernandez
ID: 10792895
This works in IE:

<input type="button" value="Click to show email iframe in base doc" onclick="showDiv()"/>

<script language="javascript">
function showDiv()
      {
      window.parent.window.parent.email.style.visibility='visible';
      }
</script>

or you could try:
   var emaildiv = window.parent.window.parent.document.getElementById("email");
   emaildiv.style.visibility='visible';
0
 

Author Comment

by:qwertq
ID: 10793507
i could cry, it works!

is this IE only thou? i tested it on netscape 7 and it does not work.
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
LVL 3

Expert Comment

by:ljfernandez
ID: 10793914
The 2nd version of the script works for me in Netscape 7.

Lisa
0
 

Author Comment

by:qwertq
ID: 10794218
oh, you are right. sorry lisa i did not check that one.

one more question. how would i do another
window.parent.window.parent.document.getElementById("email");
for this set up?

window.parent > iframe named rightGiveImageShow > document.getElementById("email");

not sure how to tie the frame name in there
0
 
LVL 3

Expert Comment

by:ljfernandez
ID: 10794715
So in other words I'm thinking you are wanting to access the document of the parent frame instead of the parent frame's parent?

I'm not 100% sure what you're asking but I think what you are looking for is:

var emaildiv = window.parent.document.getElementById("email");

-Lisa

0
 

Author Comment

by:qwertq
ID: 10794734
thank you for bearing with me. sorry its kind of hard to explain...

i want to access a document which is in a different frame on the parent page....

basically go to parent, then into iframe named 'rightGiveImageShow' then change the visibility...

if you have any questions you can email me at qwert_q@hotmail.com, and i will contact you with my real email or aim.
0
 
LVL 3

Accepted Solution

by:
ljfernandez earned 125 total points
ID: 10794826
Here you go:

 var emaildiv = window.parent.frames["rightGiveImageShow"].document.getElementById("email");
 emaildiv.style.visibility='visible';
0
 

Author Comment

by:qwertq
ID: 10794904
that worked great....  i just have 1 more to get working i thought i could patch it together from what you gave me but it does not work (i promise this is my list)

i need to go up to parent, into iframe named 'rightBaseFrame', into iframe named 'rightImageFrame', into iframe named 'rightGiveImageShow' and finally hide div named Diag.

i tried both of these:

var diagdiv = window.parent.window.frames["rightBaseFrame"].window.frames["rightImageFrame"].window.frames["rightGiveImageShow"].document.getElementById("Diag");
diagdiv.style.visibility='hidden';

var diagdiv = window.parent.frames["rightBaseFrame"].frames["rightImageFrame"].frames["rightGiveImageShow"].document.getElementById("Diag");
diagdiv.style.visibility='hidden';
0
 

Author Comment

by:qwertq
ID: 10795430
got it :) i think i had a typo.
thanks for all your help
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Select2 jquery help 9 74
Menu Inconsistent 3 32
Connect MySql database to wordpress site 3 52
REReplaceNoCase help 1 14
Deprecated and Headed for the Dustbin By now, you have probably heard that some PHP features, while convenient, can also cause PHP security problems.  This article discusses one of those, called register_globals.  It is a thing you do not want.  …
I've been asked to discuss some of the UX activities that I'm using with my team. Here I will share some details about how we approach UX projects.
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

912 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now