JavaScript - I Need Some Schooling On Add/removing A Table Row
Hi!
I'm trying to stick to learning javascript. It's slow going, really so! And I try to find practical examples to work on. I first found this example => jQuery Add/Remove Input Fields - JSFiddle Now I tried to adapt what is in that example to my code albeit a bit more complex than the div and p that's in the example. I have this => Edit fiddle - JSFiddle Where I get lost is this person is adding a whole new div and I need to create a new table row and increase all my name in the form by one (example name-1, name-2, name-3 and so on). Obviously I'd need to create a button of the last table row to allow the user to add a row and if the row is created move the add button down and also include a remove button at the same time. If some one could kindly push me along and feed me some ideas I'll go and research. I'm just not 100% on the implementation. I thank you for your time and understanding! Similar TutorialsHey guys, I have a table which contains a link to add rows in each row after the header. This link, when clicked, adds a row beneath the row which contained the clicked link. This part works perfectly. However the added rows each have a link to remove themselves from the table, and this is the part which isn't working properly. What's supposed to happen is that you click on a link, and then the row which contains the link you just clicked on is deleted. What's actually happening is when the "remove" links are clicked, first the row 2 rows above it is removed, then the row directly above it, then the correct row (itself) is deleted. Hope all of that makes sense! This is my script: Code: function addRowToTable(thisRow) { var tbl = document.getElementById('foodsTable'); addedRow = thisRow + addedRows; var row = tbl.insertRow(addedRow); row.id = addedRows; addedRows = addedRows + 1; var cellLeft = row.insertCell(0); cellLeft.innerHTML = " + <input type='text'> <a href='JavaScript:removeRowFromTable(" + row.id + ")'>Remove</a> "; var cellMiddle = row.insertCell(1); cellMiddle.innerHTML = "<input type='text'>"; var cellRight = row.insertCell(2); cellRight.innerHTML = "text here"; } function removeRowFromTable(i) { var tbl = document.getElementById('foodsTable'); document.getElementById('foodsTable').deleteRow(i) addedRows = addedRows - 1; } And this is my table: Code: <table width=100% id="foodsTable"> <tr bgcolor="#EEEEEE"> <td width=*><b>Food/Drink</b></td> <td align="right" width=100><b>Purchased</b></td> <td align="right" width=100><b>Produced</b></td> <td width=60></td> </tr> <tr> <td><a href="itemdetails.php?item=Apples" onMouseover="ddrivetip('<?php getToolTipData('Apples',$Foods); ?>')"; onMouseout="hideddrivetip()">Apples</a> <a href="JavaScript:addRowToTable(2)">+ Add similar food</a> <font color="#FF0000">*NEW*</font></td> <td align="right"><input type="text" name="Apples" maxlength="10" size="10" value="<?php echo $session->foodsApplesPurc; ?>" style="text-align:right" /></td> <td align="right"><input type="text" name="ApplesProd" maxlength="10" size="10" value="<?php echo $session->foodsApplesProd; ?>" style="text-align:right" /></td> <td>kg/week</td> </tr> <!-- many more rows just like the one above /--> </table> I've highlighted the sections which I believe are most likely to be the source of my problems. Please ignore the PHP and mouseover/mouseout parts - I don't think they're relevant to this particular problem. I'm also not bothered at this stage by the fact that I'm not adding enough cells to the new rows - I'll fix this later. At this stage I just want to get the "remove" links to remove their own rows. Any ideas? Knowing me it's most likely a case of me making it way more complicated than it needs to be, and digging myself into a hole! I will be eternally indebted to anyone who can give me any help! Thanks in advance! Is it possible to prevent the tooltip that appears when mousing over an image from appearing? This is without removing the alt or title tags.
I am retrieving a value from a form, but the problem is that the value is surrounded in parentheses (intentionally). However when making an if statement to see if the value is greater then "X", i can not make an if statement becouse there are parentheses around the number. How can i strip the parentheses??
I can't really get any help over on the greasemonkey forums so hopefully I can get some needed help here. My goal with a script I am writing is to remove signatures from a forum I am a part of. Some of the people abuse it with half a page of stuff and it's out of control. So here is what the HTML source code for it looks like Code: <table cellSpacing="1" width="100%" border="0" class="tback" cellPadding="2"> <tr> <td width="100" class="headcell">Author</td> <td class="headcell">Topic</td> </tr> <tr vAlign="top" class="cell"> <td align="center"> <div><a href="profile.asp?$sid=&id=5126">Roadwildcat</a></div> <div class="fcaption">Pee Wee League</div><br><div><img src="images/stars-2.gif" alt="2 Stars"></div><br><img src="Avatars/Georgia.gif" alt="Member Avatar" height="62" width="62"><div class="fcaption">DC Georgia 2020 to Present</div> <div class="fcaption">115 Posts</div> </td> <td> <table border="0" cellpadding="0" cellspacing="0" width="100%"> <tr> <td><span class="fcaption"><img src="images/oPost.gif" alt="Old Post" height="10" width="10" border="0" align="absmiddle">Posted - 03 January 2011 5:41</span></td> <td align="right"><a href="myForum.asp?$sid=&mode=compose&to=5126"><img src="images/pm.gif" width="33" height="18" border="0" hspace="3" align="absmiddle" alt="Send Roadwildcat a Private Message"></a><a href="post.asp?$sid=&mode=Quote&id=24958&fid=2&t=24958&fpage=1"><img hspace="3" alt="Reply With Quote" src="images/quote.gif" width="28" height="18" align="absmiddle" border="0"></a></td> </tr> </table> <hr size="1" noshade>I have been trying to set my attendance to the all star games but when I do a game search on the map it is showing no games at all. Anyone else having this problem?<hr size="1"><span class="fcaption">SEC Champions 2022-2027 <br/> National Runner-up 2027 <br/> Recruiting BEAST! <br/> BULLDAWG BOUNCE</span></td> </tr> The very bottom where it has the 'span' tag and it says "SEC Champions" is where the Signatures are located. I want to completely remove that using my script and this is what I have right now Code: function sigRemove() { var sigs = document.getElementsByTagName('span'); for (var i = 0; i < sigs.length; i++) { sigs[i].style.display = 'none'; } } I know it's incomplete but I only want to remove that bottom span tag and everything inside of it and not every span tag on the page. Please help and I apologize for the long post hi, at the moment my code: Code: new Date(); this displays: Thur Nov 24 201115:28:53 GMT+0000 (GMT) I only want it to say: Thur Nov 24 201115:28:53 I put this at the end of my code thinking that after the div displays (id = 'link_container') I can eliminate (id = 'link_container') from memory when the script ends so there's a place for another div (id = 'link_container') when/if there's onkeyup event. Wouldn't this little script remove any element with an id = 'link_container' ? <script type="text/javascript"> var deleteDiv = document.getElementById('link_container'); document.body.removeChild(deleteDiv); </script> Hi, So I've got an array called questions_raw Code: questions raw = [ ["<Q1> Question", "choice1","choice2", "choice3"], ["<Q2> Question", "choice1","choice2", "choice3"], ... ] And I want to list all of the questions, but not the choices/answers. So far, I've managed to list just the questions, but because another function randomly sorts them, I need to sort them back into numerical order for a separate function (displaying the questions) I use characters (>,^) at the front to separate them into different answer types (just to explain the code) I try this to cut each string down so that they can be sorted numerically/alphebetically - Code: function linearlist() { var list = []; var tempStr = ""; for (var l = 0; l < 145; l++) { tempStr = questions_raw[l][0]; list[l] = tempStr; } if (list.charAt(0)== " " ) list = list.substring(3) ; if (list.charAt(0)== ">" ) list = list.substring(3) ; if (list.charAt(0)== "^" ) list = list.substring(3) ; var sorted = list.sort(); document.Qtext2form.Qtext2.value = sorted.join("\n"); } But it doesn't like it - because "it has no method charAt" Any idea what i'm missing? Is it just that you have to put the [l] in every time you call a variable? Cheers Hey guys... Basically I need a function that will remove numerous elements from a page based on their class. I then also need a function to bring those elements back afterwards. If anyone is wondering, I'm trying to add buttons to remove/add images. Thanks! So I have two for loops that check to see if each array item * a number returns a decimal. Here is my code(Cred to Philip M): Code: var myArray = f; for (var wi=0; wi<myArray.length; wi++) { var warray = myArray[wi]; var wabs = Math.abs((warray*z1)) if (!(wabs > Math.floor(warray)) && (wabs < Math.ceil(warray))){ break; } else{ warray = 1; break; } } for (var yi=0; yi<myArray.length; yi++) { var yarray = myArray[yi]; var yabs = Math.abs((yarray*z2)) if (!(yabs > Math.floor(yarray)) && (yabs < Math.ceil(yarray))){ break; } else{ yarray = 1; break; } } I have two options (I don't know which one is easier because I am clueless about loops) Option 1: Basically I want to find warray, and I want to find yarray, and then once I have found them, I want to check if they multiply to be x If they don't, try again and eliminate the option. In other words: I need to try every combination of numbers in the array until I find two numbers that aren't decimals when they are multiplied by "z1" or "z2" and they both multiply to be "n" Option 2: Find a number for warray that isn't a decimal. Set yarray = (a/warray). If that number * z2 isn't an integer, find warray again, but eliminate the option that didn't work. Thank you so much! I have the following script that I'm using to make an overlay panel. I didn't write it, but am trying to remove the "zoom out" from it. Here's an example: http://www.intelsystech.com/ab/SampleOverlay.html That tiny little black scribble is my text. I don't want it to zoom the div contents, but instead to simply set height and width of the div. Or better, does anyone know a javascript for a panel attached to the left, which has a resizer to make it wider, and a collapse/expand button? That's all I was looking for. Thanks! Script follows: Code: function Position(x, y) { this.X = x; this.Y = y; this.Add = function(val) { var newPos = new Position(this.X, this.Y); if(val != null) { if(!isNaN(val.X)) newPos.X += val.X; if(!isNaN(val.Y)) newPos.Y += val.Y } return newPos; } this.Subtract = function(val) { var newPos = new Position(this.X, this.Y); if(val != null) { if(!isNaN(val.X)) newPos.X -= val.X; if(!isNaN(val.Y)) newPos.Y -= val.Y } return newPos; } this.Min = function(val) { var newPos = new Position(this.X, this.Y) if(val == null) return newPos; if(!isNaN(val.X) && this.X > val.X) newPos.X = val.X; if(!isNaN(val.Y) && this.Y > val.Y) newPos.Y = val.Y; return newPos; } this.Max = function(val) { var newPos = new Position(this.X, this.Y) if(val == null) return newPos; if(!isNaN(val.X) && this.X < val.X) newPos.X = val.X; if(!isNaN(val.Y) && this.Y < val.Y) newPos.Y = val.Y; return newPos; } this.Bound = function(lower, upper) { var newPos = this.Max(lower); return newPos.Min(upper); } this.Check = function() { var newPos = new Position(this.X, this.Y); if(isNaN(newPos.X)) newPos.X = 0; if(isNaN(newPos.Y)) newPos.Y = 0; return newPos; } this.Apply = function(element) { if(typeof(element) == "string") element = document.getElementById(element); if(element == null) return; if(!isNaN(this.X)) element.style.left = this.X + 'px'; if(!isNaN(this.Y)) element.style.top = this.Y + 'px'; } } function hookEvent(element, eventName, callback) { if(typeof(element) == "string") element = document.getElementById(element); if(element == null) return; if(element.addEventListener) { element.addEventListener(eventName, callback, false); } else if(element.attachEvent) element.attachEvent("on" + eventName, callback); } function unhookEvent(element, eventName, callback) { if(typeof(element) == "string") element = document.getElementById(element); if(element == null) return; if(element.removeEventListener) element.removeEventListener(eventName, callback, false); else if(element.detachEvent) element.detachEvent("on" + eventName, callback); } function cancelEvent(e) { e = e ? e : window.event; if(e.stopPropagation) e.stopPropagation(); if(e.preventDefault) e.preventDefault(); e.cancelBubble = true; e.cancel = true; e.returnValue = false; return false; } function getMousePos(eventObj) { eventObj = eventObj ? eventObj : window.event; var pos; if(isNaN(eventObj.layerX)) pos = new Position(eventObj.offsetX, eventObj.offsetY); else pos = new Position(eventObj.layerX, eventObj.layerY); return correctOffset(pos, pointerOffset, true); } function getEventTarget(e) { e = e ? e : window.event; return e.target ? e.target : e.srcElement; } function absoluteCursorPostion(eventObj) { eventObj = eventObj ? eventObj : window.event; if(isNaN(window.scrollX)) return new Position(eventObj.clientX + document.documentElement.scrollLeft + document.body.scrollLeft, eventObj.clientY + document.documentElement.scrollTop + document.body.scrollTop); else return new Position(eventObj.clientX + window.scrollX, eventObj.clientY + window.scrollY); } function dragObject(element, attachElement, lowerBound, upperBound, startCallback, moveCallback, endCallback, attachLater) { if(typeof(element) == "string") element = document.getElementById(element); if(element == null) return; var cursorStartPos = null; var elementStartPos = null; var dragging = false; var listening = false; var disposed = false; function dragStart(eventObj) { if(dragging || !listening || disposed) return; dragging = true; if(startCallback != null) startCallback(eventObj, element); cursorStartPos = absoluteCursorPostion(eventObj); elementStartPos = new Position(parseInt(element.style.left), parseInt(element.style.top)); elementStartPos = elementStartPos.Check(); hookEvent(document, "mousemove", dragGo); hookEvent(document, "mouseup", dragStopHook); return cancelEvent(eventObj); } function dragGo(eventObj) { if(!dragging || disposed) return; var newPos = absoluteCursorPostion(eventObj); newPos = newPos.Add(elementStartPos).Subtract(cursorStartPos); newPos = newPos.Bound(lowerBound, upperBound) newPos.Apply(element); if(moveCallback != null) moveCallback(newPos, element); return cancelEvent(eventObj); } function dragStopHook(eventObj) { dragStop(); return cancelEvent(eventObj); } function dragStop() { if(!dragging || disposed) return; unhookEvent(document, "mousemove", dragGo); unhookEvent(document, "mouseup", dragStopHook); cursorStartPos = null; elementStartPos = null; if(endCallback != null) endCallback(element); dragging = false; } this.Dispose = function() { if(disposed) return; this.StopListening(true); element = null; attachElement = null lowerBound = null; upperBound = null; startCallback = null; moveCallback = null endCallback = null; disposed = true; } this.GetLowerBound = function() { return lowerBound; } this.GetUpperBound = function() { return upperBound; } this.StartListening = function() { if(listening || disposed) return; listening = true; hookEvent(attachElement, "mousedown", dragStart); } this.StopListening = function(stopCurrentDragging) { if(!listening || disposed) return; unhookEvent(attachElement, "mousedown", dragStart); listening = false; if(stopCurrentDragging && dragging) dragStop(); } this.IsDragging = function(){ return dragging; } this.IsListening = function() { return listening; } this.IsDisposed = function() { return disposed; } if(typeof(attachElement) == "string") attachElement = document.getElementById(attachElement); if(attachElement == null) attachElement = element; if(!attachLater) this.StartListening(); } function ResizeableContainer(contentID, parent) { var MINSIZE = 38; var EDGE_THICKNESS = 7; var EDGEDIFFSIZE = 2*EDGE_THICKNESS + 3; var EDGEDIFFPOS = EDGE_THICKNESS + 1; var TEXTDIFF = EDGE_THICKNESS + 2; var _width = 38; var _height = 38; var _maxWidth = 900; var _maxHeight = 600; var _minWidth = MINSIZE; var _minHeight = MINSIZE; var _container = document.createElement('DIV'); _container.className = 'reContainer'; var _content = document.getElementById(contentID); _content.ResizeableContainer = this; _content.className = 'reContent'; var _rightEdge = document.createElement('DIV'); _rightEdge.className = 'reRightEdge'; var _bottomEdge = document.createElement('DIV'); _bottomEdge.className = 'reBottomEdge'; var _cornerHandle = document.createElement('DIV'); _cornerHandle.className = 'reCorner'; var _leftCornerHandle = document.createElement('DIV'); _leftCornerHandle.className = 'reLeftCorner'; var _topCornerHandle = document.createElement('DIV'); _topCornerHandle.className = 'reTopCorner'; var _rightHandle = document.createElement('DIV'); _rightHandle.className = 'reRightHandle'; var _bottomHandle = document.createElement('DIV'); _bottomHandle.className = 'reBottomHandle'; var _topRightImageHandle = document.createElement('DIV'); _topRightImageHandle.className = 'reTopRightImage'; var _bottomLeftImageHandle = document.createElement('DIV'); _bottomLeftImageHandle.className = 'reBottomLeftImage'; var _leftEdge = document.createElement('DIV'); _leftEdge.className = 'reLeftEdge'; var _topEdge = document.createElement('DIV'); _topEdge.className = 'reTopEdge'; _cornerHandle.appendChild(_leftCornerHandle); _cornerHandle.appendChild(_topCornerHandle); _rightEdge.appendChild(_topRightImageHandle); _rightEdge.appendChild(_rightHandle); _bottomEdge.appendChild(_bottomHandle); _bottomEdge.appendChild(_bottomLeftImageHandle); _container.appendChild(_topEdge); _container.appendChild(_leftEdge); _container.appendChild(_rightEdge); _container.appendChild(_bottomEdge); _container.appendChild(_cornerHandle); _container.appendChild(_content); var _rightHandleDrag = new dragObject(_rightEdge, null, new Position(0, 3), new Position(0, 3), moveStart, rightHandleMove, moveEnd, true); var _bottomHandleDrag = new dragObject(_bottomEdge, null, new Position(3, 0), new Position(3, 0), moveStart, bottomHandleMove, moveEnd, true); var _cornerHandleDrag = new dragObject(_cornerHandle, null, new Position(0, 0), new Position(0, 0), moveStart, cornerHandleMove, moveEnd, true); UpdateBounds(); UpdatePositions(); AddToDocument(); function moveStart(eventObj, element) { if(element == _cornerHandle) document.body.style.cursor = 'se-resize'; else if(element == _bottomEdge) document.body.style.cursor = 's-resize'; else if(element == _rightEdge) document.body.style.cursor = 'e-resize'; } function moveEnd(element) { UpdatePositions(); document.body.style.cursor = 'auto'; } function rightHandleMove(newPos, element) { _width = newPos.X + EDGE_THICKNESS; UpdatePositions(); } function bottomHandleMove(newPos, element) { _height = newPos.Y + EDGE_THICKNESS; UpdatePositions(); } function cornerHandleMove(newPos, element) { _width = newPos.X + EDGE_THICKNESS; _height = newPos.Y + EDGE_THICKNESS; UpdatePositions(); } function UpdateBounds() { _rightHandleDrag.GetLowerBound().X = _minWidth - EDGE_THICKNESS; _rightHandleDrag.GetUpperBound().X = _maxWidth - EDGE_THICKNESS; _bottomHandleDrag.GetLowerBound().Y = _minHeight - EDGE_THICKNESS; _bottomHandleDrag.GetUpperBound().Y = _maxHeight - EDGE_THICKNESS; _cornerHandleDrag.GetLowerBound().X = _minWidth - EDGE_THICKNESS; _cornerHandleDrag.GetUpperBound().X = _maxWidth - EDGE_THICKNESS; _cornerHandleDrag.GetLowerBound().Y = _minHeight - EDGE_THICKNESS; _cornerHandleDrag.GetUpperBound().Y = _maxHeight - EDGE_THICKNESS; } function UpdatePositions() { if(_width < _minWidth) _width = _minWidth; if(_width > _maxWidth) _width = _maxWidth; if(_height < _minHeight) _height = _minHeight; if(_height > _maxHeight) _height = _maxHeight; _container.style.width = _width + 'px'; _container.style.height = _height + 'px'; _content.style.width = (_width - TEXTDIFF) + 'px'; _content.style.height = (_height - TEXTDIFF) + 'px'; _rightEdge.style.left = (_width - EDGEDIFFPOS) + 'px'; _rightEdge.style.height = (_height - EDGEDIFFSIZE) + 'px'; _bottomEdge.style.top = (_height - EDGEDIFFPOS) + 'px'; _bottomEdge.style.width = (_width - EDGEDIFFSIZE) + 'px'; _cornerHandle.style.left = _rightEdge.style.left; _cornerHandle.style.top = _bottomEdge.style.top; _topEdge.style.width = (_width - EDGE_THICKNESS) + 'px'; _leftEdge.style.height = (_height - EDGE_THICKNESS) + 'px'; _rightHandle.style.top = ((_height - MINSIZE) / 2) + 'px'; _bottomHandle.style.left = ((_width - MINSIZE) / 2) + 'px'; } function Listen(yes) { if(yes) { _rightHandleDrag.StartListening(); _bottomHandleDrag.StartListening(); _cornerHandleDrag.StartListening(); } else { _rightHandleDrag.StopListening(); _bottomHandleDrag.StopListening(); _cornerHandleDrag.StopListening(); } } function AddToDocument() { if(typeof(parent) == "string") parent = document.getElementById(parent); if(parent == null || parent.appendChild == null) { var id = "sotc_re_" + new Date().getTime() + Math.round(Math.random()*2147483647); while(document.getElementById(id) != null) id += Math.round(Math.random()*2147483647); document.write('<span id="'+ id + '"></span>'); element = document.getElementById(id); element.parentNode.replaceChild(_container, element); } else { parent.appendChild(_container); } Listen(true); } this.StartListening = function() { Listen(true); } this.StopListening = function() { Listen(false); } this.GetContainer = function() { return _container; } this.GetContentElement = function() { return _content; } this.GetMinWidth = function() { return _minWidth; } this.GetMaxWidth = function() { return _maxWidth; } this.GetCurrentWidth = function() { return _width; } this.GetMinHeight = function() { return _minHeight; } this.GetMaxHeight = function() { return _maxHeight; } this.GetCurrentHeight = function() { return _height; } this.SetMinWidth = function(value) { value = parseInt(value); if(isNaN(value) || value < MINSIZE) value = MINSIZE; _minWidth = value; UpdatePositions(); UpdateBounds(); } this.SetMaxWidth = function(value) { value = parseInt(value); if(isNaN(value) || value < MINSIZE) value = MINSIZE; _maxWidth = value; UpdatePositions(); UpdateBounds(); } this.SetCurrentWidth = function(value) { value = parseInt(value); if(isNaN(value)) value = 0; _width = value; UpdatePositions(); } this.SetMinHeight = function(value) { value = parseInt(value); if(isNaN(value) || value < MINSIZE) value = MINSIZE; _minHeight = value; UpdatePositions(); UpdateBounds(); } this.SetMaxHeight = function(value) { value = parseInt(value); if(isNaN(value) || value < MINSIZE) value = MINSIZE; _maxHeight = value; UpdatePositions(); UpdateBounds(); } this.SetCurrentHeight = function(value) { value = parseInt(value); if(isNaN(value)) value = 0; _height = value; UpdatePositions(); } } I have a blog with a two-column setup... a sidebar and a main section for posting articles, but encapsulated in a div wrap. I am creating a mobile site and want to: 1) remove/hide the sidebar 2) move the main section to the center for easy reading My issue is that I have tried CSS without success in accomplishing BOTH tasks. I easily can hide the sidebar using various methods, but the main section will not move to the center of the wrap, presumably because the sidebar is still there but not visible. So I went the JavaScript route instead with the following: Code: <script type="text/javascript"> <!-- if (screen.width <= 699) { var wrap = document.getElementById('wrap'); var sidebar = document.getElementById('sidebar'); wrap.removeChild(sidebar); wrap.style.background = "inherit"; } --> </script> Now my questions is... since the element is now removed, how do I move the main section to the center? I tried grabbing the main section with its id and floating it left (just to play around and see if it would move) and that didn't do anything. Any help would be appreciated. Hi, I'm trying to build this grease monkey script, which runs on all pages, and simply deletes all iframes that have no content loaded in them. I have a hosts file with many ad servers which are blocked. This leaves ugly holes in the page and I am trying to remove these empty iframes. Plz help I found a way to add a caption to Facebox using the following code: Code: $('a[rel*=facebox-cap]').mousedown(function() { var caption = $(this).attr('title'); $().one('reveal.facebox', function() { $('<span class="caption">' + caption + '</span>').appendTo('.header'); }); }); This displays the caption (from the title attribute) but as you click on other links that use rel="facebox-cap" title="whatever", the previous caption isn't removed. In other words, the script keeps appending captions without removing any. Can someone assist with the functions above to fix this? Does .hide or .remove need to be added? I'm trying to learn JS but my "designer" mind is having a tough time lol. Hi. I'm trying to get my script below working. I've managed to get it to add fields dynamically but the remove function isn't right... and I can't think of a way round it. any ideas? also.. how can i incorporate a way for a limit on the number of fields that can be added? cheers! any help would be very appreciated. Code: <script type="text/javascript"> function addInput() { var x = document.getElementById("inputs"); x.innerHTML += "<input type=\"text\" />"; } function removeInput() { var x = document.getElementById("inputs"); x.innerHTML -= "<input type=\"text\" />"; } </script> <input type="button" value="add field" onclick="addInput();" /> <input type="button" value="remove field" onclick="removeInput();" /> <div id="inputs"></div> .. update: ah, i've just looked into the operators in more details and -= is just for numbers... so this won't work. i presume this is going to be the wrong method then. Hi I read a lot of data from excel sheets into JS arrays. I have a situation where i have name, hours, product id and other few entries. I have all these details as array in array concept. eg. array.push(new Array(name,hours,pid,price,place)) Redundant entries that include same names,pid, places will be found in the array. My prob is to sum up all the hours of the records that belong to same name and product id and store the unique records in one array and ofcourse the hours column sumed up. name pid hours place ---------------------- aaaa 11 100 chennai aaaa 11 200 chennai cccc 22 30 coimbatore dddd 33 45 chennai dddd 22 100 chennai dddd 33 200 chennai my output should be name pid hours place --------------------- aaaa 11 300 chennai cccc 22 30 coimbatore dddd 33 245 chennai dddd 22 100 chennai can anyone help?? Can someone please help me with my JavaScript, my code below works for BillingAddress2 but it doesn't for ShippingAddress2 (when you click off the ShippingAddress2 form field it alerts undefined) these form fields are in the same form JS Code: $("input").blur(function () { if($(this).val() == '') { if($(this).attr("id") != 'BillingAddress2' && $(this).attr("id") != 'ShippingAddress2') { alert($(this).attr("item")); } } }); html parts of the form Code: Billing Address Line 2:<br /><INPUT type="text" id="BillingAddress2" name="BillingAddress2" title="text" class="notrequired" value="<%=Session("BillingAddress2")%>" maxlength="30" tabindex="4"> Shipping Address 2:<br /><INPUT type="text" id="ShippingAddress2" name="ShippingAddress2" title="" class="notrequired" value="<%=Session("ShippingAddress2")%>" maxlength="30" tabindex="12"> Hey all, Right now I have a website I am working on, dollarwisepromos.com, and I am working on an image rollover script. If you visit the link: http://www.dollarwisepromos.com/inde...detail&p=33137 You will see the four images beneath the main image and it has a black border around them. I cannot find the code that sets that border. I'm not sure if it is a PHP issue or a javascript issue, but I'm thinking its a javascript issue. plugin_rollover_images.html Code: <script type="text/javascript" language="JavaScript"> <!-- // Default = new Image(); Default.src = "$additional[default]"; $additional[preload] function ImageRollOver (dir, id) { if (dir == 'on') { document.images.detail_image.src = eval("Image"+id+".src"); document.images.detail_image.width = eval("Image"+id+".width"); document.images.detail_image.height = eval("Image"+id+".height"); } else if (dir == 'off') { document.images.detail_image.src = Default.src; document.images.detail_image.width = Default.width; document.images.detail_image.height = Default.height; } } //--> </script> <table style="border-color:#ffffff;" border="0" cellspacing="0" cellpadding="1"> <tr> $additional[data] </tr> </table> plugin_rollover_images.php Code: <?PHP /* include/plugins/plugin_rollover_images.php - 10/02/2009 - 8:24pm PST - 4.2.1 SunShop Shopping Cart http://www.turnkeywebtools.com/sunshop/ Copyright (c) 2001-2009 Turnkey Web Tools, Inc. */ if (!defined('SS_SESSION_START')) { $abs_path = dirname(dirname(dirname(__FILE__))); include_once $abs_path."/global.php"; } $ADDON_NAME = "Product Detail Rollover Images"; $ADDON_VERSION = "1.0"; $CLASS_NAME = "rollover_images"; class rollover_images { var $output; function rollover_images ($class_vars) { $this->class_vars = $class_vars; } function render () { global $DB_site, $dbprefix, $settings, $lang, $abs_path; $additional = array(); $num = 1; $default = $DB_site->query_first("SELECT * FROM `".$dbprefix."products` WHERE `id`='".$_GET[p]."'"); $additional['default'] = $settings[productpath].$default[detail_image]; $items = $DB_site->query("SELECT * FROM `".$dbprefix."products_images` WHERE `productid`='".$_GET[p]."'"); while ($image = $DB_site->fetch_assoc($items)) { include_once $abs_path."/include/classes/class.imageresize.php"; $simulate = new image_resize(); $simulate->resize($abs_path.'/'.$settings[productpath].$image[large_image], $settings['auto_detail_height'], $settings['auto_detail_width'], false); $additional[preload] .= 'Image'.$image[id].' = new Image('.$simulate->rdata[new_w].','.$simulate->rdata[new_h].');'."\n".'Image'.$image[id].'.src = "'.$settings[shopurl].'include/plugins/plugin_rollover_images.php?img='.$image[id].'&w='.$settings['auto_detail_width'].'&h='.$settings['auto_detail_height'].'"'."\n"; $additional[data] .= template('plugin_rollover_images_item.html', array('image' => array('product' => $_GET[p], 'location' => $settings[shopurl].'include/plugins/plugin_rollover_images.php?img='.$image[id].'&w='.$this->class_vars[max_width].'&h='.$this->class_vars[max_height], 'size' => '', 'id' => $image[id]))); if ($num == $this->class_vars[number]) { $additional[data] .= "\n</tr><tr>\n"; $num = 1; } else $num++; } return template('plugin_rollover_images.html', array('additional' => $additional)); } function install () { global $DB_site, $dbprefix; $DB_site->query("INSERT INTO ".$dbprefix."modules_plugins set `module`='rollover_images', `internalname`='enabled', `name`='Enabled', `moptions`='', `options`='0::1->Off::On', `value`='1', `help`='', `size`='0', `dorder`='1', `field_type`='dropdown'"); $DB_site->query("INSERT INTO ".$dbprefix."modules_plugins set `module`='rollover_images', `internalname`='number', `name`='Images Per Row', `moptions`='', `options`='', `value`='3', `help`='', `size`='3', `dorder`='2', `field_type`='textbox'"); $DB_site->query("INSERT INTO ".$dbprefix."modules_plugins set `module`='rollover_images', `internalname`='max_width', `name`='Maximum Thumb Width', `moptions`='', `options`='', `value`='75', `help`='', `size`='3', `dorder`='3', `field_type`='textbox'"); $DB_site->query("INSERT INTO ".$dbprefix."modules_plugins set `module`='rollover_images', `internalname`='max_height', `name`='Maximum Thumb Height', `moptions`='', `options`='', `value`='75', `help`='', `size`='3', `dorder`='4', `field_type`='textbox'"); } function uninstall () { global $DB_site, $dbprefix; $DB_site->query("DELETE FROM ".$dbprefix."modules_plugins where `module`='rollover_images'"); } } if (is_numeric($_GET[img]) && is_numeric($_GET[w]) && is_numeric($_GET[h])) { $image = $DB_site->query_first("SELECT * FROM `".$dbprefix."products_images` WHERE `id`='".$_GET[img]."'"); include_once $abs_path."/include/classes/class.imageresize.php"; $resize = new image_resize(); $resize->resize_and_display($abs_path.'/'.$settings[productpath].$image[large_image], $_GET['h'], $_GET['w']); exit; } ?> Hello, I'm a complete noobie to JavaScript so my apologies in advance if I'm asking something totally stupid. I'm trying to get a website up and running using WordPress. A particular plug-in for WP makes the site I'm building mobile-phone etc friendly - and I have a question regarding some JS that is part of the plug-in. Before people think badly of me, the licensing terms of the plug-in allow users to modify the code, but the suppliers will not respond for requests for help in doing so. I'm therefore having to see whether I can figure out how to do this myself. If I've understood correctly, the extract of code below will show/hide a search box when the user clicks on the search button on the menu page. However, I would like the search box to always be visible when the user visits the menu page (but not on any other pages). With the extract provided, could anybody tell me please, how to change the code to keep the search box permanently visible? With many thanks in advance Darren PS I've only selected what I think are the important lines of code - hope I've included enough .... Code: var touchJS = jQuery.noConflict(); /* Toggling the search bar from within the menu */ touchJS( 'a#tab-search' ).unbind( 'click' ).click( function() { touchJS( '#search-bar' ).toggleClass( 'show-search' ); touchJS( this ).toggleClass( 'search-toggle-open' ); if ( touchJS( '#search-bar' ).hasClass( 'show-search' ) ) { touchJS( 'input#search-input' ).focus(); } else{ touchJS( 'input#search-input' ).blur(); } return false; }); I simply cannot figure this out, so I figure I'd ask the pros for some help Is it possible to use a regular expression to replace infinitely-nested parentheses and their contents with " " (a blank space)? For example: (This (is (a (sentence) with) lots of nested) parentheses) Thanks Hi, I have three buttons on my site. When a button is clicked it pulls down a javascript pop up questionaire box. When the person closes the box they're redirected to Paypal depending on which button they clicked, hence the 3 if else options toward the end of this script. How might the following code be rewritten so that the pop up box no longer exists, but so the options still function and redirect correctly to Paypal? Code: <script type="text/javascript"> function popup(option){ Modalbox.show('<div><p>How did you learn about Dinosaur Pop?</p> <textarea id="message" name="message" rows="4" cols="30"></textarea><br><br><input type="button" value="Send" onclick="Modalbox.hide(); redirect(' + option + ');" /> or <input type="button" value="No, leave it!" onclick="Modalbox.hide(); redirect(' + option + ');" /></div>', {title: "Question", width: 300}); return false; } function redirect(option) { var messageObj = document.getElementById("message"); if (messageObj != null && messageObj.value != "") { var url = 'submit_message.php?message=' + encodeURIComponent(messageObj.value); new Ajax.Request(url, { method: 'get', onSuccess: function(transport) { } }) } if (option == 1) document._xclick.submit(); else if (option == 2) document._xclick1.submit(); else if (option == 3) window.location = "download/Dinosaur Pop Book.pdf"; } </script> |