ココログの右サイドバーを隠すJavaScript試作版
相変わらず JavaScript で遊んでる。今回のは、ココログの右サイドバーを隠したり表示したりする JavaScript。右上の赤い「>>」または「<<」をクリックすると、サイドバーが出たり隠れたりする…はず。ローカル環境の Firefox と Safari だと動いたんだけど、実際にココログで動かすと、どうなることやら。つか、相変わらずデザイン・センスは最低だな、をれ。
以下、ソース。「表示/隠す」のHTMLは、こんな感じ。
<span onclick="com_cocologNifty_chikuwablog.toggleSideBar.toggle(); " style="color: red;"><a name="toggleSideBar">>></a></span>
JavaScript は以下。
<script type="text/javascript">
//<![CDATA[
var com_cocologNifty_chikuwablog;
if( !com_cocologNifty_chikuwablog ) com_cocologNifty_chikuwablog={};
com_cocologNifty_chikuwablog.toggleSideBar = (function() {
var bWidth = "200px";
var cRight, cCenter;
var isShow = 1; //hide:0; show:1
var minWidth = 600; //const
var nRight = "#right"; //const
var nCenter = "#center"; //const
var nName = "toggleSideBar"; //const
function cEach( a, f ) { for( var i=0; i<a.length; i++ ) f(a[i]); }
function doAlert() {
alert( "iWidth:"+innerWidth+" iHeight:"+innerHeight+
" sWidth:"+window.screen.width+" sHeight:"+window.screen.height );
}
function doToggle() {
isShow = (isShow+1)%2 ;
cRight.style.display = ["none", "inline" ][isShow] ;
cCenter.style.marginRight = ["0px" , bWidth ][isShow] ;
cEach( document.getElementsByName( nName ), function( x ) {
x.innerHTML = ["<<", ">>"][isShow] ;
} );
}
function doInit() {
cEach( document.styleSheets, function( x ) {
try {
cEach( x.cssRules, function( y ) {
if( y.selectorText == ( nRight ) && y.style.width ) {
cRight = y; bWidth = y.style.width;
}
else if( y.selectorText == ( nCenter ) && y.style.marginRight ) {
cCenter = y;
}
} )
} catch( e ) {}
} );
if( window.screen.width < minWidth || innerWidth < minWidth ) { doToggle(); }
//alert( "b:"+bWidth);
}
return {
alt: doAlert,
init: doInit,
toggle: doToggle,
};
}() );
com_cocologNifty_chikuwablog.toggleSideBar.init();
//]]>
</script>
//<![CDATA[
var com_cocologNifty_chikuwablog;
if( !com_cocologNifty_chikuwablog ) com_cocologNifty_chikuwablog={};
com_cocologNifty_chikuwablog.toggleSideBar = (function() {
var bWidth = "200px";
var cRight, cCenter;
var isShow = 1; //hide:0; show:1
var minWidth = 600; //const
var nRight = "#right"; //const
var nCenter = "#center"; //const
var nName = "toggleSideBar"; //const
function cEach( a, f ) { for( var i=0; i<a.length; i++ ) f(a[i]); }
function doAlert() {
alert( "iWidth:"+innerWidth+" iHeight:"+innerHeight+
" sWidth:"+window.screen.width+" sHeight:"+window.screen.height );
}
function doToggle() {
isShow = (isShow+1)%2 ;
cRight.style.display = ["none", "inline" ][isShow] ;
cCenter.style.marginRight = ["0px" , bWidth ][isShow] ;
cEach( document.getElementsByName( nName ), function( x ) {
x.innerHTML = ["<<", ">>"][isShow] ;
} );
}
function doInit() {
cEach( document.styleSheets, function( x ) {
try {
cEach( x.cssRules, function( y ) {
if( y.selectorText == ( nRight ) && y.style.width ) {
cRight = y; bWidth = y.style.width;
}
else if( y.selectorText == ( nCenter ) && y.style.marginRight ) {
cCenter = y;
}
} )
} catch( e ) {}
} );
if( window.screen.width < minWidth || innerWidth < minWidth ) { doToggle(); }
//alert( "b:"+bWidth);
}
return {
alt: doAlert,
init: doInit,
toggle: doToggle,
};
}() );
com_cocologNifty_chikuwablog.toggleSideBar.init();
//]]>
</script>
| 固定リンク
「パソコン・インターネット」カテゴリの記事
- サミュエル・ウーリー「操作される現実 VR・合成音声・ディープフェイクが生む虚構のプロパガンダ」白揚社 小林啓倫訳(2021.07.11)
- ココログ:記事編集で余分な改行が入る→初期設定を通常エディタにする(2019.10.10)
- Q.Ethan McCallum「バッドデータ ハンドブック データにまつわる問題への19の処方箋」オライリージャパン 磯蘭水監訳 笹井崇司訳(2019.06.07)
- ココログ:リンク切れ一覧と旧URL一覧と公開記事URL一覧を突き合わせるOpenOfficeCalc(2018.11.18)
- ココログ:古い「カテゴリ別書評一覧」から各記事の旧URL 一覧を作るVBScript(2018.11.15)
コメント