Web Development: Part II

Web Development: Part II

Ceagon Xylas

Member #5,495

February 2005

Recently I started a topic about getting a web development position. Warning you, lots of web questions incoming.

First, I cannot make use of getElementsByName in IE when trying to find div tags. Works for input tags, and other elements I don't need.

function findDivs() {
  var e=document.getElementsByName("s");
  alert(e.length);
}

...

<div onClick="findDivs()">Clicky</a>
<div name="s">1</div>
<div name="s">2</div>
<div name="s">3</div>
<div name="s">4</div>

Output's "0"

Second, I have collapseable/expandable content on the right-hand side of a media player. After I expand past the height of the page, I want a scroll bar to come up, and let me scroll down.
<div style="height:100%; overflow:auto">
But no scroll bars ever appear in Safari, and the page tries to resize when the menu expands past maximum height.

Thomas Fjellstrom

Member #476

June 2000

Try using the max-height property to get the scroll bar in safari/konqueror. Seems to work ok.

--
Thomas Fjellstrom - [website] - [email] - [Allegro Wiki] - [Allegro TODO]
"If you can't think of a better solution, don't try to make a better solution." -- weapon_S
"The less evidence we have for what we believe is certain, the more violently we defend beliefs against those who don't agree" -- https://twitter.com/neiltyson/status/592870205409353730

BAF

Member #2,981

December 2002

Is it even valid to have multiple divs with the same name?

BAF.zone | SantaHack!

Ceagon Xylas

Member #5,495

February 2005

That may be the problem.

Quote:

Try using the max-height property to get the scroll bar in safari/konqueror.

Ah-ha! Excellent! Thank you, sir! It works perfectly.

Three Harris

Member #6,226

September 2005

My javascript is a little rusty and I am not sure what you are trying to do but,
you need to put javascript functions inside script tags.

ie:
<script type = "text/javascript"> ... </script>

Also you are closing a div element with an anchor element, this cannot possibly work as expected. The name attribute is not unique like and id if I remember correctly.

[edit]
The book says the name attribute is used for certain elements only (div is not one) for backward compatability of pre HTML 4.

BAF

Member #2,981

December 2002

Drop the spaces around the = and it will be proper.

And what book says name is only for some? Name is valid for like every tag.

BAF.zone | SantaHack!

CGamesPlay

Member #2,559

July 2002

Quote:

Name is valid for like every tag.

Quote:

for backward compatability of pre HTML 4.

Also,

Quote:

Is it even valid to have multiple divs with the same name?

Why else would they name the function getElementsByName?

--
Tomasu: Every time you read this: hugging!

Ryan Patterson - <http://cgamesplay.com/>

Three Harris

Member #6,226

September 2005

Given that many older HTML documents favor the use of the name (rather than id) attribute with HTML elements like <form>, <input>, <select>, <textarea>, <img>, <a>, and <frame>, it is often useful to retrieve these elements by name. ...

Notice that this method can potentially return a list of nodes rather than a single node. This is because the uniqueness of the value in a name attribute is not strictly enforced under traditional HTML, ...
</quote>
<quote name=""HTML & XHTML Fourth Edition" The Compleate Reference">

Before the rise of HTML 4, the name attribute often was used to expose items to scripting. For backward compatibility, the name attribute is defined for <a>, <applet>, <button>, <embed>, <form>, <frame>, <iframe>, <img>, <input>, <object>, <map>, <select>, and <textarea>.
</quote>

I did not say you could not use the name attribute for a div element, but from what I gather it will not do anything except invalidate a page.

CGamesPlay

Member #2,559

July 2002

Quote:

but from what I gather it will not do anything except invalidate a page.

No, adding the name attribute will make it so that the node is returned in getElementsByName. But we can ignore that ::)

Quote:

"JavaScript Second Edition" The Compleat Reference said:
"HTML & XHTML Fourth Edition" The Compleate Reference said:

I don't understand how you can put so much effort into properly capitalizing and punctuation the titles of those books and then completely butcher the spelling of "complete". It's written on the cover!

--
Tomasu: Every time you read this: hugging!

Ryan Patterson - <http://cgamesplay.com/>

Ceagon Xylas

Member #5,495

February 2005

Quote:

you need to put javascript functions inside script tags.

Yeah, I've got that. I just left it out of my example.

Can anyone think of a workaround? I know I only gave you a few lines of code. I've been to sleep on it and still no good ideas I'll try to explain just a tiny bit further.

1function toggleMenu(i) {
2  var e=document.getElementsByName("Menu "+i+" Child"); //Find all menu's children
3  for(var a=0; a<e.length; a++)                         //Hide all the found elements
4    e[a].style.display="none";
5}
6...
7<!-- The following is an output from a PHP script -->
8<div onClick="toggleMenu(1)">Menu 1</div>
9  <div name="Menu 1 Child">Option 1</div> <!-- these are what I want to find -->
10  <div name="Menu 1 Child">Option 2</div> <!-- with getElementsByName()      -->
11  <div name="Menu 1 Child">Option 3</div> 
12<div onClick="toggleMenu(2)">Menu 2</div>
13  <div name="Menu 2 Child">Option 1</div>
14  <div name="Menu 2 Child">Option 2</div>
15  <div name="Menu 2 Child">Option 3</div>
16  <div name="Menu 2 Child">Option 4</div>

As you can see, getElementsByTagName just won't do. Or at least I can't think of how it could.

CGamesPlay

Member #2,559

July 2002

Part of your problem is your poor structure. If you lay it out properly it's much easier:

<ul>
  <li onclick="toggleMenu(this);">
    <h3>Menu 1</h3>
    <ul>
      <li>Option 1</li>
      <li>Option 2</li>
      <li>Option 3</li>
    </ul>
  </li>
  <li onclick="toggleMenu(this);">
    <h3>Menu 2</h3>
    <ul>
      <li>Option 1</li>
      <li>Option 2</li>
      <li>Option 3</li>
      <li>Option 4</li>
    </ul>
  </li>
</ul>

Then this function is all you need:

function toggleMenu(menu) {
    this.getElementsByTagName("ul")[0].style.display = "none";
}

--
Tomasu: Every time you read this: hugging!

Ryan Patterson - <http://cgamesplay.com/>

Ceagon Xylas

Member #5,495

February 2005

Perfect. Thanks!

Three Harris

Member #6,226

September 2005

Quote:

No, adding the name attribute will make it so that the node is returned in getElementsByName. But we can ignore that

Maybe I should have said anything useful, if an invalid page is useful.

Quote:

Typo, I did not scan the cover.

Maybe you should check this link to find out that name is not an attribute of a div element. I have not tried, but I am somewhat sure that using the name attribute with the div element will not validate.

CGamesPlay

Member #2,559

July 2002

Quote:

Maybe I should have said anything useful, if an invalid page is useful.

Grouping nodes into sets isn't useful?

Right, it won't validate. Neither will 90% of the pages on the net. The fact remains that it's a very easy way of collecting a set of unrelated nodes into one.

--
Tomasu: Every time you read this: hugging!

Ryan Patterson - <http://cgamesplay.com/>

Three Harris

Member #6,226

September 2005

Quote:

Right, it won't validate. Neither will 90% of the pages on the net.

That makes everything just dandy!!!

Jonatan Hedborg

Member #4,886

July 2004

I usually use getElementsByClass for that (it's not actually a function, but trivial to implement)

ImLeftFooted

Member #3,935

October 2003

Maybe try throwing this somewhere before you use the function? (not tested, might not work).

1document.getElementsByName = function(name)
2{
3  var ret = new Array();
4  var node;
5 
6  if(arguments.length <= 1)
7    node = document.body;
8  else
9    node = arguments[1];
10 
11  if(!node["childNodes"])
12    return ret;
13 
14  for(var i = 0; i < node.childNodes.length; i++) {
15 
16    if(node.childNodes<i>["name"] == name)
17      ret[ret.length] = node.childNodes<i>;
18 
19    var kids = document.getElementsByName(name, node.childNodes<i>);
20 
21    for(var j = 0; j < kids.length; j++)
22      ret[ret.length] = kids[j];  // Note splice is preferred here, but support is iffy.
23  }
24 
25  return ret;
26}

How is my posting?