JavaScript - 1 Single Button To Mute Click Sound In Website? Thank You
Hi to everybody,
I created a site and added a sound on click events a hover. But not all my website visitors prefer it, so I would like to add a button to mute these click sounds. Is this possible? Please help me because I don't have a clue on how to proceed. Thanks very much in advance Dimitri Similar TutorialsWhat is the correct code to make a sound play every time you click a certain image? All the codes I've found online aren't working, or I'm not inputting something correctly..
Ok know those people who are in the bad habit of double clicking everything? Well my site breaks if they double click it... is there a script I can use that won't let my functions run more then once every so many seconds? to avoid double clicking errors? Hi this is my first forum post. I'm developing a website for use in Thai schools in which clicking on link (at the beginning of a line of English text) starts a sound file (ogg or mp3). I've been using the Mouseover/Click sound effect script from by JavaScript Kit (www.javascriptkit.com). It works as designed in Firefox and Opera but doesn't in IE8. The script relies on HTML5 functionality so it should be compatible with IE8 (so I understand). I'm using Ubuntu 10.04 with Windows XP SP3 as the guest OS on VirtualBox. it seems to be a problem specific to IE8 (perhaps, not too surprising!) since the script works OK for Firefox and Opera. Here is the script Code: var html5_audiotypes={ //define list of audio file extensions and their associated audio types. Add to it if your specified audio file isn't on this list: "mp3": "audio/mpeg", "mp4": "audio/mp4", "ogg": "audio/ogg", "wav": "audio/wav" } function createsoundbite(sound){ var html5audio=document.createElement('audio') if (html5audio.canPlayType){ //check support for HTML5 audio for (var i=0; i<arguments.length; i++){ var sourceel=document.createElement('source') sourceel.setAttribute('src', arguments[i]) if (arguments[i].match(/\.(\w+)$/i)) sourceel.setAttribute('type', html5_audiotypes[RegExp.$1]) html5audio.appendChild(sourceel) } html5audio.load() html5audio.playclip=function(){ html5audio.pause() html5audio.currentTime=0 html5audio.play() } return html5audio } else{ return {playclip:function(){throw new Error("Your browser doesn't support HTML5 audio unfortunately")}} } } //Initialize two sound clips with 1 fallback file each: var a=createsoundbite("chot_pic01.ogg", "chot_pic01.mp3") var b=createsoundbite("chot_pic02.ogg", "chot_pic02.mp3") ............................. ............................. I only know a little Javascript at present, so I would be thankful of any help Hi people ! I went to this page: http://www.javascriptkit.com/script/....shtml#current and I applied that script to my website, everything work perfectly. I only have a question about it: * What should I add to the code to avoid the sound activate even when I'm hovering over the margin of the image? * Would it be possible that the sound activate only when the mouse is hovered over the image and not the margin as well ? * Is the only solution; to insert every image in their own div and then letting the div handle the margin? this is the site www.blackbandanamovement.com the images I'm talking about are in the footer. thanks in advance I got this javascript Click sound effect to work - http://www.javascriptkit.com/script/...oundlink.shtml My question is how do I make it work on my iphone4 ? I tested the above site on my phone and there is no audio when I tap the screen. The html5 <audio> seems to work with my mobile device on this site - http://css-tricks.com/examples/SoundOnHover/ I am new to javascript thx Hi all, I am using the following script posted on this site: http://www.javascriptkit.com/script/...oundlink.shtml It works great, but I want to extend this script and mute the sound using a checkbox. This checkbox has the id: sound. If checked, I want to hear the sounds, when unchecked, no sounds should be heard. This is the code I currently have for the checkbox: Code: function playSound() { if (document.getElementById('sound').checked){ -something needs to be added here to make it work?- } } Anyone have an idea how to make this work? Many thanks Does anyone know if it is possible to use Javascript and HTML to access video+sound input so a user can use a webcam on a site without the need for flash/plug ins? Trying to figure this one out but not finding any good starting points yet. Not even sure if it is feasible. I am completely new to javascript programming. We had another company (out of business now) develop a mapping system that placed many different business locations on a Google map. However, the points overlap and hide each other. I would like the user to have to single click on the map (thus zooming the map in) before they can choose a business. Is there a simple line of code that will do this? I want to remove the need to double click to zoom and make it a single click to zoom prior to selecting a business. If you want to see the mapping code, I can post it. I wasn't sure what to do. This is a fairly pressing matter as the nonprofit I am helping out is seasonal and ready to start the busy season soon. THANKS! I'm having a problem with one of my Labs and My TA is not answering emails. I need to make a button, that when you click it, turns the bgColor blue, when you click it twice, it turns bgColor yellow, and a third time turns it orange. The tricky part is, I need to use an internal CSS style sheet for the color, and a function for the javascript. Here is what I have so far, but I'm completely stuck. Code: <html> <head> <style type="text/css" media="all"> highlight {background-color:yellow;} </style> <script type="text/javascript"> function blue() { document.bgcolor = blue; } </script> </head> <body> <p>Good morning. In less than an hour, aircraft from here will join others from around the world..... </p> <input type="button" value="Push me to change color!" onclick="document.bgColor= 'blue'"> </body> </html> (I cut out the doctype for readability) Obviously I'm not utilizing the function.. I tried replacing 'blue' with blue() (which is the name of the function) but that didn't work.. So how I utilize both the function, and the CSS sheet, AND get the button to do consecutive actions onClick..? -Thanks, this is my first post, I hope everything is understandable. This may seem a bit of an unusual question, but I've been tossing around an idea in my head for an experimental collaborative art & music website. I've not started building the site at all, and I've only a little HTML and no scripting experience. I plan on most likely using a service like squarespace for the ease of updating and member system and other features. (I imagine a few around here scoff at that kind of service! But that's beside the present issue.) So I imagine that if javascript is capable of handling this, it's not an extremely complicated solution. For example: say I have a song I'd like users to be able to listen to, but I want to split the parts (drums, strings, guitars, vocals, etc.) among a few different audio files, all embedded within close proximity of each other (say arranged vertically in two columns) on the same page. I want this so that users are free to play around with the parts, dropping them, lowering & raising volume, even pulling them out of sync if they please. Now what I want is a single button that will trigger all of the audio files to begin playback simultaneously, say, above the embedded files and centered. Would this be possible? Could anyone offer assistance in setting up this kind of thing? Thanks in advance! Here are the coding.. Code: <jsp:useBean id="chequeStopBean" scope="session" class="my.com.infopro.ibank.ui.bean.ChequeStopBean"/> <jsp:useBean id="labelBean" scope="session" class="my.com.infopro.ibank.ui.bean.LabelBean"/> <jsp:useBean id="lang" scope="session" class="my.com.infopro.ibank.ui.bean.LanguageBean" /> <%@ page language="java" import = "java.util.*" errorPage="" %> <%@ page import="my.com.infopro.ibank.dto.ChequeDTO"%> <% request.getSession(true); String contextPath = request.getContextPath(); chequeStopBean.queryAccList(); //RequestDispatcher dispatcher = null; %> <html> <head> <title><%=labelBean.getLabel("STOP_CHEQUE")%></title> <meta HTTP-EQUIV="Pragma" content="no-cache"> <meta HTTP-EQUIV="Expires" content="-1"> <jsp:include page="/ScriptHeader.jsp"/> <script language="javascript"> function validateAndSubmit() { var msg1 = "<%=labelBean.getLabel("MSG_REQUIRED_FIELD")%>"; var msg2 = "<%=labelBean.getLabel("MSG_CANNOT_CONTAIN_CHARACTER")%>"; var msg3 = "<%=labelBean.getLabel("MSG_IN_THE_FIELD")%>"; var msg4 = "<%=labelBean.getLabel("MSG_PLEASE_ENTER")%>"; var msg5 = "<%=labelBean.getLabel("WITH")%>"; var msg6 = "<%=labelBean.getLabel("TO")%>"; var msg7 = "<%=labelBean.getLabel("MSG_CHARACTER")%>"; var msg8 = "<%=labelBean.getLabel("MSG_PLEASE_ENTER_VALID_NUMBER")%>"; var msg9 = "<%=labelBean.getLabel("MSG_REQUIRED_FIELD")%>"; var msg10 = "<%=labelBean.getLabel("MSG_WITH_EXACTLY")%>"; var msg11 = "<%=labelBean.getLabel("MSG_WITH_VALID_DATE")%>"; var msg12 = "<%=labelBean.getLabel("MSG_EXAMPLE_DATE")%>"; var msgNum11 = "<%=labelBean.getLabel("MSG_WITH_A_MINIMUM_VALUE_OF")%>"; var msgNum12 = "<%=labelBean.getLabel("MSG_WITH_A_MAX_VALUE_OF")%>"; var msgNum13 = "<%=labelBean.getLabel("MSG_PLEASE_ENTER_ROUND_INETEGER")%>"; var msgNum14 = "<%=labelBean.getLabel("MSG_PLEASE_ENTER_AT_MOST")%>"; var msgNum15 = "<%=labelBean.getLabel("MSG_DECIMAL_PLACES")%>"; var msgEnter = "<%=labelBean.getLabel("MSG_PLEASE_ENTER_VALID")%>"; var errorMsg = "<%=labelBean.getLabel("MSG_LOWECASE_ALPHABET_ALLOWED")%>" var radioButtons = document.getElementsByName("radio"); for (var x = 0; x < radioButtons.length; x ++) { if (radioButtons[x].checked) { if(radioButtons[x].value=="1") { if (! validateTextEntry(form.chqNum, "<%=labelBean.getLabel("CHQNUM")%>" + " ", true,11,11, msg1, msg2, msg3, msg4, msg5, msg6, msg7, msg10) ) return false; if (! validateAlphabet(form.chqNum, "" + " ",1, msg2,"" )) return false; } else if(radioButtons[x].value=="2") { if (! validateTextEntry(form.chqNumFrom, "<%=labelBean.getLabel("CHQNUMFROM")%>" + " ", true,11,11, msg1, msg2, msg3, msg4, msg5, msg6, msg7, msg10) ) return false; if (! validateTextEntry(form.chqNumTo, "<%=labelBean.getLabel("CHQNUMTO")%>" + " ", true,11,11, msg1, msg2, msg3, msg4, msg5, msg6, msg7, msg10) ) return false; if (! validateAlphabet(form.chqNumFrom, "" + " ",1, msg2,"" )) return false; if (! validateAlphabet(form.chqNumTo, "" + " ",1, msg2,"" )) return false; if(form.chqNumFrom.value == form.chqNumTo.value){ alert("<%=labelBean.getLabel("MSG_CANNOT_SAME")%>"); return false; } } } } return true; } function show(id) { if (document.getElementById(id).style.display == 'none') { document.getElementById(id).style.display = 'block'; } } //--> <!-- function hide(id) { document.getElementById(id).style.display = 'none'; } </script> </head> <body onload="show('single')"> <form name="form" method="POST" action="<%=contextPath%>/ChequeStopServlet?tranx=confirm" dir="<%=lang.getDir()%>" > <table width="500" align="center"> <tr> <td align="left" colspan="3"> </td> </tr> <tr> <td align="left" colspan="3" class="mainHeader"><%=labelBean.getLabel("STOP_CHEQUE")%></td> </tr> <tr> <td colspan="3"> </td> </tr> <tr> <td colspan="3" class="subHeader"><%=labelBean.getLabel("CHQ_DETAIL") %></td> </tr> <tr> <td colspan="3"><div align="center"> <p class="statusError"> <%if(request.getParameter("error") != null) out.println(labelBean.getLabel(request.getParameter("error"))); else out.println("");%> </p> </div></td> </tr> </table><br /> <table width="500" align="center"> <tr> <td class="lbl"><span class="requiredFieldIndicator">* </span><%=labelBean.getLabel("ACC_NUMBER")%></td> <td width="10" class="lbl">:</td> <td width="305" align="left"> <select size="1" name="accNum"> <% for (Iterator iter = chequeStopBean.getAccList().iterator(); iter.hasNext();) { ChequeDTO chqDto = (ChequeDTO)iter.next(); %> <option value="<%=chqDto.getAccNum()%>"><%=chqDto.getAccNum()%></option> <% } %> </select> </td> </tr> <tr> <td align="right"> <input type="radio" class="radioStyle" name="radio" value="1" onfocus="show('single');hide('multiple');hide('multiple1');return true;" checked="checked" > <%=labelBean.getLabel("STOP_SINGLE")%> </td> <td> </td> <td> <input type="radio" class="radioStyle" name="radio" value="2" onfocus="hide('single');show('multiple');show('multiple1');return true;"> <%=labelBean.getLabel("STOP_MULTIPLE")%> </td> </tr> <tr id="single"> <td class="lbl"><span class="requiredFieldIndicator">* </span><%=labelBean.getLabel("CHEQUE_NUMBER")%></td> <td class="lbl"width="10">:</td> <td colspan="2" align="left"> <input name="chqNum" type="text" size="15"> </td></tr> <tr id="multiple" style="display: 'none'"> <td class="lbl"><span class="requiredFieldIndicator">* </span><%=labelBean.getLabel("FROM_CHEQUE_NUMBER")%></td> <td class="lbl"width="10">:</td> <td colspan="2" align="left"> <input name="chqNumFrom" type="text" size="15"> </td></tr> <tr id="multiple1" style="display: 'none'"> <td class="lbl"><span class="requiredFieldIndicator">* </span><%=labelBean.getLabel("TO_CHEQUE_NUMBER")%></td> <td class="lbl"width="10">:</td> <td colspan="2" align="left"> <input name="chqNumTo" type="text" size="15"> </td></tr> <tr> <td class="lbl"><span class="requiredFieldIndicator">* </span><%=labelBean.getLabel("REASON")%></td> <td class="lbl" width="10" >:</td> <td colspan="2"> <select name="reason"> <option value="Lost"><%=labelBean.getLabel("LOST")%></option> <option value="Stolen"><%=labelBean.getLabel("STOLEN")%></option> <option value="Payment Cancellation"><%=labelBean.getLabel("PAYMENT_CANCELLATION")%></option> <option value="Others"><%=labelBean.getLabel("OTHERS")%></option> </select> </td> </tr> <br/> <tr> <td colspan="3"> </td> </tr> <tr> <td colspan="3" align="center"> <input class="button" type="submit" value="Next" onClick="return validateAndSubmit();" > </td> </tr> <tr> <td colspan="3"> </td> </tr> <tr> <td colspan="3" align="left" class="footer"><%=labelBean.getLabel("NOTE")%> </td> </tr> <tr><td colspan="3" class="footer"> <ul> <li><%=labelBean.getLabel("THE_ASTERISK")%></li> </ul> </td> </tr> </table> <jsp:include page="/Footer.jsp" /> </form> </body> </html> This is error for the first page.. This is picture that which i wan.. Thanks! Hello, I am working on a tool for hardware quoting, I'm currently trying to add a button for adding line items to the quote. Here is what I currently have: The HTML: Code: <html> ... <input type="button" id="sbutt" onclick="buttinc()" value="Click Me" /> <div id="txtarea"></div> ... </html> The script: Code: vbutt = 0 function buttinc() { var buttona = document.getElementById("txtarea"); if (vbutt<100) { buttona.innerHTML="<div id='newdiv" + vbutt + "'></div><br />"; var buttb = document.getElementById("newdiv"+vbutt); buttb.innerHTML = "some text" + vbutt + "close tags and stuff"; vbutt = vbutt + 1; } } Now, it is sort of working the way I expect. When the button is clicked, it creates the new div, starts the id at 0, and increments the div id each time the button is pressed afterwards. It also displays the text (buttb.innerHTML) in the new div. However, it only increments the id of the same div, it doesn't create a new div under the first one. What I am hoping for is: click 1 : <div id="newdiv0">0</div> click 2 : <div id="newdiv1">1</div> click 3 : <div id="newdiv2">2</div> etc What it is doing: click 1 : <div id="newdiv0">0</div> click 2 : <div id="newdiv1">1</div> (newdiv0 disappears) click 3 : <div id="newdiv2">2</div> (newdiv1 disappears) What am I missing? Any help is appreciated. hye.. i'm trying to calculate value of balance by substract cash to total. But nothing happen. here is my code: Code: <script type="text/javascript"> function substract(){ { document.calculate.Cash.value = ZA; document.calculate.Total.value = Z1; balance(); } function balance(){ AAA = document.calculate.Balance; AAA.value = (ZA-Z1).toFixed(2); } </script> </head> <body style="background-color: #99FF99"> <?php // if there are any errors, display them if ($error != 'Unable to update') { echo '<div style="padding:12px; border:1px solid purple; color:red; font-weight: bold; text-align: center; font-size: medium; ">'.$error.'</div>'; } ?> <form action="" method="post" name="calculate" style="width: 1320px; "> <div class="style1"> <input type="hidden" name="CustID" value="<?php echo $CustID; ?>"> <input type="hidden" name="Total" value="<?php echo $Total; ?>"> <input type="hidden" name="TableID" value="<?php echo $TableID; ?>"> <div class="style5" style="width: 820px; height: 148px; margin-left: auto; margin-right: auto;"> <p class="style9"> </p> <p class="style17"><span class="style19">CUSTOMER </span> <strong> <span class="style19">ID:</span></strong> <strong> <?php echo $CustID; ?> </strong></p> <table style="width: 35%; height: 185px; margin-left: auto; margin-right: auto;" class="style15"> <tr> <td class="style11" style="width: 111px; height: 30px;"><strong>Table ID : </strong></td> <td style="height: 30px; width: 169px;" class="style18"><strong><?php echo $TableID; ?></strong></td> </tr> <tr> <td class="style1" style="width: 111px; height: 20px;"></td> <td style="height: 20px; width: 169px;" class="style1"></td> </tr> <tr> <td class="style16" style="width: 111px; height: 30px;"><strong>Total : </strong></td> <td style="height: 30px; width: 169px;" class="style18"><strong> RM<?php echo $Total; ?> </strong></td> </tr> <tr> <td class="style1" style="width: 111px; height: 20px;"></td> <td style="height: 20px; width: 169px;" class="style1"></td> </tr> <tr> <td class="style16" style="width: 111px; height: 30px;"><strong>Cash : </strong></td> <td style="height: 30px; width: 169px;" class="style1"> <strong> <span class="style20">RM</span> <input type="text" name="Cash" id="Cash" class="style17" style="width: 120px"></strong></td> </tr> <tr> <td class="style1" style="width: 111px; height: 20px;"></td> <td style="height: 20px; width: 169px;" class="style1"></td> </tr> <tr> <td class="style16" style="width: 111px; "><strong>Balance : </strong></td> <td style="width: 169px;" class="style1"><strong> <span class="style20">RM</span> <input type="text" name="Balance" id="Balance" value="0.00" class="style17" style="width: 120px"></strong></td> </tr> </table> <p class="style5"><strong> <input class="style3" name="calculate" type="button" onclick="substract()" value="Calculate"> <input class="style3" name="submit" type="submit" value="Done"></strong> </div> </div> </form> Hi. 1) I would like to click the Download button on this site, then wait lets say 60 sec & click free download button. http://uploading.com/files/S4WYPP73/...r_ENG.rar.html I remember that somehow it is possible to create the Request URL & then input it into IE & the server will think I hit the button. But how can I make the URL? And how is it called? posting URL request? I will be using firefox or I can make HTML file & execute it in IE for every file. PHP Code: <form action="http://uploading.com/files/get/S4WYPP73/" method="post" id="downloadform"> <input type="hidden" name="action" value="second_page" /> <input type="hidden" name="file_id" value="4663720" /> PHP Code: function do_step_1() { do_request('files', 'get', {file_id: 4663720, action: 'step_1'}, function(wait_time){ if(wait_time > 0) start_timer(wait_time); else if(wait_time <= 0) download(); }); } function do_step_2() { do_request('files', 'get', {file_id: 4663720, action: 'step_2'}); } PHP Code: function download() { $('#waitblock').html('Free Download'); $('#waitblock').click(function(){ do_step_2(); }); } Hey I want to enforce a click on the facebook share button, please help me out here. I was thinking something like this: Code: javascript:window.location="http://www.facebook.com/connect/prompt_feed.php?locale=en_US&message=hi"; javascript:function selectFirst() { publish.focus(); publish.click();} selectFirst(); Something wrong with that code? What code would work? Is it not possible? Thanks a lot, Sarah I would like for the script to say "Ok here is the button on this page *clicks* (or submit)" I have tried this with out help, I'm not really sure what to do. I've tried learning what I can on my own, I've tried using the search tool. Here is the part of the code I am trying to use to make my click button. Code: <div id="interactiveBox"> <div class="divpad3"> <form name="buyform" method="POST" action="/marketplace/userstore/2690240/buy/?id=567595175&step=submit" ENCTYPE="application/x-www-form-urlencoded"> <strong>Buy It Now</strong> <strong>Password</strong> <input type="password" class="marketplaceInputField" name="password"> <input type="hidden" name="nonce" value="860307364.1283901229.441212630"> <button type="submit" class="cta-button-sm"><span>Buy Now</span></button> <br /><br /> </form> Here is what I have tried and failed.. This code will be used in combination with greasemonkey Code: <script>function clickOnLoad() { document.buyform.submit.value = "true"; } body onload="clickOnLoad()"</script> Hi there. I want to alert the user that he or she has not clicked on any of the radio buttons in each group. How do I do so? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>Untitled Page</title> <script type="text/javascript"> function validateRadio(obj,correct){ var result = 0 for(var i=0; i<obj.length; i++){ if(obj[i].checked==true && obj[i].value==correct) result = 1 } if(!result && obj.value == correct) result = 1 return result; } </script> </head> <body> <form onsubmit=" var err = '' if(!validateRadio(this.a,3 || 1)) { err+='\nFirst radio is wrong'; } if(!validateRadio(this.b,2 || 1)) { err+='\nSecond radio is wrong'; } if(err.length) { alert('Problem:'+err); return false; } else { alert('Good Job -- Submitting'); return true; }" action="#"> Choose "3" <input type="radio" name="a" value="1" /> 1 <input type="radio" name="a" value="3" /> 3 <p>Choose "2" <input type="radio" name="b" value="1" /> 1 <input type="radio" name="b" value="2" /> 2 </p><p><input type="submit" value="Submit" /> </p></form> </body> </html> Please advise. I dont get why that doesn't work... it has me baffled 0.o Code: <html> <div id="divId">Button clicked 0 times</div> <input type="button" value="click me" onclick="divClick()" /> <script type="text/javascript"> var i = 0; function divClick() { var colorNum1 = Math.floor(Math.random()*255); var colorNum2 = Math.floor(Math.random()*255); var colorNum3 = Math.floor(Math.random()*255); var color = "rbg(" + colorNum1 + "," + colorNum2 + "," + colorNum3 + ")"; i++; var divId = document.getElementById("divId"); divId.style.backgroundColor = color; divId.innerHTML = "Button clicked " + i + " times"; } </script> </html> figured it out finally i had rbg instead of rgb >< Hello I am new to javascript (4 months), I would like to add an hour to the current time each time a button is clicked. I have this code: ------------------------------------------------------------------ var hourstbutton=document.getElementById("button3"); hoursbutton.onclick=function() { var divlink=document.getElementById("math3"); var newtime2=new Date(); var currenthours2=newtime2.getHours()+1; var currentmins2=newtime2.getMinutes(); var currentsecns2=newtime2.getSeconds(); var ampm2= (currenthours2>=12) ? "P.M." : "A.M."; if (currenthours2>=13) { currenthours2-=12; } if(currenthours2<1){ currenthours2=12; } if(currentmins2<10){ currentmins2= "0" + currentmins2; } if(currentsecns2<10){ currentsecns2="0" + currentsecns2; } divlink.innerHTML=currenthours2+":"+currentmins2+":"+currentsecns2+ " "+ampm2; ------------------------------------------------------------------------ How do I tie the number of button clicks into the number of times this code is executed? Any help is appreciated thanks. hi to all, sorry for this question. First I have to say this that I'm very noob in javascript. My question is how to show the value of my radio button when click. I have this code: Code: <tr><td width="10px"></td><td width="60%">Neatness</td> <td width="40%"> <input name="neat" type="radio" class="hover-star" value="1" title="Poor"/> <input name="neat" type="radio" class="hover-star" value="2" title="Fair"/> <input name="neat" type="radio" class="hover-star" value="3" title="Satisfactory"/> <input name="neat" type="radio" class="hover-star" value="4" title="Outstanding"/> </td></tr> say when my 1st radio button it will show 1 or so on.. How can I achieve this? Or better yet does anyone know hot to do this in jquery. |