JavaScript - Focus() Method Fails On Ff?

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?

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

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>

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>

I have a form that is used to insert a new classified ad or to update an existing ad.
When the submit button is pressed a javascript function is called to validate the fields. Some of the fields are set as required. If the field is empty ( as form[i].value = '' ) then this sets an error flag and after all fields have been tested will display an alert and each field that has an error will be highlighted in red.
This works great when a new ad is being created, but when the ad is being updated, and a required field is erased then it doesn't popup as an error, as if the script is just ignoring it.

Here is the code snipit:
Code:

function submitbutton(mfrm) {
	var me = mfrm.elements;
	var r = new RegExp("[\<|\>|\"|\'|\%|\;|\(|\)|\&|\+|\-]", "i");
	var r_num = new RegExp("[^0-9\.,]", "i");
	var r_email = new RegExp("^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]{2,}[.][a-zA-Z]{2,3}$" ,"i");

	var errorMSG = '';
	var iserror=0;
		// set notification background color
	var warnColor = '#<?php echo $this->error_color; ?>';
	
	// loop through all input elements in form
	for (var i=0; i < me.length; i++) {
	
		// check if element is mandatory; here mosReq="1"
		if ((me[i].getAttribute('mosReq') == 1)&&(me[i].style.visibility != 'hidden')) {
			if (me[i].type == 'radio' || me[i].type == 'checkbox') {
				var rOptions = me[me[i].getAttribute('name')];
				var rChecked = 0;
				if(rOptions.length > 1) {
					for (var r=0; r < rOptions.length; r++) {
						if (rOptions[r].checked) {
							rChecked=1;
						}
					}
				} else {
					if (me[i].checked) {
						rChecked=1;
					}
				}
				if(rChecked==0) {
					errorMSG += me[i].getAttribute('mosLabel').replace('&nbsp;',' ') + ' : <?php echo html_entity_decode(addslashes(JText::_('COM_CLASSIFIEDSREDUX_REGWARN_ERROR')),ENT_QUOTES); ?>\n';
					// notify user by changing background color, in this case to red
					me[i].style.background = warnColor;
					iserror=1;
				} 
			}

			if ((me[i].value == '') || (me[i].value.length < 2)) {
				errorMSG += me[i].getAttribute('mosLabel').replace('&nbsp;',' ') + ' : <?php echo html_entity_decode(addslashes(JText::_('COM_CLASSIFIEDSREDUX_REGWARN_ERROR')),ENT_QUOTES); ?>\n';
				me[i].style.background = warnColor;
				iserror=1;
			} 
		}
	}
	
	if(iserror==1) {
		alert(errorMSG);
		return false;
	}
}

Hy ! I have this form:
PHP Code:
<form name = "myform" method = "POST" action = "proba1.php">
        Name:<br /> <input type = "text" name = "name" size = "30" onBlur = "namecheck()" /><br />
        Username:<br /> <input type = "text" name = "username" size = "30" onBlur = "usercheck()" /><br />
        Password:<br /> <input type = "password" name = "password" size = "30" /><br />
        Repeat password:<br /> <input type = "password" name = "password2" size = "30" onBlur = "passcheck()"/><br />
        Email:<br /> <input type = "text" name = "email" size = "30" onBlur = "mailcheck()" /><br /><br />
       
                                <input type = "reset" name = "reset" value = "Reset" />
                                <input type = "submit" name = "submit" value = "Submit" />
                       
</form> 


and a Js file to check it:
PHP Code:
function namecheck()
{
        var name = document.myform.name.value;
                if(name.indexOf(" ") < 0)
                {
                        document.myform.name.focus();
                        document.myform.name.select();
                        alert("Pleaase enter your full name!")
                        return false;
                }
        return true;   
}

function usercheck()
{
        var username = document.myform.username.value;
                if(username.length < 6)
                {
                        alert("Username must be at least 6 chars!");
                        document.myform.name.focus();
                        document.myform.name.select();
                        return false;
                }
        return true;   
}

function passcheck()
{
        var password = document.myform.password.value;
        var password2 = document.myform.password2.value;
                if(password != password2)
                {
                        alert("The two passwords not identical!")
                }
}

function mailcheck()
{
        var mail = document.myform.email.value;
        var diff = mail.lastIndexOf(".") - mail.indexOf("@");
        var diff2 = mail.length - mail.lastIndexOf(".");
                if(mail.indexOf("@") < 0 || mail.indexOf(".") < 0 || diff < 2 || diff2 > 3)
                {
                        alert("Not a valid email adress!")
                }
} 


So when a value is not proper,there should be an alert message,then select and focus on the field.But only the alert works.I can set the select and the focus to any other field from the current one ,but not to the current.(For instance:if the name is not good:document.myform.username.select() works,but :document.myform.name.select() not.)
Can somebody help me?

(sorry for the noobiness)

Is there a way to focus on the most recent input to a text area (say after 50 inputs) without having to manually scroll down??

Code:

function console(msg){
     document.console1.input.value = document.console1.input.value+=msg
     document.console1.input.value.focus()
		}

~read that focus() should do it . . . but it doesn't

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!

Hi

I am opening a child window with the following href.

If it is a completly new window, it is opened and the focus shifts to it,
... but ...

if that href has been clicked on before and the window exists, the focus stays with the parent window and does NOT shift to the child

How can I make the focus shift ?

here is my href:


PHP Code:
echo "<a href='$Ad_detail' rel=\"external\" onclick=\"window.open (this.href, '$Ad_detail', 'height=800,width=960,scrollbars');  return false\" > 


I guess I need a "window. ??? focus();" in there somewhere - but I don't know what the ??? should be.

If you can help - many thanks

This is the code part that fails it's if check.

Code:

while (n<=30)
	{
	var slot='#slot'+n;
	$( slot ).data({no: n, id: itemId[i], name: itemName[i], equip: itemEquip[i], lvl: itemLvl[i], bonus: itemBonus[i], rstr: itemRStr[i], rdef: itemRDef[i]});
	$( slot ).draggable({ handle: slot, stack: slot, revert: "invalid", snap: "div#"+itemEquip[i], snapMode: 'inner',
	start: function(event, ui) 
	{
	$('div#'+$(this).data('equip')).css({'border': '2px dashed #0066CC', 'background': 'rgba(255,255,255,0.2)'})
	.droppable
	({
		drop: function(event, ui)
		{
			if (pLvl>=$('.ui-draggable-dragging').data('lvl') && pStr>=$('.ui-draggable-dragging').data('rstr'))
			{	
			alert(pLvl+", "+$('.ui-draggable-dragging').data('lvl'));
			$('.ui-draggable-dragging').css({'display':'none'});
			$('div#'+$('.ui-draggable-dragging').data('equip')).html
			(
			 "<img src='items/equipped/"+$('.ui-draggable-dragging').data('name')+$('.ui-draggable-dragging').data('id')+".png' />"
			)
				  $.ajax({type:"GET", url:"items/change.php", data:"id="+$('.ui-draggable-dragging').data('id')+"&no="+$('.ui-draggable-dragging').data('no'), cache:false, timeout:5000,
													error: function() {
														$('div.nogood').html
														(
														"There was an error. Please inform us about it in the forum."
														).css({'width':'400px','margin-left':'-200px'});
                                                       $( 'div.nogood' ).fadeIn(500, away);
													   function away()
													   {
														$( 'div.nogood' ).delay(2000).fadeOut(500);
													   };
                                                }
                                        });

			
			}
			else 
			{
				alert("HUh");
				$( 'div.nogood' ).fadeIn(500, away).css({'width':'400px','margin-left':'-200px'});;
				$('.ui-draggable-dragging').draggable({revert: true});
				if (pLvl<$('.ui-draggable-dragging').data('lvl'))
				{
				alert("Good");
				}
				else if (pStr<$('.ui-draggable-dragging').data('rstr'))
				{
				$('div.nogood').html("Not enough strength.")
				}
				function away()
				{
					$( 'div.nogood' ).delay(1400).fadeOut(500);
				};
			
			}
		}
	});
	},
	stop: function(event, ui) 
	{
		$('div#'+$(this).data('equip')).css({'border':'none', 'background':'transparent'}).droppable("destroy");
	}
	});
		n++;
		i++;
	}

This if comparison if (pLvl>=$('.ui-draggable-dragging').data('lvl') && pStr>=$('.ui-draggable-dragging').data('rstr')) somehow goes through. After the if statement I check the values with the alert but it displays 5 for pLvl and 10 for the draggables data (which are the correct numbers) so can anyone tell me why does this if statement still go through when pLvl is lower?

I have a function called onload that includes this:

Code:

window.onload=new function(){

...

if (menuletter!=false){
document.cookie="hddrv="+(menuletter)+"; path=/; expires="+exp.toGMTString();
document.enterIndex.src='enter2.gif';
// window.setTimeout("goIndex()",7000);
// return false;
}
...

}

<img border="0" name="enterIndex" src="enter1.gif" width="413" height="41">

If I uncomment the two lines and comment the document image swap line, they execute perfectly, so the routine works.

But if I try to do the image swap instead of the two commented lines, it doesn't swap.

Of course, the image enter1.gif and enter2.gif exist.

What am I doing wrong?

So, I know there are lots of threads out there about the jQuery validation plugin and people having issues with IE7, but most of them come down to syntax issues with a closing comma or what not. With that said, I have milled over this code of least a full day now and still have no idea why it fails in IE (all versions)


http://jsfiddle.net/rM3ej/4/

Can anyone give me some ideas or insight why this would completely fail?
Thanks in advanced.

Hi,
Because I'm using an asp script to submit this form, I cannot do a validation on the submit and so have chosen to do the validation with the onblur and the onmouseout functions.
The validation works well for the checking the first input, id CommenterName. If it's blank, the alert displays and then the cursor is moved to the email check. When the alert is dismissed the focus returns to the first input, but, and this is the problem, returning to the first input, triggers the second alert.
How do I return the focus to the first field without triggering the next alert?
Changing the order of the inputs in not an option.


Code:

	function checkCompletitionName(){
	    if (document.getElementById("CommenterName").value.length == 0)
	    {
		    document.getElementById("CommenterName").style.backgroundColor = "#efefef";
			alert("Please type your name.");
			document.getElementById("CommenterName").focus();
			return;
	    }
	    else
	    {
		    document.getElementById("CommenterName").style.backgroundColor = "white";
	    }		
	}
	function checkCompletitionEmail(){
		
	    if (document.getElementById("Email").value.length == 0  || (document.getElementById("Email").value.search("@") == -1 || document.getElementById("Email").value.search("[.*]") == -1))
	    {
		    document.getElementById("Email").style.backgroundColor = "#efefef";
			alert("Please check the email address for errors.");
			return;
	    }
	    else
	    {
		    document.getElementById("Email").style.backgroundColor = "white";
	    }		
	}
	function checkCompletitionComment(){
	    if (document.getElementById("Comment").value.length == 0)
	    {
		    document.getElementById("Comment").style.backgroundColor = "#efefef";
			alert("Please type your comment.");
			return;

			document.getElementById("Comment").focus();
	    }
	    else
	    {
		    document.getElementById("Comment").style.backgroundColor = "white";
			
	    }		
	}

the HTML code:
Code:

<form name="form1" method="get" action="/asp/formmail.asp">
	<p>
		<label class="labelContact">Select Category:</label>
		<select class="inputContact" name="category" id="category">
			<option selected="selected" value="support" id="support">Support</option>
			<option value="sales" id="sales">Sales</option>
			<option value="other" id="other">Other</option>
		</select>
	</p>
	<p>
		<label class="labelContact" for="CommenterName">Name <span class="redasterisk">*</span>:</label>
		<input size="42" class="inputContact" name="nameCommenter" id="CommenterName" onblur="checkCompletitionName()" type="text" />
	</p>
	<p>
		<label class="labelContact" for="Email">Email Address<span class="redasterisk"> *</span>:</label>
		<input size="42" class="inputContact" name="email_address" id="Email" onblur="checkCompletitionEmail()" type="text" />
	</p>
	<p>
		<label class="labelContact" for="Phone">Phone Number:</label>
		<input id="phoneAreaCode" class="inputContact" onKeyUp="return autoTab(this, 3, event);" size="4" maxlength="3" /> -
		<input id="phonePrefix" onKeyUp="return autoTab(this, 3, event);" size="4" maxlength="3" /> -
		<input id="phoneLastFour" onKeyUp="return autoTab(this, 4, event);" size="5" maxlength="4" />
	</p>
	<p>
		<label class="labelContact" for="RegistrationNo">Registration Number:</label>
		<input size="42" class="inputContact" name="registration" id="RegistrationNo" type="text" />
	</p>
	<p>
		<label class="labelContact" for="CompanyName">Company Name:</label>
		<input size="42" class="inputContact" name="company_name" id="CompanyName" type="text" />
	</p>
	<p>Comments <span class="redasterisk">*</span>:</p>
	<p><textarea rows="5" cols="58" name="comment" id="Comment" onmouseout="checkCompletitionComment()"></textarea></p>

thank you for your help

Hi Friends,

I am setting focus in popup window .in IE it is working properly but in mozilla the same code is not able to set focus on image.please tell me the solution if u knows.

My code is follows...myJsp.jsp==========

<div class="smallDottedBlueLink" >
<a title="" class="smallDottedBlueLinkAnchor" href="#" onkeypress="setFocusOnKeyPressPopUp(event);" onclick="setFocusOnClickPopUp();"
id="Hotels_TnC_popUp">View Terms and Conditions</a>
//focusNew1 is the id of the image in popup page.
function setFocusOnKeyPressPopUp(event){
setTimeout('document.getElementById("focusNew1").focus();',1000);
// setTimeout('dummy();',3000);
}

function setFocusOnClickPopUp() {
setTimeout('document.getElementById("focusNew1").focus();',1000);
} </div>


=============html page===============popup code ====
<div>
<div class="popup-top-corner-left-img"></div>
<div class="popup-top-image"></div>
<div class="popup-top-corner-right-img"></div>
</div>
<div>
<div class="popup-left-image"></div>
<div class="popup-div1">
<div>
<div class="XX-Large-Dark-Gold-popUpText">ffffff</div>
//id="focusNew1" for this id i need to set focus <div class="sprite-btn-close" id="focusNew1" onkeydown="javascript:return keyCheck(event)" onkeypress="javascript:closePopUpLayer1(event)" onclick="javascript:closePopUpLayer(),document.getElementById('Hotels_TnC_popUp').focus();" ></div> </div>
<div class="popup-dark-gray-text">fff</div>
</div>
<div class="popup-right-image"></div>
</div>
<div class="popup-bottom">
<div class="popup-bottom-corner-left-img"></div>
<div class="popup-bottom-image"></div>
<div class="popup-bottom-corner-right-img"></div>
</div>

please let me know in case any mistake i made ...its very urgent.
ThanksIn advance.

I'm trying to set the contact form on http://gspbuzz.com/test to remove the text when a user clicks it. Any idea how I can accomplish this?