I have a script that automatically makes the class change for an input field onFocus. Everything works in both IE and Firefox with the inputs, but I am having trouble with an image inside of a link in Firefox. I am using a link instead of a input type="submit" for IE reasons. Code:
View 7 Repliesthis should be simple but I cannot figure it out. This is the HTML:
HTML Code:
<div id="box">
<p>one</p>
<p>two <strong>three</strong></p>
...
</div>
The JavaScript function has to take everything inside <div id="box"> and put it into another div. It should become:
HTML Code:
<div id="box">
<div class="content">
<p>one</p>
<p>two <strong>three</strong></p>
...
</div>
</div>
So how can I get all childNodes recursively to enclose them with another element?
I have a problem with getting the amount of childs in a XML structure,
the strucure is somewhat like the following:
<?xml version="1.0" encoding="iso-8859-1"?>
<cms>
<num>21</num>
<xmlnames>
<field>id</field>
<field>name</field>
<field>availablefrom</field>
<field>availableuntill</field>
<field>owner</field>
</xmlnames>
</cms>
If I use the following to get te amount of childs for xmlnames I get an
amount of 11:
xmlObj.responseXML.getElementsByTagName('xmlnames' )[0].childNodes.length
Is this wrong or maybe there is a better / other way of counting the
child amount?
I am starting to learn using javascript on DOM. One of the first things
I tested was listing all the child nodes from an element. Like ->
*html code:
<div id="pagetitle">
<span>My Text</span>
</div>
In my javascript I tried to list all the child nodes from <div>, Firefox
and Opera gave me 3 -- 1)text node with a null value, 2)span, 3)text
node with a null value.
It look to me that the browsers treated the line break as a text node
with no value!!
If I modified the html code to :
<div id="pagetitle"><span>My Text</span></div>
Then the browsers gave me the right answer: 1
They still gave me a wrong answer of 3 if I put a space around the
<spanelement like this:
<div id="pagetitle"<span>My Text</span</div>
What did I do wrong? I would still want the elements to be on their own
lines.
i wrote a very simple HTML page to test some DOM features between Mozilla and IE. Mozilla is perfect everything went fine and i got the childNodes from my custom tag ( this tag i named <blah> ), inside this tag there is two <span>, that i retrieved. But with IE i really could figure out how its done! Code:
View 1 Replies View RelatedI wanna get all the text nodes of the children of an element. The goal is to get an array with all the textNodes in each cell of a table, without any other nodes that might ocure whithin that cell (<p>, <br> etc...)
I mean if:
<td>12</td>
<td>1<p>23<b>34</b>5</p>6</td>
I need:
var txt = new Array()
txt[0] = ཈'
txt[1] = ?'
Now I had to circle through all the childNodes to extract all the text nodes. I have build a function, but something is wrong in the code, and I don't sense what. I need soime fresh eyes, any ideeas? Where's the mistake?:
<script type="text/javascript">
function checkCell(){
var allC = document.getElementById('tab').getElementsByTagName('td');//cells' collection
var txt = new Array()
for(var i=0;i<allC.length;i++){
txt[i]=''
while(allC[i].hasChildNodes()){
var chC = allC[i].childNodes;
for(var j=0;j<chC.length;j++){
if(chC[j].nodeType==3){
txt[i]+=chC[j].data;
}
}
allC[i]=allC[i].childNodes;
}
}
alert(txt[1])
}
onload=checkCell;
</script>
if I have:
<form id='form1'>
<input id='one' value=''>
<input id='two' value=''>
</form>
is there a way for me to check the child nodes of the <form> element for a specific id. in other words, can I check if form1 contains an element with id 'one' for example?
I have a div 'readroot' that I clone. I change the change the id and
name of the childnodes of 'readroot' to the original name plus a
number(counter).
The problem is I have i have a div 'serials' inside 'readroot' and the
childnodes of 'readroot' are not modified with the current function i have.
What is the best way to modify the childnodes of the div serials?
I guess i could put another for loop inside the for loop of the
moreFields function but i am thinking a recursive function could do it. Code:
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
[Code]....
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.
From what I've read, everything in the DOM is a node. Basically there are three types of nodes: text, element and attribute (there are more node types but these are the most common).
Let's say I have the following html:
<html>
<form>
<p></p>
</form
</html>
Then this javascript:
var forms = document.getElementsByTagName("form")
var form = forms[0];
alert(form.childNodes.length); /* output is 3 */
I would think that the output should be 2 as I only see 2 childNodes for the form object: the <p> element is an element node and the <p> element has a text node, so that's a total of 2 nodes. Where is the 3rd one comming from.
To add to the confusion, if I change the html to:
<html>
<form>
<p title="jeff" id="22"></p>
</form
</html>
The above javascript still outputs 3. I would think that the output is 4:
- 1st node is the <p> element
- 2nd node is the <p> element's attribute node "title"
- 3rd node is the <p> element's attribute node "id"
- 4th node is the <p> element's text node
Obviously I'm not correctly comprehending how childNodes are determined.
I want to count the number of childnodes, when i run this script in mozilla i get a different total for the number of childnodes from numkids then when the script runs in IE. Why is this? How Can I get the same number. I want to loop though an objects child elements setting them to invisible or visible
<script type="text/javascript"><!--
function rec(n) {
var kids = n.childNodes;
var numkids = kids.length;
for(var i = numkids-1; i>=0; i--)
{
// sets child to hidden
alert(numkids);
alert(kids[i].nodeValue);
//kids[i].style.visibility = 'hidden'
}}
var a = document.getElementById('commentholder0');
// this function loops though the parts and makes then invisiable so you cant see them overlap
rec(a);
</script>
My html is here:
<ul id= "commentholder0" >
<li id="comment1">this is a test</li>
<li id="comment2">this 2 is a test</li>
</ul>
I need to find the length of the childNode "city" to a particular "region" in the below XML.
<?xml version="1.0" encoding="ISO-8859-1" ?>
<Country Name="Singapore">
<Region Name="East">
<City Name="Pune">
<Dealer Name="XYZ" Type="A" Contact="9890455555" PinCode="123456"/>
<Dealer Name="ABC" Type="B" Contact="9890433333" PinCode="654321"/>
<Dealer Name="DEF" Type="A" Contact="9890422222" PinCode="867901"/>
</City>
<City Name="Mumbai">
<Dealer Name="dealer1" Type="A" Contact="9890455555" PinCode="123456"/>
<Dealer Name="dealer2" Type="B" Contact="9890433333" PinCode="654321"/>
<Dealer Name="dealer3" Type="A" Contact="9890422222" PinCode="867901"/>
</City></Region>
<Region Name="North">
<City Name="Delhi">
<Dealer Name="XYZ" Type="A" Contact="9890455555" PinCode="123456"/>
<Dealer Name="ABC" Type="B" Contact="9890433333" PinCode="654321"/>
<Dealer Name="DEF" Type="A" Contact="9890422222" PinCode="867901"/>
</City>
<City Name="Jammu">
<Dealer Name="dealer1" Type="A" Contact="9890455555" PinCode="123456"/>
<Dealer Name="dealer2" Type="B" Contact="9890433333" PinCode="654321"/>
<Dealer Name="dealer3" Type="A" Contact="9890422222" PinCode="867901"/>
</City></Region></Country>
Example the Region is East it has 2 cities below. I need to get this length using JS.
I tried doing x=xmlDoc.getElementsByTagName("City").length;
But it counts all the city elements present i.e. it returns 4. How to get the length of the "City" element particular to a "Region" element.
i'm working on a portion of a CMS that allows content-admins to browse
a product list, and add individual products into the taxonomy by
clicking checkboxes next to categories they might belong in.
since the taxonomy is a rather long list, i'm hiding and showing divs
for the secondary and tertiary links, so when a user clicks on the
checkbox for the parent category, the children appear in a second (and
third) div, with checkboxes of their own.
however, i'd like for the secondary and third level checkboxes to
become unchecked when the parent is. i've tried addressing them in
numerous ways, but something consistently gets lost, in that i keep
getting "x doesn't have any properties" errors.
ie:
var parentnode = document.getElementById(divName);
var allMyChildren = parentnode.childNodes.getElementsByName("INPUT");
alert(allMyChildren.length);
this returns the proper length, but then
for (var i=0;i < allMyChildren.length;i++) {
var chklist = allMyChildren[i];
if (chklist.type == "checkbox") {
// uncheck it
}
}
this consistently returns that chklist has no properties...
Is there a way to calculate the .offsetLeft or .left of a character in a string relative the element that contains the string? I'm just trying to wrap each character in an element and position the characters independently, so I have to set the .position to absolute, and set the .left and .top on each element as I create it so I can move the elements later on.
View 1 Replies View RelatedWhats wrong with this script. It works in IE, but not in Firefox. I get no error codes it just simply does not display the text in Firefox.
Code:
I use the code below to show the year on my sites e.g. this page.
However, instead of 2005 it shows 105 in Firefox.
<SCRIPT LANGUAGE="JavaScript">
<!-- Begin
var year=time.getYear();
document.write("" + year + "");
// End -->
</SCRIPT>
Works fine in Internet Explorer.
How can I show the correct year in Firefox as well please?
First the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript">
function TextScroll(scrollname, div_name, up_name, down_name, top_name){
[Code]...
When I use mouse wheel in Firefox to scroll contents of the DIV, memory usage in Firefox goes through the roof. Code above is a fully working page, if anyone would like to see what's up, just load it up, and start moving your mouse wheel in the area with text. You don't actually have to scroll the text, just moving the wheel back and forth in that DIV will do. Memory usage will start going up quite fast, and after you stop moving the wheel, it will finally come down a bit after a short while. I've highlighted in red the line where mousewheel event is registered for Firefox. I'm not sure if it's really a problem, but since Opera and IE don't have any strange memory usage, and Firefox does, maybe I did something wrong. In everyday use it shouldn't matter [don't expect to have kilometers of content to scroll], but anyway, it is a bit unsettling.
if ((window)&&(window.netscape)&&(window.netscape.security)) {
// OK, this is Gecko/Firefox or someone mimicing it so well
// that there is no way to catch it on the act.
}
But I need Firefox *1.5 or higher* or another (but sure) way to know
that this browser has native SVG support. Here I'm stock.
It seems there is window.navigator.productSub and on my Firefox 1.5
it's 20051111
But I'm not sure: this "build version" is going up guaranteed or it's
random like CLASSID? Also is the same Firefox release has the same
build for all platforms or not? mozilla.org seems silent.
It's possible to disable then online help in Firefox
when I press F1 key, using 'onkeypress' or 'onkeydown'
event?
This "show-hide" works in IE7 but fails in FF2 -
Error in FF: "this.children is not a function"
<DIV id=sect style="display:block;" onclick="javascript:if
(this.children(0).style.display=='none'){this.chil dren(0).style.display='block'}else{this.children(0 ).style.display='none'}">
<Table>
<TR>
<TD>xxxx<TD>
</TR>
</Table>
</DIV>
I have a BETA site that I'm testing. It looks good/works fine in IE, but Firefox has some troublesome breakages that I can't figure out how to fix without breaking IE. The one I'm most concerned about is that I have a video player that was working a couple of weeks ago, and several revisions to the page later (not the video iframe), it's not. Works great in IE, but in Firefox, the controls in the video player are either sticky or do not work altogether. The video is called through an iframe (needs to be done that way by request) and the embed is as such:
<head>
<script type="text/javascript" src="swfobject.js"></script>
</head>[code]....
I have also tried it with the following parameter, and it still didn't work in FF, but it didn't seem to affect it in IE:
so.addParam("type", "application/x-shockwave-flash");
What kind of front page revision (the page containing the iframe) might have changed this? Is it a recent FF update?
I have some menu items which i use javascript to change the image on mouse over. This works fine in IE, and used to work fine in Firefox.
However I added an few extra menu items near the bottom and something has gone a bit wrong. The last 4 menu items dont change image in firefox or netscape... but they work fine in IE. Code:
My document had the following nested DIV structure, with a possible
<SPAN> between the DIV and the <A> elements:
<div id="container">
<div id="D1">
<span>blah blah</span><br>
<A id="A1">item</a><br>
I'm trying to find a simple step-by-step on how to read a simple XML file
like this one, which will work in IE 6 and Firefox 0.x.
<?xml version="1.0" encoding="ISO-8859-1"?>
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Christopher Santee</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CATALOG>
The problem is every example, I find that it will work in IE but not Firefox
or visa versa, could someone please point me to a how to that will work with
both browsers. I just spent two weeks reading the Microsoft Press Book "XML
Step by Step", only to find out that the technology only works with IE.
When I set the background colour of an element using
tdRef.style.backgroundColor and then read it back, Firefox always
gives rgb(r, g, b) regardless of whether I've used rgb(...) or #rrggbb
to set it.
If I use tdRef.bgColor to set/read the value, I always get #rrggbb
regardless of whether I've used rgb(...) or #rrggbb.
IE, on the other hand, when using style.backgroundColor reports back in
whatever format was used (either rgb(...) or #rrggbb), but, like
Firefox, always gives #rrggbb for the bgColor method.
My question is which method is most consistent across various browsers?
I want to use style.backgroundColor (since some browsers don't support
bgColor, I guess it's a legacy from the ver 4 browser days). If I
decide to use rgb(...), is it consistently supported by other browsers
or do some report in #rrggbb regardless? Code:
I have the script below, which is supposed to populate a text box
on a form which opened this popup window - it should then call a
function 'PostThisPage' on the opener document, and then close the
current window/popup.
This works ok in IE - can anyone please help me by pointing out what it
needs to become cross-browser compatible? It doesn't work in Firefox
1.0.
<script>
window.opener.document.forms(0).tbGoToDate.value = 񟭄-11-11'
window.opener.PostThisPage();
window.close();
</script>