Jquery ITかあさん

ITかあさん

jQuery リアルタイムで画面サイズを取得しつつ、classを変更

jQuery

レスポンシブ系のフレームワークを使ってる時、画面幅によってclassをそもそも変更したい

久しぶりにレスポンシブフレームワークを使ってた時、2〜3ブロックの分割されたボックスで、スマートフォンってほどじゃないけど、ちょっとだけ画面幅が狭い時にリアルタイムで画面サイズを取得しつつ、指定された画面幅の時だけclassを変更したいと思います。

jQuery Fancyboxでbindイベントもモーダルする方法

jQuery Fancyboxでbindイベントもモーダルする方法


jQueryでappend()やhtml()で追加や変更された要素に対して、さらにclickイベントを入れたい場合はclick()では発動しないですよね、javascriptで追加された要素に対してさらにイベントを入れてあげるにはon()イベントを使って上げますね。

1.9以前ではliveイベントがありましたが、以降は廃止され、onイベントを使います。詳しくはこちら

jQuery Fancyboxでもbindしたいよー!

appendやhtmlなど、追加・変更した要素に対してもFancyboxプラグインでモーダル表示させたいなーと思っていたら、同じようなこと試されている方がいらっしゃいました。

$(document).on('click', 'a.fancybox', function() {
$.fancybox(this);
});

こうすれば最低限のモーダルは動くことが分かりましたが、Fancyboxはオプションが超たくさんあるんですね。

例えば、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というのもポイントですね。

CSS ellipsis で複数行を省略するjQueryプラグイン

三点リーダーで省略するCSSのellipsis、jQueryプラグインで複数行にも対応出来るよ

「ちょっと奥様!ellipsisのテキストの省略は複数行には非対応ざますのよ!」

jquery.ellipsisで複数行でも三点リーダー付で省略できるよ

Javascript

//別途jQueryは読み込んでね
<script type="text/javascript" src="/js/jquery.ellipsis.js"></script>
<script type="text/javascript">
$(".ellipsis").ellipsis();
</script>

HTML

<div class="ellipsis" style="width: 100px; border: 1px solid black;">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>
<div class="ellipsis multiline" style="width: 100px; height: 80px; border: 1px solid black; margin-bottom: 100px">Lorem ipsum dolor sit amet, consectetur adipisicing elit</div>

CSS

.ellipsis {
white-space: nowrap;
overflow: hidden;
}

.ellipsis.multiline {
white-space: normal;
}

jQueryプラグインを読み込んだら、1行ならclass ellipsisを、複数行ならellipsis multilineで、2つのクラスを設定してあげるだけ。
後は任意でwidthとheightを自由に設定するだけ。

奥様、簡単ざましょ!

jQueryで高さoverflow:autoになっているコンテンツを一番下まで自働スクロールする方法

jQueryで高さoverflow:autoになっているコンテンツを一番下まで自働スクロール

やはり一番シンプルにスクロールさせるのが一番だなってことで。

<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イベントと連携させるのも簡単そうですね。

jQuery submitボタン以外でsubmitさせる方法

jQuery submitボタン以外でsubmitさせる方法

何か、メモするのもためらわれるぐらい初歩的なことなんですが。

jQuery

$("#Form .submit").click(function () {
    $('#Form').submit();
});

$('#Form').submit(function() {
//Formのsubmit後の処理
    });

HTML

submitボタンじゃないよ

これで、わざわざボタン要素にしなくても、好きなタグでもってsubmitさせることが出来ます。

Prefix free CSS3のベンダープレフィックス自働付与するすご~いスクリプト

CSS3のベンダープレフィックス自働付与するPrefix free

CSS3のベンダープレフィックス自働付与するPrefix freeっていうスクリプトがすごい

css3のベンダープレフィックスってめんどうですよね

え?ベンダープレフィックスが何か?ですって。アレですよ、そこのお兄さん お姉さん。

ベンダープレフィックスがしがし書いたCSS3のボタンのcss例

たとえば以下は
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ファイルを好きなところに読み込むだけでベンダープレフィックスを付与する方法も大変便利です。

-prefix-free

使い方

使い方はとっても簡単。ベンダープレフィックスをしたいページにダウンロードしたprefixfree.min.jsを読み込むだけ。特に他にプラグインやライブラリも必要なく、スクリプトもわずか2KBです。

読み込む場所についても 配布元のサイトでanywhere in your page.
と言っているので本当にどこでもよさそうです。

このプラグインを使うとCSS3の書き方はこうなる

たとえばシャドウ。非常にシンプルですね。

box-shadow: 5px 5px 10px -5px black;

制約事項

  • import cssには非対応
  • ChromeやOperaブラウザではローカルでは使えないみたいです

Prefixの処理を除外したい時

自働でプレフィックスの処理をしてほしくないスタイルシートのファイルがある場合は以下のようにすればいいみたいです。

jQueryのcss()メソッドでも対応させたい時

jQueryのcss()メソッドでも対応させたい場合があると思います。その際は以下のjQueryプラグインを別途呼び出す必要があるそうです。

私も次回フロントエンド周りをやる際にはぜひ使いたいと思います!

jQueryを使わずちょっとしたDOM要素の取得ならquerySelector/querySelectorAll

javascript

jQueryを使わずちょっとしたDOM要素の取得ならquerySelector/querySelectorAllが超便利

ども、このところめっきり作業がフロントエンド周りの多いITかあさんです。

jQueryを使うほどでもない、けど、要素の取得はjQueryに慣れ親しんでいるから、要素の取得だけはjQueryチックにやりたい!

そんな時にはquerySelector/querySelectorAllが便利です。

document.querySelector(“#foo”);
document.querySelector(“.foo”);
document.querySelectorAll(“.foo”);

ね!jQueryのおなじみの書き方と全く一緒でしょ!querySelectorAllの場合は配列で取得するので、取得した全てに処理を入れたい場合は、for構文で処理してあげるといいと思います。

ちょっとしたClickのアクションなど簡単なJavascriptであればjQueryを書くほどじゃ無い時に便利だと思います。

ヘッダー左のボタンをquerySelectorで取得し、クリックしたらalertを出すように、
コンテンツのlistにあたっているクラスに対してquerySelectorAllですべて取得し、for文で文字の色を青くする処理を行っています。

JavascriptでAndroid/iOSのバージョンを数値で取得

JavascriptでAndroid/iOSのバージョンを数値で取得

CSSのposition:fixに対応しているとかいないとか、Android/iOSで指定バージョン以下なのか以上なのか、バージョンの数値だけを取得したいことって多々あると思います。
(っつーか私の場合多すぎるんだが。。)
なかなか使えるな~と思ったのでメモして残しておきます。

Androidのバージョンを数字の部分だけ取得

先に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;
     }
}
参考:Special CSS3 Scaling for andriod version less than 2.3

iOSのバージョンを数字の部分だけ取得

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)];
     }
}
参考:
Detect iOS version less than 5 with JavaScript

Android2.3と、iOS4以下はPosition:fixに対応していないですし、iOS5からPosition:fixに対応していてもバグが多いので、数値で指定したバージョンより高いか低いかを取得するときに便利そうです。

jQueryである要素のindex番号を取得する

以下のHTMLだと、var indexの値は2になる

var index = $('#hoge div').index($('.active'));

存在しなかったり、うまく取得できないと-1が返ってくる。

example

以下のHTMLだと、var indexの値は2になる

<div id="hoge">
     <div>ああああ</div>
     <div>ああああ</div>
     <div class="active">ああああ</div>
</div>

プラグイン不要!たった数行でdiv要素にjQueryLightBoxを実装する

プラグイン不要!たった数行でdiv要素にjQueryLightBoxを実装する

プラグイン不要!たった数行でdiv要素にjQueryLightBoxを実装する
久々にjQueryネタ。LightBoxってjQueryプラグインの定番中の定番の気もしますが、プラグインに頼らず超簡単に、Javascript(jQuery)部分はたった数行で書けてしまいますよ!

DEMO

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);/*フォードアウトの速度は数値を調整*/
})
})

CSS

  /* 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;
  }

HTML

Show

jQueryLightBoxの解説

意外にもjavascriptの記述が大変短いですね。

CSSについて

LightBoxで表示させたいdivなどのBox要素はあらかじめdisplay:noneにしておきます。
また、LightBox表示中は全体を黒地で塗りつぶします。これも普段はdisplay:noneにしておき、アクションが発動した時だけ表示されるようにします。

この時黒地で全体を塗りつぶすBlackWindowがLightBoxとして表示させたいdiv要素まで塗りつぶさないようz-indexで重なり順を指定してあるのです。

jQueryについて

これは読んだそのまんま。#BlackWindowと#lightbox-panelの2つの要素がクリックされたり、閉じるボタンなどを再びクリックするとフェードイン、フェードアウトするだけ。
簡単ですね!