Allegro.cc - Online Community

Allegro.cc Forums » Programming Questions » Web Development: Part II

Credits go to CGamesPlay and Thomas Fjellstrom for helping out!
This thread is locked; no one can reply to it. rss feed Print
Web Development: Part II
Ceagon Xylas
Member #5,495
February 2005
avatar

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
avatar

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
avatar

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

Ceagon Xylas
Member #5,495
February 2005
avatar

That may be the problem. :D

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
avatar

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. :P

CGamesPlay
Member #2,559
July 2002
avatar

Quote:

Name is valid for like every tag. :P

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? :P

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

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

Three Harris
Member #6,226
September 2005

<quote name=""JavaScript Second Edition" The Compleat Reference">

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
avatar

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! :P

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

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

Ceagon Xylas
Member #5,495
February 2005
avatar

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 :P 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
avatar

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
avatar

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:

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!

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
avatar

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
avatar

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

-------
Sweden: Free from the shackles of Democracy since 2008-06-18!

Dustin Dettmer
Member #3,935
October 2003
avatar

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}

Go to: