JavaScript - Multiple Onclick="" Actions?
Hello,
I am using this code Code: <form style="display: none;" name="num1form" id="num1form" action=""> <input type="image" name="1" id="num1" value="1" src="imgl/img_first_01.png" onclick="document.forms[0].action='javascript:ChangeNum1();'"/> </form> What the above code does is change the action state, it allows me to have multiple image inputs which is great as I can define various inputs with different IDs. However, this is used for one section of the page I happen to have another <form> with basically the same code but it's using num2 values, I'm not sure why but I can only using one of these Code: onclick="document.forms[0].action='javascript:ChangeNum1();'" at a time, for one form only. Is there anyone able to help me divide this, or make these onClick actions unique so they can be used in more than 1 form? Thanks, Keenan Similar TutorialsHello im having trouble with my onclick button specifically the "doall" is there a problem with my function or the button? Console says ReferenceError: doAll is not defined but I have set the function doAll so I don't get what's wrong. <!DOCTYPE html> <HTML> <HEAD><TITLE>Choice</TITLE> <meta content="text/html;charset=utf-8" http-equiv="Content-Type"> <meta content="utf-8" http-equiv="encoding"> <SCRIPT Language="javascript"> muresources="" muresources["classical"]= "<A HREF='http://net.com/classical.file1'>Meditative classical music<A><P> <A HREF='http://net.com/classical.file2'>Provoking classical music<A>" muresources["rock"] = "<A HREF='http://net.com/rock.file1'>Popular rock music<A><P> <A HREF='http://net.com/rock.file2'>Exciting rock music<A>" muresources["ethnic"] = "<A HREF='http://net.com/mexican.file1'>Mexican music<A><P> <A HREF='http://net.com/Indian.file2'>Indian music<A>" function getLink() { temp = muresources[choice] temp2 = "<TITLE>Custom Links</TITLE><H3>" +document.m.pername.value+", here are some links for you</H3><P>"+temp } function writeIt(){ diswin = window.open(); diswin.document.open(); diswin.document.write(temp2); diswin.document.close() } function doAll(){ getLink(); writeIt() } </SCRIPT> </HEAD> <BODY > <H3> Choose the kind of music you prefer<BR> and this page will fetch links of interest to you</H3> <HR> <FORM NAME="m" > Choose a kind of music<P> <INPUT TYPE="radio" NAME="mus" VALUE="classical" OnClick="choice='classical'" >Classical <BR> <INPUT TYPE="radio" NAME="mus" VALUE="rock" OnClick="choice='rock'">Rock<BR> <INPUT TYPE="radio" NAME="mus" VALUE="ethnic" OnClick="choice='ethnic'">Ethnic<BR> <HR> Please type your name<P> <INPUT TYPE="text" NAME="pername" SIZE=25> <HR> <INPUT TYPE="button" NAME="sub" VALUE="Show me links" OnClick=doAll()> <INPUT TYPE="reset" NAME="res" > </FORM> <SCRIPT> choice = "classical" document.m.mus[0].checked = true document.m.mus[1].checked = false document.m.mus[2].checked = false </SCRIPT> </BODY> </HTML> Hello all, This is a follow up with a new question from a post I did last week. http://www.codingforums.com/showthre...098#post956098 I have an experimental website where I have music recordings. url removed When you open the site, each page uses a piano keyboard graphic to navigate between pages. If you click on a key that says "Jukebox" it will open a small window and continuously play tunes. The way the jukebox works basically is, when you click the jukebox key it calls an html file which contains the information needed to play the first song. When that song is finished it calls another html file with the information to play the second song and so on. Each html file contains an embedded Windows Media Player in it. I would like to give visitors the option to use the QuickTime player. So I can have one key in the keyboard graphic that say “Jukebox – for Windows Media Players” and then another key in the graphic that would say “Jukebox – for QuickTime players”. I would like to use both keys to call the same html file. So, in the file I would like to: 1. Determine which key was pressed in the graphic. (how to send a parameter from the keyboard graphic file indicating which key was pressed) 2. With that parameter I would then like to invoke the appropriate player. (how to receive that parameter) After the help I received last week I have my html in the keyboard graphic file set up as follows to call the first html file with the first song: Code: <AREA SHAPE="rect" HREF="#" onclick="window.open('ShirleyLee.html','jukebox', 'toolbar=0,location=0,directories=0,status=0,menubar=0,scrollbars=1 ,resizable=0,copyhistory=0,left=0,top=0,screenX=0,screenY=0,width=410 ,height=300');return false;"onMouseover="document.roll.src=F1 _Down.src"onMouseout="document.roll.src=KeysUp.src"COORDS=" 233,344,335,384" NAME="roll"ALT="F1"> I think we would be talking about the use of forms but not sure how to incorporate along with an onclick event.... The reason for this post is just to get some high level discussion ideas so that I can take that and go research how to do it. I could ask specifics later. Thanks! Dan Title basically says it. I need to get the object that was just clicked, to insert into a JavaScript function. I've tried "function('this')" and similar things, but it doesn't work. I'm sure this is REALLY easy to do, but I don't know it and I have no idea what to search for. Thanks This is a form to calculate a players age as of May 1st of each year. I need to send the result in a URL string to "http://ntsacom.homestead.com/TEST3.html?TEAM_ID=TS63464122&LOG_IN_ID=11111111&league_age=[FORM RESULT] Can anyone help. This to complete a roster app for our youth BASEBALL league. My JavaScript is very limited and the gentleman that was working on this has abandoned it after receiving pay for the project (lesson learned). I have enough knowledge to finish the project once we figure this one small piece out. Thank you for looking at this for me! Code: <p id="form"></p> <form id="get_birthday" name="get_birthday"> <select id="form_get_month" name="form_birth_month"> <option value="0">january</option> <option value="1">february</option> <option value="2">march</option> <option value="3">april</option> <option value="4">may</option> <option value="5">june</option> <option value="6">july</option> <option value="7">august</option> <option value="8">september</option> <option value="9">october</option> <option value="10">november</option> <option value="11">december</option> </select> <select id="form_birth_day" name="form_birth_day"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> <option value="11">11</option> <option value="12">12</option> <option value="13">13</option> <option value="14">14</option> <option value="15">15</option> <option value="16">16</option> <option value="17">17</option> <option value="18">18</option> <option value="19">19</option> <option value="20">20</option> <option value="21">21</option> <option value="22">22</option> <option value="23">23</option> <option value="24">24</option> <option value="25">25</option> <option value="26">26</option> <option value="27">27</option> <option value="28">28</option> <option value="29">29</option> <option value="30">30</option> <option value="31">31</option> </select> <select id="form_get_year" name="form_birth_year"> <option value="2011">2011</option> <option value="2010">2010</option> <option value="2009">2009</option> <option value="2008">2008</option> <option value="2007">2007</option> <option value="2006">2006</option> <option value="2005">2005</option> <option value="2004">2004</option> <option value="2003">2003</option> <option value="2002">2002</option> <option value="2001">2001</option> <option value="2000">2000</option> <option value="1999">1999</option> <option value="1998">1998</option> <option value="1997">1997</option> <option value="1996">1996</option> <option value="1995">1995</option> <option value="1994">1994</option> <option value="1993">1993</option> </select> <input onclick="calculate_age();" type="button" value="submit " /> </form> <-------------$ I want this to pass as a URL parameter "onclick" of the above button --------------> <p id="baseball"> <script language="JavaScript"> <!-- hide script from old browsers --> function calculate_age() { var birth_year = window.document.get_birthday.form_birth_year.value; var birth_month = window.document.get_birthday.form_birth_month.value; var birth_day = window.document.get_birthday.form_birth_day.value; if (((birth_month == 3) || (birth_month ==5) || (birth_month==8) || (birth_month==10)) && (birth_day==31)) { alert("Please check that you entered a valid date") return; } if ((birth_month == 1) && (birth_day >28)) { alert("Please check that you entered a valid date") return; } //Create the date object for todays date var now = new Date(); //Extract the current year, var the_year = now.getFullYear(); // Calculate elegibility for sport var league_text = "" var paragraph = document.getElementById("baseball"); //Clear the contents of paragraph if the submit button has been clicked more than once . //the Firefox way if (paragraph.innerText = ""); else //The MSIE way if (paragraph.textContent = ""); var league_age = (the_year - birth_year) if (birth_month > 3) league_age --; if (league_age < 5 ) { league_text = "1" } if ((league_age > 5) && (league_age <12)) { league_text = "1" } else if ((league_age >12) && (league_age <16)) { league_text = "1" } else if ((league_age >15) && (league_age <19)) { league_text = "1" } else if (league_age > 18) { league_text = "1" } var output_text = document.createTextNode(league_text); var output_age = document.createTextNode(league_age); paragraph.appendChild(output_age); paragraph.appendChild(output_text); S.redirectTo("search-results?baseball=value1") } </script> When i press button it display output on the next page .How do i get output on the same page. Please help me. Here is my code <input type = "textbox" id = "box1"> <script type ="text/javascript"> function show() { var abc = document.getElementById("box1").value; document.write(abc); } </script> <input type = "button" value ="display on the same page" onclick ="show()"> Code: <input name="radiobutton" type="radio" value="radiobutton" onBlur="aa.style.display='none'" onClick="aa.style.display='inline'"> <input name="radiobutton" type="radio" value="radiobutton" onBlur="ab.style.display='none'" onClick="ab.style.display='inline'"> <input name="radiobutton" type="radio" value="radiobutton" onBlur="ac.style.display='none'" onClick="ac.style.display='inline'"> when i select raido button it will be inline (for this i use "onClick" JS event) and which event will i use inverse of "onClick" event ? Hi everyone, Been struggling with this one all day - writing a vBulletin mod and am having trouble submitting a form. Yes, yes, I know, you submit forms with HTML, but a form instance is created before my form instance - something like: <form name="main_form" etc> <form name="my_form" etc> <input button> <input submit> </form> So I said, well, why not just do this: Code: <input type="submit" value="Order" onClick="document.my_form.submit()" /></form> Yet apparently, no dice. Any help here guys? Hi Guys, I am very new to java and current I am creating a button to open a window as a pop up. This window needs to load a asp page that I have already built. So on the parent page I have created a button. INPUT onclick=Somejava; type=button value=button I am not sure how to set the onclick to run some scripts and then set the href before doing a window.open The scripts it needs to run are as follows: Code: var urno=window.parent.parent.frames['patframe'].document.getElementById("BANNERRegistrationNo"); href="\\\\server\\folder$\\"+urno.value+"\\"; window.open If anyone could give me a hint of where to start... Do I put this in a separate script? If so how do I call it... Or is there an easier option? hi there, im totally noob at this. my page has the following code: Code: <td><ul id="seatplan"> <li class="seat_01 A"><a href="javascript:seat()" id="01A">01A</a></li> <li class="seat_01 B"><a href="javascript:seat()" id="01B">01B</a></li> <li class="seat_01 C"><a href="javascript:seat()" id="01C">01C</a></li> <form name="popupForm">You have Selected: <input type="text" id="seatid"></form> as you can see, i need a javascript code that if the above links are clicked, its sends the link "id" to the <textbox id="seatid"> this is what i have so far Code: <script type="text/javascript"> function seat() { document.getElementById('id').value = document.getElementById('seatid').value;}</script> now i know i havent assigned any variable here or onclick function..but seriously need help in this! thanks to any replies and help!! Greetings! Let me start by first stating that I've never really coded Javascript before in my life. Having said that, I'm not an idiot and I can generally pick up on things relatively quickly . So, now to the point. I'm currently creating a site in which I've incorporated Protoswitcher (http://cssrevolt.com/upload/files/pr...her/index.html). From what I can tell, it's a relatively simple script. Now the catch is that I wanted to have more than one switcher on my site. And this is where I get stuck. What I did initially was to basically copy the JS file (protoswitcher.js) and rename it something else (userbar.js, for example). I then changed the various places in the script which were previously for "var ProtoSwitcher" to "var UserBar", etc. I managed to get it all to work fine. Both the boxes show up, and they both work as they should (clicking on them changes select bits of CSS). Now the problem I'm having is that the original protoswitcher uses cookies to remember a persons preferences. I cannot for the life of me figure out how to get the "new" protoswitcher (userbar.js) to work with cookies as well. Any help would be much appreciated, and I'm sure I can give you a few dollars for your time . Please let me know if I haven't made sense. TLDL: I want to be able to use several protoswitchers with working cookies. I don't know how. I found this code sample that when a user clicks somewhere on the image, then an "X" will appear. I would like to have the "X"s remain visible even when the user clicks on a different area of the image. As you can imagine, a user clicks clicks clicks then there are "X"s everywhere. How do I do this? Do I need to create more "div" tags with the mouse click locations? <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Mouse position</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script language="JavaScript" type="text/JavaScript"> var posx; var posy; function getMouse(e){ posx=0;posy=0; var ev=(!e)?window.event:e;//IE:Moz if (ev.pageX){//Moz posx=ev.pageX+window.pageXOffset; posy=ev.pageY+window.pageYOffset; } else if(ev.clientX){//IE posx=ev.clientX+document.body.scrollLeft; posy=ev.clientY+document.body.scrollTop; } else{return false}//old browsers } function showP(){ document.getElementById("div2").style.visibility="visible"; document.getElementById("div2").style.top =(posy-10)+'px'; document.getElementById("div2").style.left=(posx-6)+'px'; } </script> <style type="text/css"> .div1 {position:absolute;top:100px;left:100px;visibility:visible;z-index:5} .div2 {position:absolute;top:0px;left:0px;visibility:hidden;z-index:1;color:black;} .div3 {position:absolute;visibility:hidden;z-index:10;font-family:monospace;font-size:20px;font-weight:900;color:black;} </style> </head> <body onmousemove="getMouse(event)"> <div id="div1" class="div1"> <img src="./yourImage.jpg" onclick="showP()"> </div> <div id="div2" class="div3"> X </div> </body> </html> This script works great for populating predefined lists of data into a textarea as selected by the user using a radio button: Code: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Populate Textarea Based on Radio Button Selection</title> <script> text = new Array() text[0] = Array('Hotel', 'Motel'); text[1] = Array('Couch', 'Bed', 'Chair'); function populate(r,f){ t=-1; for(var i=0;i<f.elements[r].length;i++){ if (f.elements[r][i].checked){ var t=i; } } if(t>-1){ f.thefirsttextarea.value= text[t].toString().replace(/,/gi,"\n"); } } </script> </head> <body> <form name="frm"> <input type="radio" name="test" value="0" onClick="populate(this.name,this.form)"> <input type="radio" name="test" value="1" onClick="populate(this.name,this.form)"> <textarea name="thefirsttextarea"></textarea> <input type="submit" value="submit" /> </form> </body> </html> However, I've coded all night only to come across an issue. I have an inline page style which calls/includes multiple pages. Two of these pages require this feature. It seems one is canceling out the other. Here's an example: 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>Populate Multiple Textareas Based on Radio Button Selection</title> <script> text = new Array() text[0] = Array('Hotel', 'Motel'); text[1] = Array('Couch', 'Bed', 'Chair'); function populate(r,f){ t=-1; for(var i=0;i<f.elements[r].length;i++){ if (f.elements[r][i].checked){ var t=i; } } if(t>-1){ f.thefirsttextarea.value= text[t].toString().replace(/,/gi,"\n"); } } </script> <script> textt = new Array() <!--default--> text[0] = Array('Ham', 'Turkey', 'Chicken'); <!--all--> text[1] = Array('Beer', 'Soda', 'Water'); <!--johnny havana--> text[2] = Array('Milk', 'Cheese', 'Butter'); function populate(r,f){ t=-1; for(var i=0;i<f.elements[r].length;i++){ if (f.elements[r][i].checked){ var t=i; } } if(t>-1){ f.SECONDFORM.value= text[t].toString().replace(/,/gi,"\n"); } } </script> </head> <body> <form name="form"> <input type="radio" name="test" value="0" onClick="populate(this.name,this.form)"> <input type="radio" name="test" value="1" onClick="populate(this.name,this.form)"> <textarea name="thefirsttextarea"></textarea> <input type="submit" value="submit" /> </form> <form name="anotherform"> <input type="radio" name="anothertest" value="0" onClick="populate(this.name,this.form)"> <input type="radio" name="anothertest" value="1" onClick="populate(this.name,this.form)"> <textarea name="SECONDFORM"></textarea> <input type="submit" value="submit" /> </form> </body> </html> With the above code only the second set of radio buttons work. What I need help with is a way to have two independent sets of arrays the correspond correctly with the textareas - One set that populates textarea 1 and the other that populates textarea 2. I am trying to manipulate a an image gallery that functions well. Now, I have the ability to pull information from a user's preference pannel and need to place it in the an href="" // And other information in each of the "src" | "url" | "alt". Any ideas would be truly helpful. This is what I am working with at the moment and it doesn't work (obviously because it is adding code inside a span). Here is what I am starting from: [CODE] var title01Span = document.getElementById('title01Span'), //Finds the id that I want prefs = new gadgets.Prefs(), // Pulls from the user's preferences yourtitle01 = prefs.getString("title01"); // Pulls the correct string from those preferences title01Span.innerHTML = yourtitle01; // replaces the span.id with that text but I need to be able to do this in the src / href / url / etc. [CODE] Thank you so much! I seriously could use as much help as possible! Hello, I am trying to do an image swap when hovering over "TEXT" links. For instance, I would like to first have a "mainpic" in a div that would be replaced by either image 1,2 or 3 (depending on if you are hovering over"text link 1,2 or 3). I would use normal rollover "image" swaps, but would prefer to have the "trigger" to be "text" (for SEO reasons). I am just getting familiar with javascript, but do not even know where to begin! I have read multiple forum entries throught google, but could not find any where I could have "multiple" text links. I would so much appreciate it if anyone could please point me in a direction. Sincerely, Buffmin Hello, I'm using "Cut & Paste Multiple Dynamic Combo Boxes" script. I want to configure it, so at first only 1st combo box is visible and the rest are hidden and only populate based on the selections. Also, when the last parameter (from the 5th combo box) was selected, I need to show the table with the search results based on the all selected parameters. Here is what I have so far: Code: <script language="JavaScript" type="text/javascript"> <!-- /* *** Multiple dynamic combo boxes *** by Mirko Elviro, 9 Mar 2005 *** Script featured and available on JavaScript Kit (http://www.javascriptkit.com) *** ***Please do not remove this comment */ // This script supports an unlimited number of linked combo boxed // Their id must be "combo_0", "combo_1", "combo_2" etc. // Here you have to put the data that will fill the combo boxes // ie. data_2_1 will be the first option in the second combo box // when the first combo box has the second option selected // first combo box data_1 = new Option("1", "$"); // second combo box data_1_1 = new Option("11", "-"); data_1_2 = new Option("12", "-"); data_1_3 = new Option("13", "-"); // third combo box data_1_1_1 = new Option("111", "*"); data_1_2_1 = new Option("121", "*"); data_1_3_1 = new Option("131", "*"); // fourth combo box data_1_1_1_1 = new Option("1111","%") data_1_1_1_2 = new Option("1112","%") data_1_2_1_1 = new Option("1211","%") data_1_3_1_1 = new Option("1311","%") data_1_3_1_2 = new Option("1312","%") data_1_3_1_3 = new Option("1313","%") // fifth combo box data_1_1_1_1_1 = new Option("11111","%") data_1_1_1_1_2 = new Option("11112","%") data_1_1_1_2_1 = new Option("11121","%") data_1_1_1_2_2 = new Option("11122","%") data_1_1_1_2_3 = new Option("11123","%") data_1_1_1_2_4 = new Option("11124","%") data_1_2_1_1_1 = new Option("12111","%") data_1_3_1_1_1 = new Option("13111","%") data_1_3_1_2_1 = new Option("13121","%") data_1_3_1_2_2 = new Option("13122","%") data_1_3_1_2_3 = new Option("13123","%") data_1_3_1_2_4 = new Option("13124","%") data_1_3_1_2_5 = new Option("13125","%") data_1_3_1_3_1 = new Option("13131","%") data_1_3_1_3_2 = new Option("13132","%") // other parameters displaywhenempty="" valuewhenempty=-1 displaywhennotempty="-select-" valuewhennotempty=0 function change(currentbox) { numb = currentbox.id.split("_"); currentbox = numb[1]; i=parseInt(currentbox)+1 // I empty all combo boxes following the current one while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) && (document.getElementById("combo_"+i)!=null)) { son = document.getElementById("combo_"+i); // I empty all options except the first one (it isn't allowed) for (m=son.options.length-1;m>0;m--) son.options[m]=null; // I reset the first option son.options[0]=new Option(displaywhenempty,valuewhenempty) i=i+1 } // now I create the string with the "base" name ("stringa"), ie. "data_1_0" // to which I'll add _0,_1,_2,_3 etc to obtain the name of the combo box to fill stringa='data' i=0 while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) && (document.getElementById("combo_"+i)!=null)) { eval("stringa=stringa+'_'+document.getElementById(\"combo_"+i+"\").selectedIndex") if (i==currentbox) break; i=i+1 } // filling the "son" combo (if exists) following=parseInt(currentbox)+1 if ((eval("typeof(document.getElementById(\"combo_"+following+"\"))!='undefined'")) && (document.getElementById("combo_"+following)!=null)) { son = document.getElementById("combo_"+following); stringa=stringa+"_" i=0 while ((eval("typeof("+stringa+i+")!='undefined'")) || (i==0)) { // if there are no options, I empty the first option of the "son" combo // otherwise I put "-select-" in it if ((i==0) && eval("typeof("+stringa+"0)=='undefined'")) if (eval("typeof("+stringa+"1)=='undefined'")) eval("son.options[0]=new Option(displaywhenempty,valuewhenempty)") else eval("son.options[0]=new Option(displaywhennotempty,valuewhennotempty)") else eval("son.options["+i+"]=new Option("+stringa+i+".text,"+stringa+i+".value)") i=i+1 } //son.focus() i=1 combostatus='' cstatus=stringa.split("_") while (cstatus[i]!=null) { combostatus=combostatus+cstatus[i] i=i+1 } return combostatus; } } //--> </script> <form> <table style="width: 49%"> <tr> <td style="width: 200px">Option 1:</td> <td style="width: 213px"> <select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;"> <option value="none">-select-</option> <option value="1">1</option> </select></td> </tr> <tr> <td style="width: 200px">Option 2:</td> <td style="width: 213px"> <select name="combo1" id="combo_1" onChange="change(this)" style="width:200px;"> <option value=""> </option> </select></td> </tr> <tr> <td style="width: 200px">Option 3:</td> <td style="width: 213px"> <select name="combo2" id="combo_2" onChange="change(this);" style="width:200px;"> <option value=""> </option> </select></td> </tr> <tr> <td style="width: 200px">Option 4:</td> <td style="width: 213px"> <select name="combo3" id="combo_3" onChange="change(this);" style="width:200px;"> <option value=""> </option> </select></td> </tr> <tr> <td style="width: 200px">Option 5:</td> <td style="width: 213px"> <select name="combo4" id="combo_4" onChange="change(this);" style="width:200px;"> <option value=""> </option> </select></td> </tr> </table></form> This script is used in my html page and I don't have a database to choose from. So, I wonder if it's possible to make all these modifications with only html and JavaScript. Any help will be appreciated. Thanks in advance. hi all, im on a really tight deadline with this and have been strugglign all day. (i know nothing about JS!) here's my code: Code: <script language="Javascript"> var allHTMLTags = new Array(); function fadeIn(SRC) { var allHTMLTags=document.getElementsByTagName("*"); for (i=0; i<allHTMLTags.length; i++) { if (allHTMLTags[i].className.indexOf(",") !== -1) { allHTMLTags[i].style.opacity='1'; } } } function fadeOut(SRC) { var allHTMLTags=document.getElementsByTagName("*"); for (i=0; i<allHTMLTags.length; i++) { if (allHTMLTags[i].className.indexOf(",") !== -1) { allHTMLTags[i].style.opacity='0.5'; } } } </script> <li onMouseover="fadeIn(foo)" onmouseout="fadeOut(foo)"> <div class="foo" style="opacity: 0.5;"> test 1 </div> <div class="foo bar" style="opacity: 0.5;"> test 2 </div> The idea of the above, is that when you hover over the <li> all of the divs with a class CONTAINING "foo" are given an opacity of 1. the problem is, the above script only seems to work with numbers?! E.G - class="1 2" works fine. problem is i need to use words not numbers for the classes. clearly my code is rubbish, i've bodged it together from bits and pieces of different forums. PLEASE can somebody help? the end result needs to go through and find all divs with a class CONTAINING the term specified in the <li> then give them an opacity of 1, then on mouseOut return the opacity to 0.5 im sure this is newb stuff, but thanks in advance for any help you can give! Hello, I run a online gaming website, and I'm having problems with certain websites iframing our games. Actually I'm ok with iframing, as long as they include the banner ad located just beneath our games. But often times unscrupulous webmasters will iframe only the game, preventing us from generating any revenue from the banner ad (and costing us additional bandwidth charges). I'm hoping to find a way to detect the dimensions of the iframe, so that I may dynamically resize the game, in order to include the banner ad within the iframe. Does anybody know how to extract the "height" and "width" attribute values from an <iframe> tag sitting on a different site? Regards, Steve Hi all, I'm having a bit of a problem.. I need to disable the submit button on body onload, and i need to re-enable it when "i agree" is checked. the problem is, it wont do this.. it literally stays disabled, even after check mark.. code: Code: <html> <head><title>Metal Detecting</title></head> <body onload="disable()" oncontextmenu="return false;"> <script> function disable(){ if(document.forms.test.agree.checked == false){ document.forms.test.s1.disabled = true; } } function enable(){ if(document.forms.test.agree.checked == true){ document.forms.test.s1.disabled = false; } } function checkCheckBox(f) { if (f.agree.checked == false) { alert('You MUST agree to the terms by checking the box above.'); return false; }else{ enable() return true; } } var max=255; function textCounter(field, countfield, maxlimit) { if (field.value.length > maxlimit){ // if too long...trim it! field.value = field.value.substring(0, maxlimit); // otherwise, update 'characters left' counter }else{ countfield.value = maxlimit - field.value.length; } } function submitonce(theform){ //if IE 4+ or NS 6+ if (document.all||document.getElementById){ //screen thru every element in the form, and hunt down "submit" and "reset" for (i=0;i<theform.length;i++){ var tempobj=theform.elements[i] if(tempobj.type.toLowerCase()=="submit"||tempobj.type.toLowerCase()=="reset") //disable em tempobj.disabled=true } } } function checkdata(which) { var pass=true; var t1 = document.forms.test; for (i=0;i<which.length;i++) { var tempobj=which.elements[i]; if (tempobj.name.substring(0,8)=="required") { if (((tempobj.type=="text"||tempobj.type=="textarea")&& tempobj.value=='')||(tempobj.type.toString().charAt(0)=="s"&& tempobj.selectedIndex==0)) { pass=false; break; } } } if (!pass) { shortFieldName=tempobj.name.substring(8,30).toUpperCase(); alert("The "+shortFieldName+" field is a required field."); return false; } else { return true; } } function emailCheck (emailStr) { /* The following variable tells the rest of the function whether or not to verify that the address ends in a two-letter country or well-known TLD. 1 means check it, 0 means don't. */ var checkTLD=1; /* The following is the list of known TLDs that an e-mail address must end with. */ var knownDomsPat=/^(com|net|org|edu|int|mil|gov|arpa|biz|aero|name|coop|info|pro|museum)$/; /* The following pattern is used to check if the entered e-mail address fits the user@domain format. It also is used to separate the username from the domain. */ var emailPat=/^(.+)@(.+)$/; /* The following string represents the pattern for matching all special characters. We don't want to allow special characters in the address. These characters include ( ) < > @ , ; : \ " . [ ] */ var specialChars="\\(\\)><@,;:\\\\\\\"\\.\\[\\]"; /* The following string represents the range of characters allowed in a username or domainname. It really states which chars aren't allowed.*/ var validChars="\[^\\s" + specialChars + "\]"; /* The following pattern applies if the "user" is a quoted string (in which case, there are no rules about which characters are allowed and which aren't; anything goes). E.g. "jiminy cricket"@disney.com is a legal e-mail address. */ var quotedUser="(\"[^\"]*\")"; /* The following pattern applies for domains that are IP addresses, rather than symbolic names. E.g. joe@[123.124.233.4] is a legal e-mail address. NOTE: The square brackets are required. */ var ipDomainPat=/^\[(\d{1,3})\.(\d{1,3})\.(\d{1,3})\.(\d{1,3})\]$/; /* The following string represents an atom (basically a series of non-special characters.) */ var atom=validChars + '+'; /* The following string represents one word in the typical username. For example, in john.doe@somewhere.com, john and doe are words. Basically, a word is either an atom or quoted string. */ var word="(" + atom + "|" + quotedUser + ")"; // The following pattern describes the structure of the user var userPat=new RegExp("^" + word + "(\\." + word + ")*$"); /* The following pattern describes the structure of a normal symbolic domain, as opposed to ipDomainPat, shown above. */ var domainPat=new RegExp("^" + atom + "(\\." + atom +")*$"); /* Finally, let's start trying to figure out if the supplied address is valid. */ /* Begin with the coarse pattern to simply break up user@domain into different pieces that are easy to analyze. */ var matchArray=emailStr.match(emailPat); if (matchArray==null) { /* Too many/few @'s or something; basically, this address doesn't even fit the general mould of a valid e-mail address. */ alert("Email address seems incorrect (don't forget to add an @ and a . to your email address!)"); return false; } var user=matchArray[1]; var domain=matchArray[2]; // Start by checking that only basic ASCII characters are in the strings (0-127). for (i=0; i<user.length; i++) { if (user.charCodeAt(i)>127) { alert("Ths username contains invalid characters."); return false; } } for (i=0; i<domain.length; i++) { if (domain.charCodeAt(i)>127) { alert("Ths domain name contains invalid characters."); return false; } } // See if "user" is valid if (user.match(userPat)==null) { // user is not valid alert("The username doesn't seem to be valid."); return false; } /* if the e-mail address is at an IP address (as opposed to a symbolic host name) make sure the IP address is valid. */ var IPArray=domain.match(ipDomainPat); if (IPArray!=null) { // this is an IP address for (var i=1;i<=4;i++) { if (IPArray[i]>255) { alert("Destination IP address is invalid!"); return false; } } return true; } // Domain is symbolic name. Check if it's valid. var atomPat=new RegExp("^" + atom + "$"); var domArr=domain.split("."); var len=domArr.length; for (i=0;i<len;i++) { if (domArr[i].search(atomPat)==-1) { alert("The domain name does not seem to be valid."); return false; } } /* domain name seems valid, but now make sure that it ends in a known top-level domain (like com, edu, gov) or a two-letter word, representing country (uk, nl), and that there's a hostname preceding the domain or country. */ if (checkTLD && domArr[domArr.length-1].length!=2 && domArr[domArr.length-1].search(knownDomsPat)==-1) { alert("The address must end in a well-known domain or two letter " + "country."); return false; } // Make sure there's a host name preceding the domain. if (len<2) { alert("This address is missing a hostname!"); return false; } // If we've gotten this far, everything's valid! return true; } </script> Please contact us!<br><br> *Please note you can submit the form ONLY once. Any double form submissions will be deleted.<br> <form name="test" id="test" method="POST" onsubmit="return checkdata(this), emailCheck(this.email.value), checkCheckBox(this)" action="send.php"> <div id = "div01" style="width: 100; height: 25;"> Firstname: <input name="requiredfirstname" id="firstname" type="text" /> Lastname: <input name="requiredlastname" id="lastname" type="text" /> Email: <input name="requiredemail" id="email" type="text" /><br /><br /> </div> <H4>Your statement: </H4> <textarea onKeyDown="textCounter(this.form.statement,this.form.counter,max);" onKeyUp="textCounter(this.form.statement,this.form.counter,max);" name="requiredstatement" id="statement" rows="15" cols="40"></textarea><br /> Characters left: <input readonly="readonly" value="255" size=3 maxlength=3 type="text" name="counter" id="counter"><br/><br /> <textarea name="license" cols="40" rows="15" id="license">Blah!</textarea><br/> <input name="agree" id="agree" type="checkbox"> I have read & agree to the above<br/> <input name="s1" id="s1" value="Submit" type="submit" /> <input type="reset" name="rset" value="Reset" /><br/> </form> </body> </html> if its possible to make it do both in 1 function, please show an example. if you have to use 2 functions, then also show me an example. ANY help is GREATLY appreciated! Hello, recently I have been to many government websites where I have noticed that the programmer has used window.open() method in JavaScript to link to different pages instead of using <a> tags! I was just getting curious to know whether it is normal or has it been used due to security concerns(if any, I don't know)? Any comments? i am trying to make a comment editor with iframe, and want to trigger the change of content inside iframe, the following code cant work. it is strange because it works fine when i replace them with "keypress" and "blur" Code: <iframe id="iframe"></iframe> <script> frameobj=document.getElementById('iframe').contentWindow; // IE frameobj.attachEvent('onpropertychange', function(){alert();} ); //FireFox frameobj.addEventListener('input', function(){alert();} , false); </script> |