Search the Community

Showing results for tags 'DOM'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH


  • Community Calendar




Website URL








Found 18 results

  1. Hi, im a little bit struggling here. What I am trying to do is read the content from a Table by reading the number of rows and cells,(later on only selected rows by checkbox) then display the data in a ´generated Table (where i have to add cells with inputfields) So now my question is: How do i have to write the code so the first row will be created with <th> instead of <td> ? How to add input fields to the cells ? (actually they all could be input fields, just filled out with the data from the table i read from and blank fields for the added or so on.) function generate_table() { // get the reference for the body var body = document.getElementsByTagName("body")[0]; var x = document.getElementById("TableB").rows.length; var y = document.getElementById("TableB").rows[0].childElementCount; var z = document.getElementById("TableB").rows[1].cells[3].innerText; alert("x="+x +" y="+y+" z="+z); // creates a <table> element and a <tbody> element var tbl = document.createElement("table"); var tblBody = document.createElement("tbody"); // creating all cells for (var i = 0; i < x; i++) { // creates a table row var row = document.createElement("tr"); alert("ROW"+row); for (var j = 0; j < y; j++) { // Create a <td> element and a text node, make the text // node the contents of the <td>, and put the <td> at // the end of the table row var cellText = document.createTextNode("cell in row "+i+", column "+j); if (row.tabIndex[0]){ var cell = document.createElement("th"); cell.appendChild(cellText); row.appendChild(cell); } else{ cell = document.createElement("td");} cell.appendChild(cellText); row.appendChild(cell); } // add the row to the end of the table body tblBody.appendChild(row); } // put the <tbody> in the <table> tbl.appendChild(tblBody); // appends <table> into <body> body.appendChild(tbl); // sets the border attribute of tbl to 2; tbl.setAttribute("border", "2"); tbl.setAttribute("class", "tableTest"); }
  2. Hello, I found a function called fnGetSibling on and I was hoping to understand what it does return and why. var oPrevious = fnGetSibling(); function fnGetSibling(){ var oParent=oNode.parentElement; var iLength=oParent.children.length; for(var i=0;i < iLength;i++){ if(oParent.children[i]==oNode){ return oParent.children[i - 1]; break; } } } I have three possible options: 1. Finds and returns a reference to all childs of a node of DOM Tree. 2. Finds and returns a reference to one of the children of a node of DOM Tree. 3. Finds and returns a reference to a father of a node of DOM Tree. You are not solving any homework (it's summer), it's just from a quiz.
  3. Hello and thank you all for bringing me into this forum. I would want to make a website about video games with news, articles, login system, etc., and I'm learning to make it with W3Schools. My issue is with the XML DOM. I tried to use JavaScript to add XML data (in the form of a news list) to my HTML page, so I used the following JavaScript code: var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (xhttp.readyState == 4 && xhttp.status == 200) { newsDisplay(xhttp); } };"GET", "news.xml", true); xhttp.send(); function newsDisplay(xml) { var xmlDoc, maxNews, txt, titles, dates; xmlDoc = xml.responseXML; maxNews = 5; txt = ""; titles = xmlDoc.getElementsByTagName("title"); dates = xmlDoc.getElementsByTagName("date"); for (i = 0; i < maxNews; i++) { txt += '<a href="news/news_' + + '.html"><div class="news_block">' + '<div class="news_title">Noticia' + titles[i].childNodes[0].nodeValue + '</div>' + '<div class="news_date">Fecha' + dates[i].childNodes[0].nodeValue + '</div></div></a>'; } document.getElementById("news").innerHTML = txt; } Being: news.xml the file where the news come from, with the <title> and <date> tags in each of the news maxNews the number of news to show in the list (from the first ones in the XML) But when I test my web page, the console says: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource. . Thank you for any help.
  4. Hello all, I have an SPA with a UI element akin to a directory tree (the grey column on the left) which allows the users to navigate the site's main content: The base of the code is implemented in the following HTML/CSS: <ul id="nav"> <li class="i"> <a href="Services">Services</a> <ul class="d"> <li> <a href="Services/Certificates">Certificates</a> </li> <li class="i"> <a href="Services/Responsabilities">Responsabilities</a> <ul class="d"> <li> <a href="Services/Responsabilities/Transportation">Transportation</a> </li> <li> <a href="Services/Responsabilities/Hospitality">Hospitality</a> </li></ul></li></ul></li> <li class="i"> <a href="Encyclopedia">Encyclopedia</a> <ul class="d"> <li> <a href="Encyclopedia/Society">Society</a> </li> <li> <a href="Encyclopedia/Arts">Arts</a> </li> <li> <a href="Encyclopedia/Technology">Technology</a> </li></ul></li> <li class="i"> <a href="Activities">Activity</a> </li></ul> .i,.i>.d {position:relative} .i>.d {display:none} .i:hover>.d {display:inherit} The <ul>s behave as intended on hover; the objective here is to work out a solution which will override '.i>.d {display:none}' when the user clicks on an <a>. That way, the user's current location in the website will be evident just from the links which are visible - like the left pane of File Manager on Windows. Now, since CSS doesn't have any parent selectors, I must resort to using JavaScript Event Listeners to listen for clicks on an <a> and style the relevant parents accordingly. To update the displayed location on the click of an <a>, all styles in #nav must be reset to default, and then the parents of the <a> that was clicked on must be styled through event propagation. It turns out that the capturing mode is best because then I can implement a clearing routine on the #nav, and the relevant '.i's and '.d's will get the event and handle it, bug-free. Only problem is, AFAIK, only event listeners which are added dynamically can catch events in the capture phase. This means I must do a big: 'use strict'; var nav=document.getElementById('nav'), navd=nav.getElementsByClassName('d'); /* event listeners defined here */ nav.addEventListener(reset,'click',true); for (i=navd.length; i-- navd[i].addEventListener(set,'click',true); in the global scope of a loaded and deferred .js script - which works perfectly, but is just plain ugly. Is there any alternative which would allow me to do this statically (i.e. embedded in the HTML)? Or I can't do any better? P.S. Don't mind the weird content and don't google it - it's not online yet. P.P.S. I posted it here because the issue is with DOM event handling and propagation; if I should put this under scripting or some other topic, please let me know. P.P.P.S. Sorry for the long post - here's a potato
  5. Hello internet, There is a webpage I would like to start building but I need to be able to pull data from other webpages. The information is public info so it’s nothing sketchy but I don’t know where to start. I began with just doing google searches but it appears it is more involved than I originally thought. If you have any recommendations on tutorials or Forum discussions I would be grateful. Thanks.
  6. I need to cut the program to the final logic cut. It's now ~10 times smaller, although it's as far as I could get in my understanding now.Given two identical text strings. When you write in <input> you should write letters which have to be identical to the given line. And while you're typing the cursor moves until the excercise_results().My program is still big, and I need some help in understanding it's actions. I know that each text contains a final dot and a space after it. But I couldn't link this with the number "2" in for loop (after hiding the color of the <p >passage -...textDecoration "none"):length - 2[i + 2]the second:extraNodes > 2[pos + 2]and the third:(k - 1)and(k - 2) <body> <p id="isdivNode"><span>Staff. </span> </p> <form> <input size="55" onkeypress="compare(event)"> </form> <script> var strtest = "Staff. "; divNode = document.getElementById("isdivNode"); var xp = 0; deep = true; divNode.childNodes[0].style.textDecoration = "none"; for (i = 0; i < strtest.length; i++) { if (i < divNode.childNodes.length - 2) { if (divNode.childNodes[i + 2].nodeType == 1) { divNode.childNodes[i + 2] = strtest.charAt(i); } } else { myNode = divNode.firstChild.cloneNode(deep); = strtest.charAt(i); divNode.appendChild(myNode); } } extraNodes = divNode.childNodes.length - strtest.length; pos = strtest.length; while (extraNodes > 2) { divNode.childNodes[pos + 2] = ""; pos++; extraNodes--; } divNode.childNodes[0].style.color = "white"; document.forms[0].elements[0].value = ""; function compare(e) { var k = strtest.length; if (xp < (k - 1)) { var keyChar = String.fromCharCode(e.which); if (strtest.charAt(xp) == keyChar) { divNode.childNodes[xp + 2].style.textDecoration = "none"; xp += 1; if (xp > (k - 2)) excercise_results(); divNode.childNodes[xp + 2].style.textDecoration = "underline"; } } } function excercise_results() { confirm("fin"); } </script></body> I'm not at all experienced with DOM. It's hard for me to link conditional logic with the DOM manipulations. And I can't cut the program anymore (to have one/two "straight" conditions to see how it's work and logic) - to get the cursor just pointing to another character to match.Thanks in advance. t.php tt.php
  7. Hi, all, Swirling Dervish noobie here, and I can't seem to get one page element to "inherit" the height value of another: js: /* quotepick is the holder for the chosen display quote from the defText array; i is the index of the quote from the definition (defText) array; the goal is to get the div#jsGall2 (a backsplash to text) to inherit div#bennies' (text against the backsplash) height value. */ var quotePick = defText; if ((typeof quotePick) != 'undefined') { var dSize = document.getElementById("bennies"); var eSize = document.getElementById("jsGall2"); var b = dSize.innerHTML=quotePick; var f = eSize.setAttribute ("style", eval(; /* one version */ } else { document.getElementById("bennies").innerHTML=''; } I'VE ALSO TRIED: var quotePick = defText; if ((typeof quotePick) != 'undefined') { var dSize = document.getElementById("bennies"); var eSize = document.getElementById("jsGall2"); var b = dSize.innerHTML=quotePick; var f = =; /* another version */ } else { document.getElementById("bennies").innerHTML=''; } I know I've gotta be mucking up royally in syntax, right? Help.... -Swirling...headache...
  8. Hello @ all, I'm again dive to a problem which is that, I want to create a progress updater using div and spans. that's roughly the idea of mine is: 1. A span is child of div. 2. The width of the span is increasing according to time. 3. When the width is 100% then, span cover the whole div. 4. All magic happening in the JavaScript. code of mine... <!DOCTYPE html> <html> <head> <style> //style goes here. //I don't need it. </style> </head> <body> <div id="container" > <span id="slider" > </span> </div> <script> function update () { var slider = document.getElementById("slider"); var width = 0; = width + "%"; width++; setTimeout(update,300); } update(); </script> </body> </html> The problem is that the width is not increasing after the specified period of time i.e. 300ms. if any one help me that's great.
  9. Hi, I am trying to create a text tag where users can add comments, delete them and also choose where to insert that comment(if not default). My problem is how to give each new node a unique id, which should be a number 1, 2 and so on. Using these numbers, the user could select where to insert the new par or even to select which one to be deleted. To be honest I want to create a checkbox next to the new par, so the user can just thick which par to delete and then press the button, but I am open to better ideas:) For start could someone help me how to make it a create a unique id for each new nodes and how to call 2 var inside appendChild() Thanks <script> function addNew(){ var inputText=form.inputText.value var para=document.createElement("p"); var node=document.createTextNode(inputText); var x = document.createElement("INPUT"); x.setAttribute("type", "checkbox"); para.appendChild(node); // I tried para.appendChild(node, x); var element=document.getElementById("div1"); element.appendChild(para); // also element.appendChild(para, x); and all other variations. } function deleteComment(){ var parent=document.getElementById("div1"); var child=document.getElementById("ggg"); parent.removeChild(child); } /* * function addBefore(){ var inputText=form.inputText.value var para=document.createElement("p"); var node=document.createTextNode(inputText); para.appendChild(node); var element=document.getElementById("div1"); var child=document.getElementById("line"); element.insertBefore(para,child); } * */ </script> </head> <body> <form id="form"> <input type="text" value="inputText" id="inputText" /> <input type="button" value="Add New Comment" onclick="addNew()" /> <input type="button" value="Delete A Comment" onclick="deleteComment()" /> </form> <div id="div1"> <p id="ggg">gggggg</p> </div> </body>
  10. Hi, I need to use getElementById to reference to a div which contains a pic and without changing anything in the body tag, a random image slideshow should appear on load! instead of that pic. I have tried different ways to sort it out, but it was never perfect... Got 3 problems, first function changeDiv it says getElementsByTagname(...)[] is not defined... second is in the function rotateimage else document.images.splash undefined... third newimages function overwrites the whole page and it should only change the div anyone could help me out on this one?? Thanks 1.html
  11. to the web page give above JavaScript Dom object navigator have mime type object plugin object window object but in your site in this page there is no those objects under navigator object.i want know is it mistake ormy referenced above web page( is wrong
  12. I used loadXMLDoc to load an XML file onto my web page. I then saved different contents to a file of the save name. When I reloaded the file with loadXMLDoc, I got the original contents instead of the new contents. I deleted the file and then save the new contents to the file with the same name. Reloading still gave me the old contents. I then changed the name of the file. This time loading the file with loadXMLDoc gave me the new contents. Does loadXMLDoc remember the contents that was loaded from a file with a given name and not bother reloading the contents if I present it with a file of the same name albeit different contents? After modifying the file, I looked at the XML code and the contents were modified after the first modification.
  13. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""><html xmlns=""><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Join</title></head><body><div id=maincontainer><div id="head"></div><p id="usertxt"> Please to join click on one of the accounts that fits your proffesion.</p><div id="fatline"></div><div id="ceo" onmouseout="offbckg()" onmouseover="showbckg()" onclick="ceoform()"><p id="ceo_txt">C.E.O</p></div> <div id="staff" onmouseout="offbckg()" onmouseover="showbckg()" onclick="staffform()"><p id="staff_txt">Staff</p></div> <div id="student" onmouseout="offbckg()" onmouseover="showbckg()" onclick="ceoform()"><p id="student_txt">Student</p></div> <div id="infobox"><p id="ceoacc">C.E.O Account</p><p id="ceoinfo">The C.E.O account is an account that deals with people who have large business with branches nationwide or worldwide and are employers of Job/labour,and also who have large number of staff 100 and above.This account helps to link them to their staff,customers,business-partners,goverment-officials/organization that the C.E.O does business with.</p><p id="ceoacc">Staff Account</p><p id="ceoinfo">The Staff account is an account that deals with people who are employees in firm/establishments/organizations in various works of life.This account helps to link to their c.e.o,managers and other staff in their organization both national and international.other of the staff-self products can be sold here and more.</p><p id="ceoacc">Student Account</p><p id="ceoinfo">The Student account is an account that deals with people who are (18) years of age and are in a collegde/university (tetary instituation) who after school will become job-seekers,This platform help them to submit their credentials and and let Jobpal search help them do the search for their dream jobs.with Jobpal's platform they can also be Jobpal-lancers(Free-lancers).</p></div> <style type="text/css">#ceoinfo{color:#3CB3C3;font-size:25px;margin:5px;background-color:#e7f2f4;}#ceoacc{font-size:20px;background-color:#3CB3C3;text-align:center;color:white;font-family:"Lucida Console", Monaco, monospace;}#infobox{width:28cm;height:14cm;border:thin solid #3CB3C3;margin-top:-14.1cm;margin-left:6.5cm;}#fatline{width:0.5cm;height:20cm;border:thin solid #3CB3C3;margin-top:-0.7cm;margin-left:3px;background-color:#e7f2f4;}#usertxt{color:#3CB3C3;font-size:24px;font-family:Verdana, Geneva, sans-serif;text-decoration:underline;margin-left:10cm;}*{margin:0cm;}#head{width:auto;height:2cm;background-color:#3CB3C3;}#ceo,#staff,#student{width:5cm;height:2cm;background-color:#e7f2f4;border:thin solid #3CB3C3;margin-left:0.6cm;}#ceo{margin-top:-18cm;} #ceo:hover{border-left-width:0.5cm;border-left-color:#3CB3C3;} #staff{margin-top:4cm;} #staff:hover{border-left-width:0.5cm;border-left-color:#3CB3C3;}#student{margin-top:4cm;} #student:hover{border-left-width:0.5cm;border-left-color:#3CB3C3;} #ceo_txt,#staff_txt,#student_txt{font-size:30px;font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;color:#3CB3C3;text-align:center;margin-top:15px; } </style><script type="text/javascript">function showbckg(){var longline=document.getElementById("fatline").style;longline.backgroundColor="#3CB3C3"; }function offbckg(){var longline=document.getElementById("fatline").style;longline.backgroundColor="#e7f2f4"; }function ceoform(x,y){var delete_infobox=document.getElementById('infobox');var refstudent=document.getElementById('student');} </script></div></body></html>hello fellow web developers please i am writing my webapp but i have issues on this on my join page{register page} in the javascript section of the page i am actually using the DOM to remove the #infobox[div] what i want to do is that i want a sitituation where by where my users click on the the three links the #infobox(id)and all its element are remove and replace with a set of div that is a form which the user will input their registration information in which i will ask these i plan it to go... from the elements.............<div id="fatline"></div><div id="ceo" onmouseout="offbckg()" onmouseover="showbckg()" onclick="ceoform()"><p id="ceo_txt">C.E.O</p></div> <div id="staff" onmouseout="offbckg()" onmouseover="showbckg()" onclick="ceoform()"><p id="staff_txt">Staff</p></div> <div id="student" onmouseout="offbckg()" onmouseover="showbckg()" onclick="ceoform()"><p id="student_txt">Student</p></div>***********************************************************************************************the javascript section of the code...function ceoform(x,y){var delete_infobox=document.getElementById('infobox');var refstudent=document.getElementById('student');delete_infobox.parentNode.removeChild(delete_infobox);}but the problem is that after the elements in the #infobox are deleted.i try to use the document.createElement() function to add a new set of div element after the the info-box have been deleted but the new element are not showing in the browser is it that there some kind of control stucture i will use to create new element after the #infobox has been remove...please help...also please let me add this i want make a situation where by the before the form comes to the web-page like 5-7seconds a loading gif image will load befor the form display in the webpage how can i do that on javascript....
  14. I am developing a function to find a particular element within another element identifier (similar to getElementById but that applies to any other element) ... Because this throws me arror: var ancestor = document.getElementById('divAncestor');var child = ancestor.getElementById('divChild'); I know, HTML specifies that ids must be unique but reality proves that often running scripts that can have items with the same ids. So, thats the reason why I'm not simply calling the child like this: var ancestor = document.getElementById('divChild'); The first option was to add this function to each HTML element, or at least the divs (because that's what interests me identify). The second, and is the one I prefer, is to add a method to the document object and call from there by passing the ID of the father and son as parameters. Is this possible?Thanks for your time.
  15. Hi, I intend to add a custom javascript object to the DOM of a HTML page to be able to access this object via its id (document.getElementById). Adding Nodes like Div..., that are known by DOM, works but where and how can I add the custom JScript Object. This is my testcode <!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8"> <script type="text/javascript"> function initJScript(){ var customObject = new customObjectConstructor(); var testDiv = document.createElement('div'); alert(testDiv); alert(customObject); alert(document); document.body.appendChild(testDiv); //Works document.appendChild(customObject); //Does NOT Work!!! How can i append a custom object [object Object] to DOM??? document.getElementById("customObjectId"); //to make this work } function customObjectConstructor(){ = "customObjectId" this.x = 12345; } </script> </head> <body onload="initJScript()"> <div id="testdiv"> <h1> Überschrift</h1> </div> </body></html>[font=arial,helvetica,sans-serif][\codebox][/font] This is the error message from firebugNS_ERROR_XPC_BAD_CONVERT_JS: Could not convert JavaScript argument arg 0 [nsIDOMHTMLDocument.appendChild][font=arial,helvetica,sans-serif]Thanks a lot for your help[/font]
  16. Hello, I have an XML file called cookbook.xml as well as an XSL file linked to it, called cookbook.xsl that presents all the information found in the .xml file in an html table (with headings, seperate cells, etc.) Now I want to create an html file that will presenet the above complete table on page load, as well as some query fields above that table, so that the table is refreshed according to a user's input (filters..) More specifically: XML file: For each cookbook (represented by a recipestories element), the file contains information about its title, author(s), year and page numbers, among others As for the HTML file, the user should be able to filter the results appearing on the table as follows: for each of author, title and year, the user should be able to enter a value (e.g. 1990) as well as an operator (e.g., <, =, >) and retrieve the cookbooks satisfying the corresponding conditions (e.g., year=1990). The user should be able to enter conditions for any combination of these three properties. If no conditions are entered, all cookbooks should be returned. For author and title, the user should also be able to enter "contains" as an operator, along with some value. In this case, the system should return cookbooks where the corresponding author or title contains the value entered as a substring. For example, I might want all papers where the title contains the string "choco". The user should also be able to search for cookbookss by their number of authors. Here too an operator and value should be allowed (e.g., all cookbooks with at least 3 authors). The user should be able to specify the property (author, title, pages or year) by which the returned cookbooks should be sorted. This is where I am right now: <html> <script type="text/javascript"> function loadXML(file) //function for loading XML files{ var moz = (typeof document.implementation.createDocument != 'undefined'); var ie = (typeof window.ActiveXObject != 'undefined'); var xmlDoc; if (moz) xmlDoc = document.implementation.createDocument("", "", null); else if (ie) xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async = false; xmlDoc.load(file); return xmlDoc;} </script> <script type="text/javascript"> var xmlDoc = loadXML("cookbooks.xml");var stylesheet = loadXML("cookbooks.xsl");var moz = (typeof document.implementation.createDocument != 'undefined');var ie = (typeof window.ActiveXObject != 'undefined'); if (moz){ var nsResolver = stylesheet.createNSResolver(stylesheet.ownerDocument == null ? stylesheet.documentElement:stylesheet.ownerDocument.documentElement); ..........} else if (ie){ var value = stylesheet.selectSingleNode(............} </script> </html> that is pretty basic I know, but I'm also pretty lost and desperate and I don't know where to start from! Do I create an html form with the fields for the queries and a submit button? Do I then take all the values entered in the above form and "spread them out" in that NSResolver function I'm trying to create above, evaluate them and reapply the stylesheet to the xml file accordingly? Help!
  17. Hello All, So you frequently see reductions with commonly used objects such as: var $this = $(this)//Or....var $objectName = $('.className') Is there any places or reason why you would chose to use the $ before the var name to create an object as oppose to just making a normal variable? I'm looking to find and replace the objects with these sorts of variables to reduce file size, make it easier to read, and hopefully speed up load time but to check with experts before I potentially F#$! up my work. Thoughts? Also, any thoughts on how to structure code (in general) to run most efficiently would be helpful. I auditioned a very scant, un-skinned version of my page on the server and it took much longer than I expected to load (on my itty bitty netbook of which I think some cell phones have more processing power). Thanks!
  18. Hi All, I've written some Javascript that will dynamically add "file" inputs to a form. They show up on the page just fine when the add control is clicked. But, when I submit the form, those dynamically added form fields are absent from the form structure on the receiving page. They're also absent from the form structure passed to the validation function. The added fields are added to a table within the form tags. The JS code adds table rows (TR). Then, cells are added to that row. Then, the file inputs to the cells. All this is done using DOM methods like appendChild(), createElement(), createTextNode(), etc. Is there some extra step needed to make sure the added fields are made part of the form?