|
JavaScript - Having A Function Operate On The Press Of A Button
Similar TutorialsHello, I've been working on creating a script that zooms the entire webpage. Other than using "CTRL" + "+" keys (generally compatible with all browsers) to zoom in inside a web browser, I want to put it in a different format, as a button; it would be even easier to use. The problem is that I can't figure out how to make it work/ why it does not work. The following is my code: Code: <html>
<head>
<script type = "text/javascript">
document.onkeydown = function(zoomin) {
var key;
zoomin = zoomin || event;
key = zoomin.keyCode;
key == 43;
return false;
if (key == 17) {
return true;
function(zoomin){;
return false;
}
}
}</script>
</head>
<body>
<h1>Is this appearing to get bigger?</h1>
<button onclick="javascript: function('zoomin');">Zoom in</button>
</body>
</html>
Basically I was trying to use a DEC code as the code for the "CTRL" and "+" keys; then put them into a function. The "return true" under the IF statement means that I want it to hold so that the "+" key can be read as part of the script, and therefore make the page zoom in. Once that happens, it returns false. I would appreciate any help/ suggestions. I will also try to look for a way to reset the page (100%) or zoom out as well. Hello, I have a script that enables a certain button when some conditions are met. I'm having an issue with it, so I made a simple script to get to the core of what I'm trying to do. This is the script that I'm using: Code: function disable()
{
document.form.button2.disabled='false';
}
Code: <form name="form"> <input type="button" name="button1" value="Enable Button 2" onclick="disable()" /> <input type="button" name="button2" value="Button 2" disabled="true" /></form> Basically when you press button 1, button 2 enables. If I reverse it (button 2 enabled by default, pressing button 1 enables it) it is fine. But for some reason this way round nothing happens when I press button 1. What am I doing wrong? Hey: I have several "submit" buttons on a form. I want users to be able to hit the "enter" key to submit the form. The page used to "post" the information checks for specifically what form button was pushed to submit the form before executing the appropriate code. I am automatically submitting the page when the enter key is hit, but it is defaulting to the first option of executed code in the post page. Example - I have an "update" button and a "delete" button on the form. On the post page, I first check to see if the delete button was hit. When I press enter on the form, it simply answers yes to the first question (did they click the delete button), and the code is executed. I really wanted to emulate that the update button was hit. So -- is there a way to hit the enter button, and in the js code, mandate that it was the "update" button that was clicked? Thanks. Hi I am trying to trigger an event once the user clicks the browsers back/forward buttons, I have built a system just like facebook where if the user has javascript turned on they get the full feature of the site which includes fast switching for example if someone goes to this page "example.com/index.php" and click a link to contact.php it would change the url to "example.com/index.php#!/contact.php" but what I need to know is if there is any way to change the pages content when the user goes back and forth through the fast switch pages? something like "history.back !== -1" or something like that. If anyone can help please reply, thank you. i'm still a relative noob and this has me stuck - i have a save button with a "save as copy" in the save dropdown list. add new item directs to a premade/formatted project that is used as a template, so on that item i only want/need the "save as copy" but on all other items that use the form i need to only have the "save" function. is there any way to either change the function of the button depending on item that is being viewed in the edit screen OR hide the "save" button and only show the button associated with "save as copy - and vis versa for the rest of the items?? current button code is - protected function getToolbar() { $options = array(); $user = JFactory::getUser(); $create_ms = $user->authorise('core.create', 'com_pfmilestones'); $create_task = $user->authorise('core.create', 'com_pftasks'); $options[] = array( 'text' => 'JSAVE', 'task' => $this->getName() . '.save'); $options[] = array( 'text' => 'Save as new project', 'task' => $this->getName() . '.save2copy', 'options' => array('access' => ($this->item->id > 0))); PFToolbar::dropdownButton($options, array('icon' => 'icon-white icon-ok')); item used as template is id=8 any help or suggestions would be greatly appreciated.. Hi, I am not entirely sure what I am doing wrong here, and I have been looking at this for ages, so apologies in advance if I have become so bleary eyed I can't see something simple. I use php to create buttons based on values pulled for a table. The problem I have is when you click on the first button the javascript function works great, when you click on the next button you get the same output even though it should be different results. I am working in ff and I can see on my firebug console that the javascript function is being called, but it is not passing the new value of the second or third button, it just keeps repassing the value of the first button. So not entirely sure where I am going wrong here. My page is: Code: <script type="text/javascript">
function loadXMLDoc2(File,ID,Msg){
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {
try{
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(ID).innerHTML=xmlhttp.responseText;
}
}
var params=Msg;
xmlhttp.open("POST",File,true);
xmlhttp.setRequestHeader("Pragma", "Cache-Control:no-cache");
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(params);
}
</script>
<head>
<body>
<?php
$con = mysql_connect("localhost","user","password");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("mydb", $con);
$result = mysql_query("SELECT DISTINCT theme FROM goods WHERE category='{$_POST['category']}'
ORDER BY theme DESC");
while($row = mysql_fetch_array($result)){
echo '<input type="text" class="hidden" name="theme" id="theme" value="' . $row['theme'] . '" ><input type="button" class="button3" name="product" id="product" value="' . $row['product'] . '" onClick="loadXMLDoc2(\'getShow.php\',\'txtHint\',\'theme=\'+encodeURI(document.getElementById(\'rtheme\').value))" > ';
}
echo '<br /><br />
<div id="txtHint"><div>
<br />
<br />';
mysql_close($con);
?>
And getShow.php produces a table with a list of product images, names and prices, based on theme. So basically not sure where I am going wrong here? Hello, can you operate correctly this cropper with IE6? http://www.defusion.org.uk/demos/060519/cropper.php On the web says it works correctly with IE6. I've just installed Windows XP and IE6, and maybe I should install or activate something more... Regards Javi I'm really not that familiar with javascript. I work with an application that provides a very basic web page for the user to view customer info....on this page is a button that will open launch a URL that allows the assoc to view a survey the customer has filled out....the customer info is in a SQL db and the web page is populated from the db table. In the data we get a doc ID for the survey and in a javascript function we have the begining of the URL to the survey. When the button is clicked it completes the URL by pulling the doc ID from the db....that is basically the current process. We are now adding additional surveys to the db and will have different URLs...we would like to use the same process but I've not been able to get it to work. Can someone let me know if there is a way to make this work? Or if you have any other questions. Thanks Travis I have the one javascripts button code and the functions is on "text area" .. but how do I change the function of this button to go to google.com website ..? how to make it.. the javascripts button code : Code: <input type="image" src="tesdt-copy-1.gif"
onmouseover="this.src='file:///C:/Documents%20and%20Settings/Administrator/Desktop/test/main%20test%20scripts/test2-copy-2.gif';"
onmouseout="this.src='file:///C:/Documents%20and%20Settings/Administrator/Desktop/test/main%20test%20scripts/test2-copy-1.gif';"
onclick="CB(document.getElementById('output').value); return false;"
</form name="I5" width="38" height="38">
Hi all, just before i kick off im not looking for the code just a push in the right direction. I am using a wysiwyg editor (tiny mce) which is basicaly a textarea with content in it. What i am looking to do is when a presses enter withing the textarea a <br/> tag is placed where the text curser is. Code: <textarea> <p>dfsdfdfdfdfdf dsfsdfdf dsfdsfdsf dsfdsfds dsfdfdss [enterpressed]<br/> dffdsf dfs dsfd sdf sdfs fdsf</p> </textarea> secondly, if a user users the arrow keys to navigate where to edit, when they get to the begining or the end of a tag, i want the arrows to be disabled. Code: <textarea> <p>||<df<sdf<dfd<fdfdf dsfsdfdf dsfdsfdsf dsfdsfds dsfdfdss [enterpressed]<br/> dffdsf> dfs> dsfd s>df sdfs>> fds>f||</p> </textarea> (<> represents arrow press, || represents blocked, and can go no further) any help much appreciated. Hi, Hi, I want to simulate user KEY PRESS (not mouse clicking) automatically on a screen every time that a pop up window (script error message) is opened on the screen OR detecting when an an iframe gets focus. My goal: Automatically closes the pop up window. If anybody know the exact code please post it. FG I want to detect the double-press of the space key. However, I want a single press of a space key to have a different function. The double-tap of space should only count if the taps of space are no more than, say, a half second apart. For example: The user hits space once, and javascript begins performing one action. 1/3rd of a second later, they hit the space bar again, and since that is within our threshold of 1/2 of a second, the action that began because the user hit the spacebar once should be cancelled, or undone (which I can write later) and the action when the user hits the spacebar twice should begin. Anyone have an idea how to do this? Thanks! hi friends, i got a two textboxes,my requirement is when i enter two charectors in textbox1,automatically cursor must point to textbox2. but in my case it is not happening like above,when ever i enter charector3,curosr is entering textbox2 along with the entered charector, please find my code below and help me in modifying it. 1.abc.ascs.cs file code is: txtCategory.Attributes.Add("OnKeyPress", "Focus1(this.id);"); 2.abc.ascx file code is: <script type="text/javascript"> function Focus1(that) { if (document.getElementById(that).value.length>1) { //If Len(.Text) = 2 Or Len(TXTbox.Text) = 5 Then document.getElementById('ShippedQtyAdjEntry1_txtDetail').disabled=false; document.getElementById('ShippedQtyAdjEntry1_txtDetail').style.backgroundColor="White"; document.getElementById('ShippedQtyAdjEntry1_txtDetail').focus(); } How can I do this? I'm new to JavaScript. I tried messing with While but it just caused lag as it kept looping infinitely. The problem I think is that I have a variable that changes every time I click the button. The function changes the variable. So it successfully changes the variable once to my likings, then when I click the button (thus running the function) it does nothing. Here's an example I created to show you Quote: <html> <head> <script type="text/javascript"> var x = 50; var y = Math.floor(Math.random()*5); function test() { var a = x+y document.getElementById("testing").innerHTML=a; } </head> <body> <p id="testing"></p> <input type="button" value="asdf" onclick="test()" /> </body> </html> So in this case, I need to click the button multiple times in which each time it should add y to x. It only works once and then goes kaput. Thanks! I read that you don't allow homework assignments to be posted, but this is only one small section of the assignment (1 page of 5), and I have a migraine, and I am utterly hopeless and lost (ha)... I was wondering if there was any errors you could point out to me that would explain why the button isn't doing ANYTHING (i.e. not calculating the sum, average, or grade) when i click it. I'm new to js so I'm sure it could be pretty much any n00b error in the function code. But like I said any help would be greatly appreciated... Code: <?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link href="5A.css" rel="stylesheet" type="text/css" media="screen"/>
<script type="text/javascript">
function DisplayGrades()
{ var aNum= 1* document.getElementById("txtaNum").value;
var bNum= 1* document.getElementById("txtbNum").value;
var Avg = (aNum+bNum)/2; document.getElementById("txtAvg").value=Avg;
var Sum= aNum+bNum; document.getElementById("txtSum").value=Sum;
var alphaGr= document.getElementbyID("txtalphaGr").value=alphaGr;
if (Avg <= 60)
alphaGr="F";
if (Avg>60 && Avg <= 70)
alphaGr="D";
if (Avg>70 && Avg <= 80)
alphaGr="C";
if (Avg>80 && Avg <=90)
alphaGr="B";
if (Avg>90 && Avg <=100)
alphaGr="A";}
</script>
</head>
<body>
<div id="wrapper">
<div id="interact">
Enter your grade for Test 1: <input type="text" id=txtaNum" class="controls" size="10" /> <br />
Enter your grade for Test 2: <input type="text" id=txtbNum" class="controls" size="10" /> <br />
<input type="button" id="btnDisplayGrades" value="Display Grades" onclick="DisplayGrades();" />
<hr/>
Sum of Your Grades: <input type="text" id="txtSum" class="controls" size="10" readonly="readonly" /> <br/>
Average Grade: <input type="text" id="textAvg" class="controls" size="10" readonly="readonly" /> <br />
Alpha Grade: <input type="text" id="txtalphaGr" class="controls" size="10" readonly="readonly" />
</div>
</div>
</body>
</html>
Hi.. I don't know if my idea is possible and if how can I do that. I have functions for button onclick. I have 3 buttons and I want to change the color of my button if it is active here is my code Code: <script type="text/javascript">
//=========display parameter settings==========//
function display_PS(){
document.loading_kanban.action="ParameterSettings.php";
document.loading_kanban.submit();
}
//=======display kanban=========//
function display_Kanban(){
document.loading_kanban.action="kanban_report.php";
document.loading_kanban.submit();
}
//=========display SR==========//
function display_SR){
document.loading_kanban.action="StockRequisition.php";
document.loading_kanban.submit();
}
</script>
<div id="main_button">
<input type="button" name="parameter_settings" value="Parameter Settings" onclick="display_PS()">
<input type="button" name="parameter_settings" value="Stock Requisition" onclick="display_SR()">
<input type="button" name="parameter_settings" value="Kanban Report" onclick="display_Kanban()">
</div>
Is it possible to add code in my function for css active button..If no what should I do to change the color of my button for the client to know what page she is. Thank you I want to have a button in a form that only calls a Javascript function, but not refresh the page, how do I do this?
Hi, I have a choice of three market items and I want the value of the selected one to be sent to my form. My code is: Code: <script type="text/javascript">
function loadXMLDoc2(File,ID,Msg){
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
}
else {
try{
xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById(ID).innerHTML=xmlhttp.responseText;
}
}
var params=Msg;
xmlhttp.open("POST",File,true);
xmlhttp.setRequestHeader("Pragma", "Cache-Control:no-cache");
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.send(params);
}
</script>
</head>
<body>
<input type="radio" name="myitem" id="myitem" value="All;" onclick="OtherFunction()" />All
<br /><br />' <input type="radio" name="myitem" id="myitem" value="Shirts" onclick="OtherFunction()" />Shirts
<br /><br />
<input type="radio" name="myitem" id="myitem" value="Trousers" onclick="OtherFunction()" />Trousers
<br /><br />
<br /><br />
<input type="button" class="indent" name="submitB" id="submitB" value="Submit" onclick="loadXMLDoc2('insertMarket.php','txtHint', 'md='+encodeURI(document.getElementById('myitem').value))" />
<div id="txtHint"></div>
This doesn't work. I have tried giving them different ids, I have tried replacing the id with checked="id=\'myitem\'", I have tried getElementById(\'myitem.checked\'), I have tried getElementbyName. In my full page I have far more radio buttons, so I don't want to do a getElementById(\'myitem[0].checked || myitem[1].checked etc. I think the solution must be along these lines. But I have run out of alternatives to try. Needless to say as it currently stands it gives the last radio button's value, which means it doesn't like them having the same id, but when I tried changing how the id was applied, or called - ElementByName, FF gives the error message as id is null. I'm still a relative noob and i'm wondering if anyone can help. items use a structured form, so any item in that category will display on the same form when selected i want to have the save button run its normal save on all items except 1 specific item - on the 1 item i want to have it function as a save as copy (while still having "save" as its visible text), the current code set in a drop down list is $options[] = array( 'text' => 'JSAVE', 'task' => $this->getName() . '.save'); $options[] = array( 'text' => 'Save as new project', 'task' => $this->getName() . '.save2copy', 'options' => array('access' => ($this->item->id > 0))); can anyone offer any suggestions? really stuck on this one |
|||||||