|
JavaScript - Event Listener Problem On Canvas
I'm trying to simulate a textfield on a canvas; that is when clicking on the text box a cursor appears and blink. My problem here is when I create more than one object, the event listener will work only on the last object created.
Here is my code: Javascript Code: var canvas;
var ctx;
var MousePosX;
var MousePosY;
var Cursor_Width = 1;
var Cursor_Height = 21;
var Height = 27;
var LapseTime = 800;
function init(CanvasName) {
canvas = document.getElementById(CanvasName);
ctx = canvas.getContext("2d");
}
/*
Create Textfiled
*/
function Textfield(x, y, w) {
Textfield.prototype.x = x;
Textfield.prototype.y = y;
Textfield.prototype.w = w;
Textfield.prototype.Cursor_PosX = x + 3;
Textfield.prototype.Cursor_PosY = y + 3;
// draw rectangle
ctx.beginPath();
ctx.rect(this.x, this.y, this.w, Height);
ctx.closePath();
ctx.stroke();
// listen for mouse click event
canvas.addEventListener("mousedown", function(evt) {
// calculate mouse coordination on canvas
MousePosX = evt.clientX - canvas.offsetLeft;
MousePosY = evt.clientY - canvas.offsetTop;
// if mouse coordination is within texfield display cursor
if((MousePosX > Textfield.prototype.x && MousePosX < (Textfield.prototype.x + Textfield.prototype.w)) && (MousePosY > Textfield.prototype.y && MousePosY < (Textfield.prototype.y + Height))) {
Textfield.prototype.cursor();
}
});
}
/*
Cursor for textfield
*/
Textfield.prototype.cursor = function() {
// alert("good");
ctx.beginPath();
ctx.strokeStyle = "black";
ctx.rect(this.Cursor_PosX, this.Cursor_PosY, Cursor_Width, Cursor_Height);
ctx.closePath();
ctx.stroke();
setTimeout("Textfield.prototype.animate_cursor()", LapseTime);
};
/*
Change color of cursor to white to make blinking effect
*/
Textfield.prototype.animate_cursor = function() {
ctx.strokeStyle = "white";
ctx.stroke();
setTimeout("Textfield.prototype.cursor()", LapseTime);
};
HTML Code: <!DOCTYPE HTML>
<html>
<head>
<style>
#MyCanvas {
border: 1px solid #000000;
}
</style>
<script src="widgets1.js"></script>
<script>
window.onload = function () {
init('MyCanvas');
var tf1 = new Textfield(10.5, 10.5, 150);
var tf2 = new Textfield(10.5, 50.5, 150);
};
</script>
</head>
<body>
<br /><br /><br />
<center>
<canvas id="MyCanvas" width="700" height="500">
</canvas>
</center>
</body>
</html>
What i want to achieve here is have my event listener on any textfield created on the canvas. Similar TutorialsPlease 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? 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> 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>
here the deal ,,I've solved all but this problem in my script i have my page setup with 1 iframe and the main html the code below is exactly how the page will show up in the iframe, you can copy and paste the whole thing and save it as a htm file to view if needed.. I need a way to catch the clicks that happen within the iframe but from the main section of the page..heres why! this is inserted at the top of the page if(top.location==self.location){top.location="RefESI_search.asp";} just above top.document.reset.RefCat.value= I can get the page to load even with this in the iframes ..but for the purposes of this i left it out so the page would load ok for anyone thats gonna try and help . theres only 2 links in the code.. hopefully whatever will hopefully solve this problem will be able to tell which links were clicked,and i can can point them to the apropriate links. I've looked thru alot of the threads so i know there are some extremely brite ppl in here that can knock this problem out of the ball park very easily.. you can grab the styles sheet from here https://www.docs.sony.com/reflib/Style_esi.css Code: <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Ref_Lib_Results</title>
<link rel="stylesheet" type="text/css" href="home.css"/>
<script language="javascript">
top.document.reset.RefCat.value="Home Receiver";
top.document.reset.NarrowRef.value="Good";
top.document.reset.criteria.value="stra";
top.document.reset.searchscope.value="model";
top.document.reset.companyscope.value="SONY";
top.document.reset.company.value="SONY";
if(""==""){top.reset();}
function popUp(URL,Name) {
var day = new Date();
var id = "page" + Name;
window.open(URL, id, "toolbar=1,scrollbars=1,location=0,statusbar=1,menubar=0,resizable=1,width=600,height=600");
}
function launchjsmanuals(flag, x, y, z, id) {
//var myTypeLib = new ActiveXObject("Scriptlet.Typelib");
//var GUID = new String(myTypeLib.guid).substr(1,8);
//var endguid = new String(myTypeLib.GUID).substr(25,10);
if((x.indexOf("CHM")!=-1) || (x.indexOf("chm")!=-1)){
alert("You will be prompted to download a file\n\nClick Open - Do NOT click Save");
}
var whnd = "page" + id; //+ GUID + endguid;
var URL = '_manualusage.asp?flag='+flag+'&manual=' + x + '&user=' + y + z + '&manualid=' + id;
if(flag!=""){
whnd = window.open(URL,whnd, "toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=560,height=600");
}else{
whnd = window.open(URL,"Loader", "toolbar=0,scrollbars=1,location=0,statusbar=0,menubar=0,resizable=1,width=560,height=600");
}
}
function emailit(id, url,name,type,filesize,model,email,custname,cs3event,user){
var namestring = name;
var re = new RegExp('&','gi');
namestring = namestring.replace(re,'and');
name = namestring;
var xurl = "/srvs/common/email.asp?id="+id+"&emailurl="+url+"&title=" + name + "&type="+type+"&model=" + model + "&filesize=" + filesize + "&email=" + email + "&custname=" + custname + "&convid=" +cs3event + "&user=" + user;
popUp(xurl,id);
}
function NarrowSearch(what,value,cat){
switch(what){
case "Category":
parent.document.SearchForm.RefCat.value=value;
parent.document.SearchForm.NarrowRef.value="Good";
parent.document.SearchForm.submit()
break;
case "Model":
if("Home Receiver"!=""){
parent.document.SearchForm.RefCat.value="Home Receiver";
}
parent.document.SearchForm.criteria.value=value;
parent.document.SearchForm.searchscope.value="model";
parent.document.SearchForm.NarrowRef.value="Good";
parent.document.SearchForm.submit()
break;
case "ONLY":
parent.document.SearchForm.criteria.value=value;
parent.document.SearchForm.searchscope.value="model";
parent.document.SearchForm.RefCat.value=cat;
parent.document.SearchForm.NarrowRef.value="Only";
parent.document.SearchForm.submit()
break;
case "ALL":
parent.document.SearchForm.criteria.value=value;
parent.document.SearchForm.RefCat.value=cat;
parent.document.SearchForm.NarrowRef.value="ALL";
parent.document.SearchForm.submit()
break;
}
}
</script>
</head>
<body>
<div id="results">
<div style="height: 400px;border-bottom:1px solid black;"
class="modelblock">
<div style="margin-left:20px; margin-right:15px; margin-top:10px; font-size:10pt">
<span style="float:Right;margin-top:10px;text-align:right">
<table border=0 cellpadding=0 cellspacing=0><tr><td>
<div style="background:silver;color:black;font-size:10px;padding:2px;border:1px solid gray;cursor:pointer" onclick="javascript:NarrowSearch('ALL','stra','Home Receiver')">Display All Models</div>
</td><td> </td><td><div style="width:40px;background:silver;color:black;font-size:10px;padding:2px;border:1px solid gray;cursor:pointer;text-align:center" onclick="javascript:history.go(-1)">Back</div></td></tr></table></span><b>Your search of "<font color=green>stra</font>" matches 66 Models in the Home Receiver category.</b><br><br>Please select the specific model to continue:<table border=0 cellpadding=0 cellspacing=2><tr><td><a class="modellink" onMouseOver="this.className='modellinkhover'" onMouseOut="this.className='modellink'" onclick="javascript:NarrowSearch('ONLY','STRAV1000','Home Receiver')"><b>STRA</b>V1000</a></td><td width=15px></td><td><a class="modellink" onMouseOver="this.className='modellinkhover'" onMouseOut="this.className='modellink'" onclick="javascript:NarrowSearch('ONLY','STRAV1010','Home Receiver')"><b>STRA</b>V1010</a></td><td width=15px></td></tr></table</div></div></div>
<iframe name="Loader" id="Loader" src="blank.htm" style="display:none;height:150px;width:100%;border:1px solid silver"></iframe>
<a onclick="document.getElementById('Loader').style.display='';">*</a>
<script language="javascript">
//alert(parent.IQ.location.href);
</script>
</body>
</html>
Hi Everyone, How would i add an avent listener to change the source of an image? I have added the image to a canvas element through javascript using the code below. Code: var start = new Image(); start.src = "start.jpg"; ctx.drawImage(start, 50, 50); Thanks! Hello; I am testing some code that finds and element and attempts to add an event handler attribute to it as 'onclick' (test case in Firefox 3.5.9) /* The actual code is: window.onload = function() { //<irrelevant code> var test = document.getElementById('tstEl'); test.setAttributeNode('onclick'); test.setAttribute('onclick', "alert(\"Don\'t get testy\")"); } */ The error per the js console in Firefox is: Error: uncaught exception: [Exception... "Could not convert JavaScript argument arg 0 [nsIDOMHTMLInputElement.setAttributeNode]" nsresult: "0x80570009 (NS_ERROR_XPC_BAD_CONVERT_JS)" location: "JS frame :: http://192.168.1.6/<pathInfo>/SC_branch2_dev.php :: anonymous :: line 35" data: no] I am trying to do this because Element.addEventListener or Element.attachEvent won't allow for arguments to be passed to the event handler code/function. What is going on here? The only line referenced, line35, in the document text containing javascript code is irrelevant to the problem. Thank you for time, interest and attention; WhoEverIReallyAm hello, I am trying to add a window event listener on some links in a loop instead of doing them one by one. I've tried Code: function setListeners (){
for (var i = 0; i < document.links.length; i++) {
src=document.links[i].href;
document.links[i].onmousemove=changeIframeSrc(src, 'solid',1, event);
document.links[i].onmouseout=changeIframeSrc(null,'none',0,event);
}
}
and Code: function setListeners (){
for (var i = 0; i < document.links.length; i++) {
src=document.links[i].href;
document.links[i].onmousemove=function(a1,a2,a3,a4){
return function(){changeIframeSrc(a1,a2,a3,a4);}
}(src, 'solid',1, event);
}
}
but the event keeps coming up undefined. Any ideas on how to do this? Hello! I'm working with nested functions and trying to pass a 'this' value to an anonymous being used in an assignment for an event listener. Here's the basics of my code: Code: <div id='abc'></div>
<script type='text/javascript'>
var abc = function () {
this.myFunction = function() {
var myObj
myObj = document.createElement("input");
myObj.setAttribute("type", "button");
myObj.setAttribute("value", "Click Me");
myObj.addEventListener("click", function () {
this.doDing();
}, false);
document.getElementById('abc').appendChild(myObj);
}
this.doDing = function () { alert('ding'); }
}
var myInstance = new abc();
myInstance.myFunction();
</script>
So, this should plop a button inside our DIV and when clicked I'd like it to run the alert-ding; unfortunately it seems to want to run the function as defined under the buttons object which doesn't work out too well. Any suggestions? Thanks! Hello guys! I need your help! I want to create a rectangle with a line in the middle with the canvas object. The problem is that the line in the middle gets bigger than the rest of the rectangle. How do I solve this? I believe it has something to do with shadows. If so, how do I turn them off. My code is: <html> <head> <title></title> </head> <body> <canvas id='chart' width='400' height='200'> <script type="text/javascript"> var canvas = document.getElementById('chart'); var ctx = canvas.getContext('2d'); ctx.lineWidth = 10; ctx.strokeRect(0, 0, 400, 200); ctx.moveTo(0, 100); ctx.lineTo(400, 100); ctx.stroke(); </script> </body> </html> I created a drawEllipse function for a Canvas library I'm making, and it works fine in Safari, Firefox, and Chrome, but in Opera, the rotation doesn't work. The function is as follows: Code: ctx.drawEllipse = function (fill, x, y, rad1, rad2, r) {
ctx.save();
if (r) {
ctx.translate(x, y);
ctx.rotate(r);
ctx.translate(-x, -y);
}
ctx.scale(rad1, rad2);
ctx.beginPath();
ctx.arc()(x / rad1, y / rad2, 1);
ctx[fill]();
ctx.restore();
};
When I add rotation to the ellipse, in Opera, it doesn't rotate and just gets bigger. I have no idea why. Can anyone suggest anything? Thanks, Julian Hello all; I am trying to load four images into a canvas using an array. The images load fine and all, however they are resizing weird. I haven't specified what I want them to resize to, as the actual image are already the sizes I want. However when loaded into the canvas they are sizing differently then their actual sizes. Even when I specify their actual size in the code, they still resize weirdly. Here is my code: Code: <body>
<canvas id="worldscreen" class="map"></canvas><br />
<script type="text/javascript">
function loadImages(arrow, call) {
var images = {};
var loaded = 0;
var num = 0;
for (var src in arrow) {
num++;
}
for (var src in arrow) {
images[src] = new Image();
images[src].onload = function(){
if (++loaded >= num) {
call(images);
}
};
images[src].src = arrow[src];
}
}
window.onload = function(images) {
var canvas = document.getElementById("worldscreen").getContext("2d");
var arrow = {
top: "sideQUEST/images/arrow-top.png",
right: "sideQUEST/images/arrow-right.png",
bottom: "sideQUEST/images/arrow-bottom.png",
left: "sideQUEST/images/arrow-left.png",
};
loadImages(arrow, function(images) {
canvas.drawImage(images.top, 100, 18);
canvas.drawImage(images.right, 215, 36);
canvas.drawImage(images.bottom, 100, 115);
canvas.drawImage(images.left, 36, 36);
});
};
</script>
</body>
You can see the code in action he http://myrmidon16.x10.mx/test.php. This is very frustrating and if you have any suggestions it would be greatly appreciated. Thank you. Hi All, Need a bit of help here, need this SELECT to submit the page and end up at the below URL, correctly passing the GET values through the string. <code> <select name="dir-fact-misma" id="dir-fact-misma" class="text100" tabindex="" onChange="alta_nueva.action='alta.php?page=p2#alta'; return true;"> <option value="Si" <?php if(!isset($_POST['dir-fact-misma']) || $_POST['dir-fact-misma'] == 'Si') print "Selected='Selected '"; ?>>Si</option> <option value="No" <?php if(isset($_POST['dir-fact-misma']) && $_POST['dir-fact-misma'] == 'No') print "Selected='Selected '"; ?>>No</option> </select> </code> the form in which this SELECT is placed needs to be submitted so that other fields in the form are not lost, they are saved in Session Variables. the same javascript but activated through an onclick event works perfect elsewhere in the same form with the following code, i think its the onChange that doesn't work for some reason. <code> <input name="p1" type='submit' id="p1" onclick="alta_nueva.action='alta.php?page=p1#alta'; return true;" value='1' /> </code> the page is programmed in PHP. Any help is appreciated. Hello everyone, If I type the name, and I check and Gender Scholar, my button will appear What I am looking to: Check my buttons, and when I start typing the name, the button Submit appear, st if I delete the text, the Submit button disappear Here's the script: Code: <head>
<script type="text/javascript" src="jquery.validate.js"></script>
<script>
$(document).ready(function(){
$("#commentForm").validate();
});
function check_required(){
//alert(document.getElementById('rdo_boursier_oui').checked);
//alert(document.getElementById('txt_lastname').value != "");
if((document.getElementById('rdo_boursier_oui').checked == true
|| document.getElementById('rdo_boursier_non').checked == true) &&
(document.getElementById('rdo_sexe_eleve_m').checked == true ||
document.getElementById('rdo_sexe_eleve_f').checked == true)
&& (document.getElementById('txt_lastname').value != "" )
)
{
document.getElementById
('submit_etape2').style.display='block';
}else{
document.getElementById
('submit_etape2').style.display='none';
}
}
</script>
</head>
<form action="#" method="post" id="commentForm">
<input class="submit" type="submit" name="submit_etape2"
id="submit_etape2" value="" style="display:none;"/>
<p class="p_float">
<label for="lastname">Votre nom<span
class="required_red">*</span></label>
<input type="text" name="txt_lastname"
id="txt_lastname" value="" class="required" minlength="3"
onchange="check_required();"
/>
</p>
<p class="p_float rdo">
<label for="boursier">Boursier<span
class="required_red">*</span></label>
<input type="radio" name="rdo_boursier"
id="rdo_boursier_oui" value="" class="rdo_sexe_eleve snd_inscription
required" onclick="check_required();"/>Oui
<input type="radio" name="rdo_boursier"
id="rdo_boursier_non" value="" class="rdo_sexe_eleve snd_inscription
required" onclick="check_required();"/>Non
</p>
<p class="p_float rdo">
<label for="sexe">Sexe<span
class="required_red">*</span></label>
<input type="radio"
name="rdo_sexe_eleve" id="rdo_sexe_eleve_m" class="rdo_sexe_eleve
snd_inscription required" onclick="check_required();" value="">M
<input type="radio"
name="rdo_sexe_eleve" id="rdo_sexe_eleve_f" class="rdo_sexe_eleve
snd_inscription required" onclick="check_required();" value="">F
</p>
</form>
Realizing that form input placeholders aren't universally recognized among browsers, I began changing all of mine using onblur and onfocus handlers instead. As an example, I used the following code, which works in most cases: Code: <input type="text" name="example" maxlength="5" value="Example" onblur="if(this.value=='') this.value='Example';" onfocus="if(this.value=='Example') this.value='';"/> At first, I coded all of the inputs without a value attribute. But, when the page initially loaded, the fields would load empty, and the value/placeholder wouldn't appear until the field had been "focused" and then "blurred" again. Adding the value attribute seemed to correct that problem, again, for the most part. I have some text fields that appear only after I select a particular radio button or select option. Problem is, when the radio is clicked, the field appears, but even with the value attribute in place, the field appears void. I'm not sure what is different, or what I'm doing wrong. Here's the javascript code with the radio button (note:everything works except that the "placeholder" doesn't show when the field first appears): Code: function showfield() {
document.forms[0].otherRelation.value = "";
document.getElementById("newBox").style.display = "none";
var r = document.forms[0].relation;
var len = r.length;
for (var i =0; i<len; i++) {
if (r[i].checked && r[i].value == "Otherrelation" ) {
document.getElementById("newBox").style.display = "inline";
}
}
}
<input type="radio" name="relation" value="Otherrelation" onclick="showfield()"/>Other
<span id = "newBox" style="display:none">:
<input type = "text" name="otherRelation" size="35" value="Your Relationship" onblur="if(this.value=='') this.value='Your Relationship';" onfocus="if(this.value=='Your Relationship') this.value='';"/>
</span>
Thanks for any help. Sorry so long. Quick question, I found this code snip on stackoverflow and it has one little bug. When you touch / move in the element, the console.log is being fired. If you continue to drag / move outside the element, the console.logs still continue to fire. So it seems that once the event is started it's no longer confined to the element its being assigned to. Any ideas on how to keep it bound to the element? Here is the code: Code: $('#someElm').bind('touchmove',function(e){
e.preventDefault();
var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];
console.log(touch.pageY+' '+touch.pageX);
});
Thanks in advanced. Hello, I have a script I am using which works great, except when I copy the code and have multiple events it only shows the first one. This I believe is because it's calling the first class name of it's kind. I want the class's to be named the same thing (css styling) and because the site is going to be dynamically driven, but is there a way to modify my script so that instead of looking for the first class it recognizes the right class associated with the button clicked. If anyone can help me fix this problem I am having I would be most appreciative.. Code: <script language="javascript">
function toggle() {
var ele = document.getElementById("commpopup");
if(ele.style.display == "block") {
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
}
</script>
<div class="togglecomment">
<div class="popup" id="commpopup">
<div class="commentbtn"><a href="#"><img src="images/commenticon.png" align="absmiddle" />Comment</a></div>
</div>
<div class="button"><a href="javascript:toggle();"><img src="images/comment_btn.jpg" /></a></div>
</div>
Hey, im having another problem with my JavaScript. I wanted to call 2 functions inline, but I can't seem to do it. So I have added the function (add_event_listeners) to the function (load_doc) that is usually called. JavaScript debugger is saying: Code: Uncaught TypeError: Cannot read property 'addEventListener' of null JavaScript: PHP Code: //Get httpobject function getHTTPObject() { var http = false; if (window.XMLHttpRequest) { http = new XMLHttpRequest(); } else if (window.ActiveXObject) { http = new ActiveXObject("Microsoft.XMLHTTP"); } return http; } //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; } }; function load_doc(doc, parent) { add_event_listeners(); document.getElementById(parent).innerHTML = "Fetching data..."; var http = getHTTPObject(); if (http != undefined) { http.onreadystatechange = function() { req_doc(doc, parent, http); }; http.open("GET", doc, true); http.send(""); } } function req_doc(doc, parent, req) { if (req.readyState == 4) {//only if req is loaded if (req.status == 200) {//And if its okay document.getElementById(parent).innerHTML = req.responseText; } else { document.getElementById(parent).innerHTML = "Error fetching data: " + req.status + "\n" + req.statusText; } } } //Script used to hide elements. Usage: expand(element id) function expand(elm) { var ex = document.getElementById(elm).style.display; if (ex == "none") { var obj = document.getElementById(elm); obj.style.display = "inline"; } else if (ex == "inline") { var obj = document.getElementById(elm); obj.style.display = "none"; } } function add_event_listeners() { addEvent(document.getElementById('username'), "click", check_database); addEvent(document.getElementById('email'), "click", check_database); addEvent(document.getElementById('password_2'), "blur", check_password); } var check_database = function() { check_database_existing(this); }; var check_password = function() { compare_fields(this); }; function check_database_existing(obj) { } function compare_fields(obj) { var field2 = obj.id.split("_"); field2 = document.getElementById(field2[0]).value; if (obj.value == field2) { if (obj.value.length >= 4) { document.getElementById("pass_status").style.color = "#00CC00"; document.getElementById("pass_status").innerHTML = "OK!"; } else { document.getElementById("pass_status").innerHTML = "Please must be between 5 - 14 characters long! "; document.getElementById("pass_status").style.color = "#FF0000"; } } else { document.getElementById("pass_status").innerHTML = "Passwords do not match!"; document.getElementById("pass_status").style.color = "#FF0000"; } } HTML: Code: <div style="border-color:#090; border-width:1px; border-style:solid;">
<div class="login_button register_button" onClick="load_doc('pages/forms/login_form.php', 'login_form')">Back to login</div>
<h1>Register</h1>
<h3>DrawSomething - WordGuesser</h3>
<br />
<form id="register" action="php/register.php" method="post">
Username<br /><h4 id="username_status">(waiting)</h4><br /><input type="text" name="username" id="username" class="text login_field"><br />
Email<br /><h4 id="email_status">(waiting)</h4><br /><input type="email" name="email" id="email" class="text login_field"><br />
--<br />
Password<br /><input type="password" name="password" id="password" class="text login_field"><br />
Retype<br /><h4 id="pass_status">(waiting)</h4><br /><input type="r_password" id="password2" name="password" class="text login_field">
<br />
<input type="submit" value="Register" class="button green" />
</form>
</div>
First of all, thanks for looking! I'm doing this nonprofit site for a students club in my college, and it needs an event calendar. I just have a bit of touch on javascript, and the only way this is going to be done in is javascript so I'm stuck with it. I took one of my assignments and modded it to the requirements of them. 1. A 6 month calendar. problem - I have to get thismonth, check whether its <July,then display Jan to June. Else July to December.(A semester calendar) figured it out. 2.Want to highlight a specific date, and place a link in it, so when somebody click the date, say a textarea in a form, displays the event details. problem - Have no idea on how to do it. Any help on this is warmly welcome ! My calendar.htm file Code: <html>
<head>
<title>Calendar</title>
<link href="calendar.css" rel="stylesheet" type="text/css" />
<script src="calendar.js" type="text/javascript"></script>
</head>
<body>
<div id="main">
<script type="text/javascript">
yearly();
</script>
</div>
</body>
</html>
My css file Code: #yearly_table {border: 1px solid black; font-size: 8pt; width: 500px;
font-family: Arial, Helvetica, sans-serif; background-color: white}
#yearly_title {color: white; background-color: rgb(223,29,29); letter-spacing: 6; font-size: 12pt}
.yearly_months {vertical-align: top; border: solid 1px black}
.monthly_table {font-size: 8pt; width: 100%; background-color: white}
.monthly_title {background-color: rgb(223,29,29); color: white; letter-spacing: 4}
.monthly_weekdays {border-bottom: 1px solid black}
.monthly_dates {text-align: right}
#today {font-weight: bold; color: rgb(223,29,29); background-color:#999;
border: 1px solid black; text-align: center}
My .js file Code: tes the month name in the monthly table
writeDayNames()
Writes the weekday title rows in the calendar table
daysInMonth(calendarDay)
Returns the number of days in the month from calendarDay
writeMonthDays(calendarDay, currentTime)
Writes the daily rows in the monthly table, highlighting
the date specified in the currentTime parameter.
writeDay(weekDay, dayCount, calendarDay, currentTime)
Write the opening and close table row tags and the table
cell tag for an individual day in the calendar.
*/
function yearly(calDate) {
if (calDate == null) calendarDay=new Date();
else calendarDay = new Date(calDate);
var currentTime = calendarDay.getTime();
var thisYear = calendarDay.getFullYear();
document.write("<table id='yearly_table'>");
document.write("<tr><th id='yearly_title' colspan='4'>"+thisYear+"</th></tr>");
var semMonth=calendarDay.getMonth();
var monthNum;
if (semMonth <6) {
monthNum = -1 }
else {
monthNum = 5; }
for (var i=1; i<=2; i++) {
document.write("<tr>");
for (var j=1; j<=3; j++) {
monthNum++;
calendarDay.setDate(1);
calendarDay.setMonth(monthNum);
writeMonthCell(calendarDay, currentTime);
}
document.write("</tr>");
}
document.write("</table>");
}
function writeMonthCell(calendarDay, currentTime) {
document.write("<td class='yearly_months'>");
writeMonth(calendarDay, currentTime);
document.write("</td>");
}
function writeMonth(calendarDay, currentTime) {
document.write("<table class='monthly_table'>");
writeMonthTitle(calendarDay);
writeDayNames()
writeMonthDays(calendarDay, currentTime);
document.write("</table>");
}
function writeMonthTitle(calendarDay) {
var monthName = new Array("January", "February", "March", "April", "May",
"June", "July", "August", "September", "October", "November", "December");
var thisMonth=calendarDay.getMonth();
document.write("<tr>");
document.write("<th class='monthly_title' colspan='7'>");
document.write(monthName[thisMonth]);
document.write("</th>");
document.write("</tr>");
}
function writeDayNames() {
var dayName = new Array("S", "M", "T", "W", "R", "F", "S");
document.write("<tr>");
for (var i=0;i<dayName.length;i++) {
document.write("<th class='monthly_weekdays'>"+dayName[i]+"</th>");
}
document.write("</tr>");
}
function daysInMonth(calendarDay) {
var thisYear = calendarDay.getFullYear();
var thisMonth = calendarDay.getMonth();
var dayCount = new Array(31,28,31,30,31,30,31,31,30,31,30,31);
if ((thisYear % 4 == 0)&&((thisYear % 100 !=0) || (thisYear % 400 == 0))) {
dayCount[1] = 29;
}
return dayCount[thisMonth];
}
function writeMonthDays(calendarDay, currentTime) {
var weekDay = calendarDay.getDay();
document.write("<tr>");
for (var i=0; i < weekDay; i++) {
document.write("<td></td>");
}
var totalDays = daysInMonth(calendarDay);
for (var dayCount=1; dayCount<=totalDays; dayCount++) {
calendarDay.setDate(dayCount);
weekDay = calendarDay.getDay();
writeDay(weekDay, dayCount, calendarDay, currentTime);
}
document.write("</tr>");
}
function writeDay(weekDay, dayCount, calendarDay, currentTime) {
if (weekDay == 0) document.write("<tr>");
if (calendarDay.getTime() == currentTime) {
document.write("<td class='monthly_dates' id='today'>"+dayCount+"</td>");
} else {
document.write("<td class='monthly_dates'>"+dayCount+"</td>");
}
if (weekDay == 6) document.write("</tr>");
}
|
|||||||