JavaScript - Help... Iframe And Event Handler

I'm having trouble passing an array into an event handler.

This does not work:

Code:

var lightbulb = [1,1,1,0,1,0]
var banana = [0,0,1,1,0,1]

	function changetextimage(arr){
		for(var i=0;i<5;i++){
			var pixel = document.getElementById("text"+i);
				if (arr[i]) {
					pixel.style.color="#000000";
				}
				else {
					pixel.style.color="#FFFFFF";
				}
			}	
	}

$('#lightbulbpicture').mouseover(changetextimage(lightbulb));
$('#bananapicture').mouseover(changetextimage(banana));

This does work:

Code:

var lightbulb = [1,1,1,0,1,0]
var banana = [0,0,1,1,0,1]

	function changetextimage1(){
		for(var i=0;i<5;i++){
			var pixel = document.getElementById("text"+i);
				if (lightbulb[i]) {
					pixel.style.color="#000000";
				}
				else {
					pixel.style.color="#FFFFFF";
				}
			}	
	}

function changetextimage2(){
		for(var i=0;i<5;i++){
			var pixel = document.getElementById("text"+i);
				if (banana[i]) {
					pixel.style.color="#000000";
				}
				else {
					pixel.style.color="#FFFFFF";
				}
			}	
	}

$('#lightbulbpicture').mouseover(changetextimage1);
$('#bananapicture').mouseover(changetextimage2);

I have a whole bunch of these arrays (which are much longer) that I want to pass into this function so I just want to pass each as an argument rather than write each function out. I bolded the areas I'm talking about so it's easier to see.

Hello all,

I'm wondering if anyone can offer advice on a simple (or so I thought!) Javascript menu I'm trying to create. I'm creating 5 buttons, using event handlers (onmouseover etc) which exchange 1 image for another.

I did the first one fine - it worked perfectly, but as soon as I added the rest they all stopped working properly. The best I have got, is that the last link will do what it's supposed to regardless of which link I hover over! Which is strange. So the browser seems to be actioning the last thing on the list if that makes sense. It seems to me that I need to add an "if" type attribute, so "if" I hover over the home button, the home images change, as opposed to the last one on the list.

This is the code I have so far for a single link - the rest are copies of this with adjustments made to the imgname and image sources obviously.....

<div style="width:80px; height:20px;margin-top:20px;margin-left:85px;"><a href="about.html"
onMouseOver="return changeImage()"
onMouseOut= "return changeImageBack()"
onMouseDown="return handleMDown()"
onMouseUp="return handleMUp()"
><img
name="aboutbutton" src="img/aboutn.png" width="80" height="20" border="0"
alt="javascript button 1"></a>
<script language="JavaScript">
upImage = new Image();
upImage.src = "img/abouth.png";
downImage = new Image();
downImage.src = "img/aboutc.png"
normalImage = new Image();
normalImage.src = "img/aboutn.png";
function changeImage()
{
document.images["aboutbutton"].src= upImage.src;
return true;
}
function changeImageBack()
{
document.images["aboutbutton"].src = normalImage.src;
return true;
}
function handleMDown()
{
document.images["aboutbutton"].src = downImage.src;
return true;
}
function handleMUp()
{
changeImage();
return true;
}
</script></div>

Any suggestions on where I am going wrong would be wonderful.

Thanks so much in advance!

All the best

I have many examples within my page of the form:
Code:

<a id="L1" href="#" onclick="return showSpan();" onblur="return hideSpan();"><span> ... </span></a>

The page is styled so that hovering over the link displays the contents of the hidden <span> as a block without any javascript. I want this to work (that is display the span as a block) when the user tabs onto a link (and presses Return/Enter). When the user tabs away, it should hide the <span>.

My starting code looks like:
Code:

function showSpan() {
  var linkID = document.getElementById(this.id);
  var classList = linkID.getElementsByTagName('span');
  var divID = classList[0];
      divID.style.display = "block";
      return false;
} // function

with a similar function for hideSpan(),

Ultimately I would like to add these event handlers in the initialisation phase, which is why I have used a parameterless function.

Whenever I try this, I get an error that this.id does not exist.

How can I attach these event handlers?

John Rostron

hello everyone, i am new to all this..

i need help regarding..

i am generating text box dynamically(mean it's a multiple select box, depending upon the number you select , it will generate that many text field.)

my problem is that i want to assign a calender to the text field generated whenever a user clicks on that text field.

i am able to do it for simple text field

as
onclick="javascript: showCalendar('idname')"

but how to do it in this case, where can i declare this ?

Hello,

I am working on a project that takes links on a page (Not all, depends on if they are Merchandise links or partner links), and passes some parameters to a tracking js call.

The problem is, I don't want to put 'onclicks" on every href as there could be a hundred on a page and many of the links are dynamically generated on the backend.

So, I was thinking of creating a function that took in parameters from each of the links that are pressed. But I was told "bind" is a good way to do this, but to be honest - it is very confusing to me.

How would I do this?

Lets say we have two links (there will be many more, but for an example sake).

<a href="somelink.html" id="linka">link a</a>
<javascript>
var cu = new Linktracker({
dispPrice: 30,
dispTitle: 'Manager',
dispProduct: 'Red Shoes'
});
$('linka').observe('click',
cu.updateSomeFunc.bindAsEventListener(cu, 'dispPrice', 'dispTitle', 'dispProduct')
);
</script>

<a href="somelink.html" id="linkb">link b</a>
<javascript>
var cu = new Linktracker({
dispPrice: 10,
dispTitle: 'casual',
dispProduct: 'Blue Shoes'
});
$('linkb').observe('click',
cu.updateSomeFunc.bindAsEventListener(cu, 'dispPrice', 'dispTitle', 'dispProduct')
);
</script>

How does any particular click know I am referencing the correct "var cu"?
Can something like this be done?

<a href="somelink.html" id="linkc">link c</a>
<javascript>

$('linka').observe('click',(
var cu = new Linktracker({
dispPrice: 30,
dispTitle: 'Manager',
dispProduct: 'Red Shoes'
});
)
cu.updateSomeFunc.bindAsEventListener(cu, 'dispPrice', 'dispTitle', 'dispProduct')
);
</script>

What am I missing here? Should I use just "bind" or "bindAsEventListener"?

Since each link on the page is unique and will pass different values, what is the best way to do this without putting "onclicks" on every link?

I have a piece of JavaScript code that should validate that a username field is not empty or null and that a telephone field is in the correct format using event handler registration. It seems to be validating fine but if there is an error it still manages to submit.

HTML

Code:

<html>
    <head> 
        <script type = "text/javascript"  src = "js/validator.js" >
        </script>
    </head>

    <body>

        <form id = "decorForm" action = "">
            <table border = "0">
                <tr>
                    <th>Username: </th>
                    <td>
                        <input type = "text"  id = "myUserName" size = "15" maxlength = "15"/>
                    </td>
                </tr>

                <tr>
                    <th>Telephone: </th>
                    <td>
                        <input type = "text" id = "telephone" name = "telephone" size = "15" maxlength = "13"/>
                        <br />
                        (999)999-9999
                    </td>
                </tr>

                <tr>
                    <td>
                        <input type = "submit" value = "Submit" />
                    </td>
                    <td>
                        <input type = "reset" value = "Reset" />
                    </td>
                </tr>

            </table>

        </form>

        <script type = "text/javascript"  src = "js/validatorr.js" >
        </script>

    </body>
</html>

JAVASCRIPT (validator.js)


Code:

function chkUser() {
// Verifies that the UserName field is not empty.
    var myUserName = document.getElementById("myUserName");
    if (myUserName.value == ""  || myUserName.value == null) {
        alert ("Please enter a Username!");
        return false;
    } else {
        return true;
    }
}

function chkTelephone() {
// Verifies that the Telephone field value is in the correct format.
    var tel = document.getElementById("telephone");
    var pos = tel.value.search(/^\(\d{3}\)\d{3}-\d{4}$/);
    if (pos != 0) {
        alert ("Please enter telephone number in the following format: (999)999-9999");
        return false;
    } else {
        return true;
    } 
}

function chkFields() {
// Verifes all fields and returns boolean to event handler
// The event handler function
    if (chkUser() && chkTelephone()) {
        return true;
    } else {
        return false;
    }
}

JAVASCRIPT (validatorr.js)

Code:

//Register the event handlers for validator.js
document.getElementById("decorForm").onSubmit = chkFields;

I am trying to use this as an example.

Q1. write a function called countAS that will take a string as input (using a prompt dialog box,prompt the user or the string).the string must contain only a's,b's and c's e.g. "abccbbaa" or "aaabbbccc" if any other letters are present apart from the letters a b c, output an alert dialog box with an error message and prompt the user again to input a valid string.count the number of a's the numbers of b's and the numbers of c's entered and display the count for each as well as a total count of all the characters within the string .

for example if the string was abbcc output should be as follows:
the total count is 5 characters
The Number of a's is 1
The Number of b's is 2
The Number of c's is 2

Q2. write a code that uses an event handler to display an alert dialog box with the message 'hello to you all' when a user clicks a link in a html page which links to the school of computing website.

Please help me with this code to determine whether the check box has been checked. I get "Thank you" even if I don't check the check box.

<script type="text/javascript">
var uncheck = document.getElementById().checked == false;
var accept;

function checkAccept()
{
var uncheck;
if (uncheck == false){
alert ("You must accept the terms.");
}
else (uncheck == true)
{
alert ("Thank you.");
}
}


</script>

<form>

<br />Please accept the terms by clicking the box below:
<br />Accept terms: <input type="checkbox" id="accept" value="Y" />
<br /><input type="button" name="btn" value="Accept" onclick="checkAccept()" />
</form>
</body>
</html>

I have added an event listener to a LI item in the DOM:

liNode.addEventListener("mouseover", mouseOn, true);

The mouseOn function:

function mouseOn(e) {
// Test for IE or Firefox
var e = (!e)?window.event:e;
var yPos;
if (e.pageY) {
yPos = e.pageY;
} else {
yPos = e.clientY;
}
}

I would like to pass in another parameter to the mouseOn function in addition to the event that is passed in automatically. Is there a way to do this?

Hi I am trying to develop a
Qwerty Shifter
http://www.cross-browser.com/toys/qwertyshifter.html
by handling keyboard events.

I want to display a textbox and as user type any text it changes at once means as user types "a" it display "s"
"b" changes "n"

for internet explorer I have script

function InputEventKeyPress(event){

window.event.keyCode = shifter (window.event.keyCode);

} //Key press


function shifter (keyAscii)
{
switch (keyAscii){
//CAPITAL LETTERS A - Z
case 65 : return 83; break; //A
case 66 : return 78; break; //B
case 67 : return 86 ; break; //C
}
}

Hello,
Is it possible to set an html element's (created through HTML DOM's createElement() method) 'onclick' attribute's value to a Javascript function which requires a parameter, passing a variable to it at the same time?

I have the following Javascript code:

Code:

var parentDiv = document.getElementById("subscribers");
var stubSpan = document.createElement("span");
stubSpan.id = "opentok_subscriber_" + stream.streamId;
stubSpan.onclick = showStreamInFullScreenMode(stream);
parentDiv.appendChild(stubSpan);

'stream' in the bolded line is a parameter variable of the function that the above code is in, and I'm trying to pass it to another function using an onclick event. Can this be done, or am I crazy to be even trying to do this?

Thanks in advance.

Hello all, and thank you for your coments,

I want to preserve a 16/9 aspect ratio to the window after any resize, making the width a function of the height.

As I have a window.resizeTo() inside the window.onresize event function, the infinite loop is served. How may I quit it?


Code:

<html><head><title>Title</title><script languaje="javascript">

const c_ra=16/9;
window.onresize = function WindowReSize() {
  var myWidth = 0, myHeight = 0;
  if( typeof( window.innerWidth ) == 'number' ) {
    //Non-IE
//  myWidth = window.innerWidth;
	myHeight = window.innerHeight;
  } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
    //IE 6+ in 'standards compliant mode'
//    myWidth = document.documentElement.clientWidth;
    myHeight = document.documentElement.clientHeight;
  }

myWidth = Math.floor(myHeight*c_ra);
window.resizeTo(myWidth,myHeight); // ** CAUTION resize event in a onresize event handler !
};  

</script></head><body><p>Hello World</p></body></html>

Sorry for the title- i'm doing my best to describe my problem. So this is basically it:
I have some javascript onmouseover events that change the content of an iframe. The problem is that within the javascript calls, I have some url's attached to rollover buttons INSIDE the parent div's that are being manipulated by javascript. So the iframe refreshes properly when its supposed to, but it ALSO refreshes as each of the links inside the effected div are rolled over as well. So there is too much extra refreshing and lots of clicking noises because of the Internet Explorer default noise settings. The easiest way to see what im talking about is to go to:
http://maybetheworldisending.com/fre...HOMEPAGE_jan4/

An example of the problematic code is as follows:
Code:

<div class="beachcomberoff" target="mainbox" onmouseover="ShowPage('frame1_slider');this.className='beachcomberon'" onmouseout="this.className='beachcomberoff';">
<div id="turquoise1"><a href="#"></a></div><div id="coral1"><a href="#"></a></div><img src="HOMEPAGE_jan4_web/beachcomber.png" width="453" height="330" border="0"></div>

The prob is that the div's named turquoise1 and coral1 are being effected by the javascript on the containing div. How do i make it unaffected by that js? Is there something like a "onmouseover=do nothing" or something of the sort?

Hello friends,
I want to trigger click event on an iframe's element through the main window, Doing it both ways, with or without jquery, will be usable for me. Basically, what I want to do is, I have developed a website http://www.ipjugaad.com, and on every document download page, I have placed an fb like button, what I want to do is that the like button should be automatically clicked when a user click on download button on my website. Give me some idea about how to do it?