JavaScript - Dynamically Changing Ids
ok i have a script which will make a copy of the html in a div and place it into another div the problem with this it creates a duplicate element with the same id so what i want to know is can i create a new id based off old ids using a generic type script
Code: function scope(e) { var popin = document.getElementById('popin'); popin.innerHTML = "<div class='container'>"+e.innerHTML+"</div>"; popin.style.display = "block"; } this code is designed for taking content in a small div and placing it into a larger div to increase the viewing area so what i would need is sumthing that can look for Code: id="sum text" and maybe amend it to Code: id="sum textP" or sumthing to that extent if sum1 could point me in the right direction that would be great if my post is not clear enough just ask me to be more specific or sumthing and i will see what i can do to try and make it more clear if needed Similar Tutorialshi i am totally frustrated !! i have been using this on my webpage. http://www.barelyfitz.com/projects/tabber/ if u see under the advanced section there is a code for changing tabs dynamically. Code: document.getElementById('mytab1').tabber.tabShow(0); this doesn't work. basically i have a webpage internet.htm. which has a menubar with loads of menu items. if i click one of the submenu items this code should change the dynamic tabs in admin.htm. the code i have defined for the submenu click is: Code: <li><a href="admin.htm" onClick="document.getElementById('Admin').tabber.tabShow(0)" >Forms</a></li> the full code is: Code: <ul id="QualityMenuBar" class="MenuBarHorizontal"> <li><a class="MenuBarItemSubmenu" href="#"><strong>Admin</strong></a> <ul> <li><a href="AdminDocuments.htm" onClick="document.getElementById("Admin").tabber.tabShow(0)" >Forms</a></li> <li><a href="AdminDocuments.htm" >Guidance</a></li> <li><a href="AdminDocuments.htm" onClick="document.getElementById("Admin").tabber.tabShow(2)" >Organisation Chart</a></li> <li><a href="AdminDocuments.htm">Plans</a></li> <li><a href="AdminDocuments.htm">Procedures</a></li> </ul> </li> this is what the admindocuments.htm contains, based on the website link i have borrowed the code from. Code: <div class="tabber" id="admin"> <div class="tabbertab"> <h2>Forms</h2> <script type="text/javascript" src="adminForms.js"></script> </div> <div class="tabbertab"> <h2>Guidance</h2> <script type="text/javascript" src="adminGuidance.js"></script> </div> <div class="tabbertab"> <h2>Org. Chart</h2> <script type="text/javascript" src="adminOrg.js"></script> </div> <div class="tabbertab"> <h2>Plans</h2> <script type="text/javascript" src="adminPlans.js"></script> </div> <div class="tabbertab"> <h2>Procedures</h2> <script type="text/javascript" src="adminProc.js"></script> </div> </div> whenever i click the submenu they all point to the first tab only. it doesn't change inspite of the code. what am i doing wrong here? please advice. Many thanks. I have the index page which contains the menus with hrefs. Now i have to generate the hrefs dynamically and the problem is the menus are created by the plugin so i can edit that file So i was thinking of loading the new url in hidden elemenst and when the page loads then chnage the hrefs of those menus. I want to ask that where on the page should i display the hidden elements so that when the page loads then by using JS i can chnage the href of few menu items I was thinking of doing that on the top of page but that does not look nice to have any element before body I have a javascript function that changes the src and href of an image within a repeating function. If i call document.getelementbyid("image").src, i can change the image and by calling document.getelementbyid("image").Href, i am able to change the link. The problem i have now is that when the cursor goes over the image it gets the link location as a snapshot. If i leave my cursor and the image and link location changes, it does not update the snapshot and if i click on the new image it uses the previous link rather than the new one. The only way to get the new link is to move off the image and back on to get a new snapshot of the new link. Is there a way i can tell the javascript to change the image, link location and update the browser to the new link without moving the cursor.
Hi everyone, I'm currently in the process of making a spreadsheet like webpage and it all working fine... However I have been using setAttribute and removeAttribute in order to dynamically change a table cells onclick property. This of course does not work in IE7 etc and I've been banging my head against a brick wall trying to come up with a solution that will work in all browsers but I just can't seem to get it to work with using methods such as... Code: document.getElementById(myElementId).onclick = scriptToRun; document.getElementById(myElementId).attachEvent('onclick',scriptToRun); I get all sorts of not implemented, type mismatch errors when I try to use the above. Below is the setAttribute code which works. Code: document.getElementById("task_" + colName + studentId).setAttribute("onclick","showTaskDropDown('task_" + colName + studentId + "','" + studentId + "','" + colName + "','" + value + "','" + maxValue + "','" + trafficMaxValue + "','" + taskNumber + "')"); If anyone can see why the other methods aren't working and can provide a solution I'll be extremely greatful! Hi All I have a piece of script which makes a div slide out from the side of the screen with information on it. I can change the innerHtml etc no problem, but i have a problem with change .style attributes dynamically. My code: Code: var mystring = "height:500px"; var keyVal = mystring.split(":") var slidingDiv = document.getElementById('slidingDiv'); slidingDiv.style.keyVal[0] = keyVal[1]; As you see above i get a value which i need to split() to get the key and value to use. So what i would like to see is: Quote: slidingDiv.style.height = 500px; But it does not work, as there is no such function as slidingDiv.style.keyVal[0]; How do i change this? I hope I've explained this thoroughly enough. Please ask if i need to explain further. Regards Marinus Hi Friends, I need to select browser option dynamically using javascript for handling cookies , i.e., in need select checkbox "override automatic cookie handling" checkbox dynamically. Kindly help me friends how to select this checkbox dynamically. Tools - -> Internet Options --> Privacy (Tab) --> Advance (Button) --> Override automatic cookie handling . Thanks in Advance, Siva. Hi all and hope that you can help. I have an image slideshow that works fine and, I may be being over ambitious but I'd like to combine the Play and Pause buttons so that when the slideshow is playing, the Play button is replaced by the Pause button and when it is paused the Pause button is replaced by the Play button. Sounds like a simple JavaScipt change image function but both buttons have roll over effects and they both have different JavaScript functions assigned to them so I'm struggling to get my head around what I need to do. Thanks for your interest, R I've highlighted the relevant chunks of code below... The HTML / CSS... Code: <style type="text/css"> #midcol { padding: 0 25px; width: 672px; margin-left:auto; margin-right:auto; text-align:center; } #first {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/first.gif) no-repeat 0 0; } #previous {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/previous.gif) no-repeat 0 0; } #pause {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/pause.gif) no-repeat 0 0; } #pplay {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/play.gif) no-repeat 0 0; } #next {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/next.gif) no-repeat 0 0; } #last {height:32px; width:32px; text-indent:-9999px; overflow:hidden; display:inline-block; border:0; background:url(navbars/last.gif) no-repeat 0 0; } #first:hover {background:url(navbars/first.gif) no-repeat 0 -32px; } #previous:hover {background:url(navbars/previous.gif) no-repeat 0 -32px;} #pause:hover {background:url(navbars/pause.gif) no-repeat 0 -32px;} #pplay:hover {background:url(navbars/play.gif) no-repeat 0 -32px;} #next:hover {background:url(navbars/next.gif) no-repeat 0 -32px;} #last:hover {background:url(navbars/last.gif) no-repeat 0 -32px;} </style> </head> <body> <div id="midcol"> <table width="592" border="0"> <tr > <td colspan="8" height="450"><img id="myImage" name="myImage" src="images/large/1.jpg"></img></td></tr> <tr><td colspan="8"><br /></td></tr> <tr height="60"><td colspan="8" id="caption">Auto play will start when all the images have loaded...</td></tr> <tr height="33"> <td width="160"></td> <td id="first" onclick="first();clearTimeout(timerID);"></td> <td id="previous" onclick="previous();clearTimeout(timerID);"></td> <td id="pause" onclick="clearTimeout(timerID);"></td> <td id="pplay" onclick="swapPicture();"></td> <td id="next" onclick="next();clearTimeout(timerID);"></td> <td id="last" onclick="last();clearTimeout(timerID);"></td> <td width="160"><form name="dropdown" action="">Slide duration: <select id="duration" onchange="setInterval(this.form.duration);"> <option value="1">1</option> <option value="2">2</option> <option value="3" selected="selected">3</option> <option value="4">4</option> <option value="5">5</option> <option value="6">6</option> <option value="7">7</option> <option value="8">8</option> <option value="9">9</option> <option value="10">10</option> </select> </form></td> </tr> </table> The JavaScript... Code: var dimages=new Array(); var numImages=31; var interval = 3000; var image_dir = "images/large/" for (i=0; i<numImages; i++) { dimages[i]=new Image(); dimages[i].src=image_dir+(i+1)+".jpg"; } var imageCaption = new Array(); var ImageNum = 0; imageCaption[ImageNum++] = "Caption 1."; imageCaption[ImageNum++] = "Caption 2."; etc. etc. var curImage=-1; function swapPicture() { if (document.images) // does the browser support image changes? { var nextImage=curImage+1; if (nextImage>=numImages) nextImage=0; if (dimages[nextImage] && dimages[nextImage].complete) // has the next image been fully loaded? { var target=0; if (document.images.myImage) target=document.images.myImage; cap = imageCaption[nextImage]; document.getElementById('caption').innerHTML=cap; if (document.all && document.getElementById("myImage")) target=document.getElementById("myImage"); cap = imageCaption[nextImage]; document.getElementById('caption').innerHTML=cap; // make sure target is valid. It might not be valid // if the page has not finished loading if (target) { target.src=dimages[nextImage].src; curImage=nextImage; } doTimer(interval); } else { setTimeout("swapPicture()", 500); // if not fully loaded, wait 500ms then try again. } } } function first(){ // Goes to the 1st image and stops curImage=-1; stopTimer(); swapPicture(); } function last(){ // Goes to the last image and stops curImage=numImages-2; stopTimer(); swapPicture(); } function previous(){ // Goes to the previous image and stops curImage=curImage-2; stopTimer(); swapPicture(); } function next(){ // Goes to the next image and stops stopTimer(); swapPicture(); } function doTimer(interval){ // The Play button timerID=setTimeout("swapPicture()",interval); } function stopTimer(){ // The Pause button clearTimeout(timerID); } function setInterval(t){ // The slide duration drop down box. var e = document.getElementById("duration"); interval = (e.options[e.selectedIndex].value)*1000; } doTimer(interval); // Starts the slideshow on load. Is it possible to dynamically change the value of text on a page as the user types into a text box? E.g. like: You Are Typing: <script> var keyword = document.getElementById('string'); document.write(keyword); </script> Or I could probably insert it into a function and loop it over and over again or is there a better way? I am building an online survey using a survey creation tool which allows me to incorporate javascript for additional functionality. However, I am new to javascript so would appreciate any help that you could provide me with. I have question types like agreement scales, where the respondent sees a list of statements and has to rate each one by clicking on a radio button. The source code of the matrix table looks like this: Code: <thead><tr class="Answers"> <th class='c1 BorderColor' width="25%" class='c1'> </th> <th class='c2 BorderColor' class='c2 yAxisBorder' > </th> <th class='c3 BorderColor' class='c3 yAxisBorder' > </th> <th width="25%" class='Selection BorderColor c4 ' id='header~QID19~1~4' > <label>Disagree</label> </th> <th width="25%" class='Selection BorderColor c5 ' id='header~QID19~2~5' > <label>Neither agree nor disagree</label> </th> <th width="25%" class='Selection BorderColor c6 last ' id='header~QID19~3~6' > <label>Agree</label> </th> </tr></thead><tr class='ChoiceRow '><th class='c1' id='header~QID19~1'><span class='LabelWrapper'><label for='QR~QID19~1'>Statement 1</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~1' > </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~1' > </td><td class='c4 ' headers='header~QID19~1~4 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~1' ></td><td class='c5 ' headers='header~QID19~2~5 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~2' ></td><td class='c6 last ' headers='header~QID19~3~6 header~QID19~1'><input type='radio' name='QR~QID19~1' value='QR~QID19~1~3' ></td></tr><tr class='ChoiceRow ReadableAlt '><th class='c1' id='header~QID19~2'><span class='LabelWrapper'><label for='QR~QID19~2'>Statement 2</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~2' > </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~2' > </td><td class='c4 ' headers='header~QID19~1~4 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~1' ></td><td class='c5 ' headers='header~QID19~2~5 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~2' ></td><td class='c6 last ' headers='header~QID19~3~6 header~QID19~2'><input type='radio' name='QR~QID19~2' value='QR~QID19~2~3' ></td></tr><tr class='ChoiceRow bottom '><th class='c1' id='header~QID19~3'><span class='LabelWrapper'><label for='QR~QID19~3'>Statement 3</label></span> </th><td class='c2 BorderColor' class='c2 yAxisBorder' headers='header~QID19~3' > </td><td class='c3 BorderColor' class='c3 yAxisBorder' headers='header~QID19~3' > </td><td class='c4 ' headers='header~QID19~1~4 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~1' ></td><td class='c5 ' headers='header~QID19~2~5 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~2' ></td><td class='c6 last ' headers='header~QID19~3~6 header~QID19~3'><input type='radio' name='QR~QID19~3' value='QR~QID19~3~3' ></td></tr><input type=hidden name='Transformation~QID19~1' value='YToxOntzOjEwOiJRUn5RSUQxOX4xIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''><input type=hidden name='Transformation~QID19~2' value='YToxOntzOjEwOiJRUn5RSUQxOX4yIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''><input type=hidden name='Transformation~QID19~3' value='YToxOntzOjEwOiJRUn5RSUQxOX4zIjtzOjE2OiJ7dmFsdWV9PVNlbGVjdGVkIjt9' id=''></table></div> I don't have any control over the HTML as this is generated by the survey tool. However, the survey tool has a "JavaScript Editor" for each question, where I can put in javascript functions, and it executes them when the page loads. What I want to do is to have the label for each row (i.e for each statement) to change color when a corresponding radio button has been selected. This way, it is easier for respondents to see which rows they have answered. I used the following JS code: Code: var radioname = []; var radiolist = []; var labelspans = []; var labels = []; var radios = []; var count; var spans = document.getElementsByTagName('span'); function getLabels() { for (x=0; x<spans.length; x++) { if (spans[x].className == "LabelWrapper") { labelspans.push(spans[x]); } } for (y=0; y<labelspans.length; y++) { labels.push(labelspans[y].firstChild); radioname.push(labelspans[y].firstChild.htmlFor); } } function getRadios() { //will put all radio groups into the "radiolist" array for (z=0; z<radioname.length; z++) { radiolist.push(document.getElementsByName(radioname[z])); //will add Event Listener to each radio button, and add each one to the "radios" array for (i=0; i<radiolist[z].length; i++) { chkradio = radiolist[z][i]; chkradio.setAttribute("count",Number(z)); chkradio.addEventListener("click", function(){changeLabel()}, false); radios.push(chkradio); } } } function changeLabel() //loops through all the radios to check if they are selected, and changes label color accordingly { for (w=0; w<radios.length; w++) { if (radios[w].checked) { a = radios[w].getAttribute("count"); labels[a].innerHTML = labels[a].innerHTML.fontcolor("green"); } } } getLabels(); getRadios(); This code works as intended; however, as you can see, it loops through all the radio buttons when one is clicked. Is there a way to accomplish this without looping through all the radios, and thus make the script run faster? Also, I have read that the addEventListener function does not work for older versions of IE. Is there a simpler alternative? note: this is not homework Hi all, Currently I am doing this: Code: var e = document.getElementById('id'); e.style.color = '#ff0000'; e.style.fontFamily = 'sans-serif'; e.innerHTML = time; ...blah blah... What I'm actually doing is inserting the current time into an existing DIV and updating it every second. THAT all works. What I want to do is also set an event for that div.... something like this: e.event.onclick = 'runThisCode()'; Of course, the above doesn't work... and I'm not even sure what to ask for doing a Google search... because I get no hits (or maybe it's not possible). So, is it possible, and if so, how? Thanks! -- Roger p.s. I really don't want to edit the code itself (where that div is) because it's part of another app that may change as they update it and I don't want to have to re-patch every new release. Hi Guys, I am using the following bit of code to toggle information inside a webpage. Is there a way i can make this code more dynamic so that i do not have to use the next() function to initiate slidetoggle()? I would like to have it so i can pass an ID through to the function and it will then toggle my box but i can't figure it out. Javascript is not my strong suite. Here the function Code: function initMenu() { //$('.items_wrapper').hide();//object to be hidden $('.headline').click(//object to be clicked function() { $(this).next().slideToggle('slow'); //alert("doesn't work"); } ); } $(document).ready(function() {initMenu();}); I would like to create a link inside .headline such as .ViewItems If you need to see the code let me know and i will post it. --EDIT-- Right Now my code is like this and you click headline Code: <div class='headline'></div> <div class='items_wrapper'> </div> I would like it work with an internal element like this, so i can't use next() Code: <div class='headline'><div class='selector'>Click Here</div></div> <div class='items_wrapper'> </div> Thanks in advance. hello, I'm trying to load the ads on my site dynamically and have ran into an issue and was hoping for some help. First - I can get the ads to load using vanilla javascript with the code below. Code: var ifrm = document.createElement("iframe"); ifrm.setAttribute("src", OAS_url + "adstream_sx.ads/" +sitePage + "/" + uniqid() + "@" + pos); var ifrmId = "ifrm_" + uniqid(); ifrm.setAttribute("id", ifrmId); ifrm.setAttribute("marginwidth", 0); ifrm.setAttribute("marginheight", 0); ifrm.setAttribute("frameborder", 0); ifrm.setAttribute("scrolling", 0); ifrm.setAttribute("height", container.scrollHeight + (container.offsetHeight - container.clientHeight)); ifrm.setAttribute("width", container.scrollWidth + (container.offsetWidth - container.clientWidth)); container.appendChild(ifrm); But since the site is using jquery I wanted to develop it out that way. So I have the following code, Code: iRandom = oas.uniqid(); sAdURL = opt.url + 'adstream_mjx.ads/' + opt.sitepage + '/1' + iRandom + '@' + sPos + '?' + opt.query; $('<iframe />', { src: sAdURL, id: sPos }).appendTo(thisAd); I figured the reason this isn't working is the difference between appendChild and appendTo and the fact that things are jquery objects. So again the top code block renders the ads and the lower code block just shows the javascript code from the ad provider. Any help to get this to work in jquery would be grateful. Thanks I almost have the website finished, at least functionally (the complicated backend). It will arguably be one of the coolest history sites on the web. But I am running into some technical problems, and want to ask you about them, as I am at a point where that is my only alternative. First is in the website: http://184.73.182.71/timelines/search2.fwx There is the line: Timeline.loadXML("http://184.73.182.71/14OZH01XY.xml", function(xml, url) { eventSource.loadXML(xml, url); }); This is loading an XML data file into the time-line, and it works fine. The question is, why cant I dynamically load this data from a process, like: Timeline.loadXML("http://184.73.182.71/getdata.php?page=10", function(xml, url) { eventSource.loadXML(xml, url); }); It is returning the exact same thing, yet it dosent work. Somebody suggested the following: eventSource.loadXML(eventSource.loadXMLText(xmlstring,),"http://184.73.182.71/getdata.php?page=10"); But that dosent seem to work either. And can I do the same thing with a script tag, such as: <script src="http://184.73.182.71/getdata.php?page=10" type="text/javascript"></script> Is this illegal? Thanks in advance for looking at this. Hi, I have the following function to dynamically create an image (in this case a toolbox button): Code: function createButton(srcid,bttn) { if (bttn=='mag') {s='Magnify';h='Magnify';o='DoZoom(event,\'0\',\''+srcid+'\')';} if (bttn=='frz') {s='Pause';h='Freeze/Unfreeze';o='setPicture(\''+srcid+'\',0)';} if (bttn=='swp') {s='Swap';h='Swap maps';o='setPicture(\''+srcid+'\',2)';} btn=document.createElement('img'); btn.setAttribute('src','toolbox/'+s+'.gif'); btn.setAttribute('width','16px'); btn.setAttribute('height','16px'); btn.setAttribute('id',bttn+'btn_'+srcid); btn.setAttribute('class','button'); btn.setAttribute('name','Toolbox'); btn.setAttribute('title',h); btn.setAttribute('onclick',o); document.getElementById('ctrlDiv').appendChild(btn); } which works fine in IE8 and IE9, but in IE7 it refuses to pick up the style 'button'. I've even tried putting in btn.class='button' but JS throws up an error. If I specify the style by btn.style.position='Absolute' it picks this up OK. However, it won't respond to the onclick event either. I have heard that setAttribute is buggy with IE7, which is why I tried to specify each attribute directly. The style sheet for class button is: Code: .button { position: absolute; left: 5; top: 5; z-index: 1; } (BTW, no link to a website as this is local on my machine atm) TIA, Gerald. Hey all! My supervisor is tasking me with having a webpage resize the windows media player dynamically based on the users resolution. I have tried everything I can think of to make this happen but no luck. Is this even possible? I'm using the following code to embed the video: Code: <object classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,1112" type="application/x-oleobject" width="800" height="600" align="left" standby="Loading Microsoft Windows Media Player components..." id="mediaPlayer"> <param name="AutoStart" value="1" /> <param name="FileName" value="../../../videos/Welcome_1.wmv" /> <param name="ShowDisplay" value="False" /> <param name="ShowControls" value="True" /> <param name="ShowStatusBar" value="False" /> <param name="Loop" value="False" /> <embed src="../../../videos/Welcome_1.wmv" width="800" height="600" autostart="1" align="left" type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="mediaPlayer"> </embed> </object> I've tried creating variables and substituting those for the width and height of the object code e.g., Code: <script type="text/javascript">var _width=screen.width; var _height=screen.height;</script> followed by Code: <object classid="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" codebase="http://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab#Version=6,4,5,1112" type="application/x-oleobject" width=_width height=_height align="left" standby="Loading Microsoft Windows Media Player components..." id="mediaPlayer"> <param name="AutoStart" value="1" /> <param name="FileName" value="../../../videos/Welcome_1.wmv" /> <param name="ShowDisplay" value="False" /> <param name="ShowControls" value="True" /> <param name="ShowStatusBar" value="False" /> <param name="Loop" value="False" /> <embed src="../../../videos/Welcome_1.wmv" width=_width height=_height autostart="1" align="left" type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="mediaPlayer"> </embed> </object> but of course, this doesn't work. Is it even possible?? If so, your help is greatly appreciated. Thank you, M. I have been over this code several times and through as many tutorials as I can fine and I still can not figure out why it does not work. Is anyone here able to point out my error? The objective of the code is to get the size in pixels of the viewport when the browser loads page, and when the browser window is resized. After obtaining that number I want to use it to set the size of my DIV to 770px if the viewport has gotten shorter than than 770, and to auto if my viewport is larger than 770. Note, I am not posting the HTML or CSS code because it seems like this should be simple - I will gladly post that code if it turns out my question is not simple. Code: <script language="JavaScript" type = "text/javascript"> <!-- function inspectview() { var viewportheight; // most modern browsers if (typeof window.innerWidth != 'undefined') { viewportheight = window.innerHeight; } // IE6 in standards compliant mode else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) { viewportheight = document.documentElement.clientHeight; } // older versions of IE else { viewportheight = document.getElementsByTagName('body')[0].clientHeight; if (viewportheight <= 770){ document.getElementById("bg").style.height = "770px"; } else { document.getElementById("bg").style.height = "100%"; } } window.onload = inspectview; window.onresize = inspectview; //--> </script> Thank you in advance -Alaric_ Hi I am new to javascript programming. Is it possible to append an event handler to a tag dynamically. <input type="button" id="cmdNext" value="Next Page"> i want to be able to programatically loop through the buttons on a page and then add the onClick event. So my finally result will be the following: <input type="button" id="cmdNext" value="Next Page" onClick="CheckValues()"> Since i am new (if possible) can someone provide detail code example so i can break it down and study it before i implement. Hellooo. So I'm having trouble figuring out how to dynamically add another set of rows to a table when a button is clicked. The code below shows what goes into one set. When the button is clicked, it needs to create another three rows with the same format as the code below, but the variable names need to show what row they're on so I can easily call the values that have been inputed in another function that saves the information. Sooo for example the first variable, bhrs1-1 needs to become bhrs4-1 in the next set (because there's already a bhrs2-1 and bhrs3-1 in this set, which would become bhrs5-1 and bhrs6-1 in the new set). Sorry the code's so long! Help would be greatly appreciated. Thanksss!! Code: <TBODY> <INPUT TYPE=HIDDEN id=bhrs1-1 name=bhrs1-1><INPUT TYPE=HIDDEN id=comment1-1 name=comment1-1> <INPUT TYPE=HIDDEN id=bhrs1-2 name=bhrs1-2><INPUT TYPE=HIDDEN id=comment1-2 name=comment1-2> <INPUT TYPE=HIDDEN id=bhrs1-3 name=bhrs1-3><INPUT TYPE=HIDDEN id=comment1-3 name=comment1-3> <INPUT TYPE=HIDDEN id=bhrs1-4 name=bhrs1-4><INPUT TYPE=HIDDEN id=comment1-4 name=comment1-4> <INPUT TYPE=HIDDEN id=bhrs1-5 name=bhrs1-5><INPUT TYPE=HIDDEN id=comment1-5 name=comment1-5> <INPUT TYPE=HIDDEN id=bhrs1-6 name=bhrs1-6><INPUT TYPE=HIDDEN id=comment1-6 name=comment1-6> <INPUT TYPE=HIDDEN id=bhrs1-7 name=bhrs1-7><INPUT TYPE=HIDDEN id=comment1-7 name=comment1-7> <TR> <TD HEIGHT=20 SDVAL="1" SDNUM="1033;1033;#,##0_);[RED](#,##0)"> <SELECT style="width:500px;" name=project_id1 size=1 onChange='onProjectChanged(1);'> <? // // Load Projects // // $sresults = mysql_query("SELECT project_id, project, billable_rate, customer_id, Customer.CustomerName FROM Project LEFT OUTER JOIN Customer ON Project.customer_id=Customer.customer_id WHERE status_id='active' ORDER BY project"); $sresults = mysql_query("SELECT project_id, project, billable_rate, Project.customer_id, CostCenter.DisplayNameShort FROM Project LEFT OUTER JOIN CostCenter ON Project.customer_id=CostCenter.customer_id WHERE status_id='active' ORDER BY customer_id,CostCenter.DisplayNameShort,project"); // $srate = 0; print "<OPTION value='0'>--</OPTION>\n"; while($arow = mysql_fetch_assoc($sresults)) { // $srate = $arow["billable_rate"]; print "<OPTION value=\"" . $arow["project_id"] . "\">" . substr($arow["DisplayNameShort"], 0, 15) . ": " . $arow["project"] . "</OPTION>\n"; } // print "\n</SELECT>Billable Rate: <INPUT name=billable_rate value=\"" . $srate . "\" size=10 DISABLED></TD>\n"; ?> </TD> <TD> <SELECT name=task11 size=1 style="width:220px;" onChange='onTaskChange(1);'> <? print "<OPTION value='0'>--</OPTION>\n"; print "<OPTION value='1'>Sales Support</OPTION>\n"; print "<OPTION value='2'>Project Management</OPTION>\n"; print "<OPTION value='3'>Discovery and Requirements Documentation</OPTION>\n"; print "<OPTION value='4'>Analysis and Design</OPTION>\n"; print "<OPTION value='5'>Coding, Unit Testing, Infrastructure Changes</OPTION>\n"; print "<OPTION value='6'>QA, Planning, System Testing</OPTION>\n"; print "<OPTION value='7'>User Acceptance Testing</OPTION>\n"; print "<OPTION value='8'>User Documentation and Training</OPTION>\n"; print "<OPTION value='9'>Launch</OPTION>\n"; print "<OPTION value='10'>Maintenance, Support, Account Management</OPTION>\n"; ?> </TD> <TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)"> <P ALIGN=CENTER><INPUT id=hrs1-1 name=hrs1-1 size=2 maxlength=2 onFocus='onCellFocus(1,1);' onChange='calcRowTotal(1,1);'><BR> </P> </TD> <TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)"> <P ALIGN=CENTER><INPUT id=hrs1-2 name=hrs1-2 size=2 maxlength=2 onFocus='onCellFocus(1,2);' onChange='calcRowTotal(1,2);'><BR> </P> </TD> <TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)"> <P ALIGN=CENTER><INPUT id=hrs1-3 name=hrs1-3 size=2 maxlength=2 onFocus='onCellFocus(1,3);' onChange='calcRowTotal(1,3);'><BR> </P> </TD> <TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)"> <P ALIGN=CENTER><INPUT id=hrs1-4 name=hrs1-4 size=2 maxlength=2 onFocus='onCellFocus(1,4);' onChange='calcRowTotal(1,4);'><BR> </P> </TD> <TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)"> <P ALIGN=CENTER><INPUT id=hrs1-5 name=hrs1-5 size=2 maxlength=2 onFocus='onCellFocus(1,5);' onChange='calcRowTotal(1,5);'><BR> </P> </TD> <TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)"> <P ALIGN=CENTER><INPUT id=hrs1-6 name=hrs1-6 size=2 maxlength=2 onFocus='onCellFocus(1,6);' onChange='calcRowTotal(1,6);'><BR> </P> </TD> <TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)"> <P ALIGN=CENTER><INPUT id=hrs1-7 name=hrs1-7 size=2 maxlength=2 onFocus='onCellFocus(1,7);' onChange='calcRowTotal(1,7);'><BR> </P> </TD> <TD BGCOLOR="#ffff99" SDVAL="0" SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)"> <P ALIGN=CENTER><FONT SIZE=3><B><INPUT id=task1total size=2 maxlength=4 DISABLED></B></FONT> </P> </TD> </TR> <INPUT TYPE=HIDDEN id=bhrs2-1 name=bhrs2-1><INPUT TYPE=HIDDEN id=comment2-1 name=comment2-1> <INPUT TYPE=HIDDEN id=bhrs2-2 name=bhrs2-2><INPUT TYPE=HIDDEN id=comment2-2 name=comment2-2> <INPUT TYPE=HIDDEN id=bhrs2-3 name=bhrs2-3><INPUT TYPE=HIDDEN id=comment2-3 name=comment2-3> <INPUT TYPE=HIDDEN id=bhrs2-4 name=bhrs2-4><INPUT TYPE=HIDDEN id=comment2-4 name=comment2-4> <INPUT TYPE=HIDDEN id=bhrs2-5 name=bhrs2-5><INPUT TYPE=HIDDEN id=comment2-5 name=comment2-5> <INPUT TYPE=HIDDEN id=bhrs2-6 name=bhrs2-6><INPUT TYPE=HIDDEN id=comment2-6 name=comment2-6> <INPUT TYPE=HIDDEN id=bhrs2-7 name=bhrs2-7><INPUT TYPE=HIDDEN id=comment2-7 name=comment2-7> <TR> <TD HEIGHT=20 SDVAL="2" SDNUM="1033;1033;#,##0_);[RED](#,##0)"> <INPUT name=remove1 value=Remove type=button onClick='removeProject(1);'> </TD> <TD> <SELECT name=task12 size=1 style="width:220px;" onChange='onTaskChange(2);'> <? print "<OPTION value='0'>--</OPTION>\n"; print "<OPTION value='1'>Sales Support</OPTION>\n"; print "<OPTION value='2'>Project Management</OPTION>\n"; print "<OPTION value='3'>Discovery and Requirements Documentation</OPTION>\n"; print "<OPTION value='4'>Analysis and Design</OPTION>\n"; print "<OPTION value='5'>Coding, Unit Testing, Infrastructure Changes</OPTION>\n"; print "<OPTION value='6'>QA, Planning, System Testing</OPTION>\n"; print "<OPTION value='7'>User Acceptance Testing</OPTION>\n"; print "<OPTION value='8'>User Documentation and Training</OPTION>\n"; print "<OPTION value='9'>Launch</OPTION>\n"; print "<OPTION value='10'>Maintenance, Support, Account Management</OPTION>\n"; ?> </TD> <TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)"> <P ALIGN=CENTER><INPUT id=hrs2-1 name=hrs2-1 size=2 maxlength=2 onFocus='onCellFocus(2,1);' onChange='calcRowTotal(2,1);'><BR> </P> </TD> <TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)"> <P ALIGN=CENTER><INPUT id=hrs2-2 name=hrs2-2 size=2 maxlength=2 onFocus='onCellFocus(2,2);' onChange='calcRowTotal(2,2);'><BR> </P> </TD> <TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)"> <P ALIGN=CENTER><INPUT id=hrs2-3 name=hrs2-3 size=2 maxlength=2 onFocus='onCellFocus(2,3);' onChange='calcRowTotal(2,3);'><BR> </P> </TD> <TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)"> <P ALIGN=CENTER><INPUT id=hrs2-4 name=hrs2-4 size=2 maxlength=2 onFocus='onCellFocus(2,4);' onChange='calcRowTotal(2,4);'><BR> </P> </TD> <TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)"> <P ALIGN=CENTER><INPUT id=hrs2-5 name=hrs2-5 size=2 maxlength=2 onFocus='onCellFocus(2,5);' onChange='calcRowTotal(2,5);'><BR> </P> </TD> <TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)"> <P ALIGN=CENTER><INPUT id=hrs2-6 name=hrs2-6 size=2 maxlength=2 onFocus='onCellFocus(2,6);' onChange='calcRowTotal(2,6);'><BR> </P> </TD> <TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)"> <P ALIGN=CENTER><INPUT id=hrs2-7 name=hrs2-7 size=2 maxlength=2 onFocus='onCellFocus(2,7);' onChange='calcRowTotal(2,7);'><BR> </P> </TD> <TD BGCOLOR="#ffff99" SDVAL="0" SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)"> <P ALIGN=CENTER><FONT SIZE=3><B><INPUT id=task2total size=2 maxlength=4 DISABLED></B></FONT> </P> </TD> </TR> <INPUT TYPE=HIDDEN id=bhrs3-1 name=bhrs3-1><INPUT TYPE=HIDDEN id=comment3-1 name=comment3-1> <INPUT TYPE=HIDDEN id=bhrs3-2 name=bhrs3-2><INPUT TYPE=HIDDEN id=comment3-2 name=comment3-2> <INPUT TYPE=HIDDEN id=bhrs3-3 name=bhrs3-3><INPUT TYPE=HIDDEN id=comment3-3 name=comment3-3> <INPUT TYPE=HIDDEN id=bhrs3-4 name=bhrs3-4><INPUT TYPE=HIDDEN id=comment3-4 name=comment3-4> <INPUT TYPE=HIDDEN id=bhrs3-5 name=bhrs3-5><INPUT TYPE=HIDDEN id=comment3-5 name=comment3-5> <INPUT TYPE=HIDDEN id=bhrs3-6 name=bhrs3-6><INPUT TYPE=HIDDEN id=comment3-6 name=comment3-6> <INPUT TYPE=HIDDEN id=bhrs3-7 name=bhrs3-7><INPUT TYPE=HIDDEN id=comment3-7 name=comment3-7> <TR> <TD HEIGHT=20 SDVAL="3" SDNUM="1033;1033;#,##0_);[RED](#,##0)"> <P><BR> </P> </TD> <TD> <SELECT name=task13 size=1 style="width:220px;" onChange='onTaskChange(3);'> <? print "<OPTION value='0'>--</OPTION>\n"; print "<OPTION value='1'>Sales Support</OPTION>\n"; print "<OPTION value='2'>Project Management</OPTION>\n"; print "<OPTION value='3'>Discovery and Requirements Documentation</OPTION>\n"; print "<OPTION value='4'>Analysis and Design</OPTION>\n"; print "<OPTION value='5'>Coding, Unit Testing, Infrastructure Changes</OPTION>\n"; print "<OPTION value='6'>QA, Planning, System Testing</OPTION>\n"; print "<OPTION value='7'>User Acceptance Testing</OPTION>\n"; print "<OPTION value='8'>User Documentation and Training</OPTION>\n"; print "<OPTION value='9'>Launch</OPTION>\n"; print "<OPTION value='10'>Maintenance, Support, Account Management</OPTION>\n"; ?> </TD> <TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)"> <P ALIGN=CENTER><INPUT id=hrs3-1 name=hrs3-1 size=2 maxlength=2 onFocus='onCellFocus(3,1);' onChange='calcRowTotal(3,1);'><BR> </P> </TD> <TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)"> <P ALIGN=CENTER><INPUT id=hrs3-2 name=hrs3-2 size=2 maxlength=2 onFocus='onCellFocus(3,2);' onChange='calcRowTotal(3,2);'><BR> </P> </TD> <TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)"> <P ALIGN=CENTER><INPUT id=hrs3-3 name=hrs3-3 size=2 maxlength=2 onFocus='onCellFocus(3,3);' onChange='calcRowTotal(3,3);'><BR> </P> </TD> <TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)"> <P ALIGN=CENTER><INPUT id=hrs3-4 name=hrs3-4 size=2 maxlength=2 onFocus='onCellFocus(3,4);' onChange='calcRowTotal(3,4);'><BR> </P> </TD> <TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)"> <P ALIGN=CENTER><INPUT id=hrs3-5 name=hrs3-5 size=2 maxlength=2 onFocus='onCellFocus(3,5);' onChange='calcRowTotal(3,5);'><BR> </P> </TD> <TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)"> <P ALIGN=CENTER><INPUT id=hrs3-6 name=hrs3-6 size=2 maxlength=2 onFocus='onCellFocus(3,6);' onChange='calcRowTotal(3,6);'><BR> </P> </TD> <TD SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)"> <P ALIGN=CENTER><INPUT id=hrs3-7 name=hrs3-7 size=2 maxlength=2 onFocus='onCellFocus(3,7);' onChange='calcRowTotal(3,7);'><BR> </P> </TD> <TD BGCOLOR="#ffff99" SDVAL="0" SDNUM="1033;0;#,##0.0_);[RED]\(#,##0.0\)"> <P ALIGN=CENTER><FONT SIZE=3><B><INPUT id=task3total size=2 maxlength=4 DISABLED></B></FONT> </P> </TD> </TR> </TBODY> I have an input box "product" besides it there is an add input button which adds another input box product upon clicking.This array of input boxes I have created is through document.createElement('input'). My autocomplete is working for the initial input box....now when I click add Input button for the generated box also the autocomplete shld work...how do I make it work?? PS:Autocomplete script is working so I didnt post it here.... I just want it to make it working dynamically created i/p boxes My overall challenge is to make up for what I consider to be a design flaw in how Google Ad Manager works. What I am trying to accomplish is create a way for an advertiser to randomly rotate through whichever ad formats are available, rather than get locked into a particular ad slot location. This has required several steps, most of which I've been able to work out by myself, and now I'm down to what I expect is the last big issue. Because Google Ad Manager pairs up the highest priority advertiser with the first loaded ad slot script, the most important task was to randomize the load order of the scripts. Doing this, however, necessitates pairing up those scripts with the appropriate space set aside for them on the page, more or less after the fact. The code I'm having trouble with is the part where I try to move the node containing the active script to the its desired location and is showing just about every permutation of result except the one that I want, depending on browser. Code: var moveithere = document.getElementById(newmodid); moveithere.appendChild(divinloader[i]); moveithere.appendChild(scriptelement[i]); Not surprisingly, IE breaks as soon as it gets to this point and nothing happens with the divinloader[i] node OR the scriptelement[i] node - I have seen some references that it's not likely to like this and perhaps some recommendations about how to handle it, so I'm not too concerned about that just yet. Firefox doesn't throw any kind of an error, but neither does the scriptelement[i] node do anything at all, even though the divinloader[i] node migrates to where I want it. Chrome comes the closest to working - the script runs, but not in the location that I want. Although I don't expect it's been an exhaustive search, I have tried a number of other approaches and this one has seemed to get me the closest to the desired result with the simplest coding. As to what's currently acceptable coding and what's not, I won't pretend to have a clue. To see the full code in action, what it does, what I'm trying to do and to check for errors (likely) or offer suggestions on how I could get there more easily just use the following - I've substituted simpler code so that you don't have to pull down the actual Google Ad Manager scripts but it seems to work exactly the same and shows what I'm trying to do anyway. Hopefully there aren't any unnecessary artifacts still present. Code: <html> <head> <title>Testing arrayed dynamic randomized script loading</title> </head> <body> <!-- PUT THIS TAG IN DESIRED LOCATION OF SLOT ATFRectangle-Main --> <div id="atfrectangle-outer"> Tell 'em TIO sent you (rectangle) <div id="atfrectangle-inner"> </div> </div> <!-- END OF TAG FOR SLOT ATFRectangle-Main --> <!-- PUT THIS TAG IN DESIRED LOCATION OF SLOT ATFWideSkyscaper-Main --> <div id="atfwideskyscaper-outer"> Tell 'em TIO sent you (skyscaper)<div id="atfwideskyscaper -inner"> </div></div> <!-- END OF TAG FOR SLOT ATFWideSkyscaper-Main --> <!-- PUT THIS TAG IN DESIRED LOCATION OF SLOT FullBanner-Main --> <div id="fullbanner-outer"> Tell 'em TIO sent you (banner)<div id="fullbanner-inner"> </div></div> <!-- END OF TAG FOR SLOT FullBanner-Main --> <h1>Load up the array with ad formats</h1> <script type = "text/JavaScript"> // create an array to hold information about the various ad formats var adformat = new Array(); // load the array with the appropriate ad format data adformat[0] = "FullBanner"; adformat[1] = "ATFRectangle"; adformat[2] = "ATFWideSkyscaper"; // make a notation about what is coming next (and show successful conclusion of previous steps) document.write("<h2>Order for the ad formats as loaded into the array</h2>"); // declare the variable to use for counting var i = 0; // begin looping through as many times as needed to go through entire array and write out each ad format for (i in adformat) { document.write("<p>" + adformat[i] + "<br> </p>"); } // end loop for writing out the list of ad formats loaded into the array // randomize the order of the ad format list randadload = adformat.sort (function(){ return 0.5-Math.random() }) // make a notation about what is coming next (and show successful conclusion of previous steps) document.write("<h2> Order for the ad formats after randomization</h2>"); // declare the variable to use for counting var i = 0; // begin looping through as many times as needed to go through entire array and write out each ad format in the new list order for (i in randadload) { document.write("<p>" + randadload[i] + "<br> </p>"); } // end loop for writing out the randomized list of ad formats // make a notation about what is coming next (and show successful conclusion of previous steps) document.write("<h2>Creating dynamic module names and script-calling variables</h2>"); // declare variables that might be needed // create an array to hold module names modname = new Array(); // create array to hold the names of the google script, partial and full googscript = new Array(); fullgoogscript = new Array(); // create an array to hold the id to be used for the script loader element loaderid = new Array(); scriptloaderid = new Array(); // create an array to hold the id for the module modid = new Array(); // create an array to hold the name of the id for the script inside module modscriptid = new Array(); // create an array to hold the name of the id for the outer DIV tag divoutloader = new Array(); // create an array to hold the name of the id for the inner DIV tag divinloader = new Array(); scriptnodeloader = new Array(); scriptelement = new Array(); // declare the variable to use for counting var i = 0; // create a variable to hold the current script number var scriptnum = 0; // begin looping through number of elements in the array for (i in randadload) { // advance the counter by one increment for each iteration in the loop scriptnum ++; // create a script name based on the name of the ad format googscript[i] = randadload[i] + "-Main"; // change the ad format name to all lower case loadlc = randadload[i].toLowerCase(); // create a module name based on the name of the ad format modname[i] = "main" + loadlc; // create a DIV id name for the loader element based on the name of the ad format loaderid[i] = loadlc + "_loader"; // create a script id name for the loader element based on the name of the ad format // scriptloaderid[i] = loadlc + "_scriptloader"' // create a DIV id name for the inner DIV tag based on the name of the ad format modid[i] = loadlc + "-inner"; // create a script id name based on the name of the ad format modscriptid[i] = loadlc + "-script"; //write out all the names just created to check for successful completion and for accuracy document.write("<p>Module name is " + modname[i] + " and script name is " + googscript[i] + " and loader ID is " + loaderid[i] + " and module id is " + modid[i] + "<br> </p>"); // create a DIV tag to load the script into divinloader[i] = document.createElement("div"); divinloader[i].setAttribute("id", loaderid[i]); divinloader[i].style.display="block"; // use the DIV loader to write out the status of the scripts (ultimately hope to LOAD the scripts) divinloader[i].innerHTML = "<p>Pretend loading script " + scriptnum + " now... <br> GA_googleFillSlot(" + googscript[i] + ");" ; // create the content to be included in the script to be loaded fullgoogscript[i] = 'document.write("<p> This is actually a real script loading ' + googscript[i] + ' as a stand-in for a Google script loading " + randadload[i] + " advertisements.</p>");'; // creating a script element scriptnodeloader[i] = document.createTextNode(fullgoogscript[i]); scriptelement[i] = document.createElement("script"); scriptelement[i].type = "text/javascript"; scriptelement[i].setAttribute("id", scriptloaderid[i]); scriptelement[i].appendChild(scriptnodeloader[i]); // if this line runs, results in [object HTML scriptelement] // divinloader[i].innerHTML = scriptelement[i]; newmodid = modid[i]; newmodscriptid = modscriptid[i] // want to use this to move the script up to its final location // document.getElementById(newmodid).appendChild(divinloader[i]); // document.getElementById(newmodscriptid).appendChild(scriptelement[i]); var moveithere = document.getElementById(newmodid); moveithere.appendChild(divinloader[i]); moveithere.appendChild(scriptelement[i]); } // end looping through elements in the array </script> </body> </html> I appreciate any insights you can provide - feel free to call me an idjit if necessary, but please be specific if you do. Thanks, Kimm |