/    Sign up×
Community /Pin to ProfileBookmark

setFocus to an iFrame?

In the code below I would like the focus to be set to the iFrame.

The intent is when a radio button is clicked, the contents of the iFrame would change. If the contents are longer than the display area, I want to be able to scroll down without moving the mouse to the iFrame scroll. I thought I needed to set the focus to the iFrame area.

I’ve tried some code (commented out) that doesn’t work.
Anyone have an idea how I could accomplish this?

[code=php]
<html>
<head>
<title>Clinic Minutes</title>

<script type=”text/javascript”>
var MinuteList = new Array();
MinuteList[0] = ”;
MinuteList[1] = ‘Minute001.html’;
MinuteList[2] = ‘Minute002.html’;
MinuteList[3] = ‘Minute003.html’;
// Change above array elements to valid files

function ShowMinute(item) {
document.getElementById(‘pickContent’).src = MinuteList[item];

// these attempts don’t work:
// document.getElementById(‘pickContent’).focus();
// parent.frames[‘pickContent’].document.forms[‘anyName’].pickContent.focus();
}

</script>
</head>
<body>
<center>

<h1> Clinic Minutes</a> </h1>

<form name=”anyName”>
<input type=”radio” name=’pick’ onClick=”ShowMinute(1)”> 6/7/2007
<input type=”radio” name=’pick’ onClick=”ShowMinute(2)”> 7/13/2007
<input type=”radio” name=’pick’ onClick=”ShowMinute(3)”> 7/20/2007
</form>

<p />
<iframe id=”pickContent” src=”” height=”300″ width=”600″ /></iframe>
</body>
</html>

[/code]

to post a comment
JavaScript

12 Comments(s)

Copy linkTweet thisAlerts:
@konithomimoJul 21.2007 — You script allows you to scroll the iframe's content without clicking on the iframe scrollbar, in IE6 and FF2 anyway . . . of course not left and right without a trackball
Copy linkTweet thisAlerts:
@JMRKERauthorJul 21.2007 — @konithomimo.

Yes, I can scroll within the iframe.

What I'm trying to accomplish is:

1. When the user click on a 'radio' button with the mouse.

2. The user could immediately use the "down arrrow" to scroll the contents of the iFrame (without and intermediate mouse click).

This is what I thought would work using the focus() command.

Currently it does this:

1. Click on radio button loads selected html file for display

2. Must click on iframe area to set focus

3. Then I can use down arrow to scoll (assuming html file is bigger than display area).

What I'm trying to eliminate is step #2 to have the focus set automatically after the mouse click on the radio button.

I don't know enough to know if this is possible for an iframe region.

My next thought was to surround iframe with a div tag, but I don't think that would help as the div would gain the focus, not the iframe.

Am I making my question clear? The code posted works fine in FF, I'm just trying to eliminate one mouse click.

Thanks for your interest.
Copy linkTweet thisAlerts:
@boskoJul 21.2007 — Try:

frames["pickContent"].document.getElementsByTagName('body')[0].focus()
Copy linkTweet thisAlerts:
@JMRKERauthorJul 21.2007 — Nope.

As soon as I press the down arrow after the mouse click on the radio button, the display changes to the NEXT radio button selection.

Checking the JS error console I get:

'frames.pickContent has no properties'.

I'll attempt variations on this theme to get some properties. ?

Anything else to try?
Copy linkTweet thisAlerts:
@boskoJul 21.2007 — This should work:

Make a function in page where iframe tag is i.e.
[CODE]function foc(){
frames["pickContent"].document.getElementsByTagName('body')[0].focus()
}[/CODE]

and then put this in onload of pages from iframe:
[CODE]parent.foc();[/CODE]

So every page in iframe onload will get focus.
Copy linkTweet thisAlerts:
@JMRKERauthorJul 21.2007 — Nope @bosko ... still no go.

For confirmation, this is what I have or have tried to this point.
[code=php]
<html>
<head>
<title>Clinic Minutes</title>

<script type="text/javascript">
var MinuteList = new Array();
MinuteList[0] = '';
MinuteList[1] = 'Minute001.html';
MinuteList[2] = 'Minute002.html';
MinuteList[3] = 'Minute003.html';

function foc() {
frames["pickContent"].document.getElementsByTagName('body')[0].focus()
}

function ShowMinute(item) {
document.getElementById('pickContent').src = MinuteList[item];

// these don't work
// document.getElementById('pickContent').focus();
// parent.frames['pickContent'].document.forms['anyName'].someText.focus();
// frames["pickContent"].document.getElementsByTagName('body')[0].focus();
// frames["pickContent"].document.getElementById('pickContent').focus();
// document.getElementById('pickContent').focus();
parent.foc();

// -- end of not working code
}


</script>
</head>
<body>
<center>

<h1> Clinic Minutes</a> </h1>

<form name="anyName">

<input id="m1" type="radio" name='pick' onClick="ShowMinute(1)">
<label for="m1"> 6/7/2007 </label>

<input id="m2" type="radio" name='pick' onClick="ShowMinute(2)">
<label for="m2"> 7/13/2007 </label>

<input id="m3" type="radio" name='pick' onClick="ShowMinute(3)">
<label for="m3"> 7/20/2007 </label>

</form>
<p />
<iframe id="pickContent" src="" height="300" width="600" /></iframe>
</body>
</html>
[/code]


Code works fine except for the part of setting focus to iframe region.

I'm still willing to try other stuff.

Thanks for all your considerations.
Copy linkTweet thisAlerts:
@boskoJul 21.2007 — No, you have to put
[CODE]onload='parent.foc();'[/CODE]
into body tag of pages Minute001.html, Minute002.html,Minute003.html
Copy linkTweet thisAlerts:
@JMRKERauthorJul 21.2007 — @bosko,

And function 'foc' also into each of the external pages?

Does the function need to be in the calling page at all?
Copy linkTweet thisAlerts:
@boskoJul 21.2007 — Function will be only in head of the calling page(where is it now in your posted code), but that function will be called only from iframe external pages(Minute001.html, Mi.....). So leave function foc() where it is and just add to iframe pages body tag:

<body onload='parent.foc();'>

Your calling page is parent to iframe pages.

Hope this will work. You can use this method (little bit modified )to access anything in iframe loaded pages...
Copy linkTweet thisAlerts:
@JMRKERauthorJul 22.2007 — Well, I must still be doing something wrong.

I changed the '<body onLoad="parent.foc()"> in Minute001.html, etc.

I get a 'frames.pickContent has no properties' in the JS error console.

Parent actions are still the same:

1. Click on radio button selection and iframe contents (Minute001.html etc) loads correctly.

2. Press down arrow and iframe contents changes to next (Minute002.html) file instead of expected scroll of Minute001.html file.

I don't mean to take up a lot of your time. I can live with the current action of having to click the iframe area before pressing the down arrow. Just frustrating as h... when it doesn't work as I think it is supposed to or I don't understand enough to fix it! :mad:

I can post it to a test site if you think that will help but I think I understood your last setup instructions. I'm using FF for testing and have not tried IE if you think that is significant.


Other question:
You can use this method (little bit modified )to access anything in iframe loaded pages...[/quote]
Do you mean <a ...> tags? <input ...> tags? <div ...> tags?

Or are you referring to something else?
Copy linkTweet thisAlerts:
@Wisest_GuyJul 22.2007 — Don't focus on the IFRAME element, focus on it's window:

document.getElementById('pickContent').contentWindow.focus();
Copy linkTweet thisAlerts:
@JMRKERauthorJul 22.2007 — @Wisest Guy ...

As they say in the army ... Tanks, Tanks a lot! ?

Success! Works as I would expect.

Now I can at least search and learn about 'contentWindow' as I have never seen this before.


I don't even know what to call it ... element ... parameter ... function.


Doesn't matter ... it works!!!

Appreciate all the help and thoughts of all. ?

My last question: How do you put a [RESOLVED] display at the start of the thread? :eek:
×

Success!

Help @JMRKER 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 4.29,
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: @Yussuf4331,
tipped: article
amount: 1000 SATS,

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

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...