bt_melter.jsをサイトの一部のみに適応させたい。また演算の方

Question

bt_melter.jsをサイトの一部のみに適応させたい。また演算の方法を1種類にしたい。

という、サイト全体をマトリックス風に演算して表示させるjsがあるのですが
このまま<body>タグ内にいれてしまうと、サイト全体が適応されてしまいますので
たとえば #hoge というようにIDをふってそのIDのみ適応されるようにするにはどこをいじればよいでしょうか？

http://bodytag.org/bt_melter/

jsファイル本体：　http://bodytag.org/bt_melter/bt_melter.js

my-- · Accepted Answer

No.2もありますが //bt_melter.js断片 //var bt_root = document.getElementsByTagName('body').item(0); var bt_root = document.getElementById('hoge'); //追記

～

あるいは //bt_melter.js断片 function bt_godeep(o) { 　for (var i = 0; i < o.childNodes.length; i++) { 　　if(o.childNodes[i].childNodes) { 　　　bt_godeep(o.childNodes[i]); 　　　} 　　if (o.childNodes[i].parentNode.id != 'hoge') continue; //追記　　if(o.childNodes[i].nodeName == '#text' && bt_haschars(o.childNodes[i].nodeValue)) { 一応それっぽく動きました。前者の方が融通は利くようです。おもしろいですね。これ。

my-- · Answer

>質問者

「if」「else」は単純かつ初歩的な命令です。
どのサイトでも必要十分な解説はされていると思います。
「javascript 入門 基礎」で検索してみましょう。

お手上げってことなら、質問タイトルとはかけ離れてますし
同じ疑問を持つ読者のためにも分かりやすいタイトルで
改めて質問されてはどうでしょ。
すばやい回答も得られやすいと思いますよ。

my-- · Answer

ソースコードを下記に書き換えてみて下さい。

var bt_chartype = Math.floor(Math.random() * 3); //2 -> 3

alert('bt_chartypeの値 -> ' + bt_chartype + '

digit関数が返す値
0 : 0 or 1
1 : _
2 : +');

function digit() {
  if (bt_chartype == 0)
    return Math.floor(Math.random() * 2);
  else if (bt_chartype == 1)
    return '_';
  else if (bt_chartype == 2) {
    return '+'; //出力文字を追加
  }
  else return '_';
}


実行行程で変数の値や関数の返す値、演算結果の変化を手当り次第確認してみましょう。
それらの役割、プログラムの全体像をつかむヒントになるかも知れませんよ。

document.title = hoge;
status = fuga;

タイマーで値が頻繁に変化する場合、処理速度を落とせば
ステータスバーやタイトルバーを使って確認することもできます。

基本を勉強する方法で一番良いかは微妙ですけど、面白いならそれはそれで。
バッドノウハウを身に着けないよう、たまには退屈な基本解説記事も読みましょう。

my-- · Answer

bt_root.style.visibility = 'hidden';

非表示の適用を優先させるため先頭にベタ書きされてますからね。
.jsの読み込み場所が気になるならタイマーで監視してみるとか。

var bt_root;
//タイマーで監視
(function standBy() {
　if (document.getElementById('hoge')) {
　　bt_root = document.getElementById('hoge');
　　bt_root.style.visibility = 'hidden';
　　setTimeout(bt_spin, 1000); //準備が整った1秒後に始動
　}
　else { setTimeout(standBy, 1); }
})();

この場合loadで実行してるbt_spinも待機させます。（先頭2行、行末削除）
どこで.jsを読み込んでも大丈夫だと思います。

適用要素指定の件は、id'hoge'で適用要素を囲み、適用要素にクラス'hogeClass'

if (o.childNodes[i].parentNode.className != 'hogeClass') continue; //追記

No.3のidをclassNameで処理、でしょうか。問題なのが（個人的好み）適用要素以外も
すべて非表示が適用になっていること。そこで

var bt_root;
var list = [];
//タイマーで監視
(function standBy() {
　if (document.getElementById('hoge')) {
　　bt_root = document.getElementById('hoge');
　　var elms = bt_root.getElementsByTagName('*');
　　for (var i = 0; i < elms.length; i++) {
　　　if (elms[i].className == 'hogeClass') {
　　　　elms[i].style.visibility = 'hidden'; //'hogeClass'だけに適用
　　　　list[list.length] = elms[i];
　　　}
　　}
　　//bt_root.style.visibility = 'hidden';
　　setTimeout(bt_spin, 1000); //準備が整った1秒後に始動
　}
　else { setTimeout(standBy, 1); }
})();

表示する処理のところを

function bt_spin() {
　if(is.dom && !(is.mac && is.ie)) bt_godeep(bt_root);
　//bt_root.style.visibility = 'visible';
　for (var i = 0; i < list.length; i++) {
　　list[i].style.visibility = 'visible'; //表示する
　}
　if(is.dom && !(is.mac && is.ie)) bt_sponge();
}

ここまで。一応こちらでは動きましたが、疑ってかかって下さい。

スクロールして...の件はなるほど。設計の見直しが必要になりそうですけど
可能だと思います。これをきっかけに自身で実現できるよう頑張ってみてはどうでしょ。
私もしばらくこれで遊んでみるつもりです。

fujillin · Answer

#1です。

『頭でbodyを取得しているから、とりあえずそこではなかろか？』という意味のつもりでした。

idで取得するなら、
　var bt_root = document.getElementById('hogehoge');
ではないの？？

（まったく未検証なので、的はずれの可能性もあり）
配布元の許諾事項に、改変するってのはあったのかしらん？

fujillin · Answer

開いてみたら、いきなりbodyを取得しているので、後を見る気が失せました。
ここではないのかしらん？（まったく未検証）

ライセンスとか調べてないので、配布元でちゃんと調べたほうがよろしいかと。

bt_melter.jsをサイトの一部のみに適応させたい。また演算の方

No.2もありますが

>質問者

ソースコードを下記に書き換えてみて下さい。

bt_root.style.visibility = 'hidden';

この回答への補足

#1です。

開いてみたら、いきなりbodyを取得しているので、後を見る気が失せました。

この回答への補足

似たような質問が見つかりました

関連するカテゴリからQ&Aを探す

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング