JavaScript - Make A Html Button Stay Down When Pressed
how do i make a html button stay down when pressed, until another button within a specified group of buttons is pressed, at which point it is released and the other button stays pressed?
Similar TutorialsHi guys, would appreciate some help here. The below is part of the codes of my image matching programme. The programme loads 2 different series of images in the area and the up/down button is supposed to change each set of the series of images. Currently, the codes only allow one set of the images to be changed. Any idea what can be done so that both set get changes when the up/down key is pressed? Thanks! Codes: public void keyReleased(KeyEvent e) { zoom = false; repaint(); } public void keyPressed(KeyEvent e) { System.out.println("" + e.getKeyCode()); switch (e.getKeyCode()) { case 16: zoom = true; zoomPt = getMousePosition(); repaint(); break; case 39: loadImage(true, true); break; case 40: loadImage(false, true); break; case 38: loadImage(false, false); break; case 37: loadImage(true, false); break; } } public void changeDir(File dir) { this.dir = dir; } public void loadImage(boolean isFileA, boolean increase) { File[] fileList = dir.listFiles(new FilenameFilter() { public boolean accept(File dir, String name) { if (name.toLowerCase().endsWith(".dcm") || name.toLowerCase().endsWith(".dc3") || name.toLowerCase().endsWith(".dic")) { return true; } else { return false; } } }); if (fileList.length < 2) { return; } try { if (isFileA) { a_os = increase? (a_os + 1) % fileList.length : (a_os - 1 + fileList.length) % fileList.length; } else { b_os = increase? (b_os + 1) % fileList.length: (b_os - 1 + fileList.length) % fileList.length; } String ext = fileList[a_os].getName().substring(fileList[a_os].getName().lastIndexOf(".") + 1); Iterator readers = ImageIO.getImageReadersByFormatName(ext); ImageReader reader = (ImageReader) readers.next(); reader.setInput(new FileImageInputStream(fileList[a_os]), true); imgA = ((DICOMImageReader) reader).read(0, null); ext = fileList[b_os].getName().substring(fileList[b_os].getName().lastIndexOf(".") + 1); readers = ImageIO.getImageReadersByFormatName(ext); reader = (ImageReader) readers.next(); reader.setInput(new FileImageInputStream(fileList[b_os]), true); imgB = ((DICOMImageReader) reader).read(0, null); w = Math.max(imgA.getWidth(), imgB.getWidth()); h = Math.max(imgA.getHeight(), imgB.getHeight()); } catch (Exception e) { String fileName; fileName = isFileA ? fileList[a_os].getPath() : fileList[b_os].getPath(); promptError(fileName + " could not be read"); e.printStackTrace(); System.exit(1); } dx = w / 2; dy = h / 2; } public void promptError(String msg) { JOptionPane.showMessageDialog(null, msg, "Error", JOptionPane.ERROR_MESSAGE); } public void keyTyped(KeyEvent e) { } Hello all I created a form which has a lot of textboxes, checkboxes and select-lists which are getting filled up by the records from a database table. I am basically creating an edit screen for a record. No I want to check all these input elements using javascript validation. I want this to performed when a button "Archive" is pressed. My problem is this "Archive button" needs to be a submit button. This does run the javascript validation but after completing the validation it submits the form. I want that submission should be stopped when the validation is violated. how can I do this? What I want is a button which acts as a default button (triggers the onclick event when I press enter) but submits only if the form is valid. hi guys. im new to javascript and i require some help on a task so hoping someone on here could help me and possibly push me in the right direction. so i have a website with content on specific pages i need some sort of JS soloution which will fetch an ID/Keyword out of the page content so when a button is clicked it finds the ID/keyword and directs the user to a specific form/page. is this possible and can any1 help? Cheers, Ant. Ok, so i got two buttons made with css, that i want to link to two different text that will appear in a <div> when i press them. Quote: <a href="#" class="title4"value="Click" onclick="document.getElementById('introduktion').innerHTML=''"/> Introduktion </a> <a href=".pdf" class="title4" > CV </a> <a href="#" class="title5"value="Click" onclick="then var name =.innerHTML;document.getElementById('presentation').innerHTML=''"/ >Presentation </a> </div> <div class="post"> <div class="text" style="; height:387px; width:400px; overflow:auto;"> <br> <span id="introduktion" href="#"> <font size="2"> text 1 </span> <span id="presentation" href="#">text 2 </span> The button works, but when i press them more than once everything disappears... Do anyone have any idea on how to solve this problem? Hey guys. This is vague because I dont know what exactly to tell you but please reply with me so I can fix this. I want to add something to my forum. Specifically, I want to add a HTML and Picture button for when you go to reply. Like posting an article here, there are also these options (font, alignment, insert image) I do not know how to achieve this but shouldnt be too hard. Here are the two sources you will need to look through to help me fix the forum. http://neoweather.com/FWFORUM.JS http://static.websimages.com/JS/fw.js THANKS Hey guys. I want to add something to my forum. Specifically, I want to add a HTML and Picture button for when you go to reply. Like posting an article here, there are also these options (font, alignment, insert image) I do not know how to achieve this but shouldnt be too hard. Here are the two sources you will need to look through to help me fix the forum. http://neoweather.com/FWFORUM.JS http://static.websimages.com/JS/fw.js THANKS Made a topic earlier about "auto klick" for swf button but i got response ,its not posible todo that.. so i have another question!! Is it posible to make the swf button invisible but still clickable and then have a background so it looks like its another button? or is there any other way to edit design for the button! OBS! i only have the swf not the flv file! Code: <html class="no-js" lang="en" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml"> <!--<![endif]--> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <script src="http://www.google.com/jsapi?key=ABQIAAAAAJ5I0tmbz-jcO3Ja4fwvEBTb9u7IFi28hLXI-qXjI6UBBcarTBQ49g-wp7Wxnow1_w9F-7_GcOOnyg"></script> <script> google.load("jquery", "1.7.0"); google.load("swfobject", "2.2"); </script> </head> <body> <div id="container"> <div id="main" role="main"> <div id="data" class="channel"> <div id="openbutton"> <div id="flashcontent1";></div> <!-- DR1 Start --><script> params = {}; params.text = 'DR1'; params.action = "channel"; params.value = "40"; swfobject.embedSWF('content/linkbutton.swf', 'flashcontent1', '145', '30', '9.0.115', 'content/expressinstall.swf', params, {allowFullscreen:'true', wmode: 'transparent' ,bgcolor: '#FFFFFF', menu: 'false'}, {id: 'flashcontent1'}); <!-- DR1 Ends --></script> </div></div></div> </div></body></html> hi, on my website http://zend.warrencreative.com/gemini-group/index.html I am using thickbox, if you click on Subscribe to newsletter at the top it opens up a box, I need to change type="button" to type="image" but this doesn't work?! is there any other way? Code: <a class="newsletter thickbox" href="#TB_inline?height=325&width=365&inlineId=myOnPageContent&modal=true">Subscribe to eNewsletter</a> <div id="myOnPageContent" class="hidden"><p>Please enter your Name:</p><p><input type="text" name="name" class="textbox"></p><p>Please enter your Email:</p><p><form action="#"><input type="text" name="email" class="textbox"></p><p> </p><p><input type="button" value="Send" class="thickbox" title="add a caption to title attribute / or leave blank" alt="#TB_inline?height=325&width=365&inlineId=myOnPageContent1"> <input onclick="tb_remove()" type="image" alt="cancel button" src="images/cancelbutton.jpg"></form></p></div> <div id="myOnPageContent1" class="hidden"><p>Thank you for subscribing</p><input onclick="tb_remove()" type="image" alt="cancel button" src="images/cancelbutton.jpg"></div> thanks in advance I'm trying to create a button where I can click on it and it changes the colour of text. When I click the same button again, it will change the text to another colour. It would be helpful if someone could show me how to do it please.
Hi! Trying to get a delete confirm dialog box to open when you click on the button. Here's what I have in the body... @if (Model.Layer.Id > 0){ <div style="float: left; padding-left: 14px;"> @using (Html.BeginForm("Delete", "Layer", new { layerId = Model.Layer.Id, subAccountId = Model.SubAccount.Id })){ <input type="image" src="/Portal/Content/images/admin-delete-off-btn.png" onmouseover="this.src='/Portal/Content/images/admin-delete-on-btn.png'" onmouseout="this.src='/Portal/Content/images/admin-delete-off-btn.png'" title="Delete button" value="Delete" alt="Delete" /> } </div> } I can't seem to figure out the script to make this work. Can anyone help? What I had was <script type="text/javascript"> function confirmDeleteSelected(id) { jQuery("#dialog-confirmDelete").dialog({ closeOnEscape: false, resizable: false, width: 250, modal: false, zIndex: 5000, buttons: { "Yes": function () { doDeleteSelected(id); jQuery(this).dialog("close"); jQuery(this).dialog("destroy"); }, "No": function () { jQuery(this).dialog("close"); jQuery(this).dialog("destroy"); } } //end Buttons }); } </script> Thanks Phil Here's the code. what am I missing to make this work? Thank you in advanced! @if (Model.Layer.Id > 0){ <div style="float: left; padding-left: 14px;"> @using (Html.BeginForm("Delete", "Layer", new { layerId = Model.Layer.Id, subAccountId = Model.SubAccount.Id })){ <input type="image" src="/Portal/Content/images/admin-delete-off-btn.png" onmouseover="this.src='/Portal/Content/images/admin-delete-on-btn.png'" onmouseout="this.src='/Portal/Content/images/admin-delete-off-btn.png'" title="Delete button" value="Delete" alt="Delete" /> } </div> } <div class="clear"></div> <div id="dialogDeleteBox" title="Delete Confirm" style="display: none"> <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 40px 0;"></span> <div id="confirmDeleteLayer"> <div id="confirmDeleteLayerMessage"> <p> Are you sure you want to delete this group? </p> </div> </div> </div> I have some code that will check a users screen resolution and open a new window with a particular version of my website in, I have several sites for different page sizes. But when this code runs in Safari the pop-up is blocked so I would like the image on my page to be a button that runs the code to open the 'correct' window (based on the screen res) and as a button is launching the new window Safari should be okay about it. Unless I am doing something wrong? http://www.meta.projectmio.com/pop.html But how do I modify the code to do this, I'm hopeless? Thanks. Basically, I want to make it so there is a button, and when you click it, it plays a random song from a list of songs that would be in the code. I am not completely sure if this is possible or not. I know how to make the button, that is simple. Sorry if this is actually easy, I am just learning how to script. I have a button given like this: <a href="test.php"><input class="test" type="test"></a> I have a CSS that defined the button as an image, and on hover the button changes. However, on hover, I'd like there to come a drop down that for example link to test 1, test 2, test 3. Is this possible? Thank you! Hello there, This seems to be a bit of a sore topic on the forums but at least I think I have good reason for wanting to do it - I've written a script that displays tooltips when your mouse hovers over a link - all this is fine, but when I click on the link and move to another page, then click the back button on the browser to go back, the tooltip for the link I clicked is still visible! It'd be great if there was a way of detecting the button had been pressed so that I can hide it... p.s. I tried onclick = "tooltips.hideToolTip(4); return true;" for the links but no joy... Many thanks Edd I need a javascript that could record the ID/name of a textbox when the user hit delete or backspace to be used on the next page after submission in a PHP script. There are 96 text boxes, they are all randomly placed on the screen with a question that came from a randomized array's keys (the script later checks the values of the textboxes with the values from the array's keys that correlate to the textboxes by the name/id of the textbox, which is assigned by a for loop that issues the next($array) to assign everything everywhere. At the same time, it needs to count how many times the backspace/delete were pushed and have that recorded and sent as well. After 45 minutes of research I've been able to solve the "count the backspace/delete key" problem: Code: <script type="text/javascript"> var count = 0; document.onkeypress=function(e){ var e=window.event || e if (e.keyCode == 8) { //8 is backspace count++; document.getElementById('backspace').value=count; //this is a hidden input } if (e.keyCode == 46) { //46 is delete count++ document.getElementById('backspace').value=count; //the hidden input } } </script> But onto the name/id issue: I'm not sure how to go about retrieving the names/id of the textboxes. I would assume a onkeypress event for every textbox, but hope that there could be something I could just add to this code. Thank you for your help. Hello, I am currently learning JS and want to use the following to add a counter alongside the "Items Remaining" to countdown from 5 then once the max number has been reached my button to disappear and it say "finished". Can anyone help me please? Code: <!doctype html> <html> <head> <title>Adding Numbers Together</title> </head> <body> <form id = "frmOne"> <table border="1" > <tr> <th> Items Remaining </th> <td><Input Type="Text" Name="val" > </td> </tr> <tr> <th> Number One:</th> <th> Number Two:</th> </tr> <tr> <td> <Input Type="Text" Name="txtFirstNumber" Size="5" value=""> </td> <td> <Input Type="Text" Name="txtSecondNumber" Size="5" value=""> </td> </tr> <tr> <td colspan="2"> Totals: <textarea Name="totals" style="width: 400px; height: 300px;"></textarea></td> </tr> <tr> <td colspan="2"> <Input Type="Button" Name="b1" Value="Add Numbers" onClick = calculate()> </td> </tr> </table> </form> <script> var Totals = [ ]; function calculate() { var form = document.getElementById("frmOne"); var A = form.txtFirstNumber.value; var B = form.txtSecondNumber.value; Totals.push( A + " + " + B + " = " + (1*A+1*B) ); form.totals.value = Totals.join("\n"); form.txtFirstNumber.value = form.txtSecondNumber.value = ""; } </script> </body> </html> 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. Is there a way to stop a form submit after hitting submit? Refresh wouldn't realy be an option. Is abort() what I'm looking for?
Ok so im new to javascript and I have a button in an interface for an app. It's like drag and drop and i want this button to link you to a certain website searching for what the user types in the searchField1 box. The button is button16. Such as you type dogs into the text box and you click the google button among other search engines and it will redirect you to a google search doing a search for dogs. But how do I make this button search google and search for whats in searchField1. I would really appreciate the help. Im looking everywhere to learn this but just cant find it. If you could tell me how or send me a link to a tutorial that would be great. Thanks! Here is the code: I don't know where and what to add to do that. Please help. |