Changing elements in page "onclick" with iFrames

[hindu times]

Hi there,

I'm new to this forum and am trying to find answers to a few issues I've been having.

I'm building a website for my music (I'm a novice with web design so bear with me) and I'm having trouble with this page - www.rjt-online.com/photos.php

As you can see, when you click on the "Filter By" buttons, the relevant gallery opens in the iFrame and the Titles (such as Latest Photos and Live Photos) are altered onclick by using the changeText function. The problem with this is that when I use the browser "Back" button, the iFrame goes back, but the "changeText" doesn't go with it.

So I've been trying to find solutions to this. Someone on another forum suggested hiding the album titles in a hidden element on each gallery page, and the title in when you click on the Filter By buttons. They suggested first putting some code such as:

<input type="hidden" name="AlbumTitle" value="Live Photos">

...in each page that is to be loaded into the iFrame.

They then suggested putting some code such as:

$("#iFrameId").load(function (){                                  // executes the function when the contents in iframe with id "iFrameId" is loaded.
   $pageName = $('[name=AlbumTitle]').val()               // assigns the value of the hidden field to a jquery object $pageName.
   $('#phototitle').html('$pageName')                           // populates the element with id "phototitle" with the value of the $pageName object.
});

...into the jquery js script on the photos.php page.

I've tried this but it doesn't seem to want to work.

Any help would be great!

Thanks.

[fxm]

I can't test from here but I can tell you in words something that should work.

The key observation is that resizeIframe(){} is called both when a 'filter' link is clicked and when the browser navigation buttons are used.

If I have followed the logic correctly, immediately after var currentfr=document.getElementById(frameid) in resizeIframe(frameid){} it should be possible to set the title, as follows:

var a = 'LATEST';
switch (currentfr.src) {
case 'photos_live.php':
    a = 'LIVE';
    break
case 'photos_promo.php':
    a = 'PROMO';
    break
case 'photos_other.php':
    a = 'OTHER';
    break
case 'photos_view_all.php':
    a = 'ALL';
    break
}
document.getElementById('phototitle').innerHTML = a + ' PHOTOS //';

Note: assuming that this works, all of the existing changeText() functions and their calls are no longer needed; get rid of them.

[hindu times]

Thanks for replying! I've tested this code on a test page... www.rjt-online.com/photos_titletest.php

It does set the initial title to LATEST PHOTOS //, but it doesn't change when you click on the filter buttons. Any idea?

[fxm]

www.rjt-online.com/photos_titletest.php

It does set the initial title to LATEST PHOTOS //, but it doesn't change when you click on the filter buttons.

The first problem is that - to my surprise - currentfr.src contains full URLs like http://www.rjt-online.com/photos_promo.php (which is not what I expected from a casual reading the assignments in the code). I wish I had looked at this more carefully before posting my suggestion :(

The quick fix for that is to make these changes

var a = 'LATEST';
switch (currentfr.src) {
case 'http://www.rjt-online.com/photos_live.php':
    a = 'LIVE';
    break
case 'http://www.rjt-online.com/photos_promo.php':
    a = 'PROMO';
    break
case 'http://www.rjt-online.com/photos_other.php':
    a = 'OTHER';
    break
case 'http://www.rjt-online.com/photos_view_all.php':
    a = 'ALL';
    break
}
document.getElementById('phototitle').innerHTML = a + ' PHOTOS //';

The second problem is more difficult. It turns out that the value I chose to test currentfr.src doesn't change when the browser navigation buttons are used. Fixing that may take a little more effort.

[fxm]

The second problem

I'm fairly sure that this revised suggestion

var a = 'LATEST';
switch (window.frames[1].location) {
case 'http://www.rjt-online.com/photos_live.php':
    a = 'LIVE';
    break
case 'http://www.rjt-online.com/photos_promo.php':
    a = 'PROMO';
    break
case 'http://www.rjt-online.com/photos_other.php':
    a = 'OTHER';
    break
case 'http://www.rjt-online.com/photos_view_all.php':
    a = 'ALL';
    break
}
document.getElementById('phototitle').innerHTML = a + ' PHOTOS //';

fixes both problems.

I would be more confident if testing from here weren't so incredibly tedious :(

[hindu times]

Hi fxm.

Thanks for the replies. Unfortunately it still doesn't seem to want to change the title. Any ideas? I appreciate the help you're giving.

[fxm]

Any ideas?

I just tested here with this replacement

switch (window.frames[1].document.URL) {

and it seemed to work.

If that doesn't work for you I will have to ask you to make some changes to the test page to make it easier for me to debug from here.

[hindu times]

Cheers fxm.

That's working in Firefox and Safari, but not IE8 or earlier...?

[hindu times]

it's also occasionally coming up with an "Access is Denied" error on Line 83 every now and again in IE.

[fxm]

That's working in Firefox and Safari, but not IE8 or earlier...?

PROGRESS!

Success in Safari(pc) usually means that Chrome will also work.

The failure in IE probably means that I forgot to handle some IE-specific issue with

window.frames[1].document

If it is essentially a syntax problem, it should be an easy fix. If it isn't, I may not have time to work on it today; testing in IE can be a lengthy nightmare because of all the modes in the various versions.

Note: you need to look at your main page [not the test page] in Opera.

[fxm]

it's also occasionally coming up with an "Access is Denied" error on Line 83 every now and again in IE.

Ugh. That is almost certainly a cross-domain or cross-frame security warning.
What is line 83?

[hindu times]

Yeah, I've just checked it in Opera and the iFrames aren't even loading. Why the hell would that be? It's so irritating when you think you're getting somewhere :)

Fingers crossed the problem with IE is a simple one.

[fxm]

Fingers crossed the problem with IE is a simple one.

I just banged away in IE8 for several minutes, clicking the links and using the browser navigation buttons. I could not get it to fail.

Perhaps there is an issue with leaving the PHOTO area and then returning?

I will give it some thought, but I can't work on it any more today. Sorry.

[hindu times]

Line 83 is the line before:

function resizeIframe(frameid){
var currentfr=document.getElementById(frameid)
var a = 'LATEST';
switch (window.frames[1].document.URL) {
case 'http://www.rjt-online.com/photos_live.php':
a = 'LIVE';
break etc......

I can't get it to work at all in IE. The title doesn't change at all to me.

I appreciate all the help fxm. As I say, I'm new to this so need all the help I can get.

[fxm]

in Opera and the iFrames aren't even loading. Why the hell would that be?

That problem seems to be in function resizeCaller() {} .

The assumptions about browser features are clearly out of date [in fact, they may even have been wrong when they were current] plus the feature-sniffing is badly coded.

Even the comments about the meaning of iframehide contradict each other.

The minimal fix for Opera that shouldn't break anything else appears to be changing both

var iframehide="no"

and

var tempobj = document.getElementById ? document.getElementById(iframeids[i]) : document.all[iframeids[i]]

but it will still be necessary to test with 'all' browsers.

Unfortunately there are probably similar blunders elsewhere in this antique code.

[fxm]

"Access is Denied" error on Line 83 ... in IE.

Are you getting that error accessing the page on the server? Or testing on your desktop?

[hindu times]

Testing on the desktop. It only happened a few times and I haven't seen it happen again for a while.

The Opera fix works I think. I've tested on IE8, FF, Safari, and Opera and it seems to work ok. Will check others in a minute.

However, the change text thing still isn't working in IE, nor Opera.

Cheers for the help.

ps. the code for the iFrame is taken directly from Dynamic Drive so I just assumed it was right.

[fxm]

Line 83 is the line before:

Actually it turns out to be

switch (window.frames[1].document.URL) {

I can't get it to work at all in IE. The title doesn't change at all to me.

With the test page currently on the server, titles change properly here in IE8 [I'm fairly sure it renders your test page in standards mode].

Titles do NOT change properly in IE6.

I don't have IE7 to test but at some point I may test compatibility modes in IE8.

[fxm]

Testing on the desktop.

The default IE security settings interfere.
Test from the server only.

[hindu times]

Test from the server only.

We're not hosting it ourself. We're "Putting" it onto the web each time we test it, so it needs to work with the way I'm viewing it.

I'm not seeing any change in titles in IE8, IE8 compatability mode, IE7, or Opera right now. It must be some IE/Opera specific issue in the code?

[fxm]

We're not hosting it ourself. We're "Putting" it onto the web each time we test it, so it needs to work with the way I'm viewing it.

So long as the page is on the server and you access it from there [http://...] (not from your desktop [file://....]) it will work without having to deal with IE security issues.

I'm not seeing any change in titles in Opera

I can tell you why but I don't have a fix yet.
The 'switch' code is in function resizeIframe(frameid){} I know that code works in Opera because LATEST appears the first time through.
However, in Opera that function is never called again; other browsers call it every time the iframe changes.
This is probably another case of bad browser/feature sniffing. If so, I can fix it; in the unlikely event that it is not, it should be possible to move the code to a different place in the logic.

I'm not seeing any change in titles in IE8, IE8 compatability mode, IE7

I can't explain that; your current test page definitely works here in IE8/standards.

[fxm]

This is probably another case of bad browser/feature sniffing.

This

if (currentfr && !window.opera) {
        currentfr.style.display = "block"
        if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
        currentfr.height = currentfr.contentDocument.body.offsetHeight + FFextraHeight;
        else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
        currentfr.height = currentfr.Document.body.scrollHeight;
        if (currentfr.addEventListener) currentfr.addEventListener("load", readjustIframe, false)
        else if (currentfr.attachEvent) {
            currentfr.detachEvent("onload", readjustIframe) // Bug fix line
            currentfr.attachEvent("onload", readjustIframe)
        }
    }

appears to leave Opera without an event listener [which results in the title problem]. As soon as I can figure out what that glob of code was/is trying to do, I should be able to fix it.

[hindu times]

That's great fxm. I really do appreciate the help. God knows how I would have figured this out on my own.

It's weird about IE. It's definitely not working on my computer. Weird. It's definitely www.rjt-online.com/photos_titletest.php that you're using?

[fxm]

glob of code

That appears to be the result of simple carelessness.

I'm fairly sure that replacing it with this

if (currentfr && !window.opera) {
        currentfr.style.display = "block"
        if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) //ns6 syntax
        currentfr.height = currentfr.contentDocument.body.offsetHeight + FFextraHeight;
        else if (currentfr.Document && currentfr.Document.body.scrollHeight) //ie5+ syntax
        currentfr.height = currentfr.Document.body.scrollHeight;
    }
    if (currentfr.addEventListener) currentfr.addEventListener("load", readjustIframe, false)
    else if (currentfr.attachEvent) {
        currentfr.detachEvent("onload", readjustIframe) // Bug fix line
        currentfr.attachEvent("onload", readjustIframe)
    }

will restore the original intent [and fix Opera] without breaking anything.

It needs to be tested, of course, and I still have some uncertainty: Line 2 is obviously redundant defensive code [because the display property is correctly set elsewhere] so I suspect that there may be some other unfixed bug(s) hanging around somewhere.

Note: another danger sign that this code has already been changed by someone who didn't understand it is the inclusion of 'currentfr' in the test on Line 1.

[fxm]

It's definitely www.rjt-online.com/photos_titletest.php that you're using?

That's the only URL I have.

[fxm]

That's great fxm. I really do appreciate the help. God knows how I would have figured this out on my own.

You're welcome. Remember to click 'solved' [when we get there]. And don't forget the up-arrows. :)

[hindu times]

Right, so the Opera code now works (with browser buttons and everything).

The only issues are now with IE in that it's still not changing for me. I've tried it on other computers too. Strange.

Also, Safari doesn't seem to recognise the change in the iframe when you come to use it's back button. It just jumps you back to your actual last page, rather than the last page in the frame. Not a major issue but if it can be fixed easily then why not.

ps. I most definitely won't forget the up arrows! :)

[fxm]

I'm not seeing any change in titles in IE8, IE8 compatability mode, IE7

Well, the state of play here is that titles aren't working in IE6 but they are working in IE8/standards.

Assuming that your browser is rendering the [current] test page that I see from the same server (and not a local or cached copy), about the only theory I can suggest at the moment is that your copy of IE8 is in quirks mode.

When/if I find a fix for IE6, all may become clearer.

[hindu times]

OK cool. As things stand, I've tried it on three different computers. One laptop running IE8, one desktop running IE7, and another desktop running IE8. Not changing on any of them. Let me know if you manage to get a fix. Cheers.

[fxm]

Safari doesn't seem to recognise the change in the iframe when you come to use it's back button. It just jumps you back to your actual last page, rather than the last page in the frame.

I don't see that here with Safari(pc) or Chrome. Not surprising really, as both are based on the WebKit rendering engine.

Are you seeing that in Safari(Mac) by any chance?

Either way, please start a new thread for the Safari 'back button' question; I doubt that it has any connection to these other problems.