bt_melter.jsをサイトの一部のみに適応させたい。また演算の方法を1種類にしたい。
という、サイト全体をマトリックス風に演算して表示させるjsがあるのですが
このまま<body>タグ内にいれてしまうと、サイト全体が適応されてしまいますので
たとえば #hoge というようにIDをふってそのIDのみ適応されるようにするにはどこをいじればよいでしょうか?
http://bodytag.org/bt_melter/
jsファイル本体: http://bodytag.org/bt_melter/bt_melter.js
No.3ベストアンサー
- 回答日時:
No.2もありますが
//bt_melter.js断片
//var bt_root = document.getElementsByTagName('body').item(0);
var bt_root = document.getElementById('hoge'); //追記
<div id="hoge">~</div>
<script src="bt_melter.js" type="text/javascript"></script>
あるいは
//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)) {
一応それっぽく動きました。前者の方が融通は利くようです。
おもしろいですね。これ。
本当に、ありがとうございます☆!!
動きました!
後々参照する人のために詳しく書いておきます。
========================
元々あった
var bt_root = document.getElementsByTagName('body').item(0);
にコメントとして
//var bt_root = document.getElementsByTagName('body').item(0);
をいれ、代わりに
var bt_root = document.getElementById('hoge');
を指定しました。
html内では
<div id="hoge">~</div>タグの直下に
<script src="bt_melter.js" type="text/javascript"></script>
を配置すると動きました。
=========================
わがままをいわせていただくとすると、後3点ほどこれに関してお伺いしたいのですが
1)ご回答いただきました後者の方に関してですが
<script src="bt_melter.js" type="text/javascript"></script>は、body直下でもよいのでしょうか?それとも前者同様div直下でしょうか?
前者の場合ではうまく動いたのですが、後者の場合、文字が一瞬1段下がるので反応はしているのですが動きませんでした・・・
2)IDやクラス指定でそのクラスのdivに囲まれているところはすべてそうなる。というような形にはできないでしょうか?一箇所のみの場合、融通が利くので便利なのですが、ページの中で複数箇所設置する場合、<script>をいちいち配置するのは面倒で・・・
3)仮に縦長のサイトの場合で、スクロールして画面が表示されたときに、開始させるような形にもできますでしょうか?
イメージとしてはこんな感じです。
http://www.skuare.net/test/jLazyLoad.html
LazyLoadというプラグインで画像をスクロールにあわせて読み込むようにしていますがこんな風にスクロールで画面表示とともにロードされるようなコードはどのように書けばよいでしょうか?
3に関しては、当初の質問より少し脱線する部分ですので、もしおわかりでなければ結構です☆あまりっわがままばかりいえませんので-☆!
ご教授お願い致します☆
No.6
- 回答日時:
>質問者
「if」「else」は単純かつ初歩的な命令です。
どのサイトでも必要十分な解説はされていると思います。
「javascript 入門 基礎」で検索してみましょう。
お手上げってことなら、質問タイトルとはかけ離れてますし
同じ疑問を持つ読者のためにも分かりやすいタイトルで
改めて質問されてはどうでしょ。
すばやい回答も得られやすいと思いますよ。
else ifに関してはなんとか今勉強中です☆
本当に親切に教えていただいてありがとうございました☆
bt_melterをつかってまだもうちょっと勉強をしていこうと思っています。
今、いろいろと試しているのですがなぜか、処理中に2行になってしまうようで、jsの問題ではないと思いますのでおそらくCSSで他の問題があるのでしょう・・・
ん~思案中です。
本当にありがとうございました!
これでこの質問は閉めさせていただきますが、また今後とも宜しくお願い致します!
No.5
- 回答日時:
ソースコードを下記に書き換えてみて下さい。
var bt_chartype = Math.floor(Math.random() * 3); //2 -> 3
alert('bt_chartypeの値 -> ' + bt_chartype + '\n\ndigit関数が返す値\n0 : 0 or 1\n1 : _\n2 : +');
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;
タイマーで値が頻繁に変化する場合、処理速度を落とせば
ステータスバーやタイトルバーを使って確認することもできます。
基本を勉強する方法で一番良いかは微妙ですけど、面白いならそれはそれで。
バッドノウハウを身に着けないよう、たまには退屈な基本解説記事も読みましょう。
ありがとうございます☆
丁寧にコードを書いていただいて大変ありがたい限りです☆
var bt_chartype = Math.floor(Math.random() * 3);
とする意味から考えてみました。
まず、Math.floorと、Math.ramdomなどのMathクラスについて調べてみて
なんとなくわかったのですがイメージとしてまず、
var bt_chartype = Math.floor(Math.random() * 3); を日本語に直すと
Math.random()*3;であれば、0.0~2.99までの乱数を返し、
Math.floorでMath.randomで返された値から最も近い整数に切り捨てた数値が
bt_chartypeということになるということでよいのですよね?
そこでまったく流れとは関係ないのですが少しだけ変えてみようと思い、
var bt_chartype2 = Math.floor(Math.random() * 3);にしてみたところ
少し数値の表れ方が変わりました。
という流れをもって回答いただいたものを精査すると
function digit() {
if (bt_chartype == 0) //bt_chartype戻り値が0の場合
return Math.floor(Math.random() *2); // 0.0~1.99までが返される(整数では0と1に結果的にMath.floorでなる。)
else if (bt_chartype == 1)
return '0'; //bt_chartypeの戻り値が1の0が返される
else if (bt_chartype == 2) { //戻り値が2の場合
return '|'; // ''内に追加した文字が返される。
}
else return '_'; ← それ以外の場合、_が返される。
}
------
if ( (条件式1) ){
(条件式1を満足した時の処理)
}
elseif ( (条件式2) ){
(条件式1を満足しないで条件式2を満足した時の処理)
}
elseif ( (条件式3) ){
(条件式1、条件式2を満足しないで条件式3を満足した時の処理)
}
else{
(上記の条件のいずれも満足しなかった時の処理)
}
-------
ということですよね?
そこで疑問なのが、
elseifを3回目につかって bt_chartype == 3とするとうまく動かないのはなぜなんでしょうか・・・?
不思議と、elseをはずすと動くのですがこれは処理を飛ばしているのかな・・・?
表示の仕方で気になるのは、なぜ、処理しているときは1段下がるのか・・・?ということです。
これはおそらくCSSの問題だと思いますのでちょっとがんばってみます。
関数っておもしろいですね☆
学校ではなんの役にもたたないと思っていたのですが、こんなところで役にたつんですね・・・ちゃんとやっときゃよかった・・・。
これを機会にscriptを勉強していきます☆jsもasも基本言語が似ているんですね☆
書き方が違うだけで・・・
いままでhtmlやcssしかいじったことがないので、一から勉強するつもりでやってみます☆
No.4
- 回答日時:
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();
}
ここまで。一応こちらでは動きましたが、疑ってかかって下さい。
スクロールして...の件はなるほど。設計の見直しが必要になりそうですけど
可能だと思います。これをきっかけに自身で実現できるよう頑張ってみてはどうでしょ。
私もしばらくこれで遊んでみるつもりです。
この回答への補足
なるほど!!
ありがとうございました!
ちょっといろいろこれをつかって勉強してみます(゚Д゚)
javascript自体、あまりきちんと基本を勉強せずライブラリの貼り付けばかりでやってきましたので、行き詰ってしまっていました・・・。基本を勉強するにはこういうサンプルで勉強するのが一番ですね☆
ちなみになんですが、最後にひとつだけ質問させていただいてもよいでしょうか?
bt_melter.jsが実行される際、
「0、1」というパターンと「--」というパターンの2種類あるようです。
そこで
1)「--」というパターンをやめて、0、1だけにする
2)「--」を、「a~z」のアルファベットなどをランダムに表示する。
(よりマトリックス風になる)
というようなことをしたいのですが、どこで指定されているのかがわかりません・・・
この0、1や--がどこで指定されていて、どのような規則性をもって表示されているのかなどはどこをみればわかりますでしょうか?
No.2
- 回答日時:
#1です。
『頭でbodyを取得しているから、とりあえずそこではなかろか?』という意味のつもりでした。
idで取得するなら、
var bt_root = document.getElementById('hogehoge');
ではないの??
(まったく未検証なので、的はずれの可能性もあり)
配布元の許諾事項に、改変するってのはあったのかしらん?
No.1
- 回答日時:
開いてみたら、いきなりbodyを取得しているので、後を見る気が失せました。
ここではないのかしらん?(まったく未検証)
ライセンスとか調べてないので、配布元でちゃんと調べたほうがよろしいかと。
この回答への補足
えっ!? 見る気がうせちゃったんですか・・・残念です('A`)
bodyを読み込んでいるのはわかったので、自分なりにいろいろと調べてみたのですが
ここ↓を参考にして色々実験してみたのですが
http://blog.8maki.jp/2006/11/javascript.html
ソースの一番最初にある
var bt_root = document.getElementsByTagName('body').item(0);
を
document.getElementById('ID名’)とするために
var bt_root = document.getElementById('hogehoge’).item(0);
として、
html内に
<div id="hogehoge">
//ここにマトリックスのようになるべきテキストを挿入//
</div>
を設置し、試してみたのですがうまく動きませんでした。
上記サイトの中に、
document.getElementById('hogehoge’)をfunction内にいれることでbodyを読むと同時にできるんじゃないかと思ったのですがそれもかなわず・・・
どうしていいやらさっぱりです。
どうにか教えていただけませんでしょうか。
お願いします
щ(゚д゚щ)
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
- ・ゆるやかでぃべーと タイムマシンを破壊すべきか。
- ・歩いた自慢大会
- ・許せない心理テスト
- ・字面がカッコいい英単語
- ・これ何て呼びますか Part2
- ・人生で一番思い出に残ってる靴
- ・ゆるやかでぃべーと すべての高校生はアルバイトをするべきだ。
- ・初めて自分の家と他人の家が違う、と意識した時
- ・単二電池
- ・チョコミントアイス
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ActiveXobjectが作成できない
-
javascript 特定のタグのidの存...
-
JavaScriptでオブジェクトを取...
-
javascript の 命令文の記述で...
-
[初心者]javascriptのfor文でな...
-
文字列で条件分岐
-
appendChildがieだとできない??
-
onclickとonkeypressの重複
-
イベントに適切な値が伝わらない
-
javascriptであるボタンを押す...
-
<a>タグのテキストを取得
-
任意の座標をクリックさせるには
-
DOMMouseScrollを使って特定のI...
-
addEventListenerで
-
javascriptでスロットゲームを...
-
Click回数を数え、規定された回...
-
idを使わずにonclickで自身の要...
-
同じIDで定義した要素の配列を...
-
Linux バイナリ実行できない "...
-
javascriptを用いて作成された...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ActiveXobjectが作成できない
-
<a>タグのテキストを取得
-
重複しないくじの作り方がわか...
-
任意の座標をクリックさせるには
-
javascriptでCSVを呼出しvlookup
-
innerHTML実行後のイベント
-
HTML:Tableタグに対し、JavaScr...
-
onchangeイベントを使ってspan...
-
WordPressのコンタクトフォーム...
-
appendChildがieだとできない??
-
配列の大括弧と丸括弧はどう違う?
-
JavaScriptでオブジェクトを取...
-
【Tabキー】特定の範囲内だけで...
-
div要素内の全input要素をdisable
-
問題はbind の付いたリスナーを...
-
モーダルダイアログウィンドウ...
-
テキストボックスがブランクの...
-
javascript 特定のタグのidの存...
-
日本語入力の禁止
-
javascriptで編集可能不可能の...
おすすめ情報