2011.11.09
最近使うことが多いJSです。
ページ表示時とブラウザサイズ変更時に
ブラウザのサイズを取得する簡単なものですが、
シンプルなのでいろいろと応用することができます。
---- <head></head>内 -----------------------------------------------------
<script type="text/javascript">
var ua = navigator.userAgent.toLowerCase();
var bIE = (ua.indexOf("msie")>=0);
function resize(){
var w, h;
if(bIE){
w = document.documentElement.clientWidth;
h = document.documentElement.clientHeight;
}
else{
w = innerWidth;
h = innerHeight;
}
//ここに行わせたい処理を書く！
//例）document.getElementById("mainbox").style.width = w - 300 + "px";
}
if(bIE){
window.attachEvent("onload", resize);
window.attachEvent("onresize", resize);
}
else{
window.addEventListener("load", resize, false);
window.addEventListener("resize", resize, false);
}
</script>
--------------------------------------------------------------------------
上の例では"mainbox"というidの付いたdivなどの"width"を、
「ブラウザの横幅 - 300px」のサイズに変更しています。
（赤文字の箇所に書く限り、w をブラウザ横幅、h をブラウザ縦幅として使えます）
他のJSと組み合わせてフルブラウザにしてみたり、使い道は多そうです。
ページ表示時とブラウザサイズ変更時に
ブラウザのサイズを取得する簡単なものですが、
シンプルなのでいろいろと応用することができます。
---- <head></head>内 -----------------------------------------------------
<script type="text/javascript">
var ua = navigator.userAgent.toLowerCase();
var bIE = (ua.indexOf("msie")>=0);
function resize(){
var w, h;
if(bIE){
w = document.documentElement.clientWidth;
h = document.documentElement.clientHeight;
}
else{
w = innerWidth;
h = innerHeight;
}
//ここに行わせたい処理を書く！
//例）document.getElementById("mainbox").style.width = w - 300 + "px";
}
if(bIE){
window.attachEvent("onload", resize);
window.attachEvent("onresize", resize);
}
else{
window.addEventListener("load", resize, false);
window.addEventListener("resize", resize, false);
}
</script>
--------------------------------------------------------------------------
上の例では"mainbox"というidの付いたdivなどの"width"を、
「ブラウザの横幅 - 300px」のサイズに変更しています。
（赤文字の箇所に書く限り、w をブラウザ横幅、h をブラウザ縦幅として使えます）
他のJSと組み合わせてフルブラウザにしてみたり、使い道は多そうです。
2011.10.19
ボックス内の要素を縦中央に揃えたい、ということは良くあると思いますが、
CSSではなかなか実現しにくいことだったりします。
（できなくはないけれど条件が厳しいとか、好ましくないタグが必要だとか）
そんな縦揃えの方法の1つとして、こちらで公開されているJSがあります。
tableを使わずにvertical-align:middle;を再現。ボックス内の画像(img)中央配置をjQueryで頑張ってみた
こちらのJSですが、
・ボックスの width、height が決まっている
・中の要素が img もしくはブロック要素
という条件で要素を縦中央に揃えることができるようです。
使用方法も詳しく説明されています。
組み込む際は、＜head＞内に記述する下記JSを修正することも忘れずに。
--------------------------------------------------------------------------------------------
<script>
$(window).bind('load',function(){
$(".vBox img").vAlign(); // 垂直水平位置を揃えたい画像を指定
});
</script>
--------------------------------------------------------------------------------------------
3行目で中央揃えを適用させたい要素を指定します。
demoデータでは＜img＞タグにのみ適用していますが、
たとえば＜p＞タグにも適用する場合は
--------------------------------------------------------------------------------------------
$(".vBox img, .vBox p").vAlign(); // 垂直水平位置を揃えたい画像を指定
--------------------------------------------------------------------------------------------
という感じで追加すればOKです。
枠のサイズさえ決まっていれば使えるため、お世話になる場面は多そうです。
CSSではなかなか実現しにくいことだったりします。
（できなくはないけれど条件が厳しいとか、好ましくないタグが必要だとか）
そんな縦揃えの方法の1つとして、こちらで公開されているJSがあります。
tableを使わずにvertical-align:middle;を再現。ボックス内の画像(img)中央配置をjQueryで頑張ってみた
こちらのJSですが、
・ボックスの width、height が決まっている
・中の要素が img もしくはブロック要素
という条件で要素を縦中央に揃えることができるようです。
使用方法も詳しく説明されています。
組み込む際は、＜head＞内に記述する下記JSを修正することも忘れずに。
--------------------------------------------------------------------------------------------
<script>
$(window).bind('load',function(){
$(".vBox img").vAlign(); // 垂直水平位置を揃えたい画像を指定
});
</script>
--------------------------------------------------------------------------------------------
3行目で中央揃えを適用させたい要素を指定します。
demoデータでは＜img＞タグにのみ適用していますが、
たとえば＜p＞タグにも適用する場合は
--------------------------------------------------------------------------------------------
$(".vBox img, .vBox p").vAlign(); // 垂直水平位置を揃えたい画像を指定
--------------------------------------------------------------------------------------------
という感じで追加すればOKです。
枠のサイズさえ決まっていれば使えるため、お世話になる場面は多そうです。
2011.10.05
LightBox風に画像やswf、webページなどのコンテンツを表示できる
jQuery Pluginの1つとしてFancyboxがありますが、
見た目や動きを設定するためのオプションがたくさん用意されています。
が、公式サイトでは一通り説明されているものの、
日本語でまとめてくれているサイトが見当たらなかったため
自分用に翻訳してみたものをメモっておきます。
以下、すべてではないですが（おまけに空白もあります）
このようなオプションがあります。
jQuery Pluginの1つとしてFancyboxがありますが、
見た目や動きを設定するためのオプションがたくさん用意されています。
が、公式サイトでは一通り説明されているものの、
日本語でまとめてくれているサイトが見当たらなかったため
自分用に翻訳してみたものをメモっておきます。
以下、すべてではないですが（おまけに空白もあります）
このようなオプションがあります。
| オプション | デフォルト値 | 説明 |
| 'padding' | 10 | 枠の幅 |
| 'margin' | 20 | |
| 'opacity' | false | |
| 'modal' | false | true にすると、'overlayShow'→ true、'hideOnOverlayClick', 'hideOnContentClick', 'enableEscapeButton', 'showCloseButton'→ talse になります |
| 'cyclic' | false | ギャラリーの一番端でNext/Backボタンを押した時にループするか |
| 'scrolling' | 'auto' | スクロールバーの有無（auto／yes／no） |
| 'width' | 560 | コンテンツの幅（iframe、swf時） |
| 'height' | 340 | コンテンツの高さ（iframe、swf時） |
| 'autoScale' | true | ビューポートに収まるようにスケーリングするか |
| 'autoDimensions' | true | |
| 'centerOnScroll' | false | コンテンツを常に中央に表示するか |
| 'hideOnOverlayClick' | true | オーバーレイ部分をクリックした時にfancyboxを閉じるか |
| 'hideOnContentClick' | false | コンテンツをクリックした時にfancyboxを閉じるか |
| 'overlayShow' | true | オーバーレイの有無 |
| 'overlayOpacity' | 0.3 | オーバーレイの不透明度 |
| 'overlayColor' | '#666' | オーバーレイの色 |
| 'titleShow' | true | タイトルの表示/非表示 |
| 'titlePosition' | 'outside' | タイトルの位置（outside／inside／over） |
| 'transitionIn' 'transitionOut' |
'fade' | 開閉時の動き（fade／elastic／none） |
| 'speedIn' 'speedOut' |
300 | 開閉時のスピード |
| 'changeSpeed' | 300 | ギャラリーでコンテンツを切り替えた時のサイズ変更スピード |
| 'changeFade' | 'fast' | ギャラリーでコンテンツを切り替えた時のフェードスピード |
| 'easingIn' 'easingOut' |
'swing' | アニメーションに使用するイージング |
| 'showCloseButton' | true | クローズボタンの有無 |
| 'showNavArrows' | true | ギャラリーでNext/Backボタンを表示するか |
| 'enableEscapeButton' | true | Escボタンを押した時にfancyboxを閉じるか |
2011.03.23
もうそろそろIE6対策の記事を書くことが減ってほしいものですが、
やはりまだ対応しなければならないのが現状です。
IE6で透過PNGを使う際のJSですが、
今まで使っていたものが諸事情により使えなかったため
別のJSを探していたところ、
各種JSをとてもわかりやすくまとめてくださっているサイトがありました。
ITキヲスク | IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」
オススメされている DD_belatedPNG.js 以外にも、
各JSの特徴や注意点などがまとめられていて参考になります。
とりあえずメモでした。
やはりまだ対応しなければならないのが現状です。
IE6で透過PNGを使う際のJSですが、
今まで使っていたものが諸事情により使えなかったため
別のJSを探していたところ、
各種JSをとてもわかりやすくまとめてくださっているサイトがありました。
ITキヲスク | IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」
オススメされている DD_belatedPNG.js 以外にも、
各JSの特徴や注意点などがまとめられていて参考になります。
とりあえずメモでした。
2011.02.16
ブラウザ毎のハックはCSSで簡単にできますが、
OSごとにスタイルを変えるのは、複数のCSSを用意して振り分けるしかないと
思っていました。
ですが今回はCSSの記述を増やしたくなく、
ダメもとで探してみたところ やたらと便利なJSが見つかりました。
CSS Browser Selector
CSSに簡単な記述を追加するだけで、
ブラウザ、OSを指定して適用させることができるJSです。
具体的には、
.win body {
background:#000;
}
で Windowsのみに、
.mac.ie7 body {
background:#000;
}
で MacのIE7のみにスタイルを適用できます。
ダウンロードはこちらのサイトから。
http://rafael.adm.br/css_browser_selector/
今回は試していませんが、
相当な数のOS、ブラウザに対応しているようです。
■OS
・win - Microsoft Windows (all versions)
・vista - Microsoft Windows Vista
・linux - Linux (x11 and linux)
・mac - Mac OS
・freebsd - FreeBSD
・ipod - iPod Touch
・iphone - iPhone
・ipad - iPad
・webtv - WebTV
・j2me - J2ME Devices (ex: Opera mini) ※changed from mobile to j2me
・blackberry - BlackBerry
・android - Google Android
・mobile - All mobile devices
■ブラウザ
・ie - Internet Explorer (All versions)
・ie8 - Internet Explorer 8.x
・ie7 - Internet Explorer 7.x
・ie6 - Internet Explorer 6.x
・ie5 - Internet Explorer 5.x
・gecko - Mozilla, Firefox (all versions), Camino
・ff2 - Firefox 2
・ff3 - Firefox 3
・ff3_5 - Firefox 3.5
・ff3_6 - Firefox 3.6
・opera - Opera (All versions)
・opera8 - Opera 8.x
・opera9 - Opera 9.x
・opera10 - Opera 10.x
・konqueror - Konqueror
・webkit or safari - Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
・safari3 - Safari 3.x
・chrome - Google Chrome
・iron - SRWare Iron
iPadやスマートフォン系のOSにまで対応しているようで、
なんだかまた近いうちにお世話になりそうな・・
OSごとにスタイルを変えるのは、複数のCSSを用意して振り分けるしかないと
思っていました。
ですが今回はCSSの記述を増やしたくなく、
ダメもとで探してみたところ やたらと便利なJSが見つかりました。
CSS Browser Selector
CSSに簡単な記述を追加するだけで、
ブラウザ、OSを指定して適用させることができるJSです。
具体的には、
.win body {
background:#000;
}
で Windowsのみに、
.mac.ie7 body {
background:#000;
}
で MacのIE7のみにスタイルを適用できます。
ダウンロードはこちらのサイトから。
http://rafael.adm.br/css_browser_selector/
今回は試していませんが、
相当な数のOS、ブラウザに対応しているようです。
■OS
・win - Microsoft Windows (all versions)
・vista - Microsoft Windows Vista
・linux - Linux (x11 and linux)
・mac - Mac OS
・freebsd - FreeBSD
・ipod - iPod Touch
・iphone - iPhone
・ipad - iPad
・webtv - WebTV
・j2me - J2ME Devices (ex: Opera mini) ※changed from mobile to j2me
・blackberry - BlackBerry
・android - Google Android
・mobile - All mobile devices
■ブラウザ
・ie - Internet Explorer (All versions)
・ie8 - Internet Explorer 8.x
・ie7 - Internet Explorer 7.x
・ie6 - Internet Explorer 6.x
・ie5 - Internet Explorer 5.x
・gecko - Mozilla, Firefox (all versions), Camino
・ff2 - Firefox 2
・ff3 - Firefox 3
・ff3_5 - Firefox 3.5
・ff3_6 - Firefox 3.6
・opera - Opera (All versions)
・opera8 - Opera 8.x
・opera9 - Opera 9.x
・opera10 - Opera 10.x
・konqueror - Konqueror
・webkit or safari - Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
・safari3 - Safari 3.x
・chrome - Google Chrome
・iron - SRWare Iron
iPadやスマートフォン系のOSにまで対応しているようで、
なんだかまた近いうちにお世話になりそうな・・
