Dom Styling a External Object?

Question

Ok, this one is going to be tricky to explain. I have an empty div with a class myDiv (for example.)

ie.

<div id="myDiv"></div>
<script type="text/javascript" src="http://somesite.com/index.cgi"></script>

The div (myDiv) innerHTML is replaced through a call to another site (somesite.com/index.cgi) which runs this script....

var panel = document.getElementById('myDiv'); 

if(panel){
panel.innerHTML += "<h2>A Title</h2>";
panel.innerHTML += "<p>";
panel.innerHTML += "    Paragraph Info";
panel.innerHTML += "</p>";
panel.innerHTML += "<ul>";
panel.innerHTML += "    <li><a href=\"http://somelinks.com/">Link 1</a></li>";
panel.innerHTML += "    <li><a href=\"http://somelinks.com/">Link 2</a></li>";
panel.innerHTML += "</ul>";

panel.innerHTML += "<h2>A 2nd Title</h2>";
panel.innerHTML += "<p>";
panel.innerHTML += "    Paragraph Info2";
panel.innerHTML += "</p>";
panel.innerHTML += "<ul>";
panel.innerHTML += "    <li><a href=\"http://somelinks.com/">Link 1</a></li>";
panel.innerHTML += "    <li><a href=\"http://somelinks.com/">Link 2</a></li>";
panel.innerHTML += "</ul>";
}
etc....

I am trying to make the list, first off, prettier (css styling) and second off, I would love to make it a clickable h2 and p to dropdown the li elements, previously hidden. Does that make sense?

At this point, I am trying (probably the hard way) to get a variable to the items and then change their styles by doing this...

var i;
var myDiv = document.getElementById("myDiv");
var headers = myDiv.getElementsByTagName("h2");
var paras = myDiv.getElementsByTagName('p'); 
var li = myDiv.getElementsByTagName('li'); 
var ul = myDiv.getElementsByTagName('ul'); 

for (i = 0; i < paras.length; i++) { 
paras[i].style.fontSize = "8px";
}
for (i = 0; i < headers.length; i++) { 
headers[i].style.fontSize = "18px";
}

for (i = 0; i < ul.length; i++) { 
ul[i].style.fontSize = "16px";
}

for (i = 0; i < li.length; i++) { 
li[i].style.fontSize = "14px";
}
</script>

I have tried to do a css style sheet but it doesn't seem to apply it to the javascript after the page has loaded. Secondly, for some reason, the p's are showing 14 elements when there is only 7. I have NO idea why that is happening.

Anyway, any advice on the direction I should go? To make them clickable and hidden and also to be able to style them? Ideas? Btw, I don't have any access to that external script.

Thanks, Josh

(I also read on here that I can do a .cssText += "; "+ strNewCSS; to force the element to update but I don't know if that would work.)

Answer 1

When you load your page, here is what (probably) happens:

1. The myDiv element is created.
2. The page requests index.cgi
3. Your styling code runs, selecting all p, li, etc. But since index.cgi hasn't loaded yet, there are no elements to select!
4. index.cgi finally loads and executes, creating all those p, li (etc) elements. These are never styled, since the styling code has already run.

Place a <style></style> element in the header with your style information instead!

As for why index.cgi creates more elements than you expect, we have no way of knowing, since you haven't provided us with the index.cgi code. The fix might be unusually complicated, since you have no access to that script.

As for general advice on "the direction you should go", I suggest you research the jQuery library. This library has simple/elegant syntax for common tasks like:

1. Selecting DOM elements and interacting with them in bulk
2. Hide/reveal animations
3. Event handling

That's if you're frustrated or on a deadline. CSS3 is enormously powerful, and you can create nifty hide/reveal interactions in raw CSS (advanced), or raw CSS and a little bit of JavaScript (easy!). I always advocate for learning the nuts-and-bolts. Try searching your specific questions on StackOverflow; many of them have already been answered!