ツリーメニューの他ブラウザ表示について

[新着] Webテンプレートを仮オープンしました

0   名前： 飛芽 ： 2006/09/18（月） 09:20  ID:H6dRpSVs
初めまして。飛芽と申します。ツリーメニューについてご教授いただきたく書き込みました。

先日、自サイトにてツリーメニューを作成し、クリックすると下にメニューが出るように出来たのですが、IE（インターネットエクスプローラー）以外のFireFoxで見てみたところ、クリックしてもメニューが出てこないのです。（下記参照）

IEの場合　　　　　　　　　　　　　　　　Fire Foxの場合
○メニュー　←クリックすると　　　　　　○メニュー　←クリックすると

○メニュー　　　　　　　　　　　　　　　　　○メニュー　　無反応
　∟リンク１
　∟リンク２


FireFoxなど他のブラウザでも表示できるようにすることは出来ないのでしょうか？
（FireFoxのJavaは有効になってます。）

よろしくお願いします。
1   名前： sasame ： 2006/09/18（月） 09:20  ID:2hU5jzuN
ソース(Javascriptのコード)が無いことには誰にも検証できません。
該当ページか、コードがあればお答えできる人が現れるかもしれません。

ちょっと思い当たる節では、
ブラウザのバージョンによって処理を分けているそのようなJavascriptを見たことがあります。
IE4以上とNN4以上の場合のみ処理が書かれていて、それ以外は何も表示しないっぽい処理でした。
(そのページはFirefoxで見ることができませんでした)
Javascript自体に明るくないのでこれくらいしかわかりませんが…
2   名前： 飛芽 ： 2006/09/18（月） 09:20  ID:H6dRpSVs
コメントありがとうございます。
問題のページはこちらです→ttp://tyo-yuu.chu.jp/g-hidari.htm
元のページとなるものがこちらttp://tyo-yuu.chu.jp/gallery.htmで、三国無双・戦国BASARAなどをクリックするとメニューが下に出て、絵が右にでる仕組みになってます。
（hを抜かしたアドレスですので、お手数ですがhを入れて見て下さい。）

バージョンによってはFireFoxでも見れるんでしょうか・・・・
3   名前： Z ◆XTzyosZXcL ： 2006/09/18（月） 09:20  ID:O1F9KAP/
>>2
　私はインターネットエクスプローラを使っていますが、どちらのページもメニューの中身が表示されません。下記サイトのようなやり方の方がよいように思えます。

http://kapu.iwoky.jp/rcug/popupmenu2.htm#sample1

　なお、そちらの配布物に関する規約（http://kapu.iwoky.jp/copyright.htm）もお読みの上お使いください。

HTMLの基本：
http://members.jcom.home.ne.jp/jintrick/Personal/markup.html

余談・フレームは使わない方がよいです：
http://www.h3.dion.ne.jp/~roktal/pasocon/frame.html
4   名前： tk ： 2006/09/18（月） 09:20  ID:RAglUp4N
ソースを見ました。
取合えず明らかに間違っていると思えるもの。
<DIV id="tree" style={display:none;}>
↓
<DIV id="tree" style=”display:none;”>
5   名前： m035 ◆Wpzr1YKOiq ： 2006/09/18（月） 09:20  ［URL］  ID:OdMuVJsu
>>0
>（FireFoxのJavaは有効になってます。）
JavaとJavaScriptは別物です。

>>問題のページのソース
document.allはIE独自拡張なのでFireFox以外でもIE系ブラウザでないと多分動作しません。
また、idは本来、固有なのでダブってはいけなかったと思います。
idをtree0、tree1、tree2と書き換え、
flag = new Array();
function tree(menu){
    tree_list = document.getElementById("tree"+menu);
    if(flag[menu] == 1){
        tree_list.style.display='none';
        flag[menu] = 0;
    }
    else{
        tree_list.style.display='block';
        flag[menu] = 1;
    }
}

と該当部分を置き換えると動作しました。
それと、
<SCRIPT language="JavaScript">
<!--
//処理
-->
</SCRIPT>

は
<script type="text/javascript">
<!--
//処理
//-->
</script>

のようにlanguageではなくtypeを指定したほうが良いです。

#余談。
tree_list = document.getElementsByName("tree");
にするだけで解決かと思ったのですが、FireFoxは成功、IEはうまくいきませんでした。
何でだろう･･････。
6   名前： 牛若 ： 2006/09/18（月） 09:20  ID:2c4RDZUH
>>5
＞FireFoxは成功、IEはうまくいきませんでした。

FFの動作が正常でIEはおかしい、というのが結論。
IEはnameでといわれても、idを探してしまうので「見つかりませんでした」と報告する。
これを回避するには、nameとidをタグ内に併記するしかない。
7   名前： m035 ◆Wpzr1YKOiq ： 2006/09/18（月） 09:20  ［URL］  ID:OdMuVJsu
>>6
なるほど。
確かにそのような情報がネット上にありました。
ありがとうございました。
8   名前： 匿名 ： 2006/09/18（月） 09:20  ID:i4s77xzC
>>6-7
ちょっと待って。name属性をどこにつけたときの話？
div要素にはname属性がないわけだが。

仮に重複idの話だったとして

HTML 4.0
> スクリプトエンジンは、要素を識別する際に次の優先基準に従う必要がある。
> まず、name 属性と id 属性の双方が設定されている場合は name 属性が優先する。
> 次に、どちらか一方の場合は、ある方を用いる。

この文言だと>>6が正しいように思えるが

DOM2 HTML: getElementsByName(elementName)
> [HTML 4.01] 文書では, このメソッドは elementName で与える値を name の値に持つ要素のコレクション(空でも可)を返す。
> [XHTML 1.0] 文書では, このメソッドは単に名前のマッチするフォームコントロールのコレクション(空でも可)を返す。

だから、getElementsByNameはid属性を取得しない。
そもそもid属性とname属性はデータ型からして違う。

ちなみに、重複idに対するgetElementByIdの処理は実装依存。
9   名前： 匿名 ： 2006/09/18（月） 09:20  ID:i4s77xzC
以下話が逸れてしまうが、質問に対しては>>5で解決はしているので、
質問者は>>5を参考にしての修正に勤しんでくれ。

>>5-7
すまん、何度読んでも話が見えない。

>>5
> tree_list = document.getElementsByName("tree");
> にするだけで解決かと思ったのですが

むしろ、何でそれでうまくいくと思ったのかが知りたい。

>>6
> IEはnameでといわれても、idを探してしまうので「見つかりませんでした」と報告する。

だったら、IEは<div id="tree">をgetElementsByNameで取得できるはずなんじゃないの？
言ってる事と現象が逆だと思う。
10   名前： 飛芽 ： 2006/09/18（月） 09:20  ID:Sqfo/FX8
皆様アドバイスありがとうございます。
話が難しくてついていけません・・・・・；；えっと・・・とりあえず>>５さんのタグに変えたらいいのですか？？
11   名前： 飛芽 ： 2006/09/18（月） 09:20  ID:Sqfo/FX8
ご意見を参考にタグを編集してみましたが・・・・これでよかったですか？
皆様お手数おかけして申し訳ありません・・・

問題のページはこちら→ttp://tyo-yuu.chu.jp/g-hidari.htm
元のページとなるものがこちらttp://tyo-yuu.chu.jp/gallery.htm
12   名前： m035 ◆Wpzr1YKOiq ： 2006/09/18（月） 09:20  ［URL］  ID:OdMuVJsu
>>11
動作をIE6とFireFox1.5.0.6で確認しました。

>>9
>div要素にはname属性がないわけだが。
すっかりそれは忘れていました。
これが原因ですね。
ご指摘に感謝。

>だったら、IEは<div id="tree">をgetElementsByNameで取得できるはずなんじゃないの？
下記スクリプトを<div id="tree">が複数ある状態（>>11の変更前）でテストしたところIE6で動作しました。
flag = new Array();
function tree(menu){
    tree_list = document.getElementsByName("tree");
    if(flag[menu] == 1){
        tree_list[menu].style.display='none';
        flag[menu] = 0;
    }
    else{
        tree_list[menu].style.display='block';
        flag[menu] = 1;
    }
}
13   名前： Z ◆XTzyosZXcL ： 2006/09/18（月） 09:20  ID:O1F9KAP/
>>12
　id属性は１文書に１つしか設定できませんので、id属性とname属性を併記するにはid属性の値が重複しないようにしなければなりません。ご注意を。

HTML4.01仕様書該当部分：
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#adef-id
http://www.w3.org/TR/html401/struct/global.html#adef-id

仕様書の読み方など：
http://www.kanzaki.com/works/2001/pub/wsd01.html

>>10
>話が難しくてついていけません・・・・・；；
　分かるように勉強することも大切です。まずはHTMLの基本からご確認を（下記チェッカで診断すると色々と問題を抱えているようですので）。

お奨めのHTML文法チェッカ：
http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html

HTMLの基本：
http://members.jcom.home.ne.jp/jintrick/Personal/markup.html

その他知っていると良いこと：
http://nekoshiki.fc2web.com/guidline/index.html
http://lan.rgr.jp/essay/admin
http://members.jcom.home.ne.jp/pctips/www/knowledge/htmlguide.html
14   名前： Z ◆XTzyosZXcL ： 2006/09/18（月） 09:20  ID:O1F9KAP/
　あ、>>9を見落としていました。DIV要素にname属性は定義されていませんから、>>13前半部分は蛇足でしたね（namze属性が使える別の要素を利用することになるでしょう）。無視してください、済みません。

一応根拠資料としてHTML4.01仕様書該当部分(DIV要素）：
http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#edef-DIV
http://www.w3.org/TR/html401/struct/global.html#edef-DIV
15   名前： 通行人 ： 2006/09/18（月） 09:20  ID:tNP2RubF
>>13
ブラウザは最初に、HTMLとして処理して、
結果をDOMインターフェイス実装に渡す。
HTMLとして処理される段階では、
ID型属性値の重複は許されない。
ここまでは、HTMLの話。

DOM-Core等は、バリデーションなんてやらない、
とにかく力技でDOM操作を出来る、
例えば、Node#cloneNode を使えば、
ID型属性値の重複も起こり得るが、
DOM-Core等は、それに関知しない。

もし、操作結果を、バリデーションする何かに渡せば、
ID型属性値の重複に対しては、最低でも警告くらいは出るだろう。

しかし、バリデーションをやっているわけではないから、
>>13の指摘は筋違いということになる。

ちなみに、操作によってID型属性値が重複した場合、
DOM-Core等は、処理を実装任せにするとしている。
一般に、ブラウザのDOM-HTML実装では、例外なく、
ID型属性値
(HTMLの場合、属性名ID全ての属性値と、
属性名NAMEでMETA要素型の属性である物の属性値)
が重複した場合、ドキュメント出現順序で最初の物を参照するようだ。
一覧へ戻る