|
JavaScript - Javascript Onclick Event Handler.
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 ? Similar TutorialsHello, 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. 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. I assum the following html code: <div id="id1" onclick="click()">A<div> <div id="id2" onclick="click()">B<div> Do you know how to get ID = id2 when I onclick on A? 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! Ok... so I just downloaded the new Adobe Edge program for creating HTML5 websites. I was trying out a proof of concept for something I wanted to do on a site with a simple circle shape (will eventually be a soccer ball) rolling across the screen when clicked. The animation looks great, but it happens when the page loads, not when the image is clicked. Any suggestions?? Thanks! My HTML Code: <!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<!--Adobe Edge Runtime-->
<script type="text/javascript" src="edge_includes/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="edge_includes/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="edge_includes/edge.0.1.1.min.js"></script>
<script type="text/javascript" src="edge_includes/edge.symbol.0.1.1.min.js"></script>
<script type="text/javascript" charset="utf-8" src="ball_edge.js"></script>
<link rel="stylesheet" href="ball_edge.css"/>
<!--Adobe Edge Runtime End-->
</head><body>
<div id="stage" class="symbol_stage">
</div>
</body>
</html>
ball_edge.css Code: /**
* Adobe Edge(TM): Generated CSS
* Do not edit this file.
*/
#stage {
height: 560px;
background-color: rgba(255,255,255,1);
width: 931px;
}
#RoundRect1 {
background-color: rgba(0,0,0,1.00);
-webkit-transform: translateX(18.9112px) translateY(69.673px) rotate(0deg);
-moz-transform: translateX(18.9112px) translateY(69.673px) rotate(0deg);
-ms-transform: translateX(18.9112px) translateY(69.673px) rotate(0deg);
-o-transform: translateX(18.9112px) translateY(69.673px) rotate(0deg);
}
.default_end_Default_Timeline #RoundRect1 {
}
ball_edge.js Code: /**
* Adobe Helium: symbol definitions
*/
window.symbols = {
"stage": {
version: "0.1",
baseState: "Base State",
initialState: "Base State",
parameters: {
},
content: {
dom: [
{
id:'RoundRect1',
type:'rect',
rect:[234,175,81,82],
borderRadius:[10,10,10,10],
fill:['rgba(0,0,0,1.00)'],
stroke:[0,"rgba(0,0,0,1)","none"],
},
],
symbolInstances: [
],
},
states: {
"Base State": {
"#stage": [
["style", "height", '560px'],
["color", "background-color", 'rgba(255,255,255,1)'],
["style", "width", '931px']
],
"#RoundRect1": [
["color", "background-color", 'rgba(0,0,0,1.00)'],
["style", "border-bottom-left-radius", [41,41],{valueTemplate:'@@0@@px @@1@@px'}],
["transform", "translateX", '18.9112px'],
["style", "border-bottom-right-radius", [41,41],{valueTemplate:'@@0@@px @@1@@px'}],
["style", "border-top-left-radius", [41,41],{valueTemplate:'@@0@@px @@1@@px'}],
["style", "border-top-right-radius", [41,41],{valueTemplate:'@@0@@px @@1@@px'}],
["transform", "translateY", '69.673px'],
["transform", "rotateZ", '0deg']
]
}
},
actions: {
},
bindings: [
],
timelines: {
"Default Timeline": {
fromState: "Base State",
toState: "",
duration: 1000,
timeline: [
{ id: "eid32", tween: [ "style", "#RoundRect1", "border-bottom-right-radius", [41,41], { valueTemplate: '@@0@@px @@1@@px', fromValue: [41,41]}], position: 0, duration: 0, easing: "linear" },
{ id: "eid30", tween: [ "style", "#RoundRect1", "border-top-left-radius", [41,41], { valueTemplate: '@@0@@px @@1@@px', fromValue: [41,41]}], position: 0, duration: 0, easing: "linear" },
{ id: "eid18", tween: [ "transform", "#RoundRect1", "rotateZ", '360deg', { valueTemplate: undefined, fromValue: '0deg'}], position: 0, duration: 1000, easing: "linear" },
{ id: "eid31", tween: [ "style", "#RoundRect1", "border-top-right-radius", [41,41], { valueTemplate: '@@0@@px @@1@@px', fromValue: [41,41]}], position: 0, duration: 0, easing: "linear" },
{ id: "eid17", tween: [ "transform", "#RoundRect1", "translateX", '511.599px', { valueTemplate: undefined, fromValue: '18.9112px'}], position: 0, duration: 1000, easing: "easeInCirc" },
{ id: "eid29", tween: [ "style", "#RoundRect1", "border-bottom-left-radius", [41,41], { valueTemplate: '@@0@@px @@1@@px', fromValue: [41,41]}], position: 0, duration: 0, easing: "linear" }]
}
},
}};
/**
* Adobe Edge DOM Ready Event Handler
*/
$(window).ready(function() {
$.Edge.initialize(symbols);
});
/**
* Adobe Edge Timeline Launch
*/
$(window).load(function() {
$.Edge.play();
});
Code: Quote: Code: Quote: Code: Quote: can somebody please tell me what need done. Everything is working fine except for the button created in javascript that is in the second window which is to open the third window. Thanks. I have a web page with two forms, when I click the button on one of the forms, the onclick event goes to a javascript that emails the first form and then the second form. This is correct, this is the way I want this to work. It's simple, it's easy, it works! However, it only works in FireFox and Internet Explorer, it will not work in Google Chrome browser. I've spent many hours trying lots of various ways to implement this so I'm not interested in speculating about possible solutions that might work, I've already tried too many of those. Also, it needs to work this way, not combining the forms, etc. Does anyone have any tried and tested solutions that work with Chrome? Thanks, in advance, for your expert advice. I know I can always rely on EE when all else fails. I know somebody here can solve this problem. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<title></title>
</head>
<body>
<form id="NameForm" method="post" action="mailto:yourFirstemail@email.com">
Name: <input type="text" size="10" name="name"> <br />
<input onclick=functionCaller() type="button" value="Submit Two Forms">
</form>
<form id="AddressForm" name="DComments" method="post" action="mailto:yourSecondemail@email.com">
Address: <input type="text" size="10" name="address"> <br />
</form>
<script type="text/javascript">
<!--
function functionCaller()
{
document.getElementById('NameForm').submit();
document.getElementById('AddressForm').submit();
}
-->
</script>
</body>
</html>
Ok so Im going to break down what Im trying to do and hopefully someone can point me to a possible solution without getting all technical. I have 2 div tags. the first is a content container more or less. the second is a container for a php built calender (using html tables). Basically when the page loads the php builds the calenders html table code. each td element has an onclick event handler. The goal is to have the javascript handler execute when any non empty cell is clicked (non empty being that it has a date associated with it and is not a blank space filler). This is the easy part. The hard part is that each calendar day potentially has certain information associated with it stored in a mysql database. Im wanting input fields within the first container div to autopopulate with the information from the database (if any) for whatever day is clicked. Ive search around and heard things like javascript cant do mysql queries directly, and heard mention of ajax. So im stumped as to how to accomplish this. whether i need an external php script for the queries (perhaps inside a php function that can return data to the javascript that calls it?), but if that is plausable would it cause page loads or the like to the user? i really dont want to have to learn ajax for this one page, just seems excessive, but i do need a way to make the content in the first div populate with the respective database data for the selected day on the calendar. any thoughts, comments, or solutions that dont involve yet another web language would be greatly appreciated. thanks
I understand that there is an onended event handler that can be used to detect when a media event, such as the playing of am MP3 file or digital video file, is completed. I would like to know 1. how to use code this event handler and 2. how to use detection of the end of the media event to launch another Web page. Thanks for any help, George Hi all, I am really stuck on this: I have an iframe on my page <iframe id="displayframe">. I used security="restricted" to create a more 'secure' frame but that means that any forms which submit will be opened in a new window... away from my website. I also have a textbox, called "showurl" which acts as an 'address bar' to the iframe and the accompanying button "go". I read on Stanford's website that: "It is possible to use JavaScript inside the restricted iframe, by attaching event handlers from the outside (unrestricted) window. This allows the outer window to get around the restriction that hyperlinks in a restricted iframe are supposed to open in a new window. " So I would need a function that would detect when a new page has been opened (ie. a form has been submitted) and would be able to take the URL of the new page, copy the new page's URL into the textbox and click the button "Go" and close the new page (the one which just opened) All in all... The event handler needs to get the url of the submitted form page (the opened window) paste it into the textbox "showurl", click the button "go" and then close the opened window. Could anyone help me out on this? It would be greatly appreciated!! if it is done like this: Code: anElement.onclick=handleIt;
function handleIt()
{ this. ... //'this' refer to the anElement
}
However, if you attach an event, quirk happens: Code: anElement.attachEvent("onclick",handleIt);
// not sure if anElement.addEventListener("click",handleIt,false) works well
function handleIt()
{ this. ... //'this' refer to an empty object ???????
}
why 'this' doesn't refer to the current target? anyone can help? Hey Everyone, I would like to let a select menu drop down with the click of a button or image. So, I have: Code: <select> <option>Option1</option> <option>Option2</option> <option>Option3</option> <option>Option4</option> </select> So, how do I trigger this select menu to drop down, except for clicking on the down arrow? Thanx in forward 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. Hey guys, I know that there are two ways to declare an event in javascript. 1.Inline ie: <a href="#" onclick="function_name(param)">Link</a> 2.Traditional ie: linkelement.onclick = function_name; Now, how can the second method work with functions that have parameters??? Since we can't use parenthesis, how do we pass in the arguments?! 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, 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. |
|||||||