|
JavaScript - Selecting Out <tr> Rows With A Particular Property
I've got this JavaScript code that is doing stuff to the content of
<TR> rows.. but it's overselecting and I need to filter the <TR>s it selects in the bold line. var theRows = document.getElementsByTagName("TR"); var r = 0; var strTitle = ""; while (r < theRows.length) { try { strTitle = theRows[r].innerText || theRows[r].textContent; strTitle = strTitle.replace(/\n|\r|\t|\^ /g,""); if (strTitle.substring(0,1) == "(") { if (strTitle.indexOf("STAT") == -1) { theRows[r].style.display = "none"; ... continues Below is the rendered html. What I really want to do instead of if (strTitle.substring(0,1) == "(") Is only perform the operation when a row that is using class="ms- formlabel, or maybe has a FieldInternalName. I understand that strTitle is just pulling content, so how do I condition on other properties or strings within the <TR> row given my currently logic? Rendered HTML. <TR> <TD nowrap="true" valign="top" width="190px" class="ms-formlabel"><H3 class="ms-standardheader"> <nobr>1. Do you become short of breath or develop chest pain when climbing a flight of stairs?</nobr> </H3></TD> <TD valign="top" class="ms-formbody" width="400px"> <!-- FieldName="1. Do you become short of breath or develop chest pain when climbing a flight of stairs?" FieldInternalName="ShortofBreath" FieldType="SPFieldBoolean" --> <span dir="none"> Thanks for any help or information! Similar TutorialsHi guys, new to javascript and need some basic help or advice. I have this code which changes the the background postion of the parent(ul) Code: <ul>
<li class="highways" onmouseover="if(this.parentNode) this.parentNode.style.background='transparent url(http://www.webaddress.co.uk/website/media/images/Sub_nav_img.jpg) no-repeat 0 -149px';"
onmouseout="if(this.parentNode) this.parentNode.style.background='transparent url(http://www.webaddress.co.uk/website/media/images/Sub_nav_img.jpg) no-repeat 0 0';"><a href=" " title="Highways">Highways</a></li>
</li>
</ul>
I would like to do the same thing change the backgroundpossition/images of the div (id="flash") on the hover of the a within the the (div="mySlides2" > div ) Code: <div id="flash">
<img src="images/img1.jpg" width="886" height="229" />
<div id="myController2">
<span class="jFlowControl2">No 1 </span>
<span class="jFlowControl2">No 2 </span>
</div>
<div id="mySlides2">
<div>
<a (would like to do somthing on the hover of this) class="vm" href="#" title="Vulnerability Management"></a>
<a class="grc" href="#" title="grc"></a>
<a class="pci" href="#" title="pci"></a>
<a class="gcs" href="#" title="gcs"></a>
<a class<div id="flash">
<img src="im="pt" href="#" title="Penetration Testing"> </a>
<span class="jFlowNext2 NextFlash"> </span>
</div>
<div>
<span class="jFlowPrev2 BackFlash"> </span>
</div>
</div>
</div>
any help of advice would b appricated Specifically i was wondering if anyone had any ideas on how to select the specific character when hovering over a word? I have not been able to find any documentation on this however, there is a demo site i found for a plugin that allows character selection. http://labs.bitmeister.jp/moamoa/demo.html i dont need anything that large and elaborate... Edit I'm pretty wel experinced with jquery, I know it's possible with jquery Hi, I'm new to jQuery and I've set up a very basic image gallery. When the mouse is hovered over an image the description should disappear but at the moment when the mouse is hovered over any image all the descriptions for all the images are hidden. Is there any way to just apply the effect to one instance of the class rather than all of them at the same time? Thanks in advance. Code:
<html>
<head>
<link rel='stylesheet' type='text/css' href='gallery7.css'/>
<script type='text/javascript' src='jquery.js'></script>
<script type='text/javascript'>
$().ready(function(){
$(".images").hover(function(event){
$(".description").hide("slow",function(){ // Hides element i.e. it dissapears!!
});
});
});
</script>
<title>Basic Gallery</title>
</head>
<body>
<div class='images'>
<img src='images/cow.jpg'/>
<div class='description'>
This is a picture of a cow
</div>
</div>
<div class='images'>
<img src='images/indiana.jpg'/>
<div class='description'>
This is a picture of Indiana Jones
</div>
</div>
<div class='images'>
<img src='images/trek.jpg'/>
<div class='description'>
This is a picture of Enterprise
</div>
</div>
</body>
</html>
Code:
.images{
float: left;
}
.description {
position: relative;
top:-18px;
color: blue;
text-align: center;
background-color: gray;
opacity: 0.6;
}
I have 10 feedburner feeds that are for different categories on a wordpress site. I would like to modify the subscribe form code feedburner supplies to include radio buttons to select which of the feeds to subscribe to. Code: <HTML>
<HEAD>
<TITLE> Radio Window </TITLE>
<script>
function OpenWindow(){
for(i=0;i<document.FormName["RB1"].length;i++){
if(document.FormName["RB1"][i].checked){
window.open(document.FormName["RB1"][i].value);
break;
}
}
}
</script>
</HEAD>
<BODY>
<form name="FormName" style="border:1px solid #ccc;padding:3px;text-align:center;" action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="OpenWindow()";return true">
<p>Enter your email address:</p><p><input type="text" style="width:140px" name="email"/></p>
<input type="radio" name="RB1" value="http://feedburner.google.com/fb/a/mailverify?uri=feed1&loc=en_US">Option 1<BR>
<input type="radio" name="RB1" value="http://feedburner.google.com/fb/a/mailverify?uri=feed2&loc=en_US">Option 2<BR>
<input type="radio" name="RB1" value="http://feedburner.google.com/fb/a/mailverify?uri=feed3&loc=en_US">Option 3<BR>
<input type="radio" name="RB1" value="http://feedburner.google.com/fb/a/mailverify?uri=feed4&loc=en_US">Option 4<BR>
<input type="radio" name="RB1" value="http://feedburner.google.com/fb/a/mailverify?uri=feed5&loc=en_US">Option 5<BR>
<input type="radio" name="RB1" value="http://feedburner.google.com/fb/a/mailverify?uri=feed6&loc=en_US">Option 6<BR>
<input type="radio" name="RB1" value="http://feedburner.google.com/fb/a/mailverify?uri=feed7&loc=en_US">Option 7<BR>
<input type="radio" name="RB1" value="http://feedburner.google.com/fb/a/mailverify?uri=feed8&loc=en_US">Option 8<BR>
<input type="radio" name="RB1" value="http://feedburner.google.com/fb/a/mailverify?uri=feed9&loc=en_US">Option 9<BR>
<input type="radio" name="RB1" value="http://feedburner.google.com/fb/a/mailverify?uri=feed10&loc=en_US">Option 10<BR>
<input type="submit" value="Subscribe">
</form>
</BODY>
</HTML>
This is the code I have put together searching the web, when hitting the subscribe button after entering a email address and selecting an option it load two new windows, one for the relevant feed but does not transfer the email address entered in the text box. The second for to http://feedburner.google.com/fb/a/mailverify All help would be greatly received. Greetings experts, this is my first time here. So, please take easy on me. I have makup with 2 sections. The first section contains 5 form fields and are required. The second second has 2 form fields and are optional. Users can only choose from one section or the other but not both. The js script below ensures that if users select from section 2, section one will not challenge for validation and works a treat. The challenge I have now is to ensure that if users choose from section 1, the 2 form fields in section are automatically disabled so they won't be attempted to choose from it. Similarly, if users select from section 2, all form fields in section one are automatically disabled so they won't be tempted to choose from that section. Is this possible? If not possible, is it possible to raise an error? For instance, a user selects from section 1 and attempts to select from any of the 2 form fields in section 2, a message that says, "You can only select from one section but from both. Similarly if a user selects from section 2 first, same thing happens. Thanks very much for your assistance. function validate() { if(document.getElementById("<%=txtrequest.ClientID%>").value != "" && document.getElementById("<%=txtreceived.ClientID %>").value != "") { if (document.getElementById("<%=txtName.ClientID%>").value == "") { alert("Please enter name"); document.getElementById("<%=txtName.ClientID%>").focus(); return false; } if (document.getElementById("<%=txtCity.ClientID %>").value == "") { alert("Please enter city"); document.getElementById("<%=txtCity.ClientID %>").focus(); return false; } if (document.getElementById("<%=txtState.ClientID%>").value == "") { alert("Please enter state"); document.getElementById("<%=txtState.ClientID%>").focus(); return false; } if (document.getElementById("<%=txtZip.ClientID%>").value == "") { alert("Please enter zip"); document.getElementById("<%=txtZip.ClientID%>").focus(); return false; } if (checkradio() == false) { alert("Please enter contacts"); document.getElementById("<%=txtContacts.ClientID%>").focus(); return false; } } return true; } I have up to 3 dropdown lists that I can select using javascript functions. Depending on what I select in the first dropdown loads what is in the 2nd drop down and so on. i want to be able to select the first drop down and it skips the 2nd one and displays the 3rd one. How do I do that with the current functions I am using. Code: function cboSourceChange(){
var iSource = document.frmHarvestForm.cboSource.options[document.frmHarvestForm.cboSource.selectedIndex].value;
var iSub1 = document.frmHarvestForm.cboSub1.options[document.frmHarvestForm.cboSub1.selectedIndex].value;
var iSub2 = document.frmHarvestForm.cboSub2.options[document.frmHarvestForm.cboSub2.selectedIndex].value;
var dtBeginDate = document.frmHarvestForm.txtBeginDate.value;
var dtEndDate = document.frmHarvestForm.txtEndDate.value;
var iIndCert = document.frmHarvestForm.cboIndCert.value;
location.replace("HarvestBoard.asp?cboSource="+iSource+"&cboSub1=0&cboSub2=0&cboSub3=0&txtBeginDate="+dtBeginDate+"&txtEndDate="+dtEndDate+"&cboIndCert="+iIndCert);
}
function cboSub1Change(){
var iSource = document.frmHarvestForm.cboSource.options[document.frmHarvestForm.cboSource.selectedIndex].value;
var iSub1 = document.frmHarvestForm.cboSub1.options[document.frmHarvestForm.cboSub1.selectedIndex].value;
var dtBeginDate = document.frmHarvestForm.txtBeginDate.value;
var dtEndDate = document.frmHarvestForm.txtEndDate.value;
var iIndCert = document.frmHarvestForm.cboIndCert.value;
location.replace("HarvestBoard.asp?cboSource="+iSource+"&cboSub1="+iSub1+"&cboSub2=0&cboSub3=0&txtBeginDate="+dtBeginDate+"&txtEndDate="+dtEndDate+"&cboIndCert="+iIndCert);
}
function cboSub2Change(){
var iSource = document.frmHarvestForm.cboSource.options[document.frmHarvestForm.cboSource.selectedIndex].value;
var iSub1 = document.frmHarvestForm.cboSub1.options[document.frmHarvestForm.cboSub1.selectedIndex].value;
var iSub2 = document.frmHarvestForm.cboSub2.options[document.frmHarvestForm.cboSub2.selectedIndex].value;
var dtBeginDate = document.frmHarvestForm.txtBeginDate.value;
var dtEndDate = document.frmHarvestForm.txtEndDate.value;
var iIndCert = document.frmHarvestForm.cboIndCert.value;
location.replace("HarvestBoard.asp?cboSource="+iSource+"&cboSub1="+iSub1+"&cboSub2="+iSub2+"&cboSub3=0&txtBeginDate="+dtBeginDate+"&txtEndDate="+dtEndDate+"&cboIndCert="+iIndCert);
}
function cboSub3Change(){
var iSource = document.frmHarvestForm.cboSource.options[document.frmHarvestForm.cboSource.selectedIndex].value;
var iSub1 = document.frmHarvestForm.cboSub1.options[document.frmHarvestForm.cboSub1.selectedIndex].value;
var iSub2 = document.frmHarvestForm.cboSub2.options[document.frmHarvestForm.cboSub2.selectedIndex].value;
var iSub3 = document.frmHarvestForm.cboSub3.options[document.frmHarvestForm.cboSub3.selectedIndex].value;
var dtBeginDate = document.frmHarvestForm.txtBeginDate.value;
var dtEndDate = document.frmHarvestForm.txtEndDate.value;
var iIndCert = document.frmHarvestForm.cboIndCert.value;
location.replace("HarvestBoard.asp?cboSource="+iSource+"&cboSub1="+iSub1+"&cboSub2="+iSub2+"&cboSub3="+iSub3+"&txtBeginDate="+dtBeginDate+"&txtEndDate="+dtEndDate+"&cboIndCert="+iIndCert);
}
Hi. I've dynamically created some divs, how do I select a specific div to use? Code: //create box for length of letters in word
var i = 0;
for(i=0;i<wL;i++){
cBoxes = document.createElement("div");
cBoxes.className = "letterBoxes";
hangMan.appendChild(cBoxes);
}
So I'm creating the amount of divs equal to the amount of letters in my word (I'm making a hangman game). On correct guess, I need the letter to show in it's correct position (within the correct blank div previously created). I have the correct position stored in a variable (letPos), and the correct guess (userGuess), I need to show userGuess at the div equal to letPos, ie div 4 or div 5, etc. If I simply go cBoxes.innerHTML = userGuess, the correct userGuess always shows at the last position in my cBoxes divs. I need it to show at the correct position (letPos). Any hints? I don't know anything about javascript so the way I word this might be a bit confusing. I am making an online store using corecommerce but I am having difficulty finding a code that will allow my visitors to determine how many items they see per pg. The options would be: 25 items 50 items 75 items View All. I have been playing around with codes that I find.. but like I said earlier, I know absolutely NOTHING about javascript. Can anyone help me out by either giving me the code or pointing me to a tutorial or anything! PLEASE! thx a bunch P.S. if you know of a program or software thats also great too! Hey all, Objective: - when you select other the pull down menu is replaced by the text field. Currently: - Gotten it to the level of when you select the other the text field appears. Question: - HOw can I modify the code so when I select the other menu option from the pull down menu and it replaced by the text field? Quote: <script type="text/javascript"> function togglefield(val) { var o = document.getElementById('other'); (val == 'Other')? o.style.display = 'block' : o.style.display = 'none'; } </script> and the form: <form action="" method="post"> <select name="sel" id="sel" onChange="togglefield(this.value);"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="Other">Other</option> </select> <input type="text" name="other" id="other" style="display: none;"> </form> Below I have dynamical generated radio buttons, the names($approve variable is the name) per radio button pairs are different(dynamically created names using looping). When I create two buttons, one is for if you click it, all the radio button with the label approve will be selected all, and the other button is for the disapprove label button that will select the radio button with the label disapprove. How can I make this right. Below are the codes I created. Thanks Code: <script>
function selectAll()
{
var i = 0;
objElems = document.t4.elements;
for(i=0;i<objElems.length;i++){
objElems[i].checked =true;
}
</script>
PHP Code: <form action="viewall.php" method="post" name="t4"> while(condition) { echo "<td ><input type='radio' name='". $approve."' id='app' value='approve' /> Approve<br /> </td> <td ><input type='radio' name='". $approve."' id='disp' value='disapprove' /> Disapprove<br /> </td> "; } <tr><td><input type="button" name="all_app" value="Select All Approve" onclick="selectAll(this.value);" ></td> <td><input type="button" name="all_app2" value="Select All disapprove" onclick="selectAll(this.value);" ></td> </tr> </form> hi again hi i want to create a form Form have 2 submit buttons also have one drop down list when selecting dropdown list item disable the one submit button plzzzzzz help m for do this with sample code needed. I currently have two html select list boxes side by side on a form, two buttons in between the boxes to move items from list box to the other, and a javascript function to control the movement of the items from one box to the other. Here is the javascript: Code:
function MoveSelected(from, to) {
var lstFrom = $(from);
var lstTo = $(to);
for (var i = 0; i<lstFrom.length;i++) {
if ( lstFrom[i].selected ) {
var elOptNew = document.createElement('option');
elOptNew.text = lstFrom[i].text;
elOptNew.value = lstFrom[i].value;
try {
lstTo.add(elOptNew, null); // standards compliant; doesn't work in IE
} catch(ex) {
lstTo.add(elOptNew); // IE only
}
}
}
for (var i = lstFrom.length-1; i>=0;i--) {
if ( lstFrom[i].selected ) {
lstFrom.options[i] = null;
}
}
}
Here are the two html form select list boxes (lstAvailProd is the starting list box that lists the initial data and lstSelectProd is the destination list box): Code:
<td width="10%" valign="center">
<a href="javascript: MoveSelected('lstAvailProd','lstSelectProd');"><IMG SRC="buttons/right_arrow.gif" style="padding-bottom: 2px;" /></a><br /><br />
<a href="javascript: MoveSelected('lstSelectProd','lstAvailProd');"><IMG SRC="buttons/left_arrow.gif" /></a>
</td>
I was wondering if anyone could tell me how I could modify my code to allow for the selection of all the data in the starting list box by only selecting and moving the first item in the list to the destination list box? The first item is called "All Products", so instead of actually selecting every product in the starting list and moving them to the destination list, I would like the code to see that if the "All Products" list item is moved to the destination list, move all the other list items in the destination list back to the starting list. Here's an example of what the code for each list box looks like: Starting List Box: Code:
<select name="lstAvailProd" id="lstAvailProd" multiple="true" size="8" style="width: 250px;">
<option value="-1">{All Products}</option>
<option value="1">Product 1</option>
<option value="2">Product 2</option>
<option value="3">Product 3</option>
<option value="4">Product 4</option>
<option value="5">Product 5</option>
</select>
Destination List Box: Code: <select name="lstSelectProd" id="lstSelectProd" multiple="true" size="8" style="width: 250px;"> </select> Any help would be appreciated, thanks!! Hey guys. I need little bit of help which i know it will be piece of cake for you. In emp_rota.php , i want the user to select multiple dates (through a calendar) which will be fetched in the php in the next page. everything works except that the calendar script works only on DATE1, when user clicks to add another date then though everything works , except the calendar doesnt come up. help MEE !! P.s. i am attaching the whole script along with this http://www.mediafire.com/?ayz7mpiauba4dya I saw this on the web the other day and didn't mark the page I found it on. How do I change an image based on what selection is made in a drop down? Kathy In this Form field, when I select the field box that shows "Enter Text" I'd like it so the text disappears, so I can begin typing in a cleared field box. This is the line of code, I believe, that has to do with that function. Any help with having the Enter Text clear upon selecting, will be appreciated: Code: <input autocomplete="off" id="keyword" name="keyword" value="Enter Text" onclick="clickclear(this, 'Enter Text')" onblur="clickrecall(this,'Enter Text')" /> I have a cgi script (using perl for database queries) in which I have two select boxes. I am populating the left select box with rows from a database, and then provide buttons for people to move items to the right select box. So far so good, everything works, the move right, move left, and move right all and move left all buttons work, data is always sorted in both lists. My only problem is, when I click the submit button, the follow up program only displays data that was highlighted/selected in the right select box, not all of the data in the right select box. I don't know how to tell the script, via javascript, to highlight everything in the right select box when the submit form button is clicked. I would think i could just call a function via -onClick for the submit button. I could use some help with the function to select all data in that list. I can post code if it is helpful. Thanks, Taylor I'm tearing my hair out with this one and can't figure out why it won't work, and am hoping someone could help a Javascript noobie out. Basically, I need the script to hide two divs if one of the options in a <select> menu is selected. Here's the code I've got for the Javascript: Code: function typeoflisting() {
var selectform = document.getElementById('propertytype');
if (selectform.options[selectedIndex].value == "sell") {
document.getElementById('per_week').style.display = 'none';
document.getElementById('bond').style.display = 'none';
}
else {
document.getElementById('per_week').style.display = 'block';
document.getElementById('bond').style.display = 'block';
}
}
Here's the <select> form: Code: <select id="propertytype" name="propertytype" class="select" onchange="typeoflisting()"> <option value="lease">I'd like to lease a property to tenants</option> <option value="sell">I'd like to sell a property</option> <option value="share">I'd like to share a property</option> </select> And here's the first div I'm attempting to hide: Code: <div id="per_week" style="float: left;"> per week</div> And the second div I'm attempting to hide: Code: <div style="float: left; padding: 20px 20px 0px 0px;" id="bond"> <h3>Bond</h3> <input type="text" class="text" value="$"/> </div> Could anyone please tell me what I'm doing wrong? I've written a program which will prompt for a number of cities, Prompt for the name of the city, then prompt for the number of snowfall readings of that city, and then prompt for each of these individual snowfall readings of that city. From this, it adds up each of the individual snowfall readings of that city, and will calculate an average by dividing this figure [the total snowfall] by the total number of readings for that city. This average is used to then classify the city as "not snowy", "mild", or "blizzard". I'm happy to PM my code to anyone willing to help out, as I realise this is a complex structure to visualise perhaps, but I can't post it publicly. I now have to select the city with the highest average, and name it in an alert output. How is this possible. Note, I'm not allowed to use functions or arrays. Prompts, alerts, if-then-else, for and while loops are all I can use. Hi, This is my first post while learning Javascript and jQuery as total noob. I have something like this: Code: var desc = "This is your title and here is even more that might be added so that we can get at least 60 characters or so";
var desc = desc.trim().substring(0, 40).split(" ").slice(0, -1).join(" ") + "...more";
alert(shortText );
It is actually being used on a page that calls a description from a MySQL table, but this example fails in exactly the same manner. Although FF and other browsers successfully initiate the script with errors, but IE loops endlessly and freezes up. FireBug reports "reference to undefined property a[d]". Using jQuery 1.6.2. I'm not really sure what property is undefined here and how this can work without freezing IE. Thanks in advance for any help! AJ Any help would be awesome and much appreciated! I'm trying to change an id by referencing the previous site the user was on. In this case the user will be coming from either facebook or linkedin. I'm not sure if i'm calling the referrer property correctly. Again, any help is greatly appreciated! <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script language="JavaScript"> if(document.referrer.toLowerCase().indexOf("facebook") != -1) { document.getElementById("phone").innerHTML = "555.555.5555"; } else if (document.referrer.toLowerCase().indexOf("linkedin") != -1) { document.getElementById("phone").innerHTML = "222.222.2222"; } else { //Default code } </script> </head> <body> <p id="phone">123.456.7890</p> </body> |
|||||||