JavaScript - Can We Have Two Onfocus Javascript Events For Single Html Tag? Thank You..

I am using a freebie script that changes css elements using onClick when you hit a button.

I have 12 choices I want to add, and don't want 12 buttons, but rather a dropdown list.

2 button examples (and js code) is:
<input onclick="changecss('li','background','url(images/list_02.jpg) no-repeat 10.2em .12em')" value="Change to BG 2" type="button" />
<input onclick="changecss('li','background','url(images/list_03.jpg) no-repeat 10.2em .12em')" value="Change to BG 3" type="button" />


How do I convert this to a SELECT list??

Thank you!

in the attached photos you have a wheel of colors and a corresponding cascading menu. I'd like to just be able to onmouseover one of the 8 colored polygons within the wheel, have it replace the wheel with one of 8 new images depending on which polygon the mouse is over, and at the same time, light up the corresponding image on the cascading company menu group. is this possible with javascript? links to a tutorial?

I've had some experience with replacing one image with another onmouseover, but not with breaking up one image into 8 parts, each with a separate image replacement. I could see how you could perform this with only 4 different colored polygons, but not 8.

Hi all,

The question is hopefully relatively simple. if I have an object say
Code:

[
var SampleObject = function(id){
  SampleObject.id = id;
  SampleObject.age= 22;
}

Is there a way to create an event that triggers every time the age member value changes?

Thanks
Ollie.

Hello,

I have a question about the cut and paste javascript events calendar
at http://www.javascriptkit.com/script/...calendar.shtml
Is there any way to add links to the event description that appears in the box below the calendar?

Thanks for your help.

Hello

I need help regarding capturing page events(mouse click ,navigation) etc on web pages and write them into a text file (using javascript). One way is using javascript events and writing them into text file. Is there be a better way of doing this ??

Hi I am using httpXmlRequest object to call a xml web service. In order to successfully perform a task there are couple steps need to happen.

1 you have to request for a session (cookie)
2 with the cookie, we need to authenticate with the server
3 then perform other actions

snippet of my code looks something like this. Basically here i am trying to get the cookie, login and then logout once logged in.

function connect() {
document.myForm.elements['myTextArea'].value += "connecting to teh server.\n";
try {
xhttp.open("GET",urlStr + commonInfoParam, true);
xhttp.send();
xmlDoc = xhttp.responseXML;
xmlDoc.onreadystatechange = function () {
if(xmlDoc.readyState == 4) {
var resultsTag = null;
resultsTag = xmlDoc.getElementsByTagName("results");

if(resultsTag != null) {
for(i=0;i<resultsTag.length;i++) {
var commonTag = resultsTag[i].getElementsByTagName("common");
for(j=0;j<commonTag.length; j++) {
cookie = commonTag[j].getElementsByTagName("cookie")[0].childNodes[0].nodeValue;
break;
}
}
}
if(cookie != null) {
document.myForm.elements['myTextArea'].value += "cookie found: " + cookie + "\n";
login();
}
}
};
} catch(e) {
document.myForm.elements['myTextArea'].value += "Exception occurred at connect: " + e.message + "\n";
}
}




function login() {
var loginRequestURL = "http://testconnect.com/api/xml?action=login&login=" + username+ "&password=" + password + "&session=" + cookie;
try {
xhttp.open("GET", loginRequestURL, true);
xhttp.send();
xmlDoc = xhttp.responseXML;
xmlDoc.onreadystatechange = function () {
alert('in loginResponseHandler');
if(xmlDoc.readyState == 4) {
try {
loginStatus = xmlDoc.documentElement.childNodes[0].attributes.getNamedItem("code").nodeValue;
if(loginStatus == 'ok') {
alert("login is good: " + loginStatus);
logout();
} else {
}
} catch(e) {}
}
};
} catch(e) {
}
}




function logout() {
alert("in logout");
try {
xhttp.open("GET", logoutRequestURL + cookie, true);
xhttp.send();
xmlDoc = xhttp.responseXML;
xmlDoc.onreadystatechange = function () {
alert("in logoutResponseHandler");
if(xmlDoc.readyState == 4) {
try {
status = xmlDoc.documentElement.childNodes[0].attributes.getNamedItem("code").nodeValue;
if(status == 'ok') {
alert(status);
}
} catch(e) {}
}
};
}
catch(e) {}
}


so when I run my code in the browser, all my alert stages give me proper message as expected. But at the final alert, it hangs. I just could not figvure out what am i doing wrong. can any one pin point this out for me please?

Thanks in advance.

KM

without outside extensions, how does one debug javascript events on a webpage that primarily relies on unobtrusive JS events?

for instance, i have a website i log into that has a "submit" button. the button itself only has this code:

Code:

<input type="image" class="png" tabindex="5" value="Go" src="login.png">

obviously, the only way that it can submit the form is to use javascript. and it's obviously unobtrusive in this case.

consider the fact that it isn't my webpage, and i don't want to try to put random breakpoints everywhere blindly.

any help!?

Hi there, I have this listbox that I want the user to select only one choice at a time. How do I disable the multiple selection feature in javascript?



<select id="lstBxEmail" name="listBoxEmail" multiple="multiple" style="width: 580px;"> <option>Java</option> <option>PHP</option> <option>Perl</option> <option>Javascript</option> <option>C#</option> <option>Powershell</option> </select>




<select id="lstBxEmail" name="listBoxEmail" multiple="multiple" style="width: 580px;">

<option>Java</option>

<option>PHP</option>

<option>Perl</option>

<option>Javascript</option>

<option>C#</option>

<option>Powershell</option>

</select>

I have created my website and i have one page that has a spry menu bar with 15 columns. I also have a javascript file that is an image gallery. i want to add that javascript file to my html/css website. not only that but i need that java script file to open on the appropriate image depending on what titled column i have clicked on. any help would be greatly appreciated!

Hello i need help with a simple single field javascript login form, i am building a small website for I and my classmates.
i want it to be able to redirect each user to a specific page when a corresponding passcode is entered, i know its unsafe but we dont plan on keeping valuable information on the site, i dont know about MSQL and dont even wish to use it, the code works at this level but am unable to add users since i dont understand javascript if someone could help me i will be very grateful
thanks in advance

/*here is the code i got so far*/

<tittle>
Enter Passcode to proceed
</title>
<h1 style="font-family:Comic Sans Ms;text-align="center";font-size:20pt;
color:#00FF00;>
</h1>
<form name="login">
Passcode: <input type="text" name="userid"/>
<input type="button" onclick="check(this.form)" value="Login"/>
<input type="reset" value="Cancel"/>
</form>
<script language="javascript">
function check(form)/*function to check userid */
{
if(form.userid.value == "JohnDoe") /* checkes userid */
{
window.open("johndoe.php")/*target page */
}
else
{
alert("Invalid Passcode, please try again!")/*error message*/
}
}

I have this script which is set to generate random anagrams of my name in rotation which works fine, but I can't work out how to put multiple instances of it on one page. if someone could point me in the right direction i'd be very grateful. thanks

the code is

var quotations = new Array()
quotations[0]= "germaine arnold"
quotations[1]= "endearing moral"
quotations[2]= "analog reminder"
quotations[3]= "regained normal"
quotations[4]= "renaming ordeal"
quotations[5]= "nominal regrade"
quotations[6]= "arraigned lemon"
quotations[7]= "ringleader moan"
quotations[8]= "mineral groaned"
function display()
{
a=Math.floor(Math.random()*quotations.length)
document.getElementById('quotation').innerHTML=quotations[a]
setTimeout("display()",5000)
}


and i'm calling the function using:

<div id="quotation">
<SCRIPT type="text/javascript">display()</SCRIPT>
</div>

Hi all,

I have a REALLY strange problem - maybe a new set of eyes can help me.

Look at these pieces of code:

This generates the code
Code:

<!-- BEGIN code_open -->
<dl class="codebox">
<dt>{L_CODE}:
<a href="#" onclick="autoSelect(this.parentNode.nextSibling); return false;">{L_SELECT_ALL_CODE}</a>
</dt>
<dd>
 <pre onfocus="doTest(this)"> 
<!-- END code_open -->

<!-- BEGIN code_close -->
</pre>
</dd>
</dl>
<!-- END code_close -->

Test JS just for now
Code:

var doTest = function(a) {
    alert(a);
}

The HTML as seen by Firebug
Code:

<dt>Code: <a href="#" onclick="autoSelect(this.parentNode.nextSibling); return false;">Select all</a></dt><dd>
 <pre onfocus="doTest(this)"> 
Test&nbsp;Test&nbsp;Test
</code></pre></dd>

One little problem... it doesn't work!!!

And yes the function being called is accessible. For that matter, simply putting "alert('hello')" into the "onfocus" also fails.

I even checked at W3CSchools to verify that:

(1) The <pre> element supports "onfocus" (it does).
(2) I ran their "Try it" and "onfocus" is working in my browser (Firefox 3.6.17, WinXP 32).

What the heck???????????

Any ideas?

Thanks!

-- Roger

Hello

The onFocus events I have come across seem to deal with changing the background colour of the field on a Web form, so that the active field is a different colour to the background field of the other form elements.

But how would I use onFocus simply to have the cursor moving in the active field (on a Web form it might be the 'name' field for example)?

The code I have at the moment looks like this:

Code:

<!DOCTYPE etc

<head>
    <title>Janko</title>
    
    <style type="text/css">
        body
        {
            font-family: Arial, Sans-Serif;
            font-size: 13px;
        }
	#inputArea
	{
	    font-family: Arial, Sans-Serif;
	    font-size: 13px;
	    background-color: #d6e5f4;
	    padding: 10px;
	    width:310px;
	}
	#inputArea input, #inputArea textarea
	{
	    font-family: Arial, Sans-Serif;
	    font-size: 13px;
	    margin-bottom: 5px;
	    display: block;
	    padding: 4px;
	    width: 300px;
	}

        .activeField
        {
            background-image: none;
            background-color: #ffffff;
            border: solid 1px #33677F;
        }
        .idle
        {
	    border: solid 1px #85b1de;
	    background-image: url( 'blue_bg.png' );
	    background-repeat: repeat-x;
	    background-position: top;
        }
    </style>
    <script src="jquery-1.2.6.min.js" type="text/javascript"></script>
    

<script type="text/javascript">
        
$(document).ready(function(){
	    $("input, textarea").addClass("idle");
            $("input, textarea").focus(function(){
                $(this).addClass("activeField").removeClass("idle");
	    }).blur(function(){
                $(this).removeClass("activeField").addClass("idle");
	    });
        });


    </script>

</head>
<body>
    <h2><a href="www.jankoatwarpspeed.com">Janko At Warp Speed</a></h2>
    <p>This example is from the article <a href="http://www.jankoatwarpspeed.com/post/2008/05/22/CSS-Message-Boxes-for-different-message-types.aspx">Enhance your input fields with simple CSS tricks</a></p>
    <div id="inputArea">
        <label for="txtName">
            Name</label>
        <input id="Text16" type="text" />
        <label for="txtEmail">
            Email</label>
        <input id="Text17" type="text" />
        <label for="txtWebsite">
            Subject</label>
        <input id="Text18" type="text" />
        <label for="txtComment">
            Message</label>
        <textarea id="Textarea6" rows="4" cols="30"></textarea></div>
</body>
</html>

Many thanks

Steve

Hi,
can someone show me why I cant get the onfocus and onblur to loop thru the

function showTextContent() when entering the words one, two, three or four. I have tried for days, googled and lost a lot of hair trying to figure it out.

http://www.data-affiliates.com/DL234...5/attempt.html


Code:

<html>
<!-- Created on: 08.08.2009 -->
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
  <title></title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <meta name="author" content="sdfgdfg">
  <meta name="generator" content="AceHTML 6 Pro">
<link rel="stylesheet" href="vid61.css" type="text/css" media="screen" />	

<script type="text/javascript">
function toggle(id, status){
	document.getElementById(id).style.visibility = status;
} 

 function myFocus(element)
{
if (element.value == element.defaultValue) {
element.value = '';
}
}

function myBlur(element) {
if (element.value == '') {
element.value = element.defaultValue;
}
} 

function populateSearchField(){
	var specialChars = "\\.+*?[^]$(){}=!<>|:,-=/";
	var ignoreList = ["a", "the"];

	var i, j, searchFld, keywords;
	if (!(searchFld = document.getElementsByName('formcontent')[0])) return;
	if (!(keywords = document.referrer.match(/[pq]=(.*?)&/))) return;
	var preg_quote = function(str){return (str+'').replace(/([\\\.\+\*\?\[\^\]\$\(\)\{\}\=\!<>\|\:])/g, "\\$1");}
	keywords = decodeURIComponent(keywords[1]).replace(new RegExp('[' + preg_quote(specialChars) + ']', 'g'), ' ').split(/[\+ ]/);
	for (i = 0; i < keywords.length; i++){
		for (j = 0; j < ignoreList.length; j++) if (!keywords[i] || (keywords[i] == ignoreList[j])) {
			keywords.splice(i--, 1);
			break;
		}
	}
	searchFld.value = keywords.join(' ');
}

function keywordMatch(keywords, text) {
	var result = 0;
	for (var i in keywords) {
		if (text.match(new RegExp("(^| )" + keywords[i] + "( |$)", "i"))) {
			result++;
		};
	}
	return result;
}

 function showTextContent() { 
 var i, matches = [];
 var div, divcontent, divs = document.getElementById("ts-1").getElementsByTagName('div');
 var keywords = document.getElementsByName('formcontent')[0].value.split(' ');
 
 for (i = 0; i < divs.length; i++) {
  div = divs[i];
  divcontent = div.lastChild.nodeValue;
  if (keywordMatch(keywords, divcontent)) {
   matches.push(div);
  }
 }
 if (matches[0]) {
		document.getElementById('take1000').innerHTML = matches.length + " matches / Treffer";
		for (i = 0; i < matches.length; i++) {
			matches[i].onmouseover(toggle('take1000', 'visible'));
			matches[i].onmouseout = null;
		}
	}
	else { 
		
		document.getElementById("ts-1").innerHTML = ""	; 
		 matches[i].onmouseover(toggle('notake1000', 'visible'));
			
		 	
		 
		
		
	}
} 

window.onload = function(){
populateSearchField();
showTextContent(); 

}

</script>

</head>
<body>
<div id="container">
<div  id="notake1000">Keine Ergebnisse / No Matches</div>


<div id="take1000"></div>
<div  id="ulent">Search this site / Diese Seite durchsuchen :</div><form><input type="text" name="formcontent" value="one" onmouseover="toggle('notake1000', 'hidden');toggle('take1000', 'hidden');" onfocus="myFocus(this);  showTextContent();"   onblur="myBlur(this);  showTextContent();" style="font-family:Arial;color:#ffff40;text-align:center;font-size:12px;font-weight:bold;float:right;margin-left : auto;margin-right : 2px;border: 2px double #AFAFAF;background-color: #5F5F5F;padding:1px;height:18px;width:293px;" /></form>  

	

<div id="ts-1" style="visibility:hidden;">
			 
     		
			  			 
   
	   		<div  onmouseover="toggle('fo-test1', 'visible');" onmouseout="this.className='ts-1-1';toggle('fo-test1', 'hidden');" onmouseup="this.className='ts-1-3A';" class="ts-1-1"><object id="fo-test1" style="visibility:hidden;" type="application/x-shockwave-flash" data="peelawayok.swf" width="356" height="286"><param name="movie" value="peelawayok.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="menu" value="false" /></object>www.Ihre-domain.de<br />one</div>
			<div  onmouseover="toggle('fo-test2', 'visible');" onmouseout="this.className='ts-1-2';toggle('fo-test2', 'hidden');" onmouseup="this.className='ts-1-3A';" class="ts-1-2"><object id="fo-test2" style="visibility:hidden" type="application/x-shockwave-flash" data="peelawayok.swf" width="356" height="286"><param name="movie" value="peelawayok.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="menu" value="false" /></object>www.Ihre-domain.de<br />two</div>
			<div  onmouseover="toggle('fo-test3', 'visible');" onmouseout="this.className='ts-1-3';toggle('fo-test3', 'hidden');" onmouseup="this.className='ts-1-3A';" class="ts-1-3"><object id="fo-test3" style="visibility:hidden" type="application/x-shockwave-flash" data="peelawayok.swf" width="356" height="286"><param name="movie" value="peelawayok.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="menu" value="false" /></object><br />www.Ihre-domain.de<br />three</div>
			<div  onmouseover="toggle('fo-test4', 'visible');" onmouseout="this.className='ts-1-4';toggle('fo-test4', 'hidden');" onmouseup="this.className='ts-1-3A';" class="ts-1-4"><object id="fo-test4" style="visibility:hidden" type="application/x-shockwave-flash" data="peelawayok.swf" width="356" height="286"><param name="movie" value="peelawayok.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="menu" value="false" /></object><br />www.Ihre-domain.de<br />four</div>

   </div>
 </div>
</body>
</html>