JavaScript - Captcha Problem
Hello,
I was using http://www.captcha.cc to generate free and easy captcha for my forms. None of them are working today. I don't know if the site has been removed or it is a temporary thing. Does anyone know? Do you know of a really easy and free captcha generator I can use instead? Thank you for your help. Also, we cannot use PHP. Similar TutorialsWhen user answers correctly (on key up AND key down), text field (CAPTCH) should become disabled, and span of id=correct should change to "√ Correct".. What is wrong with my code? No errors are returned. It just doesnt work. Please excuse my novice knowledge of javascript. Im just starting. Could someone please explain to me my error rather than solve it? I wanna learn, not be handed the answer. Thanks in advance, Robert PHP 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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Captcha</title> <script type="text/javascript"> var x = 44; var y = document.getElementById('CAPTCHA'); function correct() { if (y = x.value) { document.getElementById("correct").innerHTML = "√ Correct"; document.getElementById("CAPTCHA").innerHTML.disabled = "disabled"; } else {} } </script> </head> <body> 11 x 4 = <input type="text" id="CAPTCHA" onkeyup="correct()" onkeydown="correct()" /> <span id="correct">.....</span> </body> </html> Hello, When I have email validation and captcha in the same form, simply passing the captcha allows the form to be sent without an email address. When I remove the captcha, the form will not send without the email address. I want to have both. What am I missing? http://jaxpubliclibrary.org/lib/websiteform-test.html Code: <script> function validateForm() { var x=document.forms["WebsiteQuestion"]["Email"].value; var atpos=x.indexOf("@"); var dotpos=x.lastIndexOf("."); if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) { alert("Not a valid e-mail address"); return false; } } function clearForms() { var i; for (i = 0; (i < document.forms.length); i++) { document.forms[i].reset(); } } </script> Code: <div align="center"> <script language="javascript" src="http://www.captcha.cc/cap.js?cap_k=tocsoLPahVjmEHJZWtenaJEDoJXfrQaa" type="text/javascript"> </script> <input type=hidden name=cap_h id=cap_h value=""> <img border=1 id=cap_i src="http://www.captcha.cc/img.cgi?cap_k=tocsoLPahVjmEHJZWtenaJEDoJXfrQaa" align=middle><img align=middle style="margin-left: 4px;" id=cap_r onload="return cap_showReload(event);" src="http://www.captcha.cc/blank.png"><br> <input id=cap_t name=cap_t type=text value="" style="margin-top:4px;"> <input type=submit value="Submit Form" onclick="return cap_valid(event);"> </div> I appreciate any help. Thank you, Elbee hello, I got this javascript code to avoid bots to fill out with trash the forms I have in my website: <script type="text/javascript"> var a = Math.ceil(Math.random() * 10); var b = Math.ceil(Math.random() * 10); var c = a + b function DrawBotBoot() { document.write("Cuanto es "+ a + " + " + b +"? "); document.write("<input id='BotBootInput' type='text' maxlength='2' size='2'/>"); } function ValidBotBoot(){ var d = document.getElementById('BotBootInput').value; if (d == c) return true; return false; } </script> <P>Are you human?<br /> <script type="text/javascript">DrawBotBoot()</script> <P> <INPUT id="Button1" name="SUBMIT" TYPE="SUBMIT" VALUE="ENVIAR" onclick="alert(ValidBotBoot());"/> <INPUT name="RESET" TYPE="RESET" VALUE="BORRAR"> My problem is that the form sends itself even if you dont type the correct answer, I would like to Validate first and then allow me to send the form after validation. You can see the form he http://www.futuros.com/mercados_calientes.html feel free to play with it, i know is the only way to actually see what i'm trying to accomplish. Thanks, Alan Hello, I've been having a maddening issue with a CAPTCHA javascript math problem validation blocking the correct information from going to my contact form. I feel like I am overlooking something obvious. Basically I just want to create a simple javascript function that when the incorrect CAPTCHA code is entered an alert comes up saying "incorrect code" and then the form is not sent. The way it is working now, the form is passing through (due to document.write) but it is NOT allowing the PHP script to execute correctly, probably because document.write is bypassing the fields somehow. When I remove "return false;" the form goes through all the time, even after the alert comes up. When I keep "return false;" it goes through but the message is not sent correctly. Is there an easy way to make this work? Here is the javascript code: Code: <script type="text/javascript"> var a = Math.ceil(Math.random() * 10); var b = Math.ceil(Math.random() * 10); var c = a + b; function DrawBotBoot() { document.write("What is "+ a + " + " + b +"? "); document.write(" <input type='text' id='BotBootInput' name='Math' style='background-image: url(images/main/footer_math_problem_bknd.gif); width: 32px; height: 18px; padding: 5px; border: none; color: #fff;' /> "); } function ValidBotBoot(){ var d = document.getElementById('BotBootInput').value; if (d == c) { window.location = "sendmail.php";} else { alert("Incorrect CAPTCHA code"); } } </script> And here is the HTML form: Code: <form method="POST" action="sendmail.php"> <label for="FirstName"><p style="width: 120px; line-height: 0.4em;">Name:</p> </label> <input type="text" id="FirstName" name="FirstName" style="background-image: url(images/main/footer_text_field.gif); border: none; height: 26px; width: 216px; padding-left: 5px; color: #fff;" /> <label for="Emailaddress"><p style="width: 120px; line-height: 0.4em;">Email:</p></label> <input type="text" id="Emailaddress" name="Emailaddress" style="background-image: url(images/main/footer_text_field.gif); border: none; height: 26px; width: 216px; padding-left: 5px; color: #fff;" /> <legend><p style="line-height: 0.4em;">Your Message:</p></legend> <textarea name="QuestionComment" id="txt" style="background-image: url(images/main/footer_text_area.gif); width: 211px; height: 73px; padding: 5px; color: #fff; border: none;"></textarea><br /> <p style="width: 221px;"><script type="text/javascript">DrawBotBoot()</script> <input type="image" name="submit" id="submit" value="Submit" src="images/main/footer_submit.gif" height="28" align="right" onclick="ValidBotBoot(); return false;" /> </p> </form> hi everyone, Here's part of the codes I got from our website. Right now, when someone wants to register on our website, they have to put into the Captcha after they finish all the other information. If the captcha is empty, there would be an alert; if it's wrong, the page would be refreshed, and there would be another alert, and at the same time, all the information would be lost and they have to fill them again. Now the question is, how can I stop the page refreshing itself? All I need is an alert and then you could retype the captcha without losing the other information. Thank you in advance for your advice! <script type="text/javascript"> function ltrim(stringToTrim) { return stringToTrim.replace(/^\s+/,""); } function validateForm() { var okSoFar=true with (document.practitioner_profile) { if (firstname.value=="" && okSoFar) { okSoFar=false alert("Please enter your first name.") firstname.focus() } if (lastname.value=="" && okSoFar) { okSoFar=false alert("Please enter your last name.") lastname.focus() } //some other things here... if (verify_code.value=="" && okSoFar) { okSoFar=false alert("Please enter your security code.") verify_code.focus() } if (okSoFar==true) submit(); } } //here's the submit button in the html code, <div class="practsubmit"> <div class="signupform"><h4>* Security Code:</h4> <p>Please type in what you see in the box below and press submit. Characters are case-sensitive.</p></div> <div class="signupform"><img id="captcha" src="index.php?option=com_egbcaptcha&width=150&height=50&characters=5" /><br /><input id="verify_code" name="verify_code" type="text" /></div> <input type="button" class="button" value="Send" name="B1" ONCLICK="javascript:validateForm()"> <input type="reset" class="button" value="Clear" name="clear"> </div> So we need script like that http://userscripts.org/scripts/show/38736 But i dont know how to make it to that captcha http://one.lt/captcha Any1 have idea? :SSSSSSSSS Hi pals, I am really tired in this problem of event keyup. I given same in my keyup function like: $(document).ready(function () { alert("GGG"+parseInt(jQuery.browser.version)); //To display test value working $("#find_text").keyup(function(e) { if(e.which == 13) { alert('Enter key was pressed'); //enter Here alert("FFF"+parseInt(jQuery.browser.version)); //Here got Error } }); }); I got Error : jQuery is not defined alert("FFF"+parseInt(jQuery.browser.version)); I use keycode,which , but no help, It's Work nicely in Chrome Browser but not in FF. Please give a Solution reply ASAP, I am really Tired.The code enter the Condition But that jQuery part make error. Thankfully Anes P.A For help I m putting it all together ..copy and paste and run ... I used 2 browsers IE and mozilla... you fill find the problem ...I know some one will definatly solve my problem ..... Code: <script type="text/javascript" language="JavaScript"><!-- function ManageTabPanelDisplay() { var idlist = new Array('tab1focus','tab2focus','tab3focus','tab4focus','tab1ready','tab2ready','tab3ready','tab4ready','content1','content2','content3','content4'); if(arguments.length < 1) { return; } for(var i = 0; i < idlist.length; i++) { var block = false; for(var ii = 0; ii < arguments.length; ii++) { if(idlist[i] == arguments[ii]) { block = true; break; } } if(block) { document.getElementById(idlist[i]).style.display = "block"; } else { document.getElementById(idlist[i]).style.display = "none"; } } } //--></script> <style type="text/css"> .tab { font-family: verdana,sans-serif; font-size: 12px; width: 100px; height:30px; white-space: nowrap; text-align: center; border-style: solid; border-color: #9a9a9a; border-left-width: 1px; border-right-width: 1px; border-top-width: 1px; border-bottom-width: 0px; padding-top: 5px; padding-bottom: 5px; padding-left:3px; padding-right:3px; cursor: pointer; } .tabhold { background-color:#9a9a9a; /*color of menu #666666*/ color: white; } .tabfocus { background-color:white; color: #666666; } .tabcontent { font-family: sans-serif; font-size: 12px; height: 320px; border-style: solid; border-color: #9a9a9a; border-width: 1px; padding-top: 15px; padding-left: 10px; padding-right: 10px; overflow-y:scroll;overflow:-moz-scrollbars-vertical; } </style> <table border="0" cellpadding="0" cellspacing="0" > <tr > <td> <div id="tab1focus" class="tab tabfocus" style="display:block; padding-top:10px; height:39px;" > Overview </div> <div id="tab1ready" class="tab tabhold" style="display:none; padding-top:10px;height:39px;"> <span onclick="ManageTabPanelDisplay('tab1focus','tab2ready','tab3ready','tab4ready','content1')" >Overview </span> </div> </td><td > </td><td> <div id="tab2focus" class="tab tabfocus" style="display:none;"> Dimensions <br /> & Details </div> <div id="tab2ready" class="tab tabhold" style="display:block;"> <span onclick="ManageTabPanelDisplay('tab1ready','tab2focus','tab3ready','tab4ready','content2')">Dimensions <br /> & Details</span> </div> </td><td > </td><td> <div id="tab3focus" class="tab tabfocus" style="display:none;"> Quantity <br /> & Constructions </div> <div id="tab3ready" class="tab tabhold" style="display:block;"> <span onclick="ManageTabPanelDisplay('tab1ready','tab2ready','tab3focus','tab4ready','content3')">Quantity <br /> & Constructions</span> </div> </td> <td > </td><td> <div id="tab4focus" class="tab tabfocus" style="display:none;"> Customization <br /> Options </div> <div id="tab4ready" class="tab tabhold" style="display:block;"> <span onclick="ManageTabPanelDisplay('tab1ready','tab2ready','tab3ready','tab4focus','content4')">Customization <br /> Options </span> </div> </td> <td width="100%"> </td><td> </tr> <tr > <td colspan="8" > <div id="content1" class="tabcontent" style="display:block;"> content1 </div> <div id="content2" class="tabcontent" style="display:none;"> content2 </div> <div id="content3" class="tabcontent" style="display:none;"> content3 </div> <div id="content4" class="tabcontent" style="display:none;"> content4 </div> </td></tr> </table> please help thanks Hi, so I thought I could mash two bits of code together like this: Code: <div><label for="or">From:</label> <select name="or" style="width:200px; float: right" id="or" onchange="populate(this)"> <option value="Choose">Select your starting point</option> <option value="Guatemala">Guatemala City</option> <option value="Xela">Quetzaltenango</option> <option value="Antigua">Antigua</option> <option value="Rio Dulce">Rio Dulce</option> <option value="Coban">Coban</option> </select></div> <div> <label for="de">To:</label> <select name="de" style="width:200px; float: right" id="de"></select> </div> <div> <br> <input type="button" onclick="searchLocations()" value="Show route" /> </div> </div> </div> </div> <script type="text/javascript"> if (GBrowserIsCompatible()) { var gpolylines = []; function populate(o) { d=document.getElementById('de'); if(!d){return;} var mitems=new Array(); mitems['Choose']=['']; mitems['Guatemala']=['Select Destination','Antigua','El Rancho junction','San Pedro La Laguna','Panajachel','Coban','Rio Hondo','Chiquimula','Esquipulas','Copan Ruinas (Honduras)','La Ruidosa junction','Rio Dulce','Flores (via Rio Dulce)','Puerto Barrios','Flores (via Coban)','Quetzaltenango']; mitems['Xela']=['Select Destination','Guatemala City','Antigua','Chichicastenango','Huehuetenango','Panajachel','San Pedro La Laguna']; mitems['Antigua']=['Select Destination','Guatemala City','Quetzaltenango','Escuintla','Monterrico','San Pedro la Laguna','Panajachel','Chichicastenango']; mitems['Rio Dulce']=['Select Destination','Guatemala City','Flores','Lanquin','Coban','Puerto Barrios']; mitems['Coban']=['Select Destination','Lanquin','Rio Dulce','Laguna Lachua NP','Flores']; d.options.length=0; cur=mitems[o.options[o.selectedIndex].value]; if(!cur){return;} d.options.length=cur.length; for(var i=0;i<cur.length;i++) { d.options[i].text=cur[i]; d.options[i].value=cur[i]; } } function searchLocations() { var found = false; var from = document.getElementById('or').value; var to = document.getElementById('de').value; for (var a = 0; a < gpolylines.length; a++) { if (gpolylines[a].myname.toLowerCase() == to.toLowerCase() && gpolylines[a].mycategory.toLowerCase() == from.toLowerCase()) { found = true; gpolylines[a].show(); } } if ( ! found ) alert("No matches found. Please check your spelling or refine your search."); } the first bit, which populates the select boxes works fine, as you can see here but the second bit (the searchLocations function) is giving me a bit more trouble. What it's supposed to be doing is saying that if there's a polyline whose category xml attribute matches the text from the 1st select box AND whose name attribute matches the 2nd select box, it should be shown. The methods have worked in the past, there are no errors reported - the only problem is I get the alert regardless of which option I am selecting. I suspect that the problem is in the if (gpolylines[a].myname.toLowerCase() == to.toLowerCase() && gpolylines[a].mycategory.toLowerCase() == from.toLowerCase()) line, as it's the only one that I really came up with on my own... or can I not get the "or" and "de" elements in that way? Or is it something else entirely? thanks in advance for any suggestions... Code: <html> <head> <!-- CIS 340 Final Webpage project Author: Jeffrey Faulkner Date: 04/27/2011 File name: Mailinglist.htm --> <title>Home</title> <link href="mario.css" rel="stylesheet" type="text/css" /> <script src="random.js" type="text/javascript"></script> <script src="ads.js" type="text/javascript"></script> <script type="text/javascript"> function valmail() { var lastName = document.Infoform.LastName.value; var firstname = document.Infoform.FirstName.value; var mi = document.Infoform.Mi.value; var address = document.Infoform.Address.value; var city = document.Infoform.City.value; var state = document.Infoform.State.value; var zip = document.Infoform.Zip.value; var phone = document.Infoform.Phone.value; var dob = new Date (document.Infoform.Dob.value); var res = document.Infoform.chkResident.value; var email = document.infoform.email.value; var cemail = document.infoform.cemail.value; var stuClass; var classChecked = false; var selectnews = document.getElementById('lstF_ID'); var advisor = selectnews.options (selectnews.selectedIndex).innerHTML var radio = document.Infoform.Class.value; for (var i=0; i < document.Infoform.Class.length; i++) { if (document.Infoform.Class[i].checked) { classChecked = true; stuClass = document.Infoform.Class[i].value; } } if (lastName == "") { alert ("Please enter a last name"); document.Infoform.LastName.select(); return false; } else if (firstname == "") { alert ("Please enter a first name"); document.Infoform.FirstName.select(); return false; }else if (address == "") { alert ("Please enter a address"); document.Infoform.Address.select(); return false; } else if (city == "") { alert ("Please enter a city"); document.Infoform.City.select(); return false; } else if (state == "") { alert ("Please enter a state"); document.Infoform.State.select(); return false; } else if (zip == "") { alert ("Please enter a zip"); document.Infoform.Zip.select(); return false; } else if (phone == "") { alert ("Please enter a phone"); document.Infoform.Phone.select(); return false; }else if (dob == "NaN") { alert ("Date of Birth is not valid, use MM/DD/YYYY to enter data"); document.Infoform.Dob.select(); return false; }else if (Class.checked == "false"){ alert ("No class selected"); return false; }else if (email != cemail){ alert ("emails are not the same."); return false; }else { alert ("Last name: " + lastName + "\n" + "First Name: " + firstname + "\n" + "mi: " + mi + "\n" + "Address: " + address + "\n" + "City: " + city + "\n" + "State: " + state + "\n" + "Zip: " + zip + "\n" + "phone: " + phone + "\n" + "Date of Birth: " + dob + "\n" + "Advisor " + advisor + "\n" + "classfication " + stuClass); return true; } } </script> </head> <body> <h5><script type="text/javascript"> rNumber = randInt(5); //generate a random integer from 1 to 5 rAd = adDescription(rNumber); // description of the random ad rLink = adLink(rNumber); // url of the random ad document.write("<a href=" + rLink + ">"); document.write("<img src='ad" + rNumber + ".jpg' alt='" + rAd + "' />"); document.write("</a>"); </script></h5> <hr /> <a href="Home.htm">Home</a> <a href="speedrun.htm">Speed Runs</a> <a href="History.htm">History</a> <a href="mailinglist.htm">Mailing List</a> <a href="games.xml">List of games</a> <hr /> <h5><h3>Mario Mailing List</h3></h5> <h5><h3><form name="Infoform" action="action%20marker" id="Infoform" onSubmit="valmail()"> <table align="center"> <tr> <td> Last Name:</td> <td><input type="text" name="LastName" size="20" /></td> <td></td> <td></td> <td><h4>Class:</h4></td> <td></td> </tr> <tr> <td> First Name:</td> <td><input type="text" name="FirstName" size="20" /></td> <td></td> <td><input type="radio" name="Class" value="Mail" /></td> <td>Mail<td> </tr> <tr> <td> MI:</td> <td><input type="text" name="Mi" size="5" /></td> <td></td> <td><input type="radio" name="Class" value="email" /></td> <td>Email</td> </tr> <tr> <td> Address:</td> <td><input type="text" name="Address" size="20" /></td> <td></td> <td><input type="radio" name="Class" value="email" /></td> <td>phone</td> </tr> <tr> <td> City:</td> <td><input type="text" name="City" size="20" /></td> <td></td> <td><input type="radio" name="Class" value="text" /></td> <td>text</td> </tr> <tr> <td> State:</td> <td><input type="text" name="State" size="5" /></td> <td></td> <td><input type="radio" name="Class" value="any" /></td> <td>any</td> </tr> <tr> <td> ZIP Code:</td> <td><input type="text" name="Zip" size="20" /></td> <td></td> <td></td> <td></td> </tr> <tr> <td> Phone:</td> <td><input type="text" name="Phone" size="20" /></td> <td></td> <td><input name="chkResident" type="checkbox" /></td> <td> All the above</td> </tr> <tr> <td> Date of Birth:</td> <td><input type="text" name="Dob" size="20" /></td> <td></td> <td>What news do you want to here about?</td> <td><select size="1" name="lstF_ID"> <option selected="selected" value="1">New speed runs</option> <option value="2">upcoming games</option> <option value="3">New bugs found</option> <option value="4">new speed runs</option> <option value="5">All</option> </select value="1"></td> </tr> <tr> <td> EMail:</td> <td><input type="text" name="email" size="20" /></td> <td></td> <td></td> <td></td> </tr> <tr> <td> confirm email:</td> <td><input type="text" name="cemail" size="20" /></td> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td><input type="submit" value="Submit" /></td> </tr> </table> </form></h3></h5> </body> <hr /> <address> All information taken from mario wiki </address> </html> I have looked at this for an hour and i can not find anything wrong This is a program that calculates discriminant/number of solutions for a given quadratic equation.. it all works, but the number of solution field is not filled, so i think i did something wrong on my if else statements for it.. help! Code: <html> <head> <title>Untitled</title> </head> <script type="text/javascript"> <!-- Begin function quad(form) { a = form.a.value b = form.b.value c = form.c.value form.Dis.value = (b * b) - (4 * a * c) If(form.Dis.value > 0) { form.NumSol.value = 2 } Else;(form.Dis.value = 0) { form.NumSol.value = 1 } Else { form.NumSol.value = 0 } } // End --> </script> <body><center> <form name="form1"> <input type="text" name="a" size=5> x^2 + <input type="text" name="b" size=5> x + <input type="text" name="c" size=5> <input type="button" value="Calculate" onClick="quad(this.form)"> Discriminant: <input type="text" name="Dis" size = 7 /> Number of Solutions: <input type="text" name="NumSol" size = 7 /> </form> </center> </body> </html> hi i found some javascript on the internet that seemed to do what I wanted to achieve but cannot get it to work when the mouse is over the image it should show a bigger image. I've used the internet explorer debugger and there seems to be problem in the code, but i dont understand javascript programming. Im a php man myself. all the script is enclosed in this page http://www.web-malta.com/testimage.html if you put the mouse over the photo you will see there is an error on the page. hope someonbe can help. cheers I am creating a page which redirects automatically depending on the date. What I've done so far is below, but how would I make it go switch to exceeded_year.htm on 25th March 2011 for example? I will also include other dates and later put this page in a header frame and controlling the frame below so its constantly open. <html> <script type="text/javascript"> <!-- var currentTime = new Date() var date = currentTime.getDate() var month = currentTime.getMonth() + 1 var year = currentTime.getFullYear() if (year > 2011 ) {window.location = "exceeded_year.htm"; } else window.location="#" //--> </script> </html> Hi, i can't get my new logo to work in IE, it's working fine in Chrome and FireFox, it must be a JavaScript problem. here it is: http://danishwebart.com/logo/logo.php And the JavaScrip: $(function() { var canvas = $("#c"); var canvasHeight; var canvasWidth; var ctx; var dt = 0.1; var pointCollection; function init() { updateCanvasDimensions(); var g = [new Point(27, 34, 0.0, 1, "#ed9d33"), new Point(26, 38, 0.0, 1, "#d44d61"), new Point(25, 41, 0.0, 1, "#4f7af2"), new Point(22, 44, 0.0, 1, "#ef9a1e"), new Point(18, 46, 0.0, 2, "#4976f3"), new Point(12, 44, 0.0, 2.5, "#269230"), new Point(7, 41, 0.0, 2, "#1f9e2c"), new Point(5, 37, 0.0, 1, "#36b641"), new Point(4, 33, 0.0, 1, "#2e5def"), new Point(4, 29, 0.0, 1, "#d53747"), new Point(5, 25, 0.0, 1, "#eb676f"), new Point(6, 22, 0.0, 1, "#f9b125"), new Point(8, 19, 0.0, 1, "#de3646"), new Point(11, 16, 0.0, 1, "#5f8af8"), new Point(13, 14, 0.0, 1, "#efa11e"), new Point(16, 12, 0.0, 1, "#2e55e2"), new Point(19, 10, 0.0, 1, "#4167e4"), new Point(23, 8, 0.0, 1.5, "#4869e3"), new Point(28, 6, 0.0, 2, "#10a11d"), new Point(33, 5, 0.0, 2, "#cf4055"), new Point(38, 5, 0.0, 2, "#cd4359"), new Point(44, 6, 0.0, 3, "#ca273c"), new Point(51, 8, 0.0, 3, "#2650e1"), new Point(57, 11, 0.0, 3, "#4a7bf9"), new Point(63, 16, 0.0, 3.5, "#f47875"), new Point(68, 23, 0.0, 4, "#f36764"), new Point(71, 31, 0.0, 3.5, "#1d4eeb"), new Point(72, 38, 0.0, 3, "#698bf1"), new Point(72, 44, 0.0, 2.5, "#fac652"), new Point(72, 49, 0.0, 2, "#ee5257"), new Point(71, 54, 0.0, 2, "#5681f5"), new Point(70, 59, 0.0, 2, "#f8c247"), new Point(68, 64, 0.0, 2, "#4577f6"), new Point(65, 68, 0.0, 2, "#f7b326"), new Point(62, 72, 0.0, 2, "#facb5e"), new Point(59, 75, 0.0, 2, "#e02e3d"), new Point(55, 77, 0.0, 2, "#f16d6f"), new Point(53, 78, 0.0, 2.5, "#507bf2"), new Point(47, 79, 0.0, 3, "#5683f7"), new Point(40, 77, 0.0, 3.5, "#3158e2"), new Point(33, 74, 0.0, 3.5, "#f0696c"), new Point(27, 73, 0.0, 2.5, "#3769f6"), new Point(22, 73, 0.0, 2, "#6084ef"), new Point(19, 76, 0.0, 1.5, "#2a5cf4"), new Point(17, 79, 0.0, 1, "#f4716e"), new Point(25, 70, 0.0, 2, "#f8c247"), new Point(29, 67, 0.0, 2, "#ec4147"), new Point(33, 64, 0.0, 2, "#4876f1"), new Point(36, 59, 0.0, 2.5, "#2552ea"), new Point(38, 53, 0.0, 3, "#4779f7"), new Point(38, 46, 0.0, 3.5, "#4b78f1"), new Point(38, 38, 0.0, 3.5, "#4b78f1"), new Point(37, 31, 0.0, 2.5, "#4b78f1"), new Point(38, 25, 0.0, 2, "#4b78f1"), new Point(40, 20, 0.0, 2, "#4b78f1"), new Point(42, 16, 0.0, 1.5, "#4b78f1"), new Point(45, 14, 0.0, 1, "#4b78f1"), new Point(48, 12, 0.0, 1, "#4b78f1"), new Point(59, 82, 0.0, 1, "#ed9d33"), new Point(62, 80, 0.0, 1.5, "#d44d61"), new Point(66, 77, 0.0, 2, "#4f7af2"), new Point(70, 73, 0.0, 2, "#4976f3"), new Point(73, 69, 0.0, 2, "#269230"), new Point(76, 65, 0.0, 2, "#1f9e2c"), new Point(79, 60, 0.0, 2, "#36b641"), new Point(80, 55, 0.0, 1.5, "#2e5def"), new Point(81, 65, 0.0, 2.5, "#eb676f"), new Point(83, 71, 0.0, 3, "#f9b125"), new Point(84, 77, 0.0, 2.5, "#de3646"), new Point(82, 82, 0.0, 2, "#de3646"), new Point(88, 74, 0.0, 1.5, "#efa11e"), new Point(90, 70, 0.0, 1.5, "#2e55e2"), new Point(92, 66, 0.0, 1.5, "#4869e3"), new Point(93, 62, 0.0, 1.5, "#4869e3"), new Point(95, 53, 0.0, 1, "#10a11d"), new Point(95, 57, 0.0, 2, "#cf4055"), new Point(97, 62, 0.0, 2.5, "#cd4359"), new Point(100, 68, 0.0, 3, "#ca273c"), new Point(102, 74, 0.0, 2.5, "#2650e1"), new Point(101, 80, 0.0, 2, "#4a7bf9"), new Point(105, 78, 0.0, 1, "#f36764"), new Point(107, 75, 0.0, 1, "#1d4eeb"), new Point(109, 72, 0.0, 1, "#698bf1"), new Point(110, 69, 0.0, 1, "#fac652"), new Point(111, 66, 0.0, 1, "#ee5257"), new Point(112, 63, 0.0, 1, "#5681f5"), new Point(112, 60, 0.0, 1.5, "#f8c247"), new Point(112, 56, 0.0, 1.5, "#4577f6"), new Point(110, 52, 0.0, 2, "#f7b326"), new Point(107, 48, 0.0, 2.5, "#facb5e"), new Point(102, 45, 0.0, 2.5, "#e02e3d"), new Point(97, 43, 0.0, 2, "#f16d6f"), new Point(110, 83, 0.0, 1, "#507bf2"), new Point(112, 80, 0.0, 1, "#5683f7"), new Point(114, 77, 0.0, 1.5, "#3158e2"), new Point(116, 73, 0.0, 1.5, "#f0696c"), new Point(118, 69, 0.0, 1.5, "#3769f6"), new Point(119, 65, 0.0, 1.5, "#6084ef"), new Point(119, 61, 0.0, 1.5, "#2a5cf4"), new Point(119, 57, 0.0, 1.5, "#f4716e"), new Point(118, 53, 0.0, 1.5, "#f8c247"), new Point(116, 50, 0.0, 1, "#ec4147"), new Point(120, 51, 0.0, 1, "#4876f1"), new Point(123, 53, 0.0, 1, "#2552ea"), new Point(126, 55, 0.0, 1, "#4779f7"), new Point(129, 58, 0.0, 1.5, "#4b78f1"), new Point(132, 61, 0.0, 1.5, "#4b78f1"), new Point(135, 65, 0.0, 1.5, "#4b78f1"), new Point(138, 69, 0.0, 1.5, "#4b78f1"), new Point(140, 73, 0.0, 2, "#4b78f1"), new Point(142, 78, 0.0, 2, "#4b78f1"), new Point(143, 83, 0.0, 2, "#4b78f1"), new Point(121, 70, 0.0, 1, "#4b78f1"), new Point(124, 71, 0.0, 1, "#4b78f1"), new Point(127, 71, 0.0, 1, "#4b78f1"), new Point(130, 71, 0.0, 1.5, "#4b78f1"), new Point(134, 70, 0.0, 1.5, "#4b78f1"), new Point(142, 68, 0.0, 1.5, "#4b78f1"), new Point(146, 68, 0.0, 1, "#4b78f1"), new Point(149, 69, 0.0, 1, "#4b78f1")]; gLength = g.length; for (var i = 0; i < gLength; i++) { g[i].curPos.x = (canvasWidth/2 - 0) + g[i].curPos.x; g[i].curPos.y = (canvasHeight/2 - 0) + g[i].curPos.y; g[i].originalPos.x = (canvasWidth/2 - 0) + g[i].originalPos.x; g[i].originalPos.y = (canvasHeight/2 - 0) + g[i].originalPos.y; }; pointCollection = new PointCollection(); pointCollection.points = g; initEventListeners(); timeout(); }; function initEventListeners() { $(window).bind('resize', updateCanvasDimensions).bind('mousemove', onMove); canvas.get(0).ontouchmove = function(e) { e.preventDefault(); onTouchMove(e); }; canvas.get(0).ontouchstart = function(e) { e.preventDefault(); }; }; function updateCanvasDimensions() { canvas.attr({height: $(window).height(), width: $(window).width()}); canvasWidth = canvas.width(); canvasHeight = canvas.height(); draw(); }; function onMove(e) { if (pointCollection) pointCollection.mousePos.set(e.pageX, e.pageY); }; function onTouchMove(e) { if (pointCollection) pointCollection.mousePos.set(e.targetTouches[0].pageX, e.targetTouches[0].pageY); }; function timeout() { draw(); update(); setTimeout(function() { timeout() }, 30); }; function draw() { var tmpCanvas = canvas.get(0); if (tmpCanvas.getContext == null) { return; }; ctx = tmpCanvas.getContext('2d'); ctx.clearRect(0, 0, canvasWidth, canvasHeight); if (pointCollection) pointCollection.draw(); }; function update() { if (pointCollection) pointCollection.update(); }; function Vector(x, y, z) { this.x = x; this.y = y; this.z = z; this.addX = function(x) { this.x += x; }; this.addY = function(y) { this.y += y; }; this.addZ = function(z) { this.z += z; }; this.set = function(x, y, z) { this.x = x; this.y = y; this.z = z; }; }; function PointCollection() { this.mousePos = new Vector(0, 0); this.points = new Array(); this.newPoint = function(x, y, z) { var point = new Point(x, y, z); this.points.push(point); return point; }; this.update = function() { var pointsLength = this.points.length; for (var i = 0; i < pointsLength; i++) { var point = this.points[i]; if (point == null) continue; var dx = this.mousePos.x - point.curPos.x; var dy = this.mousePos.y - point.curPos.y; var dd = (dx * dx) + (dy * dy); var d = Math.sqrt(dd); if (d < 80) { point.targetPos.x = (this.mousePos.x < point.curPos.x) ? point.curPos.x - dx : point.curPos.x - dx; point.targetPos.y = (this.mousePos.y < point.curPos.y) ? point.curPos.y - dy : point.curPos.y - dy; } else { point.targetPos.x = point.originalPos.x; point.targetPos.y = point.originalPos.y; }; point.update(); }; }; this.draw = function() { var pointsLength = this.points.length; for (var i = 0; i < pointsLength; i++) { var point = this.points[i]; if (point == null) continue; point.draw(); }; }; }; function Point(x, y, z, size, colour) { this.colour = colour; this.curPos = new Vector(x, y, z); this.friction = 0.8; this.originalPos = new Vector(x, y, z); this.radius = size; this.size = size; this.springStrength = 0.1; this.targetPos = new Vector(x, y, z); this.velocity = new Vector(0.0, 0.0, 0.0); this.update = function() { var dx = this.targetPos.x - this.curPos.x; var ax = dx * this.springStrength; this.velocity.x += ax; this.velocity.x *= this.friction; this.curPos.x += this.velocity.x; var dy = this.targetPos.y - this.curPos.y; var ay = dy * this.springStrength; this.velocity.y += ay; this.velocity.y *= this.friction; this.curPos.y += this.velocity.y; var dox = this.originalPos.x - this.curPos.x; var doy = this.originalPos.y - this.curPos.y; var dd = (dox * dox) + (doy * doy); var d = Math.sqrt(dd); this.targetPos.z = d/100 + 1; var dz = this.targetPos.z - this.curPos.z; var az = dz * this.springStrength; this.velocity.z += az; this.velocity.z *= this.friction; this.curPos.z += this.velocity.z; this.radius = this.size*this.curPos.z; if (this.radius < 1) this.radius = 1; }; this.draw = function() { ctx.fillStyle = this.colour; ctx.beginPath(); ctx.arc(this.curPos.x, this.curPos.y, this.radius, 0, Math.PI*2, true); ctx.fill(); }; }; init(); }); Scratch that, its started working... oh well haha this is coder javascript : textneu = textneu.replace(/haha/,"<img src='../images/21.gif'>"); Result: <img src='../images/21.gif'> why? i want result is : <img src='../images/21.gif'> I really don't even know if I'm posting this question in the right section. I am using javascript to make a drop-down menu for a website. I really don't have any experience with javascript. The problem I'm having is that when I go to the page, the drop down menu is already dropped down. If you then hover over it, it pulls up and then hover over it again and it drops back down. It works fine after the initial glitch. Didn't know if anyone had run into this problem or if I'm just being stupid, here is the code that I'm using. Thanks in advance for any help. <a href="/mainpage.html" onMouseOver="show()" onMouseOut="hide()" ><img src="pic.png" border="0" width="90" height="24"></a></br> <div id="div1"><a href="/notherpage.html" onMouseOver="show()" onMouseOut="hide()" ><img src="pic2.png"><br><a href="/notherpage2.html" onMouseOver="show()" onMouseOut="hide()" ><img src="pic3.png"><br><a href="/lastpage.html" onMouseOver="show()" onMouseOut="hide()" ><img src="pic4.png"></div> <script type="text/javascript"> function show(){ document.getElementById("div1").style.display="block"; } function hide(){ document.getElementById("div1").style.display="none"; } </script> hi at all!!! I'm new in this forum. I have a problem and I need your experience in js! I have one page in html, but that is build only with js and css3. My problem is: The page generate in automatic one template every time u click one voice in menu, but the name of the page is always the same. When I click "Back" for visualize post page, I cant visualize because I have only one page! My question is: How can I create a function to manage "back page" if I have always only one page? Thanks u Reply With Quote 01-07-2015, 09:48 PM #2 Old Pedant View Profile View Forum Posts Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts I am afraid that you are giving us *WAY* too little information for us to even guess at an answer. Show your code. Or, better, show us a live URL that exhibits the problem. Hi, I have html variable as below: html += "<div class='quickSearchResultDivUnselected' style='width:" + divWidh + "px;max-width:" + divWidh + "px'><a href='#' OnClick='javascript:test('" + title + "')>" + title + "</a></div>"; The problem is with OnClick='javascript:test('" + title + "')>". How to make this link as <a OnClick='javascript:test("VALUE")'></a>, because now as result it looks like this and it doesn't work: <a OnClick='javascript:test('value')'></a>; So the problem is with ' and ". How to make it correctly in this long line of html variable ? Please help. |