JavaScript - How To Create The Function
hello friends..
I am working on the html code in which i using the List Control The Requirement that among the List element in which I choose the locations there is option in which whenever i select the option None From The List then it should Disply the empty textbox So how the function is declared Please tell me... Similar TutorialsCode: <html> <head> <title>TESTING</title> <script type="text/javascript"> <!-- document.write("<input type='submit' value='submit' onclick='func()'>"); function func() { document.write("<input type='submit' value='New Button' onclick='func()'>"); window.alert("THIS"); } --> </script> </head> <body> <!--input type="button" value="Read" onclick="ReadFiles()"--> </body> </html> This is a very basic version of what I am trying to do. I have a dynamic list which is set in a table. When clicked, a function is run to set up a new list.. The reason I explain that, is that I need to keep it dynamic. Now for the problem: When I run this page, I have the button made right away, then when clicked it creates the new button. The new button should also run the function to create the new button again, but when I click it, I only receive "error on page". I don't know if there is a better way to go about this, but as for this route, I am stuck. Any help is greatly appreciated! -Shane Hi guys, new to the forum and a big noob to JavaScript! I've created a function that would hide and show paragraphs from a drop down list, that paragraph contains a link that will show a div containing a map of google. But when I switch to another State on the drop down list I'd like to have the original first paragraph that showed up to disappear. So far, I can only get the <div> that contains the map to disappear. Can someone send me an example of a function that would hide the paragraph and the <div>? Again, I'm a noob baby talk please. Here's the code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> <title>Untitled Page</title> <script type="text/javascript"><!-- var lastDiv = ""; function showDiv(divName) { // hide last div if (lastDiv) { document.getElementById(lastDiv).className = "hiddenDiv"; } //if value of the box is not nothing and an object with that name exists, then change the class if (divName && document.getElementById(divName)) { document.getElementById(divName).className = "visibleDiv"; lastDiv = divName; } } function showMap(divName) { //if value of the box is not nothing and an object with that name exists, then change the class if (divName && document.getElementById(divName)) { document.getElementById(divName).className = "visibleDiv"; lastDiv = divName; } } //--> </script> <style type="text/css" media="screen"><!-- .hiddenDiv { display: none; } .visibleDiv { display: block; border: 1px grey solid; } #ex1 { position:absolute; width:425px; height:350px; right:40px; top:100px; } #ex2 { position:absolute; width:425px; height:350px; right:40px; top:100px; } --></style> </head> <body bgcolor="#ffffff"> <form id="FormName" action="blah.php" method="get" name="FormName"> <select name="selectName" size="1" onChange="showDiv(this.value);"> <option value="">Choose State</option> <option value="1">Alabama</option> <option value="2">Alaska</option> <option value="3">Arizona</option> <option value="4">Arkansas</option> <option value="5">California</option> <option value="6">Colorado</option> <option value="7">Connecticut</option> <option value="8">Delaware</option> <option value="9">Florida</option> <option value="10">Georgia</option> <option value="11">Hawaii</option> <option value="12">Idaho</option> <option value="13">Indiana</option> <option value="14">Iowa</option> <option value="15">Kansas</option> <option value="16">Kentucky</option> <option value="17">Louisiana</option> <option value="18">Maine</option> <option value="19">Maryland</option> <option value="20">Massachusetts</option> <option value="21">Michigan</option> </select> </form> <p id="1" class="hiddenDiv"><a href="#" onclick="showMap('ex1')">8160 du Creusot<br />St-Leonard, QC</a></p> <p id="2" class="hiddenDiv"><a href="#" onclick="showMap('ex2')">9510 ave. Radisson<br />Brossard, QC</a></p> <p id="3" class="hiddenDiv">This is paragraph 3.</p> <p id="4" class="hiddenDiv"><a href="#l" onclick="showMap('ex1')">Home</a><br /> <a href="us/home.html">Home</a><br /></p> <div id="ex1" class="hiddenDiv"> <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=8160+Rue+du+Creusot+Saint-L%C3%A9onard,+QC+H1P+1T5,+Canada&aq=&sll=45.597664,-73.581356&sspn=0.001501,0.004828&ie=UTF8&hq=&hnear=8160+Rue+du+Creusot,+Saint-L%C3%A9onard,+Communaut%C3%A9-Urbaine-de-Montr%C3%A9al,+Qu%C3%A9bec+H1P+1T5,+Canada&ll=45.597373,-73.581641&spn=0.001501,0.004828&z=14&output=embed"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=8160+Rue+du+Creusot+Saint-L%C3%A9onard,+QC+H1P+1T5,+Canada&aq=&sll=45.597664,-73.581356&sspn=0.001501,0.004828&ie=UTF8&hq=&hnear=8160+Rue+du+Creusot,+Saint-L%C3%A9onard,+Communaut%C3%A9-Urbaine-de-Montr%C3%A9al,+Qu%C3%A9bec+H1P+1T5,+Canada&ll=45.597373,-73.581641&spn=0.001501,0.004828&z=14" style="color:#0000FF;text-align:left">View Larger Map</a></small> </div><!-- end ex1 --> <div id="ex2" class="hiddenDiv"> <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q=9510+Avenue+Radisson,+Brossard,+QC+J4X+2V3,+Can ada&aq=0&sll=45.597405,-73.581313&sspn=0.001501,0.004828&ie=UTF8&hq=&hnear=9510+Avenue+Radisson,+Brossard,+C hamplain,+Qu%C3%A9bec+J4X+3A1,+Canada&ll=45.43337,-73.487572&spn=0.001506,0.004828&z=14&output=embed"></iframe><br /><small><a href="http://maps.google.com/maps?f=q&source=embed&hl=en&geocode=&q=9510+Avenue+Radisson,+Brossard,+QC+J4X+2V3,+C anada&aq=0&sll=45.597405,-73.581313&sspn=0.001501,0.004828&ie=UTF8&hq=&hnear=9510+Avenue+Radisson,+Brossard,+C hamplain,+Qu%C3%A9bec+J4X+3A1,+Canada&ll=45.43337,-73.487572&spn=0.001506,0.004828&z=14" style="color:#0000FF;text-align:left">View Larger Map</a></small> </div><!-- end ex2 --> </body> </html> I'm having trouble duplicating my working voting function code. It only works with one copy, but once I copy and paste it into a second copy it seizes it to work no matter what I do even if I change the name, value, class or id names. If I press the vote up or vote down button it affects only one of the copies Here is an incomplete fiddle that need some troubleshooting: Edit fiddle - JSFiddle Help me figure out how to get an independent second copy of the following code: Javascript: Code: $(document).ready(function() { $('.vote').click(function() { $('img', this).attr('src', function(i, oldSrc) { return oldSrc == 'voteup.png' ? 'votedown.png' : 'voteup.png'; }); $('.voteswitch').toggle(400); return false; }); }); function showMessage(which) { if (which == 1) { document.getElementById("voteup").style.display = "block"; document.getElementById("votedown").style.display = "none"; document.getElementById("notrated").style.display = "none"; } else { document.getElementById("voteup").style.display = "none"; document.getElementById("votedown").style.display = "block"; document.getElementById("notrated").style.display = "none"; } } HTML: Code: <!-- Voting--> <div class="votesystem"> <input name="vote" class="voteup" type="radio" value="Yes" onclick = "showMessage(1)"/> <label class="voteup-label" for="voteup"></label> <!--Vote Number--> <div class="votenumber"> <div id="voteup" style="display:none">100<span class="percentagesign">%</span></div> <div id="notrated">Not Rated</div> <div id="votedown" style="display:none">0<span class="percentagesign">%</span></div> </div><!--End Votenumber--> <input name="vote" class="votedown" type="radio" value="No" onclick = "showMessage(2)"/> <label for="votedown"></label> <p class="votecounter">0 Votes</p> </div><!--End Voting--> CSS: Code: .votesystem { display:inline-block; list-style-type: none; padding-top:3px; border-left:#000 1px solid; border-bottom:#000 1px solid;width:85px; text-align:center; height:107px; float:right; position:relative; } input.voteup a { background-image: url('http://janosgyerik.github.io/jquery-upvote/lib/images/sprites-programmers.png?v=1'); background-repeat: no-repeat; overflow: hidden; display: block; margin: 0 auto; width: 41px; height: 25px; } input.voteup[type="radio"]{ opacity: 0; right:33px; margin-top:7px; position:absolute; cursor:pointer; } input.voteup[type="radio"]+label{ background:: url('http://janosgyerik.github.io/jquery-upvote/lib/images/sprites-programmers.png?v=1'); background-position: 0px -230px; padding-left:40px; padding-bottom:10px; } input.voteup[type="radio"]:checked+label{ background: url('http://janosgyerik.github.io/jquery-upvote/lib/images/sprites-programmers.png?v=1'); background-position: 0px -230px; } input.voteup[type="radio"]:hover+label{ background: url('http://janosgyerik.github.io/jquery-upvote/lib/images/sprites-programmers.png?v=1'); padding-left:40px; padding-bottom:10px; background-position: 0px -230px; } input.votedown[type="radio"]{ opacity: 0; right:33px; margin-top:-5px; position:absolute; cursor:pointer; } input.votedown[type="radio"]+label{ background: url('http://janosgyerik.github.io/jquery-upvote/lib/images/sprites-programmers.png?v=1'); background-position: 0px -300px; padding-left:40px; padding-top:9px; } input.votedown[type="radio"]:checked+label{ background: url('http://janosgyerik.github.io/jquery-upvote/lib/images/sprites-programmers.png?v=1'); background-position: 0px -330px; padding-left:40px; padding-top:9px; } input.votedown[type="radio"]:hover+label{ background: url('http://janosgyerik.github.io/jquery-upvote/lib/images/sprites-programmers.png?v=1'); padding-left:40px; padding-top:9px; background-position: 0px -330px; } .votenumber { color:#666; font-size:22px; margin:0; font-weight:bold; font-family:Arial, Helvetica, sans-serif; line-height:42px; padding-top:5px; padding-bottom:2px; } #notrated { font-size:15px; color:#999; } #voteup { margin-left:-2px;} #votedown { margin-left:-2px;} .percentagesign { font-size:15px; margin-top:-3px; position:absolute; } .contentarea { width:100%; height:100%; background-color:#CF3; display:block; } .votecounter { position:relative; top:8px; color:#000; font-family:Tahoma, Geneva, sans-serif; font-size:12px; } Hi, I am a beginner in programming however I am close to completing this task for my uni course and I know what method is needed "toLowerCase()" yet I am not sure on where it needs to be placed. If i paste in the question and then the coding I have done so far any helped would be greatly appreciated. Thanks in advance to everyone who replies QUESTION: function findAnyU(s) - to discover if string s appears in any of the URLs in the array pages. Gives an alert of s together with 'found' or 'not found' as for find1C. [Note that the search should be case insensitive so that 'lboro' and 'Lboro' and 'LBORO' would all be found in 'www.lboro.ac.uk' - all remaining functions should also be case insensitive in this way] Example call: findAnyU("Lboro") Example result: "Lboro" found MY CODING... var pages = [ "[www.lboro.ac.uk] Loughborough University offers degree programmes and world class research.", "[www.XXXX.ac.uk] Loughborough University offers degree programmes and world class research. " ]; function findAnyU (s){ for(i=1;i<pages.length;i++) { var a = '"'+s+'"'; var b = pages[i].indexOf('['); var l = pages[i].indexOf(']'); var t = pages[i].substr(b+1, l); var c = t.indexOf(s); } if (c>=0) a+= ' found' else a+= ' not found' return (a) } alert(findAnyU("Lboro")); *********************************** Thanks Again Everyone X Hi, I am facing a problem in passing replace() function as an argument in user defined java function, can any one help me how to resolve it? intention is to pass a file path to my user defined function, but before passing the path i want to replace the character '\' to '\\' I am posting my javascript function he <a href="#" onclick="OpenDocPreview('<%# Eval("PATH")%>'.replace(/\\/g,"\\\\"), '<%# Eval("Filename")%>')"><%# Eval("DocTitle") %></a> function OpenDocPreview(url, docname) { alert('message from search base : ' + url + ' ' + docname); } thank you, I was working on a tutorial for some ajax uploading stuff and I ran across a new function syntax I don't recognize. I am not a Javascript pro, but I am not a newbie either. here is the code I am working on: Code: function handleFileSelect(e){ var files = e.target.files; var output = []; for(var i=0,f;f=files[i];i++){ if(f.type.match('image.*')){ var reader = new FileReader(); reader.onload = (function(theFile){ return function(e){ var span = document.createElement('span'); span.innerHTML = ['<img class="thumb" src="',e.target.result,'" title="',theFile.nbame,'" />'].join(''); document.getElementById('list').insertBefore(span,null); }; })(f); reader.readAsDataURL(f); } } document.getElementById('list').innerHTML = '<ul>'+output.join('')+'</ul>'; } document.getElementById('files').addEventListener('change',handleFileSelect,false); To be a little more clear, the code in question is that is the very middle. The syntax I don't understand is: Code: class.event = (function(arguments){ //stuff you put in a function... })(more Arguments?); I tried to customize a simple one to learn for myself and I wrote this: Code: var a = 'A'; var b = 'B'; test = (function(t){ alert(t); alert(b); })(b); test(a); The browser would alert 'B' and that's it. The console would tell me that 'test is not a function.' OK, so I am confused. The topmost code works. What I am wondering is what the syntax is called for creating a function (or event listener?) that way, and how it works. Although if I new what it was called I could just google how it works. Hi All, I'm trying to convert an anonymous function to a real function (nesting is getting out of hand), however the msg object becomes undefined after conversion. Here is the converted anonymous function which fails: https://gist.github.com/2587613 and here is the original anonymous function which works: https://gist.github.com/2587667 Any help would be greatly appriciated Hi! I'm trying to toggle a class and one works and the other does not and I don't know why. I'm just getting my feet wet with jquery and javascript and I figured this was a pretty easy task to take on! Maybe. Link to the page: Franklin Township Soccer Club - Change Field Status My sad, sorry attempt =| Code: $( "li.open" ).click(function() { $( this ).toggleClass( "closed" ); }); $( "li.closed" ).click(function() { $( this ).toggleClass( "open" ); }); The first function works with open, so I figured I'd just use opposite on closed! Ha! I don't think so! In the end within those function there is an element in a form on that page it's hidden. I'd like to change the value from a 0 to 1 for vice versa. That' will be my next step. If you could give me a little nudge in the right direction I'd appreciate it! But first understanding why one works and the other does not, that is the primary mission! I do appreciate any help given! Dave <p> <script type="text/javascript">// <![CDATA[ var metrics = { "mm" : 1, "cm" : 10, "m" : 1000, "inch" : 25.4, "foot" : 304.8 }; function convert(num, dec){ var val = document.getElementById("fromVal").value; if(isNaN(val)){ return } function roundNumber(num, dec) { var result = Math.round( Math.round( num * Math.pow( 10, dec + 1 ) ) / Math.pow( 10, 1 ) ) / Math.pow(10,dec); return result; } document.getElementById("toVal").value = val * metrics[document.getElementById("fromSystem").value]/ metrics[document.getElementById("toSystem").value]; } var interval = null; function watchChanges(){ interval == null ? setInterval("convert()", 500) : clearInterval(interval); } // ]]></script> </p> <table> <tbody> <tr> <td><input id="fromVal" style="width: 100px;" onfocus="watchChanges()" onblur="watchChanges()" type="text" /><select id="fromSystem" onchange="convert()"> <option value="mm">millimeters</option> <option selected="selected" value="cm">centimeters</option> <option value="m">meters</option> <option value="foot">feet</option> <option value="inch">inches</option> </select></td> </tr> <tr> <td colspan="1" align="center">=</td> </tr> <tr> <td><input id="toVal" style="width: 100px;" type="text" disabled="disabled" /><select id="toSystem" onchange="convert()"> <option value="mm">millimeters</option> <option value="cm">centimeters</option> <option value="m">meters</option> <option selected="selected" value="foot">feet</option> <option value="inch">inches</option> </select></td> I found this script, and it works great: Code: <script type="text/javascript"> function disable(element) { var input = document.getElementById(element).getElementsByTagName("input"); for(var i = 0; i < input.length; i++) { input[i].setAttribute("disabled","true"); } } </script> I tried to make the inverse by simply reversing the setAttribute() like so: Code: <script type="text/javascript"> function enable(element) { var input = document.getElementById(element).getElementsByTagName("input"); for(var i = 0; i < input.length; i++) { input[i].setAttribute("disabled","false"); } } </script> But that didn't do it. Can someone show me why, and how to fix it? Here's the sample form which I'm trying to test it on: Code: <form> <input type="radio" name="test" onclick="disable('D1')" /> disable<br/> <input type="radio" name="test" onclick="enable('D1')" /> enable<br/> <fieldset id="D1"> <input class="" type="text" value="test value1" /><input class="" type="text" value="test value2" /><br/> <input class="" type="text" value="test value3" /><input class="" type="text" value="test value4" /><br/> <input class="" type="text" value="test value5" /><input class="" type="text" value="test value6" /><br/> </fieldset> </form> Edit: The ultimate goal which I'm working toward now (step by step =) is to have a form more like: Code: <form> <input type="radio" name="test" onclick="disable('D1')" /> <fieldset id="D1"> <input class="" type="text" value="test value1" /><input class="" type="text" value="test value2" /> </fieldset> <input type="radio" name="test" onclick="disable('D2')" /> <fieldset id="D2"> <input class="" type="text" value="test value3" /><input class="" type="text" value="test value4" /> </fieldset> <input type="radio" name="test" onclick="disable('D3')" /> <fieldset id="D3"> <input class="" type="text" value="test value5" /><input class="" type="text" value="test value6" /> </fieldset> </form> And have the fieldsets enable and disable according the selection of the radio buttons. Also, the fieldsets (and their ID's) will be dynamically generated via PHP Thanks-a-bunch, ~ Mo i keep getting error Call to undefined function codeandurl() below is my code PHP Code: <?php $value= strip_tags(get_field('link',$post)); $resultid=get_field('resultid',$post); codeandurl($resultid,$value); ?> <div id="result"></div> <script type="text/javascript"> function codeandurl(resultid,url){ $( "#result" ).text(resultid); $( "#result" ).dialog({ modal: true, buttons: { Ok: function() { $( this ).dialog( "close" ); } } }); window.open(url); return false; } </script> How can I call a PHP Function inside a Javascript Function? This is what I have so far, but I don't think I'm doing it the right way. Any suggestions? PHP Code: <?php function phpQuery(){ $query = mysql_query("INSERT INTO mytable VALUES('','name','email')"); } ?> <script type="text/javascript"> function delayQueries() { timeoutID = window.setTimeout(doQueries, 2000); } function doQueries() { var runQuery = "<?php phpQuery(); ?>"; } </script> Thank you in advance if someone can help. I have been banging my head against the wall for hours now. Here is the code: Code: for (var i = 0; i < BS_crm['activityTypes'].length; i++) { var clickFunc = function(){ activityList.showForm( -1, {blockType:[""+BS_crm['activityTypes'][i]['id'], "0"]} ); }; var type = { value: BS_crm['activityTypes'][i]['id'], label: "Add New "+BS_crm['activityTypes'][i]['label'], css: BS_crm['activityTypes'][i]['css']+"_16", onClick: clickFunc }; previewLinks.items.push( type ); } Now, basically what I am doing here is running through one array to create an array of objects, that will be used to create links that will use whatever onClick function I pass it. The problem is that on the second line I need the BS_crm['activityTypes'][i]['id'] to be a value, not a reference. If that line was simply changed to: Code: var clickFunc = function(){ activityList.showForm( -1, {blockType:["3", "0"]} ); }; then everything would work as I need. How can I make this happen? I would really appreciate any help. Thank you again in advance. I made a mouseover event of a caption on a picture, when I hover the opacity of the background color of the hover and the text goes down. What I want is that when I hover over the image which the caption is floating on, the onmouseover event gets activite. For an imaginary example: Code: function unhighlight(x) { x.style.backgroundColor="transparent" } Function ActivationFuction() { activate.function="unhighlight" } thanks Hi, Any one help me In one variable i have some data ex: var data = document.getElementById("imageId").value; I want to pass this data to another function inside another function ex: var button1 = '<img src="images/Remove-button.gif" width="70" height="15" onclick="removeVerifyImageRow(this),saveLibData('+data+')"/>'; while running the application i am getting an error incase if the data is string ex:if data is 'image1' i am getting an error, but with number there is no problem ex: if data is '1122'. this is very urgent to solve this problem plz any one help me I'm trying to "progressively enhance" one of my surveys using javascript. Basically, I have rating scales that make use of radio buttons as each point on the scale. Each radio button occupies its own cell in a table. I wrote some functions that will highlight cells on mouseover in a color corresponding to its position on the scale (e.g. the lowest point is red, the midpoint is yellow, the highest point is green). When a radio button is clicked, the background of the button's cell and preceding cells in the same row will be colored accordingly. The functions are working well in FireFox and Chrome (I just have to add a few lines using the addEvent function to make it compatible with IE). The effect looks a lot nicer when I add a function that makes the visibility of the radio buttons hidden. However, I want to make sure that there is a fallback option in case the functions that color the cells don't work for whatever reason. I would not want the radio buttons hidden in this case. Is there a method whereby I can call the "hideRadiobuttons" function only if the other functions are successfully executed? i have an image with an onclick function and parameters 0,1 i want to change the parameters of the onclick function through the same function? Code: <img id="down0" onclick=swap(0,1) /> <javascript> function swap(a,b){ var imgda=document.getElementById('down'+a); imgda.onclick = swap(b,b+1); } </javascript> normally it should change the onclick to swap(1,2) but it remains 0,1 whats happening?? p.s. plz dont tell me about the javascript tag, its just for quick explaining... Hello again! Is there any way to pass a function(with its parameters) to another function using a parameter? Examples: Here is how I do it now: PHP Code: function output(text){ alert(text); } function bla(text, func){ output(text); } bla("Text is here", output) //Outputs "Text is here" I only want to pass the function to bla() as a parameter. I need something like this: PHP Code: function output(text){ alert(text); } function bla(func){ output(); } bla(output("Text is here")) //Outputs "Text is here" Is this possible in some way? Thanks in advance. Hi, I am working on a google map where you can show lines on the map by checking checkboxes. Lines are displayed according to their category attribute in the xml file. The function that picks up the checkbox click is like this: Code: function boxclick(box,category) { if (box.checked) { show(category); } else { hide(category); } Another part of the code assigns that category attribute to arrows, so that when a line of "x" category is displayed, the relevant arrows are displayed along with it, to indicate directionality. I also have a select list which displays the lines by looping through their array and using selectedIndex in a function called handleSelected2. But I can't get the arrows to display along with the lines from the select box. After trying many, many things, I figure that all I need to do is to call the show(category) function from inside the handleSelected2 function and it should all come together. So I came up with this: Code: function handleSelected2(opt,category) { for (var h = 0; h <gpolylines.length; h++) { gpolylines[h].hide(); } h = opt.selectedIndex - 1; if (h > -1) { gpolylines[h].show(); } for (var v=0; v<pts.length; v++) { show(category); } } which gets me lines, but no arrows. You can see it sort of working he http://www.xelawho.com/map/zonesarrowstest.htm I figure I've got to be close, because if I just tell it to show all the arrows (without going through the category filter) like this: Code: function handleSelected2(opt,category) { for (var h = 0; h <gpolylines.length; h++) { gpolylines[h].hide(); } var h = opt.selectedIndex - 1; if (h > -1) { gpolylines[h].show(); } for (var i=0; i<pts.length; i++) { pts[i].show(); } } then all the arrows show up, as you can see he http://www.xelawho.com/map/zonesarrowstest2.htm I'm not getting any error messages and I've tried pretty much everything I can think of... I've been tweaking this for days and it's driving me crazy. Does anybody else have any ideas? Thanks in advance. |