久しぶりにレスポンシブフレームワークを使ってた時、２〜３ブロックの分割されたボックスで、スマートフォンってほどじゃないけど、ちょっとだけ画面幅が狭い時にリアルタイムで画面サイズを取得しつつ、指定された画面幅の時だけclassを変更したいと思います。
| $(document).ready(function() { | |
| var timer = false; | |
| var w = $(window).width(); | |
| var disp = 987; //変更したい画面幅 | |
| var changeBox = 987; //変更したい画面幅 | |
| var defaultClass = 'span8'; | |
| var changeClass = 'span6'; | |
| var boxName = '.boxName'; | |
| //最初に画面を開いた時 | |
| if (w < disp) { | |
| $(boxName).removeClass(defaultClass); | |
| $(boxName).addClass(changeClass); | |
| } | |
| //画面の幅をユーザーが変更した時（変更終了した時が実行のタイミング） | |
| $(window).resize(function() { | |
| if (timer !== false) { | |
| clearTimeout(timer); | |
| } | |
| timer = setTimeout(function() { | |
| var w = $(window).width(); | |
| if (w < disp) { | |
| $(boxName).removeClass(defaultClass); | |
| $(boxName).addClass(changeClass); | |
| } | |
| if (w > disp) { | |
| $(boxName).removeClass(changeClass); | |
| $(boxName).addClass(defaultClass); | |
| } | |
| }, 100); | |
| }); | |
| }); |
| <div class="boxName span8"> | |
| <p>class名span８が指定された幅より大きくなるとspan6に変わります</p> | |
| </div> |
jQueryでappend()やhtml()で追加や変更された要素に対して、さらにclickイベントを入れたい場合はclick()では発動しないですよね、javascriptで追加された要素に対してさらにイベントを入れてあげるにはon()イベントを使って上げますね。
appendやhtmlなど、追加・変更した要素に対してもFancyboxプラグインでモーダル表示させたいなーと思っていたら、同じようなこと試されている方がいらっしゃいました。
こうすれば最低限のモーダルは動くことが分かりましたが、Fancyboxはオプションが超たくさんあるんですね。
onイベントで、このモーダルの表示が完了したらどうするのかが分かりませんでしたが、公式サイトを見たり、試行錯誤で出来ました！
これでOK!最終的には公式サイトで解決！最初からドキュメント読めやってことですね。hrefにはthis.hrefというのもポイントですね。
.ellipsis.multiline {
white-space: normal;
}
jQueryプラグインを読み込んだら、１行ならclass ellipsisを、複数行ならellipsis multilineで、２つのクラスを設定してあげるだけ。
後は任意でwidthとheightを自由に設定するだけ。
奥様、簡単ざましょ！
やはり一番シンプルにスクロールさせるのが一番だなってことで。
プラグインなど一切使わずに自働でページを読み込んだ際に一番下までスクロールされます。
clickイベントと連携させるのも簡単そうですね。
何か、メモするのもためらわれるぐらい初歩的なことなんですが。
これで、わざわざボタン要素にしなくても、好きなタグでもってsubmitさせることが出来ます。
え？ベンダープレフィックスが何か？ですって。アレですよ、そこのお兄さん お姉さん。
たとえば以下は
css3 Button Generatorで作成したcss3のグラデーションとか角丸とかベンダープレフィックスガシガシ書いたcss3のコード。ちょっとグラデーションしたり、角を丸くするだけで超絶ながいソースコードになりますね。
先頭に付ける-moz-や-webkit-など、各ブラウザに対応させるために記述するこれがベンダープレフィックスです。
もちろん、今や定番のSassでベンダープレフィックスを付与する方法もありますが、Prefix freeというJavascriptファイルを好きなところに読み込むだけでベンダープレフィックスを付与する方法も大変便利です。
使い方はとっても簡単。ベンダープレフィックスをしたいページにダウンロードしたprefixfree.min.jsを読み込むだけ。特に他にプラグインやライブラリも必要なく、スクリプトもわずか２KBです。
読み込む場所についても 配布元のサイトでanywhere in your page.
と言っているので本当にどこでもよさそうです。
たとえばシャドウ。非常にシンプルですね。
box-shadow: 5px 5px 10px -5px black;
自働でプレフィックスの処理をしてほしくないスタイルシートのファイルがある場合は以下のようにすればいいみたいです。
jQueryのcss()メソッドでも対応させたい場合があると思います。その際は以下のjQueryプラグインを別途呼び出す必要があるそうです。
私も次回フロントエンド周りをやる際にはぜひ使いたいと思います！
ども、このところめっきり作業がフロントエンド周りの多いITかあさんです。
そんな時にはquerySelector/querySelectorAllが便利です。
ね！jQueryのおなじみの書き方と全く一緒でしょ！querySelectorAllの場合は配列で取得するので、取得した全てに処理を入れたい場合は、for構文で処理してあげるといいと思います。
ちょっとしたClickのアクションなど簡単なJavascriptであればjQueryを書くほどじゃ無い時に便利だと思います。
ヘッダー左のボタンをquerySelectorで取得し、クリックしたらalertを出すように、
コンテンツのlistにあたっているクラスに対してquerySelectorAllですべて取得し、for文で文字の色を青くする処理を行っています。
CSSのposition:fixに対応しているとかいないとか、Android/iOSで指定バージョン以下なのか以上なのか、バージョンの数値だけを取得したいことって多々あると思います。
（っつーか私の場合多すぎるんだが。。）
なかなか使えるな～と思ったのでメモして残しておきます。
先にuserAgentを取得し、Androidという文字列が含まれていれば、文字列の「Android」をスライスして、数字だけにして、Androidのバージョンの数字だけにします。
Android2.3と、iOS4以下はPosition:fixに対応していないですし、iOS5からPosition:fixに対応していてもバグが多いので、数値で指定したバージョンより高いか低いかを取得するときに便利そうです。
以下のHTMLだと、var indexの値は2になる
存在しなかったり、うまく取得できないと-１が返ってくる。
以下のHTMLだと、var indexの値は2になる
久々にjQueryネタ。LightBoxってjQueryプラグインの定番中の定番の気もしますが、プラグインに頼らず超簡単に、Javascript(jQuery)部分はたった数行で書けてしまいますよ！
あらかじめhead内にjQueryの読み込みだけはして下さいね。
意外にもjavascriptの記述が大変短いですね。
LightBoxで表示させたいdivなどのBox要素はあらかじめdisplay:noneにしておきます。
また、LightBox表示中は全体を黒地で塗りつぶします。これも普段はdisplay:noneにしておき、アクションが発動した時だけ表示されるようにします。
この時黒地で全体を塗りつぶすBlackWindowがLightBoxとして表示させたいdiv要素まで塗りつぶさないようz-indexで重なり順を指定してあるのです。
これは読んだそのまんま。#BlackWindowと#lightbox-panelの２つの要素がクリックされたり、閉じるボタンなどを再びクリックするとフェードイン、フェードアウトするだけ。
簡単ですね！
by