このブログに表示されている、右カラムのメニュー類を、 「右メニュー表示・非表示」ボタンをクリックすることで表示したり消したりできるようにした。

昨日のエントリ 横スクロールバーキライ の関連で気になっていたことがあって、このブログは横幅を狭くした場合に横スクロールバーは表示されないものの、 フォームパーツ関係が右カラムの下に隠れてしまうことがあったので、それの回避策。

いつもこの手のDOM操作の場合、操作目的のhtmlタグににidを振って getElementById でオブジェクト取得・操作とやってたのだけど(実際、操作目的のタグにidを振ってはある)、今回は勉強がてらに getElementsByTagName で div のオブジェクトリストを作成、 特定のclass名が振られたオブジェクトをオブジェクトリストから探し、該当したものを操作するというやりかたをしてみた。
同じclass名が複数のタグで使われることがあるのでこのようなケースでは適切ではないのだけど、 操作した "main" と "right" については1回ずつしか使ってないので、まあいいかなと。

テンプレートを壊しちゃった時の保険としてソースをメモ
javascript部分のソース
divObj = document.getElementsByTagName('div');
for(i=0;i<divObj.length;i++){
	if(divObj[i].className=='main'){
		main_sts = i ;
	}
	if(divObj[i].className=='right'){
		right_sts = i ;
	}
}

navi_disp_sts = 1;

function disp_change(){
	if(navi_disp_sts==1){
		divObj[right_sts].style.display = 'none';
		divObj[main_sts].style.width = '100%';
		navi_disp_sts=0;
	}else{
		divObj[right_sts].style.display = 'block';
		divObj[main_sts].style.width = '72%';
		navi_disp_sts=1;
	}
}
javascriptの divリスト作成とクラス名探しする部分は、 onload で実行するのが筋なんだけど、 エントリ内で window.onload を使ってしまうので (これも、本来なら document.body.onload なんだろうけど……) 泣く泣くページの最後にスクリプトを配置することに。

ボタン部分のソース
<div style="text-align:right;">
	<div id="menu_disp_button">
		<a href="javascript:void(0)"
		 onclick="disp_change()"
		  id="menu_disp_button_link">
			右メニュー表示・消去
		</a>
	</div>
</div>
IE6では、スタイルに position:fixed が効かないので、 divの入れ子にし、スタイル指定でページ右側に表示できるようにしてある。

おまけでcss部分のソース

#menu_disp_button{
	position:fixed;
	right:0em;
	bottom:0em;
	background-color:#ffeeee;
	font-size:0.8em;
	border:0.2em outset gray;
	padding:0.2em;
	margin:0.5em;
	text-align:center;
	width:11em;
}

#menu_disp_button_link:hover{
	color:black;
}

#menu_disp_button:active{
	border:0.2em inset gray;
}
関連記事
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Comment
※コメントスパム防止の為半角httpと全角wをNGワードに設定してあります。






(編集・削除用)

 

管理者にだけ表示を許可
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Trackback
http://nekomimya.blog28.fc2.com/tb.php/102-bf5b0367
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
ブログ表示設定
横:
縦:
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
プロフィール

寝込み屋(nekomimya)

Author:
寝込み屋(nekomimya)
twitter:
寝込み屋(@nekomimya)

リンクはご自由に。外すのもご自由に。

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
ブログ内検索
ブログ内検索(Google)
※要JavaScript、別ウィンドウで結果表示
ブログ内検索(FC2)
※検索結果が表示されないことがあり
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
最近の記事
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
最近のコメント
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
最近のトラックバック
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
月別アーカイブ
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
カテゴリ
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
RSSフィード
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
リンク
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
FC2リンク
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    FC2カウンター
    閲覧者数合計


    現在の閲覧者数
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    最近の画像
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
     
    検索フォーム