|
JavaScript - How Can I Use Insertbefore When I Have Parent Tags
I'm working on a greasemonkey script that requires me to append a tag before each instance of a tag with a specific class name. It works when there's no parent tags but when it goes into levels deep it doesn't work. So how can I use insertbefore?
Similar TutorialsSo here is what I have so far. Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TableDOM</title>
<script type="text/javascript">
//Appends a new row to the tea table
function addTeaGrade(s){
var tableElem, trElem, tdElem, textElem
//get a handle for the table
tableElem = document.getElementsByTagName("table")[0]
//create text element with text entered by user
textElem = document.createTextNode(s)
//alert(textElem.nodeValue)
//create td element
tdElem = document.createElement("td")
//create tr element
trElem = document.createElement("tr")
//assemble row:
//footbone connected to the ankle bone,
//ankle bone connected to the shin bone, etc.
tdElem.appendChild(textElem)
trElem.appendChild(tdElem)
//get a handle for the TBODY element
var tbodyElem = document.getElementsByTagName('tbody')[0]
//appendChild() inserts the new row below the header of the table.
//tbodyElem.appendChild(trElem) //this here replaces the new row at the bottom of the element
tbodyElem.insertBefore(trElem, tbodyElem.getElementById("hdr-row"))
}
</script>
</head>
<body>
<h3>Example: Dynamic HTML Table</h3>
Demonstrates how to add table elements using the DOM API.
<br /><br />
<table border="1">
<tr id="hdr-row">
<th>
<a href="http://www.2basnob.com/grading-tea.html">Grades of tea</a>
</th>
</tr>
<tr id="row-1">
<td>
Golden Flowery Orange Pekoe
</td>
</tr>
<tr id="row-2">
<td>
Tippy Golden Flowery Orange Pekoe
</td>
</tr>
</table>
<br />
<form style="width:650px" id="teaForm" action="">
Grade of tea to add to table: <br />
<input id="gradeBox" size="34" type="text" value="" />
<br />
<input type="button" value="Add"
onclick="addTeaGrade(this.form.gradeBox.value)" />
<input type="reset" />
</form>
<hr />
<h3>Drilling Down Through the DOM (w/X-Ray Vision)</h3>
<script type="text/javascript">
document.write('<ol>')
var elemTbl = document.getElementsByTagName('table')[0].firstChild
document.write('<p>Children of table element:</p>')
while (elemTbl) {
document.write('<li>' + elemTbl.nodeName + '</li>')
elemTbl = elemTbl.nextSibling
}
var elemTBODY = document.getElementsByTagName('TBODY')[0].firstChild
document.write('<p>Children of TBODY element:</p>')
while (elemTBODY) {
document.write('<li>' + elemTBODY.nodeName + '</li>')
elemTBODY = elemTBODY.nextSibling
}
var el = document.getElementById('hdr-row').nextSibling;
document.write('<p>Siblings of hdr-row:</p>')
while (el) {
document.write('<li>' + el.nodeName + '</li>')
el = el.nextSibling
}
document.write('</ol>');
</script>
<hr />
<h3>The Complex Table Model</h3>
The Complex model incorporates all the elements of Simple tables in addition to many new elements that give the author even more organizational control. The Complex model gives the developer the ability to group Table Rows into THEAD, TBODY and TFOOT sections. <br /><br />
The TBODY element is part of a trio of table grouping elements that organize a series of Table Rows [TR] into Header [THEAD], Body [TBODY] and Footer [TFOOT] sections.
<br /><br />
The THEAD and TFOOT section markers are optional, but one or more TBODY sections are always required. <br />
<br />
To allow for backward compatibility with the older Simple Table Model, if no TBODY structures exist in a table, the entire set of row groupings [TR] are assumed to be a single TBODY.
</body>
</html>
I don't see what I am doing wrong I assume it is referencing the wrong nodes? Any help would be great. I try to insert a list item into an Ul,it works fine except in IE. PHP Code: var menu_name = document.getElementById("main").value; var real_pos = document.getElementById("main_pos").value; var menu_pos = real_pos-1; var ul = document.getElementById("vert_menu"); var li = document.createElement("li"); li.setAttribute("name","list"); li.innerHTML = "<a href='#nogo'>" + menu_name + "</a>"; line36-----> ul.insertBefore(li,document.getElementsByName("list")[menu_pos]); Jslint says the code is valid. IE says:invalid argument line 36,character6. Hello everyone, I'm working with the insertBefore method and am having a slight issue that l'm sure is very easy to fix but l can't figure it out. If you look at the following page and click the "add game" button you'll see that extra "game" tables are added to the page. http://www1.theworldlink.com/test/insertBefore.php In the above example the <div id="box_scores"></div> tag is found directly before the closing <body> tag (and l need it inside of a form element). however on this example: http://www1.theworldlink.com/test/insertBefore2.php I have the <div id="box_scores"></div> div inside of a form element as apposed to directly before the closing <body> tag and the script fails to work. Here is the JS code that l'm using: Code: newDiv = document.createElement("div");
newDiv.innerHTML = 'test test test';
my_div = document.getElementById("box_scores");
document.body.insertBefore(newDiv, my_div);
and l'm certain the problem is he document.body.insertBefore(newDiv, my_div); I've tried: document.body.forms[0].insertBefore(newDiv, my_div); and several other varients but l can't figure it out.... any help would be greatly appreciated!!!! I'm brand new to JavaScript, and I come from a purely logical scripting background so forgive me if this is the most poorly formed code/bad technique that you've recently seen. I've played the google games for days and I surrender. I usually find a way to fight through it and figure it out, but I'm going to have to cede this one. I'm simply trying to put a new tab next to a tab that is already present on a page (classed: mirrortab_first) I'm trying to use XPath to select the element and then place newTab before it. Seemed simple enough to start. But as the code sits, the tab always winds up at the bottom of the page. Any thoughts? Kind regards. Code: var newTab = document.createElement("div");
newTab.setAttribute('id','newTab');
newTab.innerHTML =
'<table cellpadding="0" cellspacing="0" border="0"><tbody><tr>' +
'<td class="mirrortab_first"> </td>' +
'<td class="mirrortab_back">' +
'<a style="cursor:pointer;">Hide Classifieds</a>' +
'</td>' +
'<td class="mirrortab_last"> </td>' +
'</tr></tbody></table></div>';
var tabLocation = document.evaluate('//td[contains(@class, "mirrortab_first")][1]',document,null,XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,null);
for (i=0; i<tabLocation.snapshotLength; i++)
{
tL = tabLocation.snapshotItem(i).parentNode;
}
document.body.insertBefore(newTab, document.tL);
Hello all, I have a page which has a form and also one iframe in the same. there is a button on the parent form. when the button is clicked, i am submitting the iframe and parent both. forms are getting submitted. but when i do print_r for iframe values, it is blank below is the code Parent page: Code:
<?
print "<pre>";
print_r($_POST);
print "</pre>";
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
function validate(){
document.getElementById('mainform').submit();
window.frames['iframe1'].document.forms[0].submit();
}
//-->
</SCRIPT>
<BODY>
<FORM METHOD=POST ACTION="" name='mainform' id='mainform'>
<TABLE>
<TR>
<TD>Name</TD>
<TD><INPUT TYPE="text" NAME="Name_VC"></TD>
</TR>
<TR>
<TD>Address</TD>
<TD><INPUT TYPE="text" NAME="Address_VC"></TD>
</TR>
<TR>
<TD colspan=2><INPUT TYPE="button" name="proceed" value="Save" onClick="validate();"></TD>
</TR>
</TABLE>
</FORM>
<iframe src="test1.php" id='iframe1'></iframe>
</BODY>
</HTML>
iframe page : test1.php Code: <? print "<pre>"; print_r($POST); print "</pre>"; ?> <form name='mainform2' id='mainform2' method='post' action=''> Roll number : <INPUT TYPE="text" NAME="Rollnum" value=''> Age: <INPUT TYPE="text" NAME="Age_IN" value=''> </form> Please tell me what is my mistake or how can i achieve values of all 4 fields Million thanks Hello everyone, I have a page. In that page is an iframe, lets name it 'A'. inside A there is another iframe 'B'. there is a link on that page which on click opens a popup. In that pop up, there is actually a document upload facility. Now i want that after every upload (onSubmit), iframe A should refresh. have done it many times but today its not working. Code: function validate() {
(window.parent.opener.location.href)=(window.parent.opener.location.href);
window.parent.opener.location.reload(true);// this is tried as well
}
Can some one please help. it always refreshes only B. Thanks Hi, I'm very new to javascript and don't really ask questions in forums because i usually find what I'm looking for in other threads. I have a situation where I open a popup window from what I'll call "the main page", insert some text and open a 2nd popup from there. After making a selection, that window closes to bring the 1st popup back to focus. When I submit the form in that window, some info is changed in a database. How can I refresh or reload the main page to show the changes? Is the "main page" still the opener after opening and closing windows?
Hi guys, new to javascript and need some basic help or advice. I have this code which changes the the background postion of the parent(ul) Code: <ul>
<li class="highways" onmouseover="if(this.parentNode) this.parentNode.style.background='transparent url(http://www.webaddress.co.uk/website/media/images/Sub_nav_img.jpg) no-repeat 0 -149px';"
onmouseout="if(this.parentNode) this.parentNode.style.background='transparent url(http://www.webaddress.co.uk/website/media/images/Sub_nav_img.jpg) no-repeat 0 0';"><a href=" " title="Highways">Highways</a></li>
</li>
</ul>
I would like to do the same thing change the backgroundpossition/images of the div (id="flash") on the hover of the a within the the (div="mySlides2" > div ) Code: <div id="flash">
<img src="images/img1.jpg" width="886" height="229" />
<div id="myController2">
<span class="jFlowControl2">No 1 </span>
<span class="jFlowControl2">No 2 </span>
</div>
<div id="mySlides2">
<div>
<a (would like to do somthing on the hover of this) class="vm" href="#" title="Vulnerability Management"></a>
<a class="grc" href="#" title="grc"></a>
<a class="pci" href="#" title="pci"></a>
<a class="gcs" href="#" title="gcs"></a>
<a class<div id="flash">
<img src="im="pt" href="#" title="Penetration Testing"> </a>
<span class="jFlowNext2 NextFlash"> </span>
</div>
<div>
<span class="jFlowPrev2 BackFlash"> </span>
</div>
</div>
</div>
any help of advice would b appricated Dear Great Coders, I am having some trouble to get the id of the parent of a document which is iframe1 here. As you can see it the <javascript> is residing in the javascript section. Do mind giving me some ideas? Yes, I know. I can insert the javascript on the top, but believe me i cant for some purpose because I am intergrating many other codes into it. <html> <iframe id="iframe1"> <html> <head> <javascript> </head> <body> </body> </html> </iframe> </html> Code: /**
* @class TestInheritance
*
* This is a class and it's constructor all in one but the constructor is not set yet
*/
function TestInheritance(){
this.testName;
return this;
}
/**
* @extends Util
* Make sure this is called after the constructor/class declaration
*/
TestInheritance.prototype = new Util();
/**
* @ctor TestInheritance
* Set it to itself if there isn't an explicit constructor
*/
TestInheritance.prototype.constructor = TestInheritance;
/**
* @extends Util
* This specifically is set to allow TestInheritance to access it's parent's identity
*/
TestInheritance.prototype.parent = new Util();
/**
* @extends Util
* @argument testName String
* All functions are called after setting the prototype
*/
TestInheritance.prototype.setTestName = function(testName){
this.testName = testName;
}
How would I reference the same Util class on both the prototype and the parent? I have three images nested in three divs that I want to change size on mouseover, but since they're each in their own div, I can't effect their z-indexes relative to one another without targeting their parent divs. I thought I'd be able to contain the images in an <a> tag with z-index style in a mouseover, but I can get it to work. What am I doing wrong here? CSS: Code: .thumb img{
height: 75px;
}
.thumb img:hover{
height: 150px;
}
JS: Code: function thmbOver(){
this.style.zIndex = "1000";
}
HTML: Code: <div id="div1"><a onmouseover='thmbOver();'><span class='thumb'><img src='thmbs/image1.jpg'></span></a></div> <div id="div2"><a onmouseover='thmbOver();'><span class='thumb'><img src='thmbs/image2.jpg'></span></a></div> <div id="div3"><a onmouseover='thmbOver();'><span class='thumb'><img src='thmbs/image3.jpg'></span></a></div> I've tried a few approaches to the function's targeting, like document.getElementById(this.parent.id).style.zIndex, etc, but still nothing. Any ideas? Thanks, ~gyz I'm working on a upload script that uses javascript, and a hidden iframe to upload the files. It all works up until the iframe finishes and needs to send the javascript function call back to the parent page, nothing happens, when it should hide the upload progress bar. I've searched and searched for the awnser, along with trying different alternative to window.top.window, such as window.top, parent, and parent.document and so far nothing has worked, I've even tried the onLoad on the iframe with no success. Parent Page function: Code: function stopUpload(success, ups, file)
{
var result = '';
var uploaded = '0';
if (success == 1)
{
result = '<span class="msg">The file was uploaded successfully!<\/span><br>';
uploaded = uploaded ++;
if (uploaded == document.getElementById('numflowers').value)
{
document.getElementById(finish).style.display = 'block';
}
}
else if (success == 2)
{
result = '<span class="msg">There was an error during file upload! The file has a size of 0<\/span><br> File: <input name="ufile[]" id="ufile[]" type="file" size="30"> <input type="submit" name="submitBtn" value="Upload">';
}
else if (success == 3)
{
result = '<span class="msg"> We only allow .png, .jpg, .gif, .zip, .rar, and .7z files to be uploaded. If you think we should allow other please make a suggestion on the forums.<\/span><br> File: <input name="ufile[]" id="ufile[]" type="file" size="30"> <input type="submit" name="submitBtn" value="Upload">';
}
var uploadp = "upload_process" + ups;
var uploadf = "upload_form" + ups;
document.getElementById('uploadp').style.display = 'none';
document.getElementById('uploadf').innerHTML = 'result';
document.getElementById('uploadf').style.display = 'block';
}
Function call inside iframe (example) Code: window.top.window.stopUpload(3, 1, test.txt) Thanks for the help. I am trying to detect the parent URL on a page for a Facebook application so that if the user is on my site rather than accessing the application via Facebook they will be redirected to the FB App page. In PHP I can use: if(strstr($parenturl,"mysite.com")){header("location:fbapp.com");exit;} Is it possible to do this in JS also? Because with FB Apps the URL is not always the same so instead of detecting a full URL I just want to search for my domain name within document.location.href to see if it exists and IF yes > Redirect back to FB. I'm trying to accessing the Parent window fom a sub window previously opened using window.open I'm using firebug to t yand debug, and it shows that this DOM entry exists.. window.opener.location.href But trying to access it gives "window opener is null" error I've tried all these, and get the various errors tagged on the end... Code: <script language="JavaScript"> //alert(opener.location); // = opener is null //alert(opener.location.href); // = opener is null //alert(parent.location); // = uncaught exeption - could not convert to javascript argument arg 0 //alert(parent.location.href); // = Permission denied to get property Location.href //alert(parent.opener.location); // = uncaught exeption - could not convert to javascript argument arg 0 //alert(parent.opener.location.href); // = Permission denied to get property Location.href //alert(parent.window.opener.location.href); // = Permission denied to get property Location.href //alert(parent.window.opener.location.href); // = Permission denied to get property Location.href //alert(window.opener.location); // = window opener is null //alert(window.opener.location.href); // = window opener is null //alert(window.parent.location); // = uncaught exeption - could not convert to javascript argument arg 0 </script> driving me crazy! Anyone have a solution? I have a javascript for a tree view but i need to change it according to the requirement. Lets start with example with the treeview as follow: 1 Door phone 1.1 Ready Kits 1.1.1 Audioset 1.1.2 Videoset 1.2 Audio Kits 1.2.1 Elphone 1.2.2 Video Door phone 2 CCTV 2.1 Camera 2.1.1 Dome Camera 2.1.2 IP Camera 2.2 Others Now the thing is in the current treeview a single category is open at a time. like if 1.1.1 is open 1.1.2 will b closed and similarly if 1.1 is open...1.2 will b closed. But i want that when i click on 1(Door phone) ie Door phone...evry node should be opened instead of just one similary when i click on 2(CCTV), all its node should be opened. I hope it will be possible to achieve this and i would be helped. I can also provide with the javascript if required. In order to better understand the DOM data structure, I am trying to write a JavaScript that will produce something like HTML from the DOM data structure. My current problem is that when I include a <br> tag in my source HTML, it reports that its parent is undefined, and this is breaking my code. So, given the following code, why does the <br> tag report that it's parent is undefined. Code: <html>
<head>
<title>br.parent</title>
<script type="text/javascript">
function brTest() {
var jBR = document.getElementsByTagName("br")[0];
alert("<br>.nodeType = " + jBR.nodeType +
"\n<br>.nodeName = " + jBR.nodeName +
"\n<br>.ParentNode = " + jBR.ParentNode);
}
</script>
</head>
<body onload = "brTest();">
<p>Now is <br> the time.</p>
</body>
</html>
Thanks for any help you can provide. Jerry Dear Madam/Sir, I would greatly appreciate any help. I am working on this site: http://www.pathology.ubc.ca/Path_UBC...Professor.html. The list of names on the right hand side is conencted to the iframe, left hand side. By clicking on individual name the eprofile is populated in the iframe. Everything works fine but what I would like to add is some kind of extention to the url so we can externaly link directly to each these profiles. Please let me know if this is something that can be done? Many thanks, Debbie currently i have the script as below which open the link in new tab but also shifts the focus to it...how do i keep the focus on the parent window PHP Code: <script type="text/javascript"> function openlink(url) { window.open(url); return false; } </script> <div class="btn" onclick="openlink()">Open Link</div> Sorry my bad, but im stuck again. I have tried to search in hours, but i cant find the answer. I think you the pro coders will see the code directly. I have an webbpage, and in the middle of it there is an iframe to a php site. So i have used this code, so after some seconds the iframe will send the guest to another page. <meta http-equiv="refresh" traget="_top" content="5 url=http://mypage.com"/> But the thing is that i want the WHOLE page to reload, and go to that page after 5 seconds (we can say). With that code, only the iframe are going to another page. Is it possible to make the whole page send the user after some seconds, to another page and not only the iframe? Hi I want to create a parent class which initialises various stuff and then triggers a 'onStart' function. The idea is that the child classes can then just override this start function and do their thing when everything is initialised. This is the code I was trying to use but it doesn't work PHP Code: function Parent() { this.onStart = function() { alert("Parent, start"); } // do various things.... this.onStart(); } function Child() { this.onStart = function() { alert("Child, start"); } } Child.prototype = new Parent(); What I get is the parent start method always being called, not the child one. I know that using this.onStart is assigning the method to the object not the prototype, so maybe I am mixing my methods here - but I tried it this way and it still doesn't work PHP Code: function Parent() { // do various things.... this.onStart(); } Parent.prototype.onStart = function() { alert("Parent, start"); } function Child() { } Child.prototype = new Parent(); Child.onStart = function() { alert("Child, start"); } What am I doing wrong? Is it not possible for a parent to trigger a method which is subsequently overridden by a child? |
|||||||