|
JavaScript - Focusing Back The Parent Top.focus() Does Not Work In Ie
I have an Iframe in my webpage wher I have the focus.
I now want to give the focus back to the parent document, so i've used top.focus() in my code. Works fine in almost every browser but not inIE7. Any hints? Similar Tutorialscurrently i have the script as below which open the link in new tab but also shifts the focus to it...how do i keep the focus on the parent window PHP Code: <script type="text/javascript"> function openlink(url) { window.open(url); return false; } </script> <div class="btn" onclick="openlink()">Open Link</div> After open a child window, I would like to keep parent window on focus. I tried self.focus(), set new window in blur() as well as setting the setInterval, none of them works in either Firefox or IE. I think this question relates to the opening window in tab rather than in new window. Actually, in Firefox, it was opened in tab and in IE it was opened in new window. I have an application I'm working on and here is what I'm trying to do: I want users to work from a main application. Certain things will need to be done but the users wont want to see the main screen go away while doing these certain things. So my idea is to just open a new window with the content they need, they'll make their changes, the new window will close but then I want the main page to reload. What I've done now is at the end of the script that will be run prior to the new window closing is added this (its a php app): Code: echo "<script>window.close();</script>"; echo "<script>window.opener.location.reload(true);</script>"; Sometimes this works in IE and Firefox but never in Chrome. I know I've seen this done before on other sites, but I cant think of what they are. Can anyone tell me a reliable way that works in all browsers? I have a popup window which display a list of values in a tabular form. I have no problem to do the popup or display the table. The table has two columns; one is the "code" and the other is the "description". When a row is highlighted and the "SELECT" button in the popup window is clicked, I am supposed to pass the "code" of the highlighted row back to an input textfield in the parent window. And I am struggling with it. Would anybody kindly help? The question is on iframes/bookmarkablity and back button functionality. This issue I am facing is how to create iframes with bookmarkable url's without loosing the back button functionality.Lets say all the pages are in the same domain and the child pages inform parent of the child page load for updating the window.location.hash property to modify the current browser address bar. The updation of the url works fine on IE/FF/webkit. But the back button works as expected in IE-8 but the browser back-button does not work in FF/webkit (just the url changes the previous page is not loaded). If we don't update the window.location.hash property the back button works but the window url is not meaningful. Is there a way to get this functionality accross browsers, or is there an easier better way to do it (any other js libs). All pages are served from the same server to get around the permission issue. Gmail and other sites looks like they does something like this. Hello guys. I've been struggling on how to make this work. I have a problem in Javascript when it comes to passing of value in a input type field. page1.html Code: <html>
<head><title></title></head>
<form action="" method="post>
<input type="text" name="weight" value=""><a href="hw_calculator.html" target="name" onclick="window.open('hw_calculator.html','name','height=270,width=370,toolbar=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=yes'); return false;"> calculate </a>
</form>
</html>
hw_calculator.html Code: <html>
<head>
<title>
Height Converter (Metric/Standard)
</title>
</head>
<body>
<FORM>
<INPUT type=hidden value="(Math.round((P.value * 0.45359)*100))/100" name=K_expr>
<INPUT type=hidden value="(Math.round((K.value / 0.45359)*100))/100" name=P_expr>
<INPUT type=hidden value="(Math.round((F.value * 30.48 + I.value * 2.54)*100))/100" name=C_expr>
<INPUT type=hidden value="(Math.floor(C.value / 30.48))" name=F_expr>
<INPUT type=hidden value="(Math.round(((C.value - (Math.floor(C.value / 30.48) * 30.48)) / 2.54)*100))/100" name=I_expr>
<INPUT type=hidden value="(Math.round(P.value * 0.45359))" name=K_exprrnd>
<INPUT type=hidden value="(Math.round(K.value / 0.45359))" name=P_exprrnd>
<INPUT type=hidden value="(Math.round(F.value * 30.48 + I.value * 2.54))" name=C_exprrnd>
<INPUT type=hidden value="(Math.floor(C.value / 30.48))" name=F_exprrnd>
<INPUT type=hidden value="(Math.round((C.value - (Math.floor(C.value / 30.48) * 30.48)) / 2.54))" name=I_exprrnd>
<h2>Height Converter</h2>
<table border="0" bgcolor="#FFFF99" cellspacing="6" cellpadding="6">
<tr>
<td colspan>
<p class="conv" style="margin-top: 10px; margin-bottom: 10px"><b>STANDARD</b></p>
</td>
<td></td>
<td colspan>
<p class="conv" style="margin-top: 10px; margin-bottom: 10px"><b>METRIC</b></p>
</td>
</tr>
<tr>
<td>
<p class="conv" style="margin-top: 10px; margin-bottom: 10px">Feet : <input maxLength=1 size=1 value=0 name=F> Inches : <input maxLength=2 size=1 value=0 name=I>
</td>
<td>
<p class="conv" style="margin-top: 10px; margin-bottom: 10px"> = </p>
</td>
<td>
<p class="conv" style="margin-top: 10px; margin-bottom: 10px"><input maxLength=3 size=1 value=0 name=C disabled> cm.</p>
</td>
</tr>
<tr>
<td class="conv" colspan="2">
<input type="button" name="Taste" value="Calculate"
onclick="if (rounded.checked == true) {
eval('C.value = ' + this.form.C_exprrnd.value);
eval('K.value = ' + this.form.K_exprrnd.value) }
else {
eval('C.value = ' + this.form.C_expr.value);
eval('K.value = ' + this.form.K_expr.value)
}">
<INPUT type=checkbox name="rounded" value="rounded" checked disabled><font size="1" face="Verdana">Rounded Result</font>
</td>
</tr>
</table>
<p class="conv" style="margin-top: 10px; margin-bottom: 10px">
</body>
</html>
I want the value of Code: <input maxLength=3 size=1 value=0 name=C disabled> , this is from hw_calculator.html, to be passed on the Code: <input type="text" name="weight" value=""> on page1.html. How can I do this? Huge thanks. I have an HTML page that is making use of JQUERY and many other JQUERY plugins. Inside this HTML page there are 2 different types of iFrames that display PHP forms. One is a normal iFrame: Code: <iframe height="740" allowTransparency="true" frameborder="0" scrolling="auto" style="width:100%;border:none;overflow-x:hidden" src="https://www.website.com/machform/embed.php?id=9" title="Contact Us"><a href="https://www.website.com/machform/view.php?id=9" title="Contact Us">Contact Us</a></iframe> The other makes use of a JQUERY plugin called Shadowbox: Code: <a href="https://www.website.com/machform/embed.php?id=8" rel="shadowbox;width=1100;height=950;player=iframe" class="button1"><span></span><strong>Click Here</strong></a> Inside these iFrames are PHP forms from a PHP form application called MachForm, which is highly customizable. Here are the questions. Ultimately, I want to accomplish 2 things: 1. I would like to send variable information from the PHP form in the iFrame to my HTML page, to be displayed within javascripts. For example: If someone fills out a PHP form in my iFrame and clicks submit, I want to have a JQUERY popup say, "Thank you, [NAME]". 2. When the user submits the form, the action of clicking the submit button in the PHP form should enable #1, above. There needs to be a way to tell the HTML/Javascript that the submit button on the PHP form in the iFrame has been clicked. I realize this is all fairly vague, especially without the addition of more code. However, I am not even sure if I am posting this in the correct forum, since it incorporates a little of several languages and styles. From this point any direction or idea would be very helpful! Hi All, I need to show/focus the parent window which is in back when click a link from child window in Chrome.This problem is in Chrome browser only. We have used the below code self.blur(); Window.opener.focus(); But this is not working in Google Chrome. Please suggest me some workaround to achieve this. Thanks in Advance Reply With Quote 12-19-2014, 09:26 PM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts Window is not defined. window is. JavaScript (and the DOM) is case sensitive. You must pay attention to upper/lower case spelling, carefully. By the way, you shouldn't need the blur() call. If you focus on some window (any window) then any other focus should be lost. Hello everyone. I'm having a bit of a problem with the ajax chat system that I'm working on. The problem that I am having is that in the chat box if say you want to go and high light something inside of the chat box every time the chat box goes to refresh which happens to be every 2 seconds it loses focusing on the text that you were high lighting. I know it's because that its re-entering the data box into there over and over again so every time it re-enters it loses the focus. I don't know of any other way of doing this though. This is a problem I would like to fix, I've seen others ajax chat systems that actually doesn't mess up the focus of the chat box when it refreshes. How can I go about doing this? Here's my current code: Code: var refresh_rate = 2000; //Every second
var idleTime = 1200000; //20 minutes
function $(elem) {
var obj = document.getElementById(elem);
if(!obj) return;
return obj;
}
function addEvent(elem, typ, func) {
var obj = document.getElementById(elem);
if(document.getElementById && !document.all) {
obj.addEventListener(typ, func, false);
}
else if(document.all) {
obj.attachEvent("on"+typ, func);
}
}
var http = createAjax();
function createAjax() {
if(!this.http && window.ActiveXObject) {
try {
this.http = new ActiveXObject("Msxml2.XMLHTTP" || "Microsoft.XMLHTTP");
}
catch(e1) {
this.http = false;
}
}
if(!this.http && window.XMLHttpRequest) {
try {
this.http = new XMLHttpRequest();
}
catch(e2) {
alert("Sorry we was unable to make a request between your browser.");
}
}
return this.http;
}
function cancelInterval() {
this.canInterval = window.setTimeout("stopInterval();", idleTime);
}
function stopInterval() {
window.clearInterval(this.refreshChat);
this.refreshChat = null;
this.canInterval = null;
$('chat-window').innerHTML += '<span style=\"color:#D83E3E; font-size:0.8em; font-style:italic;\">Your chat has gone idle</span>';
$('chat-window').scrollTop = $('chat-window').scrollHeight;
}
function canTimeout() {
window.clearTimeout(this.canInterval);
this.canInterval = null;
}
function startRefresh() {
this.refreshChat = window.setInterval("rh()", refresh_rate);
}
function pressEnter(e) {
if(this.canInterval) {
canTimeout();
}
var textbox = $('textbox').value;
if(e.keyCode == 13) { //press enter
http.open('post','scripts/php/chat.php',true);
http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
http.send('textbox='+textbox);
$('textbox').value = '';
}
http.onreadystatechange = rf;
function rf() {
if(http.readyState == 4) {
var p = document.createElementBy("p");
p.innerHTML = http.responseText;
$('chat-window').appendChild(p);
$('chat-window').scrollTop = $('chat-window').scrollHeight;
}
}
if(!this.refreshChat) {
startRefresh();
}
}
function sendText() {
if(this.canInterval) {
canTimeout();
}
var textbox = $('textbox').value;
var params = 'textbox='+textbox;
http.open('post','scripts/php/chat.php',true);
http.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
http.setRequestHeader('Content-length', params.length);
http.setRequestHeader('Connection','close');
http.send(params);
$('textbox').value = '';
http.onreadystatechange = rf;
function rf() {
if(http.readyState == 4) {
$('chat-window').innerHTML = http.responseText;
$('chat-window').scrollTop = $('chat-window').scrollHeight;
}
}
if(!this.refreshChat) {
startRefresh();
}
}
function rh() {
if(!this.canInterval) {
cancelInterval();
}
var rmd = Math.random();
http.open('get','scripts/php/chat.php?s=true&rmd='+rmd);
http.send(null);
http.onreadystatechange = refresh;
function refresh() {
var scrollT;
($('expand').innerHTML == 'Expand +') ? scrollT = 133 : scrollT = 233;
if(http.readyState == 4 && http.status == 200) {
$('chat-window').innerHTML = http.responseText;
if($('chat-window').scrollTop+36 >= $('chat-window').scrollHeight-scrollT) {
$('chat-window').scrollTop = $('chat-window').scrollHeight;
}
}
}
}
this.refreshChat = window.setInterval("rh()", refresh_rate);
Thanks with any of the help that I can get. Hi I'm banging my head against this problem and I'd really appreciate some help. I think the problem is cause by my lack of understanding of how the browser (firefox 3.6.3) handles focus. A simplified version of my problem is: I've defined the function Code: function two_focus()
{
document.getElementById("two").blur();
alert("hello");
}
then in the body I have the form with two text boxes Code: <input id="one" type="text"><input id="two" type="text" onfocus="two_focus();"> When the page is loaded and I click in the second textbox I get the alert, all well and good. I OK the alert box, but when I click on box 1, or anywhere on the page for that matter, the function is called and the alert comes up. I just don't understand why the focus is being returned to the second box when I click anywhere in the browser window. Any comments will be gratefully received. Hello all. Complete newbie to this and to be quite honest, completely out of my depth. Ok, I have the following set up on my page - the page essentially uses three different search methods to bring back data in a gridview. 1. A cascading drop down list (ddlBuyer, ddlSub, ddlProd) and an associated radio button radBuyer. 2. An autocomplete textbox (tbxProdAC) that sources product information and an associated radio button (radProd) 3. A text box whereby users specify the number of products they wish to see and (txtHowMany) a subsequent sub category radio button list that breaks the products down further (radTopx) What I would like to do is essentially make the page so that a user can only user one of the above methods and the radio is focused according to what the user first specifies. For example, if they wish to use the ddl method, they should click ddlBuyer, ddlSub and ddlProd and the focus is placed upon the radBuyer. Along side of this, any information that may have been entered into tbxProdAC or txtHowMany is cleared. Alternatviely, should a user use the drop down method then wish to use the third method specified above, once a user clicks in txtHowMany, the ddl should revert back to their original values. I would like to achieve this in the c# code behind and I currently have the following code on my page load event/ I have got to the point where I am going round in circles (mainly because I don't know what I am doing!) so I would appreciate a few pointers. Code: ddlProd.Attributes.Add("onchange", "return SetRadioFocus('" + radBuyer.ClientID + "');");
radTopx.Attributes.Add("onclick", "return SetRadioFocus('" + radTopx.SelectedItem + "');");
tbxProdAC.Attributes.Add("onclick", "return SetRadioFocus('" + radProd.ClientID + "');");
ClientScript.RegisterClientScriptBlock(this.GetType(), "MyScript", @"
function SetRadioFocus(target)
{
document.getElementById(target).checked = true;
}"
, true);
If someone can help me, I would be extremely grateful and it would save me from smashing my head further into my desk. Please excuse my ignorance, brand spanking new to this and feeling more than a little thick. Hello all, I have a page which has a form and also one iframe in the same. there is a button on the parent form. when the button is clicked, i am submitting the iframe and parent both. forms are getting submitted. but when i do print_r for iframe values, it is blank below is the code Parent page: Code:
<?
print "<pre>";
print_r($_POST);
print "</pre>";
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function validate(){
document.getElementById('mainform').submit();
window.frames['iframe1'].document.forms[0].submit();
}
//-->
</SCRIPT>
<BODY>
<FORM METHOD=POST ACTION="" name='mainform' id='mainform'>
<TABLE>
<TR>
<TD>Name</TD>
<TD><INPUT TYPE="text" NAME="Name_VC"></TD>
</TR>
<TR>
<TD>Address</TD>
<TD><INPUT TYPE="text" NAME="Address_VC"></TD>
</TR>
<TR>
<TD colspan=2><INPUT TYPE="button" name="proceed" value="Save" onClick="validate();"></TD>
</TR>
</TABLE>
</FORM>
<iframe src="test1.php" id='iframe1'></iframe>
</BODY>
</HTML>
iframe page : test1.php Code: <? print "<pre>"; print_r($POST); print "</pre>"; ?> <form name='mainform2' id='mainform2' method='post' action=''> Roll number : <INPUT TYPE="text" NAME="Rollnum" value=''> Age: <INPUT TYPE="text" NAME="Age_IN" value=''> </form> Please tell me what is my mistake or how can i achieve values of all 4 fields Million thanks Hello everyone, I have a page. In that page is an iframe, lets name it 'A'. inside A there is another iframe 'B'. there is a link on that page which on click opens a popup. In that pop up, there is actually a document upload facility. Now i want that after every upload (onSubmit), iframe A should refresh. have done it many times but today its not working. Code: function validate() {
(window.parent.opener.location.href)=(window.parent.opener.location.href);
window.parent.opener.location.reload(true);// this is tried as well
}
Can some one please help. it always refreshes only B. Thanks Everything up until the focus line works, any ideas? Code: else {
alert ("Please enter your Postcode correctly, this includes:\n \n * Correct Spacing - AA1 1AA \n * Correct amount of letters and numbers. \n \n Sorry if this causes any inconvenience, but it is to your benefit.");
document.delAdd.postcode.value = "";
document.delAdd.postcode.focus();}
I've got an older style frameset (3 frame within). Its a user browse/select set. Top frame is controls, middle is headings & sort control, bottom is the scrollable browse data. This needs a performance solution since it works fine when the browse data is low volume (or the network is blazing fast). The prob: Once the set is fully loaded the cursor is placed in a text box in the control frame allowing the user to be able to type a search term without having to click in the textbox. Problem is the cursor doesn't stick in the bottom frame after _all_ that data loads I tried: Code: window.parent.MCABrowseControl.document.getElementById('txtQuickFind').focus()
alert("after")
no errors of any kind and for a split second the cursor is visible -- and then is gone (the focus appears to revert to the bottom frames first input (a radio button) I messed with onreadystatechange but couldn't get my fx to fire when the state became "complete". It only fired once when "loading" Any methods/properties I can use to solve the issue of _waiting_ for all frames to finish before setting the focus(), and have it stay there? thanks Hi, I need your help guys. I've got a little problem. I have some smileys which I enter to a textarea when clicking on them. It works perfect, but once the user clicks on a smiley, the focus goes off of the textfield. I use document.getElementById('message').value += smileycode It works perfectly, it enters the smileycode to the textarea. My problem is... When I say document.getElementById('message').focus() it goes back to where the cursors has last been so before the smileycode. Instead of this, I want the focus to go back after the insertion of the code. I hope it's understandable. And thanks in advance! I've got a div named "iframe_container". Inside it are an iframe used to display floor maps and another div named "compass_rose". I have a function that moves compass_rose around the map based on an office number. Now iframe_container is scrollable, it's only big enough to display about 2/3 of the map at any one time. I designed it that way to properly fit in the sharepoint site it's going in. To help some of our less tech savvy users it would be nice if iframe_container would automatically shift its view to keep the compass_rose visible at all times. Can that be done? Thanks. <div id="iframe_container" style="width:1000px; height:635px; position: relative; overflow:hidden"> <div id="compass_rose" style="top: 10px; left: 10px; position: absolute; z-index: 2; visibility:hidden;"><img alt="Compass Rose" src="compass_rose_animated2.gif" width="80" height="80" /></div> <iframe id="viewer" width="1600" height="635" src="front_page2.jpg" marginwidth="1" marginheight="1" name="viewer" scrolling="no"></iframe> </div> Have a jsp page with 10 editable fields and in last Add Button.Now when user edit a field from value 10 to 20(example)and click on Add .Value will be changed and focus will return to the same field.similarly for other fields.how to to .any code sample?
Hello, I am researching an issue in a rather big app which displays pdf files in IE window. The issue is that inside javascript code we call 'window.setTimeout( win.focus() ...)' (for the child window), but it doesn't come into focus every time, seems a bit random when it does and does not come into focus. At present I wrote a much smaller app + javascript to reproduce the issue, but it does not manifest in same way. Specifically this is the confusing part: window.setTimeout( function() {win.focus(); win.moveTo( 200 , 200 ); } , 500 , "JavaScript" ); the 'win' does move, but never comes into focus. Any ideas about why the focus function does not accomplish what I'm trying to do? Here's the code of my simplified app + html + javascript: JAVASCRIPT: Code: var win;
function f(s) {
website="http://machine/apache/jsfnu/mytest" + s + ".txt";
if (!win)
win = window.open( website , "thetest" , "toolbar=yes,resizable=yes");
else
{
win.url = website;
}
win.navigate(website);
win.focus();
window.setTimeout( function() {win.focus(); win.moveTo( 200 , 200 ); } , 500 , "JavaScript" );
}
function emitApplet() {
document.write("<APPLET CODE=\"mytest.class\" archive=\"mytest.jar,netscape.jar\" NAME=\"myApplet\" MAYSCRIPT HEIGHT=1000 WIDTH=1000> </APPLET>");
}
function window_onUnload()
{
}
JAVA code: Code: import netscape.javascript.*;
import java.awt.*;
import java.awt.event.*;
public class mytest
extends java.applet.Applet implements ActionListener
{
Button nextButton;
Button prevButton;
int _page=1;
public void init() {
System.err.println("init started");
setLayout(new FlowLayout());
System.err.println("setLayout done");
nextButton = new Button("Next!");
System.err.println("next button created");
prevButton = new Button("Prev!");
System.err.println("prev button created");
add(prevButton);
System.err.println("prev button added");
add(nextButton);
System.err.println("next button added");
nextButton.addActionListener(this);
System.err.println("next button action");
prevButton.addActionListener(this);
System.err.println("prev button created");
}
public void actionPerformed(ActionEvent evt)
{
if (evt.getSource() == nextButton)
{
doButton(++_page);
}
else if (evt.getSource() == prevButton)
{
doButton(--_page);
}
}
public void doButton(int page)
{
JSObject win = JSObject.getWindow(this);
JSObject doc = (JSObject) win.getMember("document");
JSObject loc = (JSObject) doc.getMember("location");
String s = (String) loc.getMember("href");
String []args = new String[1];
args[0] = (new Integer(page)).toString();
win.call("f", args);
}
public void paint (java.awt.Graphics g)
{
g.drawString("Hello, World9!",50,25);
}
}
HTML: Code: <script type="text/javascript" src="StartTest.js"> </script>
<html>
<head>
<title>try</title>
</head>
<body bgcolor="#fdf8ed" text="black" language="Javascript" onload="window_onUnload()">
<center>
<script type="text/javascript">
emitApplet();
</script>
</center>
</body>
</html>
Hello, I have a search textbox field which populates the results in a dropdown after searched. But there is no way, to let users to explain to click or use the dropdown to see the results.. thus, I would like to have a focus on the dropdown, so after the user searches through the search textfield, and enter, the dropdown gets the focus so it will user friendly. can anyone help me on this. thank you in advance |
|||||||