カルーセル表示実装ならjQuery「slick.js」が簡単でおすすめ
ネットショップ運営[楽天・ECサイト]に関する情報 便利ツール Webサービス CSS Javascript jQueryなど紹介していきます 商品を陳列する際によく使われているカルーセル表示について、すでにショップページで利用している方も多いのではないでしょうか。そんなカルーセルを実装するためのjQueryプラグインもたくさんあり、どれを使ったら良いかわかりませんよね。 そんな中このプラグインさえ抑えておけばカルーセル表示は大丈夫というプラグインを紹介します。 カルーセル表示の細かい設定が可能な「slick.js」自由度も高く、レスポンシブにも対応 slick – the last carousel you’ll ever need 上記サイトにて動作デモが確認出来ます。 カルーセル表示と一言でいっても見た目や動きは様々です。複数アイテム同時に切り替わってほしい、自動的に動いてほしい、水
JavaScriptでバイナリファイルを扱う方法 - Tech-Sketch
HTML5によって、<audio>や<video>などメディアファイルを扱う機能が拡充され、JavaScriptからも音声ファイルが取り扱えるようになりました。 各ブラウザ毎に対応状況は異なりますが、これらの機能を有効活用するためAjaxリクエストによって音楽のバイナリファイルを取得し、再生するまでのJavaScriptをまとめてみました。 はじめに HTML5によって、<audio>や<video>などメディアファイルを扱う機能が拡充され、JavaScriptからも音声ファイルが取り扱えるようになりました。 ということで、各ブラウザ毎に対応状況は異なりますが、Ajaxリクエストによって音楽のバイナリファイルを取得し、再生するまでのJavaScriptをまとめてみました。サンプルは音声ファイルの受信、再生をCoffee Scriptで書いたものですが、バイナリファイルを取得した後の処理
SVGとjQueryで絵を描いているようなアニメーションを実装する方法 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
どうもお久しぶりです。 フロントエンドエンジニアのはやちです( ˘ω˘)✌ 最近『天空のクラフトフリート』というソーシャルゲームにハマっております。 もともとは弊社のエンジニアの何人かに誘われてDLしたのですが、みなさん最近ログインしている様子がなく、もくもくとひとりでミッションをこなし、練り上げております( ∵ ) まけないひとりたのしい、強くなる✌(´ʘ‿ʘ｀)✌ さて、今回はSVGで絵を描いているようにアニメーションを生成してくれるサイト、LAZY LINE PAINTERの使用方法をご紹介します。 SVGとは Scallable Vecter Graphocs（スケーラブル・ベクター・グラフィックス）の略で、XMLをベースとした二次元ベクターイメージの画像形式のことです( ˘ω˘)☝ SVGはjpgの様にimg要素で扱ったり、cssで色を変えたり背景画像として扱ったりできます( ˘
jQuery Googleカレンダー風スケジュール表 タイムテーブル
jQueryでスケジュール表もしくはタイムテーブルっぽいもの 仕事でスケジュール管理のシステム開発を行った際に作った、プラグインをちょいと改良したので公開です。 プラグイン化する意味はあったのかどうかは置いておいて、必要情報を与え要素を動かした場合変更後の時間などを返却してくれます。 レイアウトは自分で組まないといけません。。。 ちなみにタイトルのgoogle風ってのは要素を動かしたり移動出来る所です。一言詐欺になってたらすみません。 動作環境、jQueryバージョン jquery-1.9.1 jquery.easing.1.3.js Firefox 27.0.1 サンプル画面 DEMO 概要 jQueryのdraggableとresizableを使用し移動エリア(画像：テーブルの時間の下に配置された部分)を移動出来るようにしてます。 あとはdraggableとresizableの「sto
jquery で クロスドメイン 外部ドメインのファイルにアクセス | まとめーたー
photoBy: http://www.brandwow.net/lara_christie/necklace_holy_cross/images/img0101.jpg外部ドメインへのアクセス方法驚愕の事実今まで外部ドメインへのアクセスはなぜかできなかった。 これができるということは素晴らしい。 わざわざ自分のサーバーを通す必要がないので負荷が軽くなる jsだけでスッキリ処理できる。 方法色々な方法があるみたいだが、結局できた方法はこれだけ。 https://github.com/padolsey/jQuery-Plugins/blob/master/cross-domain-ajax/jquery.xdomainajax.js をダウンロード。 jqueryと xdomainajax.js を読み込む <script type="text/javascript" src="http:/
ページめくりjqueryライブラリPage Flip Effectを試してみました。 - 蟻の実験工房（別館ラボ）
ページめくりjqueryライブラリPage Flip Effectを試してみました。 配布元はこちら http://www.html5rocks.com/en/tutorials/casestudies/20things_pageflip.html 作ってみたサンプルはこちら http://burene.antlabo.jp/burene_project/books/index_W10005B2259803.html せっかくなのでBuReNeの各詳細ページにリンクを作成して掲載している情報を雑誌風にするとこうなる。というのを作ってみました。 BuReNeマップの右クリックか、詳細画面からの遷移で見る事が出来ます。 ページ送りのjqueryでの実装は配布元のpageflip.jsで実装されていますが、そのまま使うと問題が１点。 実装上はページ送りのアニメーションをcanvasで表現して、要
『JavaScriptの開発効率を高める7つのライブラリ』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。
JSONデータをソートする方法
JSONデータをソートする方法を紹介します。 ブラウザやPC環境等に依存するかもしれませんが、FirefoxやGoogle Chromeといった最近のブラウザであれば数千行のデータでも1秒かからない程度でソートして表示されます。すべてのブラウザで確認していないので不具合があったらすいません。 引用サイトは下記です。 How to sort a JSON array ? １．基本 次のようなJSONデータがあると仮定します。 var data = [ {"id":"foo", "number":"2000"}, {"id":"bar", "number":"3000"}, {"id":"hoge" "number":"1000"} ]; JSONデータをソートするには、次のsort_by()関数とsortを組み合わせます。 var sort_by = function(field, reve
jQueryを使った一定以上スクロールすると上に固定される横メニュー
最近、上部に固定された横メニューをよく見かけます。最初から一番上にあるものだと最初から「position:fixed」で問題ないと思いますが、最初は一番上にはなく、メニューがページの最上部までスクロールされた時点で固定されるものだとちょっと工夫が必要です。 今回はそんな横メニューをできるだけ親切に解説してみます。 今回のメインはjQueryで固定するところなのですが、一応今回のサンプルで使用したHTMLとCSSも解説します。 HTML よくあるタイプの普通のリストメニューです。 <div id="menu-wrap"> <ul id="menu"> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <li><a href="#">メニュー</a></li> <l
jQuery 1.9 に更新する際に注意すべき変更点の自分なりのまとめ | 私的なjQuery他
jQuery Core 1.9 Upgrade Guide | jQuery の「Changes of Note in jQuery 1.9」を読んで、 自分なりにまとめました。 誤訳して間違ったことをまとめてたり、 最新の情報でないかもしれないので 読まれる際はご注意下さい。 （※ページをそのまま訳したわけではないと、思います） jQuery 1.9 では API の削除や 挙動の変更を行っています。 この記事は、前のバージョンから更新した時、 既存のコードに影響がでそうな変更を 並べたものになります。 変更点を全部網羅しているわけではありません。 箇条書きにすると以下のような感じ： 削除された機能 .toggle(function, function) の用法 jQuery.browser() .live()と.die() jQuery.sub() document 以外の要素での A
テーブルの行ごとリンクをクリック出来るようにする
Result jQueryjQuery(function($) { //data-hrefの属性を持つtrを選択しclassにclickableを付加 $('tr[data-href]').addClass('clickable') //クリックイベント .click(function(e) { //e.targetはクリックした要素自体、それがa要素以外であれば if(!$(e.target).is('a')){ //その要素の先祖要素で一番近いtrの //data-href属性の値に書かれているURLに遷移する window.location = $(e.target).closest('tr').data('href');} }); });csstd, th { padding: 5px 10px; } thead th { background: #110303; color: #
おそろしく簡単にカレンダーを表示できるjQueryプラグイン「pickadate.js」
twitter facebook hatena google pocket フォームの入力は簡単にすることで離脱率を下げることが可能です。 日付を入力させるところもカレンダーで表示すると、簡易化できまたわかりやすいので、誤入力が減りそうです。 Pickadate.jsはこれを実現するjQueryプラグインです。 sponsors 使用方法 導入は非常に簡単です。 Pickadate.jsからファイル一式をダウンロード。 <link rel="stylesheet" href="pickadate.01.default.css"> //好きなテーマを選んでください <script type="text/javascript" src="jquery-1.8.3.min.js"></script> <script type="text/javascript" src="pickadate.mi
tableをレスポンシブWebデザインに対応させるスクリプト・FooTable - かちびと.net
table要素をレスポンシブに対応させる、というスクリプトです。他にも同じようなスクリプトは存在しますが実用的ではなかったので紹介してなかったですけどこれはアリな気がします。 table要素をレスポンシブに対応させるjQueryプラグインです。他にもMediaTableやzurbのスクリプトもあります。 ウィンドウサイズの幅が狭くなると、表示しきれないカラム部分をタップによる表示式に切り替える、というもの。 上記のようにタップすると非表示部分のカラムの内容が表示されます。ユーザーにとっても分かりやすい気がしました。 公式の動作サンプルです Sample コード <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script> <scri
たった１行で完成？凄まじくレスポンシブデザインなサイトの作り方 | DECONCEPTER
簡単に作れる！みんな大好き可変グリッド 先日話題になっていた「なんだこれ！！「NHKスタジオパーク」のレスポンシブ・ウェブデザインが凄まじくレスポンシブ！！」で紹介されていたNHKスタジオパークのレスポンシブデザイン。 こちらのサイト、プラグインを使ってとてもシンプルに作られています。キレイ。このシンプルさを伝えたくてうずうずしてきました。せっかくうずうずしたのでどんな作り方をしているのかサンプルを交えて紹介します。 まずはこちらのデモを御覧ください。 凄まじくレスポンシブデザインなサイトデモ 使われているのはjQuery Masonryというプラグインだ！ @planetofgoriさんのブログで紹介されているように、jQuery Masonryというプラグインが使われています。このプラグインたった数行でNHKのサイトのような可変グリッドレイアウトが作れてしまいます。可変グリッドのレイア
Mobile Safariのクリックイベントを高速化·fastClick.js MOONGIFT
fastClick.jsはMobile Safariのクリックイベントにおける遅延を改善するソフトウェアです。 iPhoneのMobile Safariにおいてリンクをタップした時の動作が重たい（遅い）感じがしたことはないでしょうか。実際、300msくらいの遅延が発生しているようで、Webブラウザゲームなどではもっさりした動作に感じてしまいます。そこで使ってみたいのがfastClick.jsです。 テスト画面です。上が高速処理を施したもの。下は施していないものになります。 実際に押した感じとしてレスポンスは上のが速いです。 クリックする度にカウントされますが、キャッシュが使われていると思われてもやはり上のが速いです。 具体的な処理についてはソースを見ていただくとして、体感として速くなっているのが分かるかと思います。touchendなどのイベントでは遅くならないらしいですが、clickイベン
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - cody1213/twism: A clickable SVG map jQuery plugin
CSS Load.net - Loading CSS spinners and bars generator for AJAX & JQuery
Full window width carousel with the first image enlarged and centered
Loading...
ブートストラップスターターテンプレート