|
JavaScript - Get Elements Function Issue
hey everyone:
im using the following function: Code: function getByTag(tagName) {
var i, results = [], nodes = document.getElementsByTagName(tagName);
for (i = 0; i < nodes.length; i++) {
results.push(nodes[i]);
}
return results;
}
however when im trying to do this getByTag("div").style.color = "red" nothing happens.any help? Similar TutorialsAlright,ill go straight to the problem. I want to get all the elements with a certain tag.However i can only get the first one. my code: Code: function getTags(tag) {
var x = document.getElementsByTagName(tag);
var y = x.length;
for(var i = 0; i <= y;i++) {
return x[i];
}
}
Hi folks! I want to display some information in a DIV (div1) that is originally hidden, display it when I hover my mouse over another DIV (div2), and hide it (div1) again when my mouse leaves that specific DIV (div2). My problem is that the onMouseOver and onMouseOut events are fired each time the mouse hovers another element within the div (such as <p> or <a> tags) which is, as far as I understood, a normal behavior, although it looks like a bug. Since the onMouseOver event will trigger an AJAX function and will retrieve some data from my db, I don't want it to be called like 5 times because the user just moved his mouse around, within the DIV and hovered different child elements. I have found this bit of code which is supposed to resolve this issue: PHP Code: function doSomething(e) { if (!e) var e = window.event; var tg = (window.event) ? e.srcElement : e.target; if (tg.nodeName != 'DIV') return; var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement; while (reltg != tg && reltg.nodeName != 'BODY') reltg= reltg.parentNode if (reltg== tg) return; // Mouseout took place when mouse actually left layer // Handle event } My question is: how do I call this function from my DIV, knowing that originally I have something like: <div id="div2" onMouseOut="hideDiv('div1')"></div> hideDiv being my javascript function that sets div_x to display = none How would I link these 2 functions together? And also is this going to fix the onMouseOver issue at the same time (if the mouse doesn't go out, does it mean it's still in?)? Sorry, my knowledge of javascript is kind of ltd! Thanks in advance for helping me! Arnaud Good day everyone. I have a challenge with a function that works in Firefox, but not IE, Chrome or Safari. We've been building a site with a mix of Javascript and PHP using Google Maps. Another developer began the project and left a large mess which we're cleaning up. Even though it's under development, it can be viewed at www.recareas.com/demo The challenge we have is this . . . When the site home page, which is a large map, loads, it displays the US with state markers. The user will then select a state, for example, Colorado. The map then zooms in and displays markers for that state. Ultimately we won't be showing markers at the point until the visitor selects an activity from a menu. When the visitor clicks on a location marker, the google call out bubble pops up displaying a list of activities and a More Info button. This more info button when clicked opens a slide out dock on the right side of the screen displaying detailed data about the location selected. The problem we have is that this slide out dock only works in Firefox. It appears that in the other browsers the function that calls the PHP template that builds the right side dock doesn't even load. Can anyone help by giving us some pointers or direction? Here's the function were trying to call from the More Info bubble inside the google map: [code] function locInfo(loc_id) { $.get("includes/z_get_location_details.php", { loc_id: loc_id }, function(data){ $("#infoWindow_location").html(data); $("#r_menu").animate({ width: "500px"}, 200 ); $("#r_menu_left").hide(); $("#r_menu_right").show(); $("#infoWindow").show(); $.getScript("includes/z_get_interests.php?loc_id=" + loc_id); //document.directionsForm.goBtn.disabled=false; }, "html"); } [Icode] Thank you in advance for any help. Hello, I am trying to make a page with a target heart rate calculator that displays the heart rate in a text box. This code displays on a new page instead of in the box even though I put an input box, plus it doesn't display the correct value. I think the problem is in the function itself: Code: <script>
function calcHeartRate()
{
var age = ""
var heartRate = 220 - age
var minRate = heartRate * .5
var maxRate = heartRate * .85
rate = document.write(heartRate)
document.myForm.yourRate.value = rate
}
At any rate, here is the form also: Code: <form name = "myForm"> Age:</br> <input type = "text" name = "age" /><br/><br/> <input type = "button" value = "Calculate Your Maximum Heart Rate:" onclick= "calcHeartRate()"/> <br/><br/> Max Heart Rate:<br/> <input type = "text" name = "yourRate" /><br/><br/> </form> I'm sure this is jacked up code since I have definitely been struggling. If you want me to post my entire code, I will, but it is my understanding that it is against the guidelines. Posting a working code is definitely not necessary. Please give me an idea as to what is wrong and I will go from there. I do not want the actual answer. I kind of think the problem is with my age variable but I am not sure what it is. Thanks! I have created a function but it only half works. I can get the number of contributers to add up but not the total amount of dollars they contributed. I am not sure if my function is wrong or if I am just confused with what variable to output for the dollar amount total. Please assist. My Function: <script type="text/javascript"> function amountTotal() { total = 0; for (var i=0; i<=amount.length; i++) { total+=amount[i]; } return total; } </script> My output files: <div id=totals> <script type="text/javascript"> document.write("<table border=1' cellspacing=1'>"); document.write("<tr><th id=sumTitle colspan=2'>Summary</th></tr>"); document.write("<tr><th>Contributors</th>"); document.write("<td>"+[i]+"</td>"); document.write("</tr>"); document.write("<tr><th>Amount</th>"); document.write("<td>$ +[total]+</td></tr>"); document.write("</table>"); </script> Hi all, I'm just starting out with Javascript as a development language and this will probably be a relatively simple problem for someone to solve for me. I am trying to access a variable (this.bodyEl.innerHTML) from within a function but get an error message indicating that it is "undefined". I know that it is a valid variable because I call it elsewhere outside of the inner function itself. I'm sure this is just a scope issue, but I'd welcome any suggestions on how to solve it with an explanation of where I've gone wrong if you have the time. Here's the code: Code: displayFeed: function(responseData) {
this.bodyEl.innerHTML = "xxxx"; // I can see this
var responseDoc = Presto.Util.parseXml(responseData);
var items = Ext.DomQuery.select("/rss/channel/item", responseDoc);
items.each(function(item, bodyHTML) {
var rssTitle = Ext.DomQuery.selectValue("/title", item);
var rssDescription = Ext.DomQuery.selectValue("/description", item);
var rssLink = Ext.DomQuery.selectValue("/link", item);
// but this results in an undefined error
this.bodyEl.innerHTML = '<a href="' + rssLink + '">' + rssTitle + '</a><br/>';
}); // end of items processing
}
This is a fragment of the code from my script. The first access of "this.bodyEl.innerHTML" works fine, but the second access in the items.each loop doesn't and I get an undefined variable error. Is this a scoping problem, and if so how is it best solved. Thanks in advance, Innes (NZ) Hi, I'm trying to call a Js function from a test.js located in a HTML file. I'm getting error message "Object has no method..." in Chrome. But no issues are seen in Firefox. Can any one please let me know how i can fix this. <html> <head> .... .... .... <div> <html> <head> <script src="test.js"></script> <script> function aFunc() { alert ("Inside aFunc"); } </script> </head> <body> </html> .... .... .... </div> </head> </html> test.js function bFunc () { aFunc (); } 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. <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> 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 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> 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 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 Ok so I have these Input boxes and select boxes on my form. I have them input this way: Code: <input type="text" name="monto[]"> So I can then parse the many that get added and removed when I submit the form, this way PHP see's them as an array. Now I have used this in the past to cycle through my inputs to check values and such on them, but with these [] it doesn't work. Code: var changeCheck = document.getElementsByName('check');
for(i=0; i<changeCheck.length; i++)
{
var enter = new Number(getEl('dueitem' + changeCheck[i].value));
if(changeCheck[i].checked == true) {
final = enter + final;
}
}
Is there a way to cycle all these elements when they are as []. Even if it's cycle them by name, though I never had a determined amount I always have the same names for the 12 different fields there are. 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 Code: <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 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? 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. 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> |
|||||||