|
JavaScript - Add An Element After Another
I have the following code
Code: <div class="thdnrml"> <td><a href="somelink">fonfof</a></td> </div> what i want to do is this: Code: <div class="thdnrml"> <td><a href="somelink">fonfof</a><a href="anotherlink">another_link</a></td> </div> how can i go about achieving this? Similar TutorialsThe bit of code in bold in the code below is giving me this error in IE: Error: Code: Webpage error details User Agent: Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; Trident/4.0; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) ; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729; Tablet PC 2.0; InfoPath.2; OfficeLiveConnector.1.4; .NET CLR 3.0.30729; OfficeLivePatch.1.3; MSN OptimizedIE8;ENGB) Timestamp: Tue, 16 Mar 2010 15:07:11 UTC Message: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917) Line: 0 Char: 0 Code: 0 URI: http://www.mateinastate.co.uk/users/mateinastate Code: Code: if(document.getElementById('msn1').innerHTML=="")
{
document.getElementById('msn1').style.display='none';
}
if(document.getElementById('yahoo1').innerHTML=="")
{
document.getElementById('yahoo1').style.display='none';
}
if(document.getElementById('skype1').innerHTML=="")
{
document.getElementById('skype1').style.display='none';
}
if(document.getElementById('facebook1').innerHTML.toLowerCase().substr(0,18)=='<a href="http://">')
{
document.getElementById('facebook1').style.display='none';
}
else if(document.getElementById('facebook1').innerHTML.toLowerCase().substr(0,11)=='<a href="">')
{
document.getElementById('facebook1').style.display='none';
} else
{
document.getElementById('fbook-add').innerHTML='Facebook Profile';
}
What it's saying isn't actually true (I don't think)... this is how the section is laid out: Code: <div id="submenu1" class="anylinkcss"> <ul> <li class="contact-pm"><a href="/index.php?do=pm&act=new&to=$RateViewProfileUserName$&returnurl=$ReturnURL$">PM me</a></li> <li class="contact-email"><a href="/index.php?do=email&id=$RateViewProfileUserId$">E-mail me</a></li> <li class="contact-msn" id="msn1">$RateViewProfileUser-profile_msn$</li> <li class="contact-yahoo" id="yahoo1">$RateViewProfileUser-profile_yahoo$</li> <li class="contact-skype" id="skype1">$RateViewProfileUser-profile_skype$</li> <li class="contact-facebook" id="facebook1"><a href="$RateViewProfileUser-profile_facebook$"><span id="fbook-add"></span></a></li> </ul> </div> <script type="text/javascript" src="/html_1/js/contact-information.js"></script> Does anyone know why this might error in just IE? Hi, I'm relativly new to JS and brand new to the forum so you might need to dumb down your replys for my slightly lacking knowledge. That being said I do have a very solid grasp of html, css and am getting there with JS and its various frameworks. I'm integrating wordpress into an existing site for a friend and currently have the main blog page appear in a DIV. This is the best way to integrate in this case due to many reasons mostly of way the site is constructed. Code: <div class="scroll-pane" id="scrollbox"> WORDPRESS BLOG </div> My issue is that links within that DIV, in the blog, when clicked redirect the page. The simple answer to this would be to have them just open in a new page, which I can easily do with the below code. Code: function Init()
{
// Grab the appropriate div
theDiv = document.getElementById('scrollbox');
// Grab all of the links inside the div
links = theDiv.getElementsByTagName('a');
// Loop through those links and attach the target attribute
for (var i=0, len=links.length; i < len; i++) {
// the _blank will make the link open in new window
links[i].setAttribute('target', '_blank');
}
}
window.onload = Init;
But what I'd rather it do is have any link clicked inside the DIV to reload in that same DIV, similar to an iframe, but obviously without using an iframe, due to it's compatibility issues. Is this possible by editing the above code? If not what do I need? Thanks in advance for any help! Hi, (new to javascript) Code: digAudio = document.createElement("audio");
digAudio.setAttribute('src',hypeDocument.documentName()+'_Resources/'+'digging.m4a');
digAudio.id = "diggingAudio";
newAudio = document.getElementById("diggingAudio"); //returns null
the audio element is added (I can play the audio) but I can't get it by its id ? thank you Hello I am fairly new to Javascript and found this code online but can't seem to get it to work right. here is the code I am using it is suppose to apply a style attribute the the id "toplink" but I can't seem to get it to work right. Code: $(document).ready(function(){
menuYloc = parseInt($(name).css("top").substring(0,$(name).css("top").indexOf("px")))
$(window).scroll(function () {
var offset = menuYloc+$(document).scrollTop()+"px";
$("#toplink").animate({top:offset},{duration:500,queue:false});
});
});
Thanks in advance greetings everyone! this is my first time trying to join this javascript community. Well then, now I'm telling about my miss-understanding of this keywords of javascript here... here's the html Code: <fieldset > <legend>Attachment</legend>
<table id="attachment" style="height: 50px;" width="200" border="0">
<th width="19%">Title</th>
<th width="26%">File</th>
<th width="41%">Description</th>
<th width="6%">Upload</th>
<th width="6%">More File</th>
<tr>
<td><input name="title" type="text" value="- none -" size="33" maxlength="50"></td>
<td><input name="filepath" type="file" size="33"></td>
<td><input name="description" type="text" value="- none -" size="60" maxlength="200"></td>
<td><input name="upload" type="button" value=" Upload " onclick="upload(this)"> </td>
<td><div align="center">
<input onclick="addMoreFile()" type="button" value="+">
</div></td>
</tr>
</table>
<!-- end Attachment --> </fieldset>
the aim is that the upload button would eventually changed into image and then changed back to a link. That one is already done here's the javascript Code: var attRow;
function upload(obj){
// obtain the table pointer
var attTable = document.getElementById('attachment');
// post file into the jsp file
// changing the image
// get parent pointer of this element
var par = obj.parentNode;
var loImage = document.createElement('img');
loImage.setAttribute('src', 'images/loading1.gif');
par.innerHTML = '';
par.appendChild(loImage);
// create the removal link
var text = document.createTextNode('remove');
var liRem = document.createElement('a');
liRem.setAttribute('href','javascript:removeFile(this)');
liRem.appendChild(text);
par.innerHTML = '';
par.appendChild(liRem);
}
function removeFile(obj){
// post fileid
// change the image
}
function addMoreFile(){
// create fully file upload row
// consist of two text elements, file element, and 1 button.
var nFileTitle = document.createElement('input');
nFileTitle.setAttribute('name','title');
nFileTitle.setAttribute('type','text');
nFileTitle.setAttribute('size', '33');
nFileTitle.setAttribute('value','- none -');
nFileTitle.setAttribute('maxlength','50');
var nFilePath = document.createElement('input');
nFilePath.setAttribute('name', 'filepath');
nFilePath.setAttribute('type', 'file');
nFilePath.setAttribute('size', '33');
var nDesc = document.createElement('input');
nDesc.setAttribute('name', 'description');
nDesc.setAttribute('type', 'text');
nDesc.setAttribute('value','- none -');
nDesc.setAttribute('size', '60');
nDesc.setAttribute('maxlength', '200');
var nUpButton = document.createElement('input');
nUpButton.setAttribute('name', 'upload');
nUpButton.setAttribute('type', 'button');
nUpButton.setAttribute('value', ' Upload ');
nUpButton.setAttribute('onclick', 'upload(this)');
// empty element
var ksg = document.createTextNode(' ');
// obtain the table pointer
var attTable = document.getElementById('attachment');
attRow = attTable.rows.length;
alert(attRow);
var nextRow = attTable.insertRow(attRow);
var ceL = nextRow.insertCell(0);
ceL.appendChild(nFileTitle);
ceL = nextRow.insertCell(1);
ceL.appendChild(nFilePath);
ceL = nextRow.insertCell(2);
ceL.appendChild(nDesc);
ceL = nextRow.insertCell(3);
ceL.appendChild(nUpButton);
ceL = nextRow.insertCell(4);
ceL.appendChild(ksg);
}
the problem arise when I try to use the removeFile() function using this keywords. into these; Code: function removeFile(obj){
// post fileid
// change the image back
// get parent pointer of this element
var par = obj.parentNode;
var loImage = document.createElement('img');
loImage.setAttribute('src', 'images/loading1.gif');
}
I try to apply the same approach as the upload() function. But instead the this object which is pointing at the parent node seems unreliable. Is there any missing point i haven't observed? hi All, I want to add UL item to Li in java script dynamically .so that i can build submenu dynamically.can any one help me. I am using a jQuery slider for a website but the W3C comes up with invalid because: document type does not allow element "div" here .before('<div id="buttons">') Code: <script type="text/javascript">
$(document).ready(function() {
$('#slider')
.before('<div id="buttons"></div>')
.cycle({
fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, etc...
pager: '#buttons'
});
});
</script>
Any help with this would be appreciated thanks. Hi I have DropdwonList with elements, 1,2,3 and 4.. and I have another DropdownList with options Normal, Standard, Emegency, and Expendited. Can you help me with a code, so that when I select "1" option on the first dropdown, the "Emegency" option on the second dropdown is set/selected. Thanks in advance Ok, Simpler question. I'm trying to get the text in an xml element. Instead of getting just the text in the first child element I'm getting the text of all the children elements. How can I get it from just the first? Code: var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
function xmlload(filexml)
{
xmlDoc.async="false";
xmlDoc.load(filexml);
xmlObj=xmlDoc.documentElement;
}
xmlload('urlhere');
document.getElementById("nmbr").value=myVar;
myVar = xmlObj.childNodes(0).childNodes(19).firstChild.text;
document.getElementById("comment_t").innerText= myVar;
So, I have this javascript that works just fine... But... PHP Code: <script language="javascript"> function addBtn() { element = document.createElement("input"); element.setAttribute("type", 'button'); element.setAttribute("value", 'Track'); element.setAttribute("name", 'element'); element.onclick = function() { alert("Tracking"); }; var btn = document.getElementById("gs-track-btn"); btn.appendChild(element); } </script> <div id="gs-track-btn"></div> How would I target that div if the " gs-track-btn " id was a class? Hi all i have the following code. Code: $(document).ready(function(){
$("ul, li, a, p, img").hover(
function(){
var origBorder = $(this).css("border");
var elementID = $(this).attr("id");
$(this).css("possition", "absolute").css("z-index", "100").css("border", "1px solid red");
},
function(){
$(this).css("border", "none").css("z-index", "1");
}
);
});
it is suposed to outline the element that i am hovering over. Yet if I hover over say an <li> it will outline the li and the ul. Any ideas on how to just outline the element im hovering over? I'm trying to add an input element to all forms using appendChild. The script first searches for input elements with the name of "myinput". If it finds an input element with that name, it assigns the value "myvalue". If it can't find an input element with that name, it tries to create a new one for all forms. Code:
if (document.getElementsByName('myinput')) {
var testcode = document.getElementsByName('myinput');
for (var i=0; i < testcode.length; i++){
testcode[i].value = "myvalue";}
}
else {
var z = document.createElement("input");
z.type = "hidden";
z.name = "myinput";
z.value = "myvalue";
z.id = "mycode";
var d = document.getElementsByTagName('form');
for (var i=0; i < d.length; i++){
d.appendChild(z);}
}
What's wrong with my code? Thanks! I am trying to have it so that when someone choose a value from the select box, it then displays it in the html. The problem is im not very good with javascript, and my error keeps coming up as undefined where as before it was coming up as "[object HTMLSelectElement]". Can anyone tell me whats up? PHP Code: <html> <head> <script type="text/javascript"> function moveValue() { var no=document.getElementById("no"); var option=no.options[no.selectedIndex].numberr; document.getElementById('numberr').innerHTML = option; } </script> </head> <body> <form> Select numbers:<br /> <select id="no"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> </select> <input type="button" onclick="moveValue()" value="-->"> <i id="numberr">Testing</i> </form> </body> </html> and now that i look at it, i suspect that the reason that it is not working is that i should have "ID"'s or value's on each of the options but i do not know for certain Im trying to duplicate an image multiple times here is what I have 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>
<title></title>
<script type="text/javascript">
var totalNumber = 1000;
function insert(num) {
var cont = document.getElementById("cont");
var img = document.createElement("img");
var percent = num/totalNumber;
var result = cont.offsetWidth * percent;
var dup = result/100*2;
img.src = "guy.jpg";
cont.appendChild(img);
}
</script>
<style type="text/css">
#cont {height:100px; width:500px;}
</style>
</head>
<body>
<div id="cont"></div>
</body>
<script type="text/javascript">
insert(3000);
</script>
</html>
So Im trying to get img to repeat the variable "dup" so you would see <img src="guy.jpg"> 30 times. I know for sure that lastRowTD_s[i] does not have "textarea" element ! The whole page is html valid. Code: else if (lastRowTD_s[i].getElementsByTagName('textarea'))
{
alert(lastRowTD_s[i].id);
//checked, it is the row that does not have "textarea" element.
alert(lastRowTD_s[i].getElementsByTagName('textarea'));
// gives me [Object HTML collection] !?
alert(lastRowTD_s[i].getElementsByTagName('textarea')[0]);
//gives me "undefined", heh where has it gone since previous line ?
}
Hi all Not sure how to tackle this. I haven't done any DOM manipulation and this is a tag within a tag. Another thing is submit is Ajax and therefore can be hit many times --- so I guess I need to also check if element already exists. The result comes back from PHP and I think wipes out anything in the result area. I want to create this: Code: <span id="loading"><img src="loading.gif" /></span> Code: <div id="results">which should populate here</div>
<script type="text/javascript">
function loading(){
?
</script>
<input type="button" name="submit" id="submit" onclick="loading();"/>
How do I begin this? Help appreciated. LT oh this is my Ajax just in case what i'm trying to do should be done from here. Code: <script type="text/javascript">
$(document).ready(function() {
$('#submit').click(function(){
//Get the values
var amount = $('#amount').val();
var from = $('#from').val();
var to = $('#to').val();
var params = "amount=" + amount + "&from=" + from + "&to=" + to;
$.ajax({
type: "POST",
url: "change.php",
data: params,
success: function(data){
$('#results').html(data).fadeIn("slow");
}
});
});
});
</script>
Alright, this is going to sound strange, but bear with me here... Code: <input type="text" name="_F0827U" size="015" maxlength="015"> <input type="submit" class="cmdkey" name="_K040827" value="..."> Say I have multiple isntances that look similar to the above. However, I have no possible way of identifying them uniquely (because I don't know the name prior to generation). Is it posable, using JS, to snag the previous element and strip it of it's tags then rewrite a new element isntead of the two originals, say using an onClick() event on either of the elements? Hello. I am setting up a simple registration page for a community arts project, but I am new to JS and having some issues. Right now I have a list of check boxes like this: Code: <input type="checkbox" id="HA0001" onclick="updateTotal()" /> Wendy Day <input type="checkbox" id="HA0002" onclick="updateTotal()" /> Al Benne <input type="checkbox" id="HA0003" onclick="updateTotal()" /> Julie Steppe What I would like to do is GET the input boxes ID value - which will be different for every checkbox. That value will correspond with a variable of the same name in my javascript code, that will be added or subtracted from the users total cost. So when a box is clicked, I need my variable (called "currentId") to update to the ID value, such as "HA0001" - etc. I was thinking something along the lines of this, but I know it is incorrect: Code: var currentId = document.getElementById.id; All the other add/subtract stuff I will figure out, but I am having a problem getting the ID value from a checkbox when it is clicked. Can anyone help me figure this out? THANKS! -AJ Alright, I need a little help with my javascript. I'm a bit of a novice when it comes to programming so I apologize if this appears trivial. I have an element ID that begins with bb + a randomized number between 1-100,000. This number changes after every action so what I need is a way to retrieve this new value each time and implement it into my code. I can view the number using firebug but I need a way to automate this process. Do any of you have some advice about how I could approach this problem? Hi, Would someone here please help me with this script. I know I am a complete hack at this, but I need to get it to work. Your help is appreciated. As you can see, based on the if statement, I need to leave the Div element below hidden, or un-hide it. I know the first part works. The second part (after "else" ) is where I am having the problem. Code: <td>
<script type="text/javascript">
if ([fieldXX]==1)
{
document.write("<a href='page1.asp?itemid=1234'><img src='images/btn-choose.gif' border='0' alt='choose button'</a>");
}
else
{
var id = 'hide-buy-btn';
var item = document.getElementById(id);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>
<div id="hide-buy-btn" class="hidden">
x
xother button code
x
</div>
</td>
|
|||||||