JavaScript - Reassign An Event's Keycode For Firefox

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?

Hey,
I must admit I am quite new to it so sorry for bothering.
I want to make a photography website where 2 people are featured,
and if one of them is "active" the menu will be rearranged and a portfolio and about link appears, so if you go to the portfolio page an extra side menu would appear with the names of those. as well I wanted to be able to view the pictures as plain as possible and add another possibility to this whole thing - To view the pictures I wanted to know if it is possible to
1. use a hotkey e.g. space to hide and or show(not only once to activate something) the menue/div so there is just a plain white site with the picture and caption left
2. to use numbers 0-9 to switch through ones portfolios - here i wanted to be able to use those numbers for both persons- so is it as well possible to use 0-9 if being on person "a" and see its portfolios and if being on person "b" using the same numbers but seing the other persons portfolios?
And is it also possible to use the arrow keys (left, right) to browse through the pictures inside the portfolios?

I do not expect a solution since it would be too much, just a clue and if it is by anymeans possible? And if javascript is the right way to go? (wouldnt like to try to learn something and find out it was the wrong thing to learn)

sorry for this humagous question. I just dont know where to start learning so I need a hint of which way to go.

Anyway, thanks

p.s. i hope it is at least a bit understandable

Greetings,

I'm looking to add keycode Accessibility to an html + javascript interaction.

It's basically like tic tac toe where a user clicks on a cell (these cells are created by divs) and an 'O' appears in the cell.

I'd like to be able to tab through the cell fields and hit the spacebar to put the 'O' in the focused cell.

Here's an example of the html divs...

[code]
<div class="grid">
<div class="row row-1">
<div class="box true"><div class="inner" tabindex="0" id="orange"></div></div>
<div class="box true"><div class="inner" tabindex="0" id="orange"></div></div>
<div class="box true"><div class="inner" tabindex="0" id="orange"></div></div>
<div class="box"><div class="inner" tabindex="0" id="orange"></div></div>
<div class="clear"></div>
</div>
</div>
[code]

What I'm needing to know is where/what code goes into the .js to set up a keydown event.

Here's the .js being used...

[code]

$(document).ready(function() {
// init
$('#holder .section:first').addClass('current-slide');
$('#nav .btn:first').addClass('current-slide');
$('#holder .section').addClass('noanswer');
$('#holder .section').delay(300).animate({'top':'0px'},{duration:600,easing:'easeOutCirc'}); //how fast the screen comes down
// end init


$('.noanswer .box').hover(function() {
if ($(this).hasClass('selected')) {
$(this).addClass('box-highlight-hover');
} else {
$(this).addClass('box-highlight');
}
}, function() {
if ($(this).hasClass('selected')) {
$(this).removeClass('box-highlight-hover');
} else {
$(this).removeClass('box-highlight');
}
});

// box functions
$('.noanswer .box').live('click',function() {
$(this).addClass('selected');
});


$('.noanswer .selected').live('click',function() {
$(this).removeClass('selected');
$(this).removeClass('box-highlight-hover');
});



// slide animations
$('#nav .mobility-btn').click(function() {
if ($('.section').is(':animated')) {
} else {
$('#nav .btn').removeClass('current-slide');
$(this).addClass('current-slide');
$('.section').css({'z-index':'5'});
$('#mobility').css({'top':'-350px','z-index':'10'});
$('#mobility').animate({'top':'0px','z-index':'10'},{duration:600,easing:'easeOutCirc'}); //how fast the screen comes down
$('.section').removeClass('current-slide');
$('#mobility').addClass('current-slide');
}
});

$('#nav .vision-btn').click(function() {
if ($('.section').is(':animated')) {
} else {
$('#nav .btn').removeClass('current-slide');
$(this).addClass('current-slide');
$('.section').css({'z-index':'5'});
$('#vision').css({'top':'-350px','z-index':'10'});
$('#vision').animate({'top':'0px','z-index':'10'},{duration:600,easing:'easeOutCirc'}); //how fast the screen comes down
$('.section').removeClass('current-slide');
$('#vision').addClass('current-slide');
}
});

$('#nav .hearing-btn').click(function() {
if ($('.section').is(':animated')) {
} else {
$('#nav .btn').removeClass('current-slide');
$(this).addClass('current-slide');
$('.section').css({'z-index':'5'});
$('#hearing').css({'top':'-350px','z-index':'10'});
$('#hearing').animate({'top':'0px','z-index':'10'},{duration:600,easing:'easeOutCirc'}); //how fast the screen comes down
$('.section').removeClass('current-slide');
$('#hearing').addClass('current-slide');
}
});

$('#nav .cognitive-btn').click(function() {
if ($('.section').is(':animated')) {
} else {
$('#nav .btn').removeClass('current-slide');
$(this).addClass('current-slide');
$('.section').css({'z-index':'5'});
$('#cognitive').css({'top':'-350px','z-index':'10'});
$('#cognitive').animate({'top':'0px','z-index':'10'},{duration:600,easing:'easeOutCirc'}); //how fast the screen comes down
$('.section').removeClass('current-slide');
$('#cognitive').addClass('current-slide');
}
});


// result
$('.answerSubmit').hover(function() {
$(this).addClass('answerSubmitHover');
}, function() {
$(this).removeClass('answerSubmitHover');
});

$('.answerSubmit').live('click',function() {
var parent = $(this).parents('.section');
var scoreParent = $(this).parent('.result');

// Calculate max score
var maxScore = parent.find('.box').length;
// Calculate actual score
var actualScore;
var selectednotTrue = 0;
var selectedCorrect = 0;
var notTrue = 0;
actualScore = parent.find('.box').length;
selectedCorrect = parent.find('.box.selected.true').length;
notTrue = parent.find('.box:not(.true)').length;
selectednotTrue = parent.find('.box.selected:not(.true)').length;

actualScore = notTrue - selectednotTrue + selectedCorrect;


scoreParent.find('.answer').html(actualScore);
scoreParent.find('.outOf').html(maxScore);

$(this).hide();
parent.find('.score').show();
parent.addClass('answer').removeClass('noanswer');
});
});

[code]


Please let me know if I'm unclear or if more code is necessary.
Thanks for any help you can give!

k

Hello

Can anyone help with the following problem

On the following page

http://www.stroudskittles.co.uk/signingon.html

I have a Body onload event (to load the chained Menu) and a windows.onload event (to load the IFrame Ticker)

If I open the page in Internet explorer both scripts function; however in Firefox I'm having problems.

The Chained Menu works, however the IFrame Ticker does not display.

Both events ahave ben placed on the boady tag.

Can anyone advise how I can get both to display in Firefox

Can anyone

Hi forum,

I am trying to attach an event to a dynamically produced button, and then use
stopPropagation and preventDefault.
Code:

function chapter12_nodeOne() {
    
    //create an element
    var element = document.createElement('input');
    //set some attributes
    element.setAttribute('type', 'button');
    element.setAttribute('value', 'submit');
    element.setAttribute('id', 'myBtn');
    //appendd the element into a DIV
    document.getElementById('myDiv').appendChild(element);
    //uses EventUtil to attach an event listener
    EventUtil.addHandler(element, 'click', function() {
        alert('event attached');
    });

    var flag = confirm('prevent default behavior of button?');
    if (flag) {
        var el = document.getElementById('myBtn');/////////////////////////(1)
        var ev = el.onclick;
    }
}

var EventUtil = {
    addHandler: function(element, type, handler) {
        //check if the element and the browser support DOM Level 2 event attachment
        //if the user is not browsing with IE
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        }
        //if user is browsing with IE
        else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        }
        //if user is using a browser that only supports DOM Level 0 event attachment 
        else {
            element["on" + type] = handler;
        }
    },

    removeHandler: function(element, type, handler) {
        //check if the element and the browser support DOM Level 2 event attachment
        //if the user is not browsing with IE
        if (element.removeEventListener) {
            element.removeEventListener(type, handler, false);
        }
        //if user is browsing with IE
        else if (element.detachEvent) {
            element.detachEvent("on" + type, handler);
        }
        //if user is using a browser that only supports DOM Level 0 event attachment 
        else {
            element["on" + type] = null;
        }
    }
};

But when debugging I see under el on the line marked with (1) that the onclick event is null. What am I doing wrong?!
PS:the event is attached, when I click on the button I get an alert message

is it possible to capture the control.event or element.event that was fired to invoke the onbeforeunload event.

for example, if a button is clicked and it causes the onbeforeunload event to fire can i determine which button was clicked.

thanks

I have a ondrag event handler and in that I am trying to retrieve e.ClientX but it always return 0 in Mozilla. Works fine in IE though.

How can retrieve the clientX and clientY in ondrag event?

Hi,

I am trying to copy the value of one textbox to another using onchange event. For some reason, my code does not work, please let me know where I went wrong. here is my code:

Code:

<html>
<head>
<script type="text/javascript">
function copyText()
{
document.getElementById("field2").value=document.getElementById("field1").value;
}
</script>
</head>
<body>

Field1: <input type="text" id="field1"/><br />
Field2: <input type="text" id="field2" onchange="copyText()"/>

</body>
</html>

Thank you.

I want to use an onkeydown() on my web site and the web site to know which key I pressed. Specifically know I pressed the arrow keys and store which key was pressed in a variable.

any help?

must work on all browsers.

Dammit, for some reason this script has stopped working :/

When I click the links with the ID's of "login_dialog" and "register_dialog" a div should be shown... I'm using an event listener to do this.

Code:

function listener_items() {	
	//Text field background
	addEvent(document.getElementById('input_username'), "click", add_username_password);
	addEvent(document.getElementById('input_username'), "blur", remove_username_password);
	addEvent(document.getElementById('input_password'), "click", add_username_password);
	addEvent(document.getElementById('input_password'), "blur", remove_username_password);

	//Switch between forms
	addEvent(document.getElementById('dialog_login'), "click", login_dialog_login);
	addEvent(document.getElementById('dialog_register'), "click", login_dialog_register);
	addEvent(document.getElementById('dialog_recovery'), "click", login_dialog_recovery);

	//Display Dialog
 	addEvent(document.getElementById('login_dialog'), "click", navbar_login);
	addEvent(document.getElementById('register_dialog'), "click", navbar_register); 
	
	//Close Dialog
	addEvent(document.getElementById('close_dialog'), "click", login_dialog_close);
}

//Login dialog, login form input fields background text
var add_username_password = function() { add_input_text(this); };
var remove_username_password = function() { remove_input_text(this); };

//Login dialog buttons
var login_dialog_login = function() { display_form('login'); };
var login_dialog_register = function() { display_form('register'); };
var login_dialog_recovery = function() { display_form('recovery'); };

//Close dialog
var login_dialog_close = function() { display_dialog('login', 'hidden'); };

//Navigation bar buttons
 var navbar_login = function() { display_dialog('login', 'visible'); };
var navbar_register = function() { display_dialog('register', 'visible'); }; 

//This function attaches events to elements. 
var addEvent = function( elm, evt, fun ) {
	if ( elm.addEventListener ) {
		elm.addEventListener( evt, fun, false );
	} else if ( elm.attachEvent ) {
		elm.attachEvent( 'on' + evt, fun );
	} else {
		elm [ 'on' + evt ] = fun;
	}
};

addEvent ( window, "load", listener_items );

//Display/Hide login dialog
 function display_dialog(dialog, fun) {
	//Define the active menu item style
	var active_style = "border-right-width:3px; width:113px; border-right-color:#33CCFF; color:#FFFFFF;";
	
	//Creat array with all forms
	var formsHide = Array("login","register","recovery"); var i = 0;
	
	document.getElementById('wrapper').setAttribute('style', 'visibility:' + fun);
	for ( i = 0; i < formsHide.length; i++ ) {
		if ( formsHide[i] == dialog && fun == 'visible' );
			document.getElementById("dialog_" + dialog).setAttribute('style', active_style);
			document.getElementById(formsHide[i] + "_form").setAttribute('style', 'visibility:visible');
			formsHide.splice(i, 1);
		}
		document.getElementById(formsHide[i] + "_form").setAttribute('style', 'visibility:hidden');
	}
}
 
//Put text in fields if there is not data, also switch text field to password field
//when focused on. Switch back to text field if no text is entered. 
function add_input_text(obj) {
	var id = obj.id.split("input_");
	document.getElementById(id[1]).innerHTML = '';
}
function remove_input_text(obj) {
	if (obj.value.length == 0) {
		var id = obj.id.split("input_");
		var id2 = id[1].substr(0, 1).toUpperCase() + id[1].substr(1);
		document.getElementById(id[1]).innerHTML = id2;
	}
}
function display_form(form) {
	//Define the active menu item style
	var active_style = "border-right-width:3px; width:113px; border-right-color:#33CCFF; color:#FFFFFF;";
	
	var forms = Array("login", "register", "recovery");
	for ( c = 0; c < forms.length; c++ ) {
		if ( forms[c] == form ) {
			document.getElementById( forms[c] + "_form" ).style.visibility = "visible";
			document.getElementById("dialog_" + forms[c]).setAttribute('style', active_style);
			document.getElementById("dialog_" + forms[c]).setAttribute('class', 'overlay_table' + ' ' + forms[c] + ' active');
			forms.splice(c, 1);
		}
	}
	for ( c = 0; c < forms.length; c++ ) {
		document.getElementById("dialog_" + forms[c]).setAttribute('style', '')
		document.getElementById( forms[c] + "_form" ).style.visibility = "hidden";
		document.getElementById("dialog_" + forms[c]).setAttribute('class', 'overlay_table' + ' ' + forms[c]);
	}
}

HTML:
Code:

<span><a href="#"  id="login_dialog"  style="color:#33CCFF;">Login</a></span>
<span><a href="#"  id="register_dialog" >Register</a></span>

Please can someone explain to me in simple terms which this actually does.

From what I understand it will check all events until a defined event happens, such as rollover of a certain image, and then it activates a function?

What I want to do is use this so that when I rollover a element such as below:
Code:

<img src="img url" alt="this is a tooltip" tooltip="true" />

I want it to pass the obj to a function which then runs, and then once the mouse of not over that element it will activate another function passing the previous object to this function.

Although an element such as the example below would not activate these functions:
Code:

<img src="img url" alt="this is a tooltip"/>

As the tooltip tag does not exist or has the value of false...


Also, wouldn't this use a lot of resources as it checks every event which the mouse passes over?

hi there here's my problem, I want to alert each innerHTML of the tag "a" when mouse over, but it only alert when i insert "return false;" in the end of the loop, what's the problem?
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<title></title>
	<script type="text/javascript" >
	function show(){
	var linkIt = document.getElementsByTagName("a")
	for(var i=0; i<linkIt.length; i++){
	linkIt[i].onmouseover = function(){
	alert(linkIt[i].innerHTML);
		
	}
        return false;
	}
	}
	</script>
	
</head>
<body onload="show()">
  <ul id="imagegallery">
    <li>
      <a href="images/fireworks.jpg" title="A fireworks display">Fireworks</a>
    </li>
    <li>
      <a href="images/coffee.jpg" title="A cup of black coffee" >Coffee</a>
    </li>
    <li>
      <a href="images/rose.jpg" title="A red, red rose">Rose</a>
    </li>
    <li>
      <a href="images/bigben.jpg" title="The famous clock">Big Ben</a>
    </li>
  </ul>
</body>
</html>

note: this is not homework

Hi all,

Currently I am doing this:

Code:

var e = document.getElementById('id');
e.style.color = '#ff0000';
e.style.fontFamily = 'sans-serif';
e.innerHTML = time;
...blah blah...

What I'm actually doing is inserting the current time into an existing DIV and updating it every second. THAT all works.

What I want to do is also set an event for that div.... something like this:

e.event.onclick = 'runThisCode()';


Of course, the above doesn't work... and I'm not even sure what to ask for doing a Google search... because I get no hits (or maybe it's not possible).

So, is it possible, and if so, how?

Thanks!

-- Roger

p.s. I really don't want to edit the code itself (where that div is) because it's part of another app that may change as they update it and I don't want to have to re-patch every new release.

I can't seem to get the event listener to run an event when I focus on the text field with the ID username.

JavaScript:
Code:

function listener_loginForm() {
var fields = Array("username","password");
for ( j = 0; j < fields.length; j++ ) {
	var objs = document.getElementById(fields[j]);
	for ( var i = 0; i < objs.length; ++i ) {
		var elm = objs [ i ];
		elm.onblur = function() { display_text_bg(this); };
		if (elm.Id = "password") {
			elm.onfocus = function() { switch_field(this); };
		}
	}
}
}

//This function attaches events to elements. 
var addEvent = function( elm, evt, fun ) {
	if ( elm.addEventListener ) {
		elm.addEventListener( evt, fun, false );
	} else if ( elm.attachEvent ) {
		elm.attachEvent( 'on' + evt, fun );
	} else {
		elm [ 'on' + evt ] = fun;
	}
};
addEvent ( window, "load", listener_loginForm );

//Put text in fields if there is not data, also switch text field to password field
//when focused on. Switch back to text field if no text is entered. 
function display_text_bg(obj) {
		alert("remove text");
}
function switch_field(obj) {
		alert("switch");
}

HTML:
Code:

	<form name="login" class="login">
        	<label for="username">Username: </label><br />
        	<input type="text" name="username" id="username" />
            <br /><br />
            <label for="password">Password: </label><br />
            <input type="text" name="password" id="password" />
            <br /><br />
            <label for="remember">Remember Me? </label><br />
            <br />
            <span class="remember">
            	<span class="text">Never</span>
            	<input type="hidden" value="never" name="rememberme" />
                <ul>
                	<li>Never</li>
                    <li>24 Hours</li>
                    <li>1 Week</li>
                    <li>Always</li>
                </ul>
            </span>
        </form>

Hey guys, I had a client ask me to frankenstein two HTML5 themes together to achieve having both a countdown clock and snow effect on a "coming soon" page. You can see it he

EXSAPIEN - A New Graphic Novel

The problem I'm having now is that the social media buttons are not clickable (The links work on my iPhone, but not on my laptop.)

I have been able to EITHER display the snow, OR make the links work, but not both at the same time.

This code seems to be the piece that is making the difference (specifically, the Code:

event.preventDefault();

toward the end):

Code:

function init() {
				
				container = document.createElement('div');
				document.body.appendChild(container);
				
				camera = new THREE.PerspectiveCamera( 75, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
				camera.position.z = 1000;

				scene = new THREE.Scene();
				scene.add(camera);
					
				renderer = new THREE.CanvasRenderer();
				renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
				var material = new THREE.ParticleBasicMaterial( { map: new THREE.Texture(particleImage) } );
					
				for (var i = 0; i < 500; i++) {

					particle = new Particle3D( material);
					particle.position.x = Math.random() * 2000 - 1000;
					particle.position.y = Math.random() * 2000 - 1000;
					particle.position.z = Math.random() * 2000 - 1000;
					particle.scale.x = particle.scale.y =  1;
					scene.add( particle );
					
					particles.push(particle); 
				}

				container.appendChild( renderer.domElement );

				var userAgent = navigator.userAgent || navigator.vendor || window.opera;

  if( userAgent.match( /iPad/i ) || userAgent.match( /iPhone/i ) || userAgent.match( /iPod/i ) )
  {
   document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
				document.removeEventListener( 'touchstart', onDocumentTouchStart, false );
				document.removeEventListener( 'touchmove', onDocumentTouchMove, false );

  }
  else if( userAgent.match( /Android/i ) )
  {

    document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
				document.removeEventListener( 'touchstart', onDocumentTouchStart, false );
				document.removeEventListener( 'touchmove', onDocumentTouchMove, false );
  }
  else
  {
    document.addEventListener( 'mousemove', onDocumentMouseMove, false );
				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
  }
				
				setInterval( loop, 1000 / 60 );
				$('canvas').parent().addClass('snow');

			}
			
			function onDocumentMouseMove( event ) {

				mouseX = event.clientX - windowHalfX;
				mouseY = event.clientY - windowHalfY;
			}

			function onDocumentTouchStart( event ) {

				if ( event.touches.length == 1 ) {

					event.preventDefault();

					mouseX = event.touches[ 0 ].pageX - windowHalfX;
					mouseY = event.touches[ 0 ].pageY - windowHalfY;
				}
			}

			function onDocumentTouchMove( event ) {

				if ( event.touches.length == 1 ) {

					event.preventDefault();

					mouseX = event.touches[ 0 ].pageX - windowHalfX;
					mouseY = event.touches[ 0 ].pageY - windowHalfY;
				}
			}

I learned jscript back in 1999, so with all the new technology, multi-touch etc, that has come about in the meantime, I am effectively a n00b again. :/

Please help! What can I do here that will allow the snow effect to run while still keeping the social media links clickable??

Is there any other code I can provide that would be useful in solving the problem?

Thank you!!