Email conversation
| From | Murray Bourne |
|---|
| To | Me |
|---|
| Subject | iframe with innerHTML problem |
|---|
| Date | 23 April 2005 15:47 |
|---|
Hello
Thank you for your helpful site.
I found your solution for a clipboard-like drop down using an iframe (15 April
2004 12:17) to be close to what I am trying to do.
The final effect I want to look something like this, Example 1
[sample URL] where the user
clicks and the answer is revealed by loading an iframe. But the parent's page
styles are not being used, so I need to use innerHTML.
It is a large exercise with many answers in external files and I am tring to cut
down on the possibilities for error, by not naming all the iframes and variables
separately. I am also trying to keep it elegant!
This is what I am doing in Example 2
[sample URL]:
At each place where I want an iframe, I am putting;
writeDivs() which calls this function:
i=0;
function writeDivs() {
if( document.childNodes && document.createElement ) {
document.write(
'<div style="visibility:hidden;">'+
'<iframe src="about:blank" height="1" '+
'width="1" name="loader'+i+'">'+
'</iframe></div>'+
'<div id="output'+i+'" ></div>'
);
}
i++;
}
Then in each external file, I want to call one function in the parent page with
<body onload="if( window.parent && parent != window ) {
parent.loadFrame(document.body.innerHTML);}">
The function I have is
function loadFrame(newData) {
document.getElementById('output'+i).innerHTML = newData;
i++;
}
My attempt is not satisfactory, since if the user clicks the second answer
before the first, they get the wrong answer appearing in each place. I want to
somehow pass the correct "i" from the div writing function to the loadFrame()
function but am not sure how to do it.
Any help would be appreciated. I am really beating my head with this one.
M Bourne
| From | Me |
|---|
| To | Murray Bourne |
|---|
| Subject | Re: iframe with innerHTML problem |
|---|
| Date | 23 April 2005 20:12 |
|---|
| Attachment | fixed script |
|---|
Murray,
> My attempt is not satisfactory, since if the user clicks the second
> answer before the first, they get the wrong answer appearing in each
> place.
As far as I can tell, you have already managed to solve this problem,
because it works correctly no matter what I do.
I have, however, spotted a problem with your code in Opera. The code uses a
workaround for Opera, but this is not actually needed, and the workaround
is causing problems. I have attached a version of the file that works
properly.
If you are still having problems, let me know, and I will see if I missed
anything.
Mark 'Tarquin' Wilton-Jones - author of http://www.howtocreate.co.uk/
| From | Murray Bourne |
|---|
| To | Me |
|---|
| Subject | Re: iframe with innerHTML problem |
|---|
| Date | 24 April 2005 02:23 |
|---|
Hello Tarquin
Thank you so much for your reply. Thanks also for the Opera fix - I was aware
this was not working properly and it was on my list to fix...
What I meant by the example
[sample URL] not working
properly is that if the user clicks on the first answer button they will
correctly get the first answer, then the second button, second answer, there is
no problem. But if they click the 3rd button first, answer 1(c) appears under
question 1(a) - not the desired behaviour!
But my final desirable solution is to be able to use the existing buttons which
open a div with shadow background (like this page - Example 3
[sample URL]) but be able to incorporate the
iframe/innerHTML solution as well.
I actually have 2 situations - sometimes I just want the content to be already
coded in the page and drop down (like example 3), and the 2nd situation is to
have the content in an external html file. I want it to be transparent to the
user which case it is.
I have set up another example
[sample URL] (which does not
work - just to illustrate the desired situation). For each answer, I have put
the anchor tag in the <dt> (can I do this?) and I want to feed the iframe
contents into the div with class dropDownContent, without having to number
everything. (I have put target="loader" so if all else fails, it will open in a
new page. If it is like this, the only thing I will need to change for each
answer is the href. I have tried to fit something like this into the existing
button/dropdown code but could not get close.
<dl class="answer">
<dt class = "mouseOutColor" onMouseOver="this.className='mouseOverColor';"
onMouseOut="this.className='mouseOutColor';"><a href="exercises1a.htm"
target="loader">Click for Answer</a></dt>
<dd>
<div class="shadow">
<div style="visibility:hidden;">
<iframe src="about:blank" height="1" width="1"></iframe>
</div>
<div class="dropDownContent"></div>
</div></dd></dl>
Any help would be greatly appreciated. I have reached the limits of my js and
spent many hours on this...
Murray
| From | Me |
|---|
| To | Murray Bourne |
|---|
| Subject | Re: iframe with innerHTML problem |
|---|
| Date | 24 April 2005 13:22 |
|---|
Murray,
> if the user clicks on the first answer button they will correctly get the
> first answer, then the second button, second answer, there is no problem.
> But if they click the 3rd button first, answer 1(c) appears under
> question 1(a) - not the desired behaviour!
right, I see.
why not do something simple like this in the pages loaded in the iframes
(note the extra ,1 at the end - change that to be the desired answer number,
so that every answer has a different number, starting at 0 [I think]):
<body onload="if( window.parent && parent != window ) { parent.loadFrame(document.body.innerHTML,1);}">
Then change the receiving function to use that number instead of "i++":
function loadFrame(newData,oNum) {
document.getElementById('output'+oNum).innerHTML = newData;
}
As for your shadow effect, what you have done should work. All you need now
is to merge the two pages, and add a little show/hide for the shadow div.
Try this as the script on the first page (and remember to add the number
into the results page as described above):
<script type="text/javascript"><!--
i=0;
function writeDivs() {
if( document.childNodes && document.createElement ) {
document.write(
'<div class="shadow" style="visibility:hidden;">'+
'<div style="visibility:hidden;">'+
'<iframe src="about:blank" height="1" width="1" name="loader'+i+'">'+
'</iframe></div>'+
'<div id="output'+i+'" class="dropDownContent"></div></div>'
);
}
i++;
}
function loadFrame(newData,oNum) {
document.getElementById('output'+oNum).innerHTML = newData;
document.getElementById('output'+oNum).parentNode.style.visibility = 'visible';
}
//--></script>
> I have put the anchor tag in the <dt> (can I do this?)
yes, that is ok, dt is allowed to contain inline elements like links
> I have put target="loader" so if all else fails, it will open in a new page
nice :) good accessible coding. I see the main example you gave also
implements this.
Tarquin
| From | Murray Bourne |
|---|
| To | Me |
|---|
| Subject | Re: iframe with innerHTML problem |
|---|
| Date | 25 April 2005 16:17 |
|---|
Hi again, Tarquin
Thank you once again for helping me over the line. This thing has gone around
and around in my heads for ages - and now everything is working just fine -
including cross browsers (as far as I can tell in Windows, anyway.) See towards
the bottom of:
[sample URL]
Much appreciated
Murray