ブラウザのウィンドウサイズを取得する際のjQueryとJavaScriptとCSSメディアクエリの違い｜BLACKFLAG
レスポンシブサイトではウィンドウの幅（画面解像度）によって、レイアウトの調整や動作処理の制御を行います。 ウィンドウサイズ（画面幅／高さ）の取得方法に関しては、スクリプト制御ではjQueryの「.width()」メソッドのほか、JavaScriptの「.innerWidth」メソッドや「.matchMedia」メソッドを使用する方法などがあり、CSSメディアクエリでは「@media only screen and (max-width:○○px)」などといった手法でウィンドウサイズを取得することが可能になります。 それぞれの取得する方法によってすこし厄介なのは、ページ内にスクロールバーがある時とない時で取得する値が変わってくるというもの。 さまざまな場面でウィンドウサイズを取得する機会が増えてきているので、上記のそれぞれ取得方法について比較してみました。 まずは各スクリプト処理とCSSメデ
jQueryで「もっと見る」ボタンで画像を順々に読み込むUIの実験｜BLACKFLAG
TwitterやFacebookなどで使われている コンテンツ要素をある一定の数表示（読み込み）しておいて 続きは「もっと見る」や「MORE」といったリンクやボタンをクリックすることで 要素を順々に読み込んでいくUI。 このUIを実装する際、使いやすいjQueryプラグインがなかなか見当たらなかったりするので、 同様のUIを実装する為の実験的スクリプトを作ってみたので簡単に紹介してみます。 今回の実験では＜a＞リンクを張った＜img＞画像タグを ＜span＞タグで囲った構成のまとまり ———————————————————- ＜span＞＜a＞＜img＞＜/a＞＜/span＞ ———————————————————- 上記のセットを順々に追加していく構成になっています。 併せて、画像を格納するディレクトリ名と画像ファイル名には命名規則を付けます。 ———————————————————-
jQueryでページロード時にカーテンが開くような効果をつけてみる｜BLACKFLAG
Webページを開いた際（ページロード時）に何か演出を加えられたらおもしろいかな、と ふと思い立って作ってみた、ページロード時にカーテンが開くような演出を加えるスクリプト。 何かに使えそうな感じもしたので紹介してみます。 まず動作サンプルから。（画面内の「ページリロード」をクリックしてみてください。） ※サンプル画面上のページロード演出部分以外は、 先日のエントリー「jQueryで追尾型メニューリストを作ってみる」と同じものを使用しています。 ≫別ウィンドウで見る場合はこちら ページロードされると同時にカーテン要素となる＜div＞を左右に２つ生成し、 animateで幅と透明度を制御しているだけ。 HTMLソース内には特に特別な指定を加える必要はありません。 CSSでカーテン要素として生成する＜div＞に対して以下の指定を加えます。 ※今回のサンプルではカーテン要素の左側を＜div id=”
jQueryとcanvasでカメラのシャッターを切るエフェクトで画像の切り替えを実装する「Shutter Effect Portfolio with jQuery and Canvas」｜BLACKFLAG
jQueryを使ってサイト内にギャラリーなどを組み込んだ際、 画像を切り替える際に、フェードやスライドなど様々なエフェクトを掛けることが可能ですが、 jQueryと＜canvas＞を使ってカメラのシャッターを切るような動きを付けて 画像を切り替えることが出来るチュートリアル「Shutter Effect Portfolio with jQuery and Canvas」の エフェクトがきれいで面白かったのでメモ書き程度にご紹介。 ≫Shutter Effect Portfolio with jQuery and Canvas | Tutorialzine ≫デモはこちら："Shutter Effect" with Canvas and jQuery | Tutorialzine Demo デモページのスライドギャラリーでは、 画像が切り替わる際にシャッターが切られるようなエフェクトが入りま
jQueryでsetIntervalを使って特定の間隔でfunction処理を繰り返し行う（タイマー処理）方法｜BLACKFLAG
JavaScriptでのfunctionを一定の間隔で繰り返し処理を行う時の指定に使う「setInterval」。 jQueryでこの指定を使うこともでき、単純な記述ですが、さまざまなループ処理などにも使えるので参考までに使い方をメモ書きしておきます。 $(function(){ setInterval(function(){ ～ここに処理を記載～ },1000); }); 最後の数値部分は繰り返し処理を行う間隔になります。 例えば、3秒ごとに画像の位置を10pxずつ、ズラす場合は $(function(){ $('img').css({left:'0',position:'absolute'}); setInterval(function(){ $('img').stop().animate({left:'+=' + '10' + 'px'},1000); },3000); }); この
jQueryでsetTimeoutを使ってfunctionの実行を遅らせる方法｜BLACKFLAG
JavaScriptでfunctionの関数や様々な処理等を“何秒後”に実行、といった指定をする時に使う「setTimeout」。 jQueryでもこの指定を使うことが出来るのですが、必要な時に限って記述方法を忘れてしまっていることが多いので、ここにメモ書きしておきます。（ごく単純な記述なのですが…） $(function(){ setTimeout(function(){ ～ここに処理を記載～ },1000); }); 処理を記載する箇所の後ろにある数値は、“何秒後”に処理させるか、の値になります。 例えば、ページを読み込んだ後、3秒後にbodyをフェードインさせる場合。（フェードインするアニメーション時間は1秒） $(function(){ $("body").css({opacity:'0'}); setTimeout(function(){ $("body").stop().ani
jQueryでページ最下部までスクロールした際に外部HTML（JSON形式）化した要素を追加する方法｜BLACKFLAG
TwitterやFacebookで見るUIの様な、ページの最下部にスクロールした際に 自動的に追加要素の読み込み処理をするjQueryプラグインは多々ありますが 任意のHTMLソースを簡単に追加できるものがなかなか見当たらなかったので jQueryを使ってJSON形式で試しに作ってみたのを紹介してみます。 サンプルを別枠で表示する ページの最下部までスクロールをすると 追加で要素を読み込みます。 サンプルでは28個の要素を 5個ずつ追加表示しています。 （最後は3つ表示） 全体構成についてまずはHTMLから。 ◆HTML <div id="loadarea"></div><!--/#loadarea--> HTMLには要素を追加させたい箇所に 任意のID（もしくはクラス）を付けた ブロック要素を配置するだけです。 そしてCSSは以下の様になります。 ◆CSS /* #loadarea --
スクロールに合わせてコンテンツの読み込みを開始するjQueryプラグイン「Autobrowse jQuery plugin」｜BLACKFLAG
2011/03/11の「東北地方太平洋沖地震」震災後、しばらく更新が滞っていましたが、少しずつ再開してみようかと思います。 Twitterなどで見かけるページの最下部までスクロールすると続きのコンテンツを読み込む動作を、jQueryで可能とするプラグイン「Autobrowse jQuery plugin」が、ちょっと気になっていたのでメモ書き程度に紹介してみます。 ≫jquery.esn.autobrowse.js 上記チュートリアルページでデモが確認できますが、サンプルではページロード時に決まった数（20個）の画像を先に読み込んでおいて、ページをスクロールするとさらに20個ずつ画像を読み込み、100個まで表示した時点で動作をストップさせています。 使い方もさほど難しくなく、プラグインファイルと下記の実行用スクリプトにて実装が可能なようです。 ◆SCRIPT $(".page").auto
jQueryで文字列を特定の文字数でカットして末尾に「…」などを追加する方法｜BLACKFLAG
Webサイトのトップページで表示するお知らせ情報など、レイアウトの都合上、長い文字列を特定の文字数でカットしたいことはよくあることかと思います。 そんな際にjQueryを使って文字列を任意の文字数でカットして、末尾に「…」などの追記情報（これも任意の文字列）を追加するやり方をシンプルなスクリプトで実装する方法をご紹介してみます。 【テキストのみ】 jQueryで文字列を特定の文字数でカットして末尾に「…」などを追加する方法 まずは実装するHTMLソースが下記のような構成だったとします。 ◆HTML <ul> <li>このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です
jQueryでフリック／スワイプ付きの自動再生スライドショーを作成する実験｜BLACKFLAG
前回の記事で、iPhoneやiPad、Androidなどに加えてPCでも動作する フリック／スワイプ動作UIをjQueryで実装する方法を紹介しましたが、 前回の単純なフリック／スワイプのUI動作に加えて、 自動で次の画像に切り替わるスライドショー動作と メインビジュアル部分にNEXT／BACKのボタンを追加したパターンでの 画像ギャラリーを作ってみたので紹介してみたいと思います。 jQueryでフリック／スワイプ動作付きの自動再生スライドショーを作成する実験 まずは動作サンプルから。 別枠で表示する場合はこちらから 一定の間隔で自動で次の画像に切り替わります。 画像の切り替えはサムネイルクリックの他、メインビジュアル部分の左右にあるNEXT／BACKボタンと メインビジュアル部分をフリック／スワイプすることで切り替えることが可能になっています。 メインビジュアル部分にマウスオーバーしてい
jQueryでiframeの親ページからインラインフレーム内の子ページを操作する方法｜BLACKFLAG
Webページ上でiframeを使った際、インラインフレーム内に読み込むページは、 基本的にはその（子）ページ内でCSSなどそれぞれ設定することになりますが、 jQueryを使ってiframeの親ページから子ページの操作をする方法があったので メモ書き程度に紹介してみます。 jQueryでiframeの親ページから子ページを操作する方法 ◆SCRIPT $(function(){ $(window).load(function(){ $('iframe').contents().find('○○') ～ 処理 ～ ; }); }); 「.contents」を使って対象をiframeの子ページにして、 「.find」で特定要素を指定、その後に処理する内容を記述します。 例えば、iframeの子ページ内の＜p＞タグに対して、 テキスト色を「赤」にする場合は以下のように記述します。 ◆SCRIPT
jQueryでリストなどに連番でIDやクラスを追加（ナンバリング）する方法｜BLACKFLAG
以前ここで「jQueryでの連番要素を制御する方法」と題して、 jQueryで連番要素の制御を簡単に行う方法を紹介しましたが、 同じ様にjQueryを使って簡単に連番でのIDを追加したりクラスを追加したりする方法を紹介してみます。 例えば＜li＞を使ったリストを5行で用意します。 HTML側では＜li＞自体にはIDもクラスも付けません。 ◆HTML【BASE】 <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> そしてこれらのリストに対して、下記スクリプトを実行させることで 自動で連番でのクラスを追記することができます。 （クラス名は「.number1」～とします。） ◆SCRIPT【SAMPLE01】 <script type="text/javascript" src="http://ajax.googleapis.
jQuery & CSS3でiTunes風のカバーフローUIを実装できる「jQuery UI CoverFlow 2.0 Using $.widget」｜BLACKFLAG
iTunesなどで有名なカバーフローと呼ばれるUI。 サイト上にカバーフローを実装させるjQueryプラグインもあったりしますが 実装方法が面倒だったり、動きがスムーズでなかったりするのですが、 jQueryとCSS3で構成されたカバーフローUIを実装できる「jQuery UI CoverFlow 2.0 Using $.widget」が 動きも滑らかで使いやすそうだったのでメモ書き程度に紹介してみます。 ≫jQuery UI CoverFlow 2.0 Using $.widget ≫デモはこちら：jQuery UI CoverFlow II | Addy Osmani 画面上のスクロールバーもしくはマウスホイールの動きで 並べられたCDジャケット（画像要素）がパタパタ流れるように切り替わります。 実装は少々複雑になってしまいそうですが、 画像要素のみならず、テキストベースのリストと連動
jQueryでタブ切り替えをシンプルなスクリプトで実装するサンプル｜BLACKFLAG
業務でタブ切り替え動作の作成依頼があり、先日紹介した「jQueryでの連番要素を制御する方法」を利用して タブ切り替え動作が実装できないか試したところ、意外とシンプルなSCRIPT構成で出来あがったので紹介してみます。 まずHTMLソースから。 ※タブボタンは３つのパターンにしておきます。（いくつでも増やすことは可能） ※今回のサンプルは装飾なしでタブ切り替え動作のみのパターンにします。 ◆HTML ≫<a href="javascript:void(0);" class="btn_act active">MENU【１】</a> ≫<a href="javascript:void(0);" class="btn_act">MENU【２】</a> ≫<a href="javascript:void(0);" class="btn_act">MENU【３】</a> <div id="motio
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
