久しぶりにレスポンシブフレームワークを使ってた時、２〜３ブロックの分割されたボックスで、スマートフォンってほどじゃないけど、ちょっとだけ画面幅が狭い時にリアルタイムで画面サイズを取得しつつ、指定された画面幅の時だけclassを変更したいと思います。
jQueryでappend()やhtml()で追加や変更された要素に対して、さらにclickイベントを入れたい場合はclick()では発動しないですよね、javascriptで追加された要素に対してさらにイベントを入れてあげるにはon()イベントを使って上げますね。
appendやhtmlなど、追加・変更した要素に対してもFancyboxプラグインでモーダル表示させたいなーと思っていたら、同じようなこと試されている方がいらっしゃいました。
$(document).on('click', 'a.fancybox', function() {
$.fancybox(this);
});
こうすれば最低限のモーダルは動くことが分かりましたが、Fancyboxはオプションが超たくさんあるんですね。
$(".js-modal").fancybox({
onComplete: function() {
alert('hoge');
}
});
onイベントで、このモーダルの表示が完了したらどうするのかが分かりませんでしたが、公式サイトを見たり、試行錯誤で出来ました！
$(document).on('click', '.js-modal', function () {
$.fancybox({
'href' : this.href,
'onComplete' : function() {
alert('hoge');
}
});
return false;
});
});
これでOK!最終的には公式サイトで解決！最初からドキュメント読めやってことですね。hrefにはthis.hrefというのもポイントですね。
.ellipsis.multiline {
white-space: normal;
}
jQueryプラグインを読み込んだら、１行ならclass ellipsisを、複数行ならellipsis multilineで、２つのクラスを設定してあげるだけ。
後は任意でwidthとheightを自由に設定するだけ。
奥様、簡単ざましょ！
やはり一番シンプルにスクロールさせるのが一番だなってことで。
<div class="overview" style="height:300px; overflow:auto;" id="auto_scroll">
<div style="height:600px">スクロール〜</div>
</div>
$(function(){
$(".overview").scrollTop($("#auto_scroll")[0].scrollHeight);
});
プラグインなど一切使わずに自働でページを読み込んだ際に一番下までスクロールされます。
clickイベントと連携させるのも簡単そうですね。
何か、メモするのもためらわれるぐらい初歩的なことなんですが。
$("#Form .submit").click(function () {
$('#Form').submit();
});
$('#Form').submit(function() {
//Formのsubmit後の処理
});
これで、わざわざボタン要素にしなくても、好きなタグでもってsubmitさせることが出来ます。
え？ベンダープレフィックスが何か？ですって。アレですよ、そこのお兄さん お姉さん。
たとえば以下は
css3 Button Generatorで作成したcss3のグラデーションとか角丸とかベンダープレフィックスガシガシ書いたcss3のコード。ちょっとグラデーションしたり、角を丸くするだけで超絶ながいソースコードになりますね。
先頭に付ける-moz-や-webkit-など、各ブラウザに対応させるために記述するこれがベンダープレフィックスです。
button.css3button {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px; color: #ffffff;
padding: 10px 20px;
background: -moz-linear-gradient( top, #42aaff 0%, #003366);
background: -webkit-gradient( linear, left top, left bottom, from(#42aaff), to(#003366));
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
border: 1px solid #003366;
-moz-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.5);
webkit-box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.5);
box-shadow: 0px 1px 3px rgba(000,000,000,0.5), inset 0px 0px 1px rgba(255,255,255,0.5); text-shadow: 0px -1px 0px rgba(000,000,000,0.7), 0px 1px 0px rgba(255,255,255,0.3);
}
もちろん、今や定番の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のバージョンの数字だけにします。
function AndroidSversion() {
var ua = navigator.userAgent;
if( ua.indexOf("Android") > 0 )
{
var androidversion = parseFloat(ua.slice(ua.indexOf("Android")+8));
return androidversion;
}
}
function iOSversion() {
if (/iP(hone|od|ad)/.test(navigator.platform)) {
var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
return [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)];
}
}
Android2.3と、iOS4以下はPosition:fixに対応していないですし、iOS5からPosition:fixに対応していてもバグが多いので、数値で指定したバージョンより高いか低いかを取得するときに便利そうです。
以下のHTMLだと、var indexの値は2になる
var index = $('#hoge div').index($('.active'));
存在しなかったり、うまく取得できないと-１が返ってくる。
以下のHTMLだと、var indexの値は2になる
<div id="hoge">
<div>ああああ</div>
<div>ああああ</div>
<div class="active">ああああ</div>
</div>
久々にjQueryネタ。LightBoxってjQueryプラグインの定番中の定番の気もしますが、プラグインに頼らず超簡単に、Javascript(jQuery)部分はたった数行で書けてしまいますよ！
あらかじめhead内にjQueryの読み込みだけはして下さいね。
$(document).ready(function(){
//show-panelボタンをクリックしたらLightBoxを表示する
$("a#show-panel").click(function(){
$("#BlackWindow, #lightbox-panel").fadeIn(300);/*表示速度は数値を調整*/
})
//CloseボタンをクリックしたらLightBoxを閉じる
$("a#close-panel").click(function(){
$("#BlackWindow, #lightbox-panel").fadeOut(300);/*フォードアウトの速度は数値を調整*/
})
//背景の黒地をクリックしたらLightBoxを閉じる
$("#BlackWindow").click(function(){
$("#BlackWindow, #lightbox-panel").fadeOut(300);/*フォードアウトの速度は数値を調整*/
})
})
/* Lightbox で表示させるDIV要素のCSS */
#lightbox-panel {
-moz-border-radius: 6px;
background: #eef2f7;
-webkit-border-radius: 6px;
border: 1px solid #536376;
-webkit-box-shadow: rgba(0,0,0,.6) 0px 2px 12px;
-moz-box-shadow: rgba(0,0,0,.6) 0px 2px 12px;
padding: 14px 22px;
width: 400px;
position:fixed;
top:100px;
left:50%;
display:none;
z-index:10;
border:2px solid #CCCCCC;
padding:10px 15px 10px 15px;
margin-left:-200px;
}
/* Lightbox表示時に背景を黒に */
#BlackWindow{
display:none;
background:#000000;
opacity:0.7;/*黒地の背景の調整はこの数値で調整*/
filter:alpha(opacity=70);/*黒地の背景の調整はこの数値で調整*/
position:absolute;
top:0px;
left:0px;
min-width:100%;
min-height:100%;
z-index:1;
}
Show
意外にもjavascriptの記述が大変短いですね。
LightBoxで表示させたいdivなどのBox要素はあらかじめdisplay:noneにしておきます。
また、LightBox表示中は全体を黒地で塗りつぶします。これも普段はdisplay:noneにしておき、アクションが発動した時だけ表示されるようにします。
この時黒地で全体を塗りつぶすBlackWindowがLightBoxとして表示させたいdiv要素まで塗りつぶさないようz-indexで重なり順を指定してあるのです。
これは読んだそのまんま。#BlackWindowと#lightbox-panelの２つの要素がクリックされたり、閉じるボタンなどを再びクリックするとフェードイン、フェードアウトするだけ。
簡単ですね！