JavaScript - Increment Width Of Div Onclick
Similar TutorialsI'm super stuck. Is it possible to increment in a for...in loop? This is what I'm trying to do, but the increments aren't happening. Any help or advice is much appreciated!! Code: var i_1 = 3; var i_2 = 8; for (var key in data.id) { if ([key] < '4') { attach_to = '.active'; } else if ([key] > i_1 && [key] < i_2) { attach_to = '.item_' + i_1; } document.write(attach_to + '<br/>' + i_1+ '<br/>'); i_1 + 4; i_2 + 4; } I need to develop this feature for a charity site displays a number that counts up 1 every 15 seconds. This is to show how many times a kid is abused in this country. I've been researching this and haven't been able to find anything helpful yet. I figured this piece of code was a good start: function doSomething() { setTimeout('doSomething()',15000); } Hello to codingforums, This is my beginning posting here as I am mostly reading, compiling and so.. There are multiple forms in the script generated page, that has to update via script url - and the problem is probably looping through form script -so please help with this as only first form submit correctly while other pass value from 1st - need looping method or condition? Code: <SCRIPT language=Javascript> function getMessage(hwm) { loc = './index.php?p=ordersBasket&sOption=add'; jlc = document.getElementById('qty'); jloc = document.getElementById('pid'); nloc = loc+ '&iProduct='+jloc.value+ '&iQuantity='+jlc.value; self.location = nloc; } </SCRIPT> <FORM id="123" name="123"> <input type="button" id="minus" value="-" onClick="qty.value = (qty.value-1)"> <input type="button" value="+" onClick="qty.value = (+qty.value+1)"> <input type="text" size="4" id="qty" name="name" value="3" /> <INPUT TYPE="text" id="pid" VALUE="123" /> <INPUT TYPE="button" value="order" onclick="getMessage(this)"> </FORM> <FORM id="456" name="456"> <input type="button" id="minus" value="-" onClick="qty.value = (qty.value-1)"> <input type="button" value="+" onClick="qty.value = (+qty.value+1)"> <input type="text" size="4" id="qty" name="name" value="3" /> <INPUT TYPE="text" id="pid" VALUE="456" /> <INPUT TYPE="button" value="order" onclick="getMessage(this)"> </FORM> <FORM id="789" name="789"> <input type="button" id="minus" value="-" onClick="qty.value = (qty.value-1)"> <input type="button" value="+" onClick="qty.value = (+qty.value+1)"> <input type="text" size="4" id="qty" name="name" value="3" /> <INPUT TYPE="text" id="pid" VALUE="789" /> <INPUT TYPE="button" value="order" onclick="getMessage(this)"> </FORM> Hi again, I have written the follow code. It is meant to (when finished) output a table showing each member of the array PEOPLE. There Income ,there Tax bracket and there finally there total tax paid. The calulations in the if-else statements are correct. I have to create a loop that will go through the if else statements equal to the amount of the people in the array (This is no problem I have done this earlier) My problem is when I try to add each element (PEOPLE) to the table or there indivual tax outcomes. Can I create a loop and increment in the elements each iteration to put on the table?(for there names) As I am not meant to store each iteration,it is to write to the table each time. This is the code I'm working on with out the loop. [CODE]<html> <head> <script> PEOPLE = new Array ('Mr Dobbaleana','David Lai','Richard Watson','Leigh Brookshaw','Stijn Dekeyser'); BRACKET_LIMITS = new Array (0,6000,37000,80000,180000); MIN_TAX = new Array (0.00,0.00,4650.00,17550.00,54550.00); TAX_RATES = new Array (0.00,0.15,0.30,0.37,0.45); var taxBracket =0; var taxToPay =0; document.writeln ('<table border="2">'); document.writeln ('<tr>'); document.writeln ('<th>'+('Name')+'</th>'); document.writeln ('<th>'+('Income')+'</th>'); document.writeln ('<th>'+('Bracket')+'</th>'); document.writeln ('<th>'+('Tax')+'</th>'); document.writeln ('</tr>'); var currentPersonInRow = parseInt(prompt('Enter your income')); if (currentPersonInRow <= BRACKET_LIMITS[1]){ taxBracket=BRACKET_LIMITS.indexOf(0); taxToPay = (currentPersonInRow-BRACKET_LIMITS[0])*TAX_RATES[0]+MIN_TAX[0]; // will give total taxable income } else if (currentPersonInRow<=BRACKET_LIMITS[2]){ taxBracket=BRACKET_LIMITS.indexOf(6000); taxToPay = (currentPersonInRow-BRACKET_LIMITS[1])*TAX_RATES[1]+MIN_TAX[1]; // will give total taxable income } else if (currentPersonInRow<=BRACKET_LIMITS[3]){ taxBracket=BRACKET_LIMITS.indexOf(37000); taxToPay = (currentPersonInRow-BRACKET_LIMITS[2])*TAX_RATES[2]+MIN_TAX[2]; // will give total taxable income } else if (currentPersonInRow<=BRACKET_LIMITS[4]){ taxBracket=BRACKET_LIMITS.indexOf(80000); taxToPay = (currentPersonInRow-BRACKET_LIMITS[3])*TAX_RATES[3]+MIN_TAX[3]; // will give total taxable income } else { taxBracket=BRACKET_LIMITS.indexOf(180000); taxToPay = (currentPersonInRow-BRACKET_LIMITS[4])*TAX_RATES[4]+MIN_TAX[4]; // will give total taxable income } document.writeln ('<tr>'); document.writeln ('<td>'+(PEOPLE[0])+'</td>'); document.writeln ('<td>'+('$')+(currentPersonInRow)+'</td>'); document.writeln ('<td>'+(taxBracket)+'</td>'); document.writeln ('<td>'+('$')+(taxToPay)+'</td>'); document.writeln ('</tr>'); </script> </head> <body> </body> </html> [/ICODE] OK this is the code I wrote and it works but doesnt meet the assigment critera. Code: <html> <head> <script> PEOPLE = new Array ('Mr Dobbaleana','David Lai','Richard Watson','Leigh Brookshaw','Stijn Dekeyser'); BRACKET_LIMITS = new Array (0,6000,37000,80000,180000); MIN_TAX = new Array (0.00,0.00,4650.00,17550.00,54550.00); TAX_RATES = new Array (0.00,0.15,0.30,0.37,0.45); var personZero = parseFloat( prompt ((' Enter income for ')+(PEOPLE[0]),('0.00'))); var personOne = parseFloat (prompt ((' Enter income for ')+(PEOPLE[1]),('0.00'))); var personTwo = parseFloat (prompt ((' Enter income for ')+(PEOPLE[2]),('0.00'))); var personThree = parseFloat (prompt ((' Enter income for ')+(PEOPLE[3]),('0.00'))); var personFour = parseFloat(prompt ((' Enter income for ')+(PEOPLE[4]),('0.00'))); if ((personZero >= BRACKET_LIMITS[0])&&(personZero <= BRACKET_LIMITS[1])) { var cal1= (personZero-BRACKET_LIMITS[0]); var cal2= (cal1*TAX_RATES[0]); var totalTaxPaid = (cal2+MIN_TAX[0]); var taxBracketOfPeople1=0; alert(totalTaxPaid); } if ((personZero >= BRACKET_LIMITS[1])&&(personZero <= BRACKET_LIMITS[2])) { var cal1= (personZero-BRACKET_LIMITS[1]); var cal2= (cal1*TAX_RATES[1]); var totalTaxPaid = (cal2+MIN_TAX[1]); var taxBracketOfPeople1=1; alert(totalTaxPaid); } if ((personZero >= BRACKET_LIMITS[2])&&(personZero <= BRACKET_LIMITS[3])) { var cal1= (personZero-BRACKET_LIMITS[2]); var cal2= (cal1*TAX_RATES[2]); var totalTaxPaid = (cal2+MIN_TAX[2]); var taxBracketOfPeople1=2; alert(totalTaxPaid); } if ((personZero >= BRACKET_LIMITS[3])&&(personZero <= BRACKET_LIMITS[4])) { var cal1= (personZero-BRACKET_LIMITS[3]); var cal2= (cal1*TAX_RATES[3]); var totalTaxPaid = (cal2+MIN_TAX[3]); var taxBracketOfPeople1=3; alert(totalTaxPaid); } if ((personZero >= BRACKET_LIMITS[4])) { var cal1= (personZero-BRACKET_LIMITS[4]); var cal2= (cal1*TAX_RATES[4]); var totalTaxPaid = (cal2+MIN_TAX[4]); var taxBracketOfPeople1=4; alert(totalTaxPaid); } if ((personOne >= BRACKET_LIMITS[0])&&(personOne <= BRACKET_LIMITS[1])) { var cal1= (personOne-BRACKET_LIMITS[0]); var cal2= (cal1*TAX_RATES[0]); var totalTaxPaid1 = (cal2+MIN_TAX[0]); var taxBracketOfPeople2=0; alert(totalTaxPaid1); } if ((personOne >= BRACKET_LIMITS[1])&&(personOne <= BRACKET_LIMITS[2])) { var cal1= (personOne-BRACKET_LIMITS[1]); var cal2= (cal1*TAX_RATES[1]); var totalTaxPaid1 = (cal2+MIN_TAX[1]); var taxBracketOfPeople2=1; alert(totalTaxPaid1); } if ((personOne >= BRACKET_LIMITS[2])&&(personOne <= BRACKET_LIMITS[3])) { var cal1= (personOne-BRACKET_LIMITS[2]); var cal2= (cal1*TAX_RATES[2]); var totalTaxPaid1 = (cal2+MIN_TAX[2]); var taxBracketOfPeople2=2; alert(totalTaxPaid1); } if ((personOne >= BRACKET_LIMITS[3])&&(personOne <= BRACKET_LIMITS[4])) { var cal1= (personOne-BRACKET_LIMITS[3]); var cal2= (cal1*TAX_RATES[3]); var totalTaxPaid1 = (cal2+MIN_TAX[3]); var taxBracketOfPeople2=3; alert(totalTaxPaid1); } if ((personOne >= BRACKET_LIMITS[4])) { var cal1= (personOne-BRACKET_LIMITS[4]); var cal2= (cal1*TAX_RATES[4]); var totalTaxPaid1 = (cal2+MIN_TAX[4]); var taxBracketOfPeople2=4; alert(totalTaxPaid1); } if ((personTwo >= BRACKET_LIMITS[0])&&(personTwo <= BRACKET_LIMITS[1])) { var cal1= (personTwo-BRACKET_LIMITS[0]); var cal2= (cal1*TAX_RATES[0]); var totalTaxPaid2 = (cal2+MIN_TAX[0]); var taxBracketOfPeople3=0; alert(totalTaxPaid2); } if ((personTwo >= BRACKET_LIMITS[1])&&(personTwo <= BRACKET_LIMITS[2])) { var cal1= (personTwo-BRACKET_LIMITS[1]); var cal2= (cal1*TAX_RATES[1]); var totalTaxPaid2 = (cal2+MIN_TAX[1]); var taxBracketOfPeople3=1; alert(totalTaxPaid2); } if ((personTwo >= BRACKET_LIMITS[2])&&(personTwo <= BRACKET_LIMITS[3])) { var cal1= (personTwo-BRACKET_LIMITS[2]); var cal2= (cal1*TAX_RATES[2]); var totalTaxPaid2 = (cal2+MIN_TAX[2]); var taxBracketOfPeople3=2; alert(totalTaxPaid2); } if ((personTwo >= BRACKET_LIMITS[3])&&(personTwo <= BRACKET_LIMITS[4])) { var cal1= (personTwo-BRACKET_LIMITS[3]); var cal2= (cal1*TAX_RATES[3]); var totalTaxPaid2 = (cal2+MIN_TAX[3]); var taxBracketOfPeople3=3; alert(totalTaxPaid2); } if ((personTwo >= BRACKET_LIMITS[4])) { var cal1= (personTwo-BRACKET_LIMITS[4]); var cal2= (cal1*TAX_RATES[4]); var totalTaxPaid2 = (cal2+MIN_TAX[4]); var taxBracketOfPeople3=4; alert(totalTaxPaid2); } if ((personThree >= BRACKET_LIMITS[0])&&(personThree <= BRACKET_LIMITS[1])) { var cal1= (personThree-BRACKET_LIMITS[0]); var cal2= (cal1*TAX_RATES[0]); var totalTaxPaid3 = (cal2+MIN_TAX[0]); var taxBracketOfPeople4=0; alert(totalTaxPaid3); } if ((personThree >= BRACKET_LIMITS[1])&&(personThree <= BRACKET_LIMITS[2])) { var cal1= (personThree-BRACKET_LIMITS[1]); var cal2= (cal1*TAX_RATES[1]); var totalTaxPaid3 = (cal2+MIN_TAX[1]); var taxBracketOfPeople4=1; alert(totalTaxPaid3); } if ((personThree >= BRACKET_LIMITS[2])&&(personThree <= BRACKET_LIMITS[3])) { var cal1= (personThree-BRACKET_LIMITS[2]); var cal2= (cal1*TAX_RATES[2]); var totalTaxPaid3 = (cal2+MIN_TAX[2]); var taxBracketOfPeople4=2; alert(totalTaxPaid3); } if ((personThree >= BRACKET_LIMITS[3])&&(personThree <= BRACKET_LIMITS[4])) { var cal1= (personThree-BRACKET_LIMITS[3]); var cal2= (cal1*TAX_RATES[3]); var totalTaxPaid3 = (cal2+MIN_TAX[3]); var taxBracketOfPeople4=3; alert(totalTaxPaid3); } if ((personThree >= BRACKET_LIMITS[4])) { var cal1= (personThree-BRACKET_LIMITS[4]); var cal2= (cal1*TAX_RATES[4]); var totalTaxPaid3 = (cal2+MIN_TAX[4]); var taxBracketOfPeople4=4; alert(totalTaxPaid3); } if ((personFour >= BRACKET_LIMITS[0])&&(personFour <= BRACKET_LIMITS[1])) { var cal1= (personFour-BRACKET_LIMITS[0]); var cal2= (cal1*TAX_RATES[0]); var totalTaxPaid4 = (cal2+MIN_TAX[0]); var taxBracketOfPeople5=0; alert(totalTaxPaid4); } if ((personFour >= BRACKET_LIMITS[1])&&(personFour <= BRACKET_LIMITS[2])) { var cal1= (personFour-BRACKET_LIMITS[1]); var cal2= (cal1*TAX_RATES[1]); var totalTaxPaid4 = (cal2+MIN_TAX[1]); var taxBracketOfPeople5=1; alert(totalTaxPaid4); } if ((personFour >= BRACKET_LIMITS[2])&&(personFour <= BRACKET_LIMITS[3])) { var cal1= (personFour-BRACKET_LIMITS[2]); var cal2= (cal1*TAX_RATES[2]); var totalTaxPaid4 = (cal2+MIN_TAX[2]); var taxBracketOfPeople5=2; alert(totalTaxPaid4); } if ((personFour >= BRACKET_LIMITS[3])&&(personFour <= BRACKET_LIMITS[4])) { var cal1= (personFour-BRACKET_LIMITS[3]); var cal2= (cal1*TAX_RATES[3]); var totalTaxPaid4 = (cal2+MIN_TAX[3]); var taxBracketOfPeople5=3; alert(totalTaxPaid4); } if ((personFour >= BRACKET_LIMITS[4])) { var cal1= (personFour-BRACKET_LIMITS[4]); var cal2= (cal1*TAX_RATES[4]); var totalTaxPaid4 = (cal2+MIN_TAX[4]); var taxBracketOfPeople5=4; alert(totalTaxPaid4); } </script> </head> <body> <script> document.writeln ('<table border="2">'); document.writeln ('<tr>'); document.writeln ('<th>'+('Name')+'</th>'); document.writeln ('<th>'+('Income')+'</th>'); document.writeln ('<th>'+('Bracket')+'</th>'); document.writeln ('<th>'+('Tax')+'</th>'); document.writeln ('</tr>'); document.writeln ('<tr>'); document.writeln ('<td>'+(PEOPLE[0])+'</td>'); document.writeln ('<td>'+('$')+(personZero)+'</td>'); document.writeln ('<td>'+(taxBracketOfPeople1)+'</td>'); document.writeln ('<td>'+('$')+(totalTaxPaid)+'</td>'); document.writeln ('</tr>'); document.writeln ('<tr>'); document.writeln ('<td>'+(PEOPLE[1])+'</td>'); document.writeln ('<td>'+(personOne)+'</td>'); document.writeln ('<td>'+(taxBracketOfPeople2)+'</td>'); document.writeln ('<td>'+(totalTaxPaid1)+'</td>'); document.writeln ('</tr>'); document.writeln ('<tr>'); document.writeln ('<td>'+(PEOPLE[2])+'</td>'); document.writeln ('<td>'+(personTwo)+'</td>'); document.writeln ('<td>'+(taxBracketOfPeople3)+'</td>'); document.writeln ('<td>'+(totalTaxPaid2)+'</td>'); document.writeln ('</tr>'); document.writeln ('<tr>'); document.writeln ('<td>'+(PEOPLE[3])+'</td>'); document.writeln ('<td>'+(personThree)+'</td>'); document.writeln ('<td>'+(taxBracketOfPeople4)+'</td>'); document.writeln ('<td>'+(totalTaxPaid3)+'</td>'); document.writeln ('</tr>'); document.writeln ('<tr>'); document.writeln ('<td>'+(PEOPLE[4])+'</td>'); document.writeln ('<td>'+(personFour)+'</td>'); document.writeln ('<td>'+(taxBracketOfPeople5)+'</td>'); document.writeln ('<td>'+(totalTaxPaid4)+'</td>'); document.writeln ('</tr>'); document.writeln('</table>'); </script> </body> </html> Hope that wasnt to confusing Thanks heaps Shaynedarcy First off, i have no idea what to do, because when i get beyond the realm of html/css, vb and php (some) i become lost. I hope someone can help me achieve this because i have no idea what i'm doing, and I've been at it for 2 weeks and no money to hire someone to do this for me. If you ever been in my situation, you know exactly how i feel. I have no code of my own to show you, but hope someone can still help me. I'm have a number 0.0000000, and every min i need that number to increase to 0.0000000, than to 0.0000002 and so on and so forth. Every time i click a button, whatever the number has risen to, it will reset it back down to 0.0000000. Can someone help me out with this? Hello. Is the any chance to increment IP address in Javascript ? For example 11.12.13.14 plus 1 will be 11.12.13.15 I've started to modify my old script: Code: var ipa = 10.11.12.13; var partsa = []; var tempa = ipa; for ( var p = 0; p < 3; ++p ) { var dot1t = tempa.indexOf("."); partsa[p] = tempa.substring(0,dot1t); tempa = tempa.substring(dot1t+1); } partsa[3] = tempa; But do not know how to display ip like: ( parts1[0].parts1[1].parts1[2].parts1[3]+1 ) Please help. Leos Hello, let me try to explain better what I'm trying to do. I'm a real newbie I don't know much javascript but I understand more or less the logic behind it... tell me if this solution should work and if you know how to do it please show me. I have this page. http://felixdeportu.com/5/ The images are inside a div#content div#photo. I need to make div#photo's width to match the total width measurement of all the images it contains. If you load the page and you don't touch the size, it will work fine... but that's not realistic. If I resize the page, which will happen often on this kind of page (I'm assuming), the whole thing goes haywire (try it, scroll to the last image and resize the page you'll see what I mean). What can I do? Is my idea the right solution? Am I not explaining this clearly enough? Let me know please, I'm desperate. I've been trying to get CSS to do this for me for 3 hours now. Nothing works... I'm currently working on a project and I am doing a bunch of image switching. I'm having a problem with the following... I have seven medium image objects and one small one. One is at the top and the other 7 are below. When one of the 7 is clicked, it then becomes the one up top and the one up top then takes the place of the image clicked. This needs to be able to happen no matter which of the seven i click. Also when you click one of the seven it runs a script to change 9 other images in the center of the page. this isnt too important because i have it working already. What i have is, each of the seven images run their function that changes the 9 center images and then it runs another function. What i need is for that function to determine which company for example(shaws, lowes, target) the top image belongs to and replace the image that was clicked with the top one. But i also need to replace the NAME="" and ONCLICK="function()" with the proper ones for the original company up top. Please if you can understand what im trying to do let me know, if you need further clarification i can do so. i can draw a picture of what im trying to do or the layout if needed but i cant necessarily show anyone the project due to a non-disclosure. The following code results in the exact same output. Is there an advantage to using i++ over ++i (or visa-versa) in the loop? Code: <script type="text/javascript"> var tarr1 = []; for (var i=0; i<10; i++) { tarr1.push(i); } var tarr2 = []; for (var i=0; i<10; ++i) { tarr2.push(i); } alert(tarr1.join(',')+'\n'+tarr2.join(',')); </script> Similar question for the increment method in the following: Code: <script type="text/javascript"> var tarr1 = []; var i=0; do { tarr1.push(i); i++; } while (i<10); var tarr2 = []; var j=0; do { tarr2.push(j); ++j; } while (j<10); alert(tarr1.join(',')+'\n'+tarr2.join(',')); </script> I have modified a free JS function from he http://www.tangorangers.com/examples...post/index.php To dynamically add text fields to the form. My work-in-progress version is he http://jimpix.co.uk/junk/test/6.html On the form, I have a hidden text field: Code: <input type="hidden" name="hiddenCount" value="" /> What I'd like to do is to increment the hiddenCount each time the "Add" fields button is clicked. This is the button: <input id="add_contact()" onclick="add_contact()" value="Add" type="button"> And this is the JS function: Code: var contact_counter = 0; function add_contact() { if (contact_counter < 9) { contact_counter++; var newFields = document.getElementById('add_contact').cloneNode(true); newFields.id = 'contact'; newFields.style.display = 'block'; var newField = newFields.childNodes; for (var i=0;i<newField.length;i++) { var theName = newField[i].name if (theName) newField[i].name = theName + contact_counter; } var insertHere = document.getElementById('add_contact'); insertHere.parentNode.insertBefore(newFields,insertHere); } } I'm new to JS. I could just about edit the JS function to slightly modify it from the tangorangers version (I only changed it v. slightly). To somehow increment the value in the hidden field each time the button is pressed is beyond me though! Any advice much appreciated. Thanks Example of my problem: HERE The code is derived from a site offering some advice for javascript: HERE The example of mine tries to use an image as hyperlink... and use mouse events for certain actions. Aside from possibly being the worst javascript code humanly possible...once I slaughtered the code from the site mentioned above, I'm not getting how to arrange things so that a mouse over event switches an image , as does mousedn and mouseup, And (and this is the rub for me) repeating the setup in the same way for a list of quicktime video links. I've got it to work for one row in the table I'm using to attempt some kind of formatting. I'm told `css' is a better way for that but I'm completely ignorant about how to use `css'. So, for now I'm using a table to get at the javascript question. The idea is for viewer to see three red dots at the front of each item being offered. Mouseover is supposed to switch to a green arrow... mousedn is supposed to switch to 2 check marks. I wanted the check marks to persist, so for lack of knowing how to accomplish that... I let mouseup call the same image. (the check marks; Maybe just omitting any directive for mouseup would have the same effect?) About the `image persisting after being clicked' question: It is really a separate question so I will probably start a different thread for that. What I've done works for one list item... but fails for more than one. The only active member of the list (2 in my example) is the bottom one. mouse events on the top one are carried out on the bottom one. I tried to just change the name of all variables in the javascript, and the name given in the `img src=' section of the html code, for the second row... but clearly not what is needed. I changed the names shown below by incrementing the number in the names by 1. I've only posted one row's worth but the next row uses the same code with the variables incremented. And hopefully someone will look at the actual example (URL given above) and see the full code. The basic code I've put here for convience.: Code: <table> <tr> <td valign=top > <A href="./t2.html" onMouseOver="return changeImage()" onMouseOut= "return changeImageBack()" onMouseDown="return handleMDown()" onMouseUp="return handleMUp()" ><img name="jsbutton_0" src="./3dots.png" border="0" alt="javascript button"></A> some nice video <SCRIPT language="JavaScript"> var myimgobj_0 = document.images["jsbutton_0"]; function changeImage() { document.images["jsbutton_0"].src= "./aro1r-mo.png"; return true; } function changeImageBack() { document.images["jsbutton_0"].src = "./3dots.png"; return true; } function handleMDown() { document.images["jsbutton_0"].src = "./checks.png"; return true; } function handleMUp() { document.images["jsbutton_0"].src = "./checks.png"; return true; } </SCRIPT> </tr> </td> Hello just a quick problem with a seemingly difficult solution that I'm not aware throughout. What I'm attempting to do is increment a value when the mouse hovers over the element by using this move_right function: Code: function Move_Right( event, element, number) { number++; var elem = document.getElementById(element); elem.style.right = number + "px"; } inside the mouseover event trigger function which I figured out. The problem is it doesn't move incrementally only once every mouse hover no matter the technique of setInterval(); and or setTimeout(); also ontop of this problem I'm getting errors like : 2014-10-12 20:07:57.785Uncaught TypeError: Cannot read property 'style' of null even after the changes I made also after this original function call : This is the current code so far which is different to the previous code above "obviously" : Edit fiddle - JSFiddle Thanks if someone knows the issues here, I hope it makes sense . Hi all, I use a javascript to generate a checkbox list. It works well but all the <input type="checkbox"> generated have the same id. I would like to find a way to auto-implement the id (with a unique id). So if my javascript generates 10 checkboxes, I will get id from 1 to 10 or something similar. Code: // here I build the filter checkboxes based on all the class names $.each(arrayUniqueClasses, function() { $('<li><input class="styled" type="checkbox" checked="checked" name="1" value="'+this+'" id="1" /> <label class="check" for="1"></label> <label class="info" for="filterID'+this+'">'+this+'<\/label><\/li>').appendTo('ul.filters'); }); so I tried something but it doesn't work at all (I'm a beginner as you can guess) : Code: var getUniqueId = (function () { var id=0; return function() { if (arguments[0]==0) id=0; return id++; } } )(); Thanks for helping here the full script if needed : Code: function unique(a) { tmp = new Array(0); for(i=0;i<a.length;i++){ if(!contains(tmp, a[i])){ tmp.length+=1; tmp[tmp.length-1]=a[i]; } } return tmp; } function contains(a, e) { for(j=0;j<a.length;j++)if(a[j]==e)return true; return false; } function removeItems(array, item) { var i = 0; while (i < array.length) { if (array[i] == item) { array.splice(i, 1); } else { i++; } } return array; } $(document).ready(function () { if ($('.filterThis > li').length < 2) { return; } var stringOfClassNames = ''; $('.filterThis > li').each( function (i) { var thisClassString = $(this).attr('class'); stringOfClassNames = stringOfClassNames +' '+ thisClassString }); stringOfClassNames = jQuery.trim(stringOfClassNames); var arrayClasses = stringOfClassNames.split(' '); var arrayClasses = arrayClasses.sort(); totalNumberOfItemsToFilter = $('.filterThis > li').length; var result = new Object(); for (var filterClass in arrayClasses) { if (result[arrayClasses[filterClass]] === undefined) { result[arrayClasses[filterClass]] = 1; } else { result[arrayClasses[filterClass]]++; } } var resultsToRemoveFromFilters = new Array(); for (var item in result) { if (result[item] == totalNumberOfItemsToFilter) { resultsToRemoveFromFilters.push(item); } } arrayUniqueClasses = (unique(arrayClasses)); if (arrayUniqueClasses.length > 1) { $('<ul class="filters"><\/ul>').insertAfter('h3'); $.each(arrayUniqueClasses, function() { $('<li><input class="styled" type="checkbox" checked="checked" name="1" value="'+this+'" id="0" /><label class="check" for="0"></label><label class="info" for="filterID'+this+'">'+this+'<\/label><\/li>').appendTo('ul.filters'); }); var classesStringOfSin = new Array(); classesStringOfSalvation = arrayUniqueClasses; $('.filterThis > li').addClass('filterTriggerShown'); $('.filters input').click( function() { var value= $(this).val(); stringValue = '.filterThis > li.'+value; if ($(this).is(':checked')) { classesStringOfSalvation.push(value); classesStringOfSin = removeItems(classesStringOfSin, value); $(stringValue).removeClass('filterTriggerHidden').addClass('filterTriggerShown').slideDown(); } else { classesStringOfSin.push(value); classesStringOfSalvation = removeItems(classesStringOfSalvation, value); $(stringValue).removeClass('filterTriggerShown').addClass('filterTriggerHidden'); $.each(classesStringOfSalvation, function() { var newStringValue = stringValue+'.'+this; $(newStringValue).removeClass('filterTriggerHidden').addClass('filterTriggerShown'); }); $('.filterTriggerHidden').slideUp(); } }); } }); I want to set the width of a div to be the same width of the image inside the div. The following code works great. But... The images are different widths, so both wrappers are set to the width of the first image. Without having to add an ID to each wrapper or image, can the wrapper width be set to the image width using the name of the image as the unique identifier? Any help would be great! PHP Code: jQuery: $(document).ready(function(){ var newWidth = $('div.wrapper img').attr('width'); $('div.wrapper').width(newWidth); }); HTML: <div class="wrapper"> <p><img src="image1.jpg" width="200" /><br /> Caption</p> </div> <div class="wrapper"> <p><img src="image2.jpg" width="250" /><br /> Caption</p> </div> Is it possible disable an onclick after clicking it and then enable it from another onclick by id Code: <img id="one" href="images/homepage/sliders/bonus_button.jpg" style="position:relative; top:30px; left:50px; height:30px; width:70px; float:left;"> This code runs when it is clicked: Code: $("#one").click(function() { runEffectB(); return false; }); What I would like to happen is for either runEffectB() to not run if it was just run or to disable the #one.click once it has run. I am assuming I will be able to re-enable it from another onclick running a similar function. This is jquery and jquery ui if that helps. Any ideas much appreciated. Need to set the width of a Table that is being spit out by this god awful CMS... please help me... change the html attribute width! Hello... Here is an example of a site I'm working on: http://mrmatthewreese.com/surine/custominlays.php notice the links for the alien cross bones, celtic knot etc...change colors once they are clicked on? Is it possible to have the top (alien crossbone) be set to black before it is clicked on then changed to the grey color once a different link is clicked? Just curious if anyone can help. Here is the javascript code: <script language="JavaScript" type="text/javascript"> /*<![CDATA[*/ var Lst; function CngClass(obj){ if (Lst) Lst.className=''; obj.className='boldlink'; Lst=obj; } /*]]>*/ </script> <a href="#" onclick='changeimage();'><span onclick="CngClass(this);">Alien Crossbones</span></a><br /> <a href="#" onclick='changeimage2()'><span onclick="CngClass(this);">Celtic Knot</span></a><br /> <a href="#" onclick='changeimage3()'><span onclick="CngClass(this);">Compass Rose</span></a><br /> <a href="#" onclick='changeimage4()'><span onclick="CngClass(this);">Fleurdelis</span></a><br /> <a href="#" onclick='changeimage5()'><span onclick="CngClass(this);">Geometrix</span></a><br /> <a href="#" onclick='changeimage6()'><span onclick="CngClass(this);">Modern Vine</span></a><br /> <a href="#" onclick='changeimage7()'><span onclick="CngClass(this);">Nouveau</span></a><br /> <a href="#" onclick='changeimage8()'><span onclick="CngClass(this);">Scorpion</span></a><br /> <a href="#" onclick='changeimage9()'><span onclick="CngClass(this);">Traditional Block</span></a><br /> <a href="#" onclick='changeimage10()'><span onclick="CngClass(this);">TrebleBass Clef</span></a> Hey guys, OK, so I have two buttons (code below) that when a user clicks on it, it will place text in a textarea. You can view all the code below: Buttons: Code: <div id="newButton"> <a href="#"><img src="http://i49.servimg.com/u/f49/17/29/94/19/graphi10.png" alt="Request a Graphic"></a> <a href="#"><img src="http://i49.servimg.com/u/f49/17/29/94/19/review11.png" alt="Request a Review"</a> </div> The textarea ID is: Code: text_editor_textarea and this is the code that I would like to be placed inside the textarea: Code: Nature of Request: Creation Size: Primary Colors: Text To Insert: Donation: Extra Information: URL: I tried this, but the BBCode would not keep it's structure and would all end up on one line. EDIT: Oh...The BBCode is parsing inside the code box >.< hi everybody.. i have this simple code: Quote: <html> <head> <script language="javascript" type="text/javascript"> document.write("<input type='button' value='push' onclick='hi()'/>"); function hi() { alert("hi"); document.write("<input type='button' value='enter' onclick='javascript: bye()'/>"); } function bye() { alert("bye"); } </script> </head> <body> </body> </html> if i try to run it on chrom its works well.. but on IE or FireFox its not define the bye() function.. whats the reason?! and how i can solve it?.. thanks very much.. Hey. When a checkbox is checked, I want it to add the id number of what I've got in a PHP variable, to appear in a <input type="text" />. For example: The id is 1, 2, and 3. So 3 checkbox's. I click on the first, and it adds to another input field, '1'. I hit the second, and the same thing happens, except the id is 2. Of course, I know how to do the ID and all with PHP. All I need to do now, is where when you click a check box, it adds to another field, and adds & after every check. Here is my code: Code: <input type="checkbox" name="delete" onclick="this.checkedbox.style.display=(this.value=='checked' ? 'inline' : '2' )" /> <input type="text" name="checkedbox" /> Thanks. |