[JS]サイズが不明でバラバラな複数の画像を指定サイズにフィットさせて配置するスクリプト -ImageFitサイズが不明でバラバラな複数の画像を指定サイズにトリミングして配置したり、画像全体が収まるように配置することもできるjQueryのプラグインを紹介します。 ImageFit ImageFit -GitHub ImageFitのデモ ImageFitの使い方 ImageFitのデモ デモはサイズがバラバラな画像が6枚、それぞれ同じサイズの矩形に配置します。 下のキャプチャは同じサイズの画像のように見えますが、既にトリミングして配置された状態です。
[JS]プロダクトの一覧表示を1クリックで、リストとグリッドに切り替えるチュートリアル
ベーシックなHTMLとCSSで実装されたプロダクトページの表示をリストとグリッドに切り替えるjQueryのチュートリアルを紹介します。 Building a List/Grid View Switcher with jQuery [ad#ad-2] デモ 実装 デモ 表示の切り替えは、右上のアイコンをクリックで。 デフォルトはリスト表示で、プロダクトのサムネイル、リンク、購入ボタンがセットになっています。 デモページ：グリッド表示 実装 HTML HTMLはそれほど複雑ではありません。 まずは、右上の切替用のアイコンのHTMLです。 <span class="list-style-buttons"> <a href="#" id="gridview" class="switcher"><img src="images/grid-view.png" alt="Grid"></a> <a hr
jQueryのfind()を利用した高速化
jQueryのfind()を利用した高速化 最近、jQueryのfind()のちょっとよろしくない使い方をチラホラと見かけるのでfind()の高速化について解説をします。 アンチパターン 最近、見かけたパターンとしては以下の様なものがあります。 $('.foo #bar') このセレクタをfind()を使って高速化する為に以下のように書きなおす。 $('.foo').find('#bar') というもの。これは、ケースによっては高速化が見込めるものの、多くのケースでは低速化されてしまいます。 また、以下の様なパターンも見かけました。 var $ul = $('ul'), $a = $ul.find('.a'), $b = $ul.find('.b'); $a.css('color', 'red'); $b.css('color', 'green').text('Hello'); こちらも、
【250選】2013年WEB制作に役立つエントリーまとめ – 250 Useful Articles for Web making in 2013 | Stronghold Archive
【250選】2013年WEB制作に役立つエントリーまとめ – 250 Useful Articles for Web making in 2013 こんにちは、kikuokaです。ご無沙汰しております。今回のTIPSは【250選 2013年WEB制作に役立つエントリーまとめ – 250 Useful Articles for Web making in 2013】です。2013年もあっという間に終わりということで、今年TIPSにエントリーされたWEB制作に役立つ【○選】記事をまとめてみました。 昨年はWEBサイトのみの【133選】2012年のかっこいいWEBサイト総まとめでしたが、今年はプラグインやCSSなど、デザイン以外にもWEB制作に役立つ情報が満載です。 【10選】使いこなしたいおしゃれWEBフォント – 10 Wonderful Webfonts 【42選】かっこ良くて面白い！参考
jQuery.ajax() のリクエストパラメータを、指定した文字コードで渡す - 株式会社CFlatの明後日スタイルのブログ
jQuery.ajax() のレスポンスを指定した文字コードで取得する系の話はその辺にごろごろ転がっていますが、逆にリクエストを指定した文字コードで行う系の話がほとんど見つからなかったので、ライブラリを作成しました。 考え方としては、通常は UTF-8 で行われるリクエストパラメータの URI エンコード処理を、ShiftJIS や EUC-JP で行ってやればよいだけです。……とはいえ、文字列を ShiftJIS や EUC-JP に変換する部分は大変なので、ライブラリ任せにしてしまっています。 UTF-8 から他の文字コードへの変換処理には、http://polygon-planet-log.blogspot.jp/2012/04/javascript.html の encoder.js を使用しています。下記コードの利用には、encoder.js（https://raw.github
新・三大JavaScript タッチ対応ライブラリ比較(Hammer.js/QuoJS/ TouchSwipe) - Qiita
モバイルデバイス全盛の昨今、サイトのデザインだけでなく動きも対応しなくては！というケースがあります（私はありました）。 そんなわけで、JavaScriptのタッチ対応ライブラリについて評価を行ってみました。ライブラリの一覧についてはこちらのサイトが詳しく、ここから対応イベント・更新頻度を基に評価対象を表題の３つに絞り、その動作を比較してみました。 各ライブラリによるタッチの挙動は、以下で比較可能です(おまけでTouchyも入ってます)。 Gesture Detector 今スマホやタブレット的な何かでこの記事を読まれているあなた！はぜひ実際に動かしてみて下さい。 私はAndroid4.0デバイスしか持ってないので、xxで動かんぞ、ということがあるかもしれないです。そんな時はコメントなどで連絡いただけたらうれしいです。また、コードはこちら。 結論 **結論としてはHammer.jsをお勧めし
jQuery.ajax()で取得したHTMLの一部を抜き出す方法
jQuery.ajax()で取得したHTMLの一部を抜き出す方法を紹介します。 １．問題点 次のように、ajax()メソッドで取得したHTMLを丸ごと埋め込むサンプルはネットで多くみかけます。 <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(function(){ $.ajax({ url: 'http://user-domain/foo.html', dataType: 'html', }) .done(function(data) { $("#bar").html(data); }) .fail(function(data) { // ... }); </script> <div id="bar"></div> が、取得したHTMLの一部だけを抜き出して利用したい場合、どのように記述す
jQueryのajax()を中断する方法
jQueryのajax()を中断する方法を紹介します。 １．問題点 次のように、ajax()メソッドでHTMLを取得するコードがあります。 <script src="http://code.jquery.com/jquery-latest.js"></script> <script> $(function(){ $('#execute').click(function(){ $.ajax({ url: "http://user-domain/foo.cgi", type: "GET", dataType: 'html', }) .done(function( data ) { $('#foo').html(data); }) .fail(function( data ) { // ... }); }); }); </script> <input type="button" id="exec
『jQuery 最高の教科書』サンプルサイト
Chapter 02 3 ステップではじめるかんたん jQuery 入門 # Easing Chapter 04 確かな基礎力を養う jQuery の基本テクニック 01 さまざまなホバーエフェクトで学ぶ動きのある表現の基本 02 画像とキャプションの表現 03 丸いボタンのレイアウト 04 見え隠れするサイドバー 05 タイポグラフィの表現 # Chaper 04 完成版 Chapter 05 活用の幅を広げる jQuery の必修テクニック 01 なめらかな動きの スライドショー Basic 02 多機能なスライドショー Advanced 03 スティッキーヘッダー Basic 04 デザインが変化する スティッキーヘッダー Advanced 05 画面領域を有効活用できるタブ Basic 06 高機能で拡張しやすいタブ Advanced 07 スムーズスクロール Basic 08 拡
jQueryを使ってインクリメンタルサーチを実装してみる
上手く絞り込まれましたでしょうか。 ポイントは、漢字の読みとか英単語のカタカナ表記は別として、ひらなが、カタカナ、半角英数字、全角英数字のどのパターンでも絞り込める事です。 実際のコードは下記のような感じになってます。 <script> $('#Search1').keyup(function(){ if (!$(this).val()) { // 検索文字列無し $('#MyBookmark1 tr').show(); } else { // 検索文字列有り $('#MyBookmark1 tr').hide(); $('#MyBookmark1 tr:contains(' + this.value + ')').show(); } }); </script> <table id="MyBookmark1"> <tr> <td><span style="display:none;">あら
FINDJOB!終了のお知らせ | FINDJOB!
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
jQuery Mapael·jQuery x Raphaëlな地図描画ライブラリ MOONGIFT
JavaScriptと連携できる地図が欲しかった方は要チェック！ Web上でSVGを扱う際に使われるライブラリで有名なのがRaphaëlです。そんなRaphaëlをjQueryベースで使えるようにしたプラグインがjQuery Mapaelになります。地図に限定されますが、SVGで描かれた地図に様々な情報を付与したりJavaScriptと連携させることができるようになっています。 実際の例としてはフランスの地図を扱ったものが多くなっています。 マウスオーバーでハイライトされます。 さらにズームもできるタイプもあります。この辺りはSVGならではと言えるでしょう。 JavaScriptと連携させることでクリックイベントをキャッチできるようになっています。 人口の多い町や都市を描いています。こういった外部データとの連携も容易です。 最後はフランスではなく世界地図のデモです。 国ごとにデータを色分け
AngularJSの素晴らしさを整理してみる - pochi's weblog
久々のブログになります。 3年ほどJavaScriptを利用した開発をしてきましたが、最初はなぜJavaScriptでMVCフレームワークが必要なのかいまいちわからず、いろいろ試行錯誤してきました。 今日はタイトルの通りAngularJSが素敵だなということを書きたいのですが、よくあるベストプラクティスみたいなものではなく、自身がどのように思考回路を経由してここに行き着いたのかという経験談を記しておきたいと思います。 ちなみに私のJavaScript力は高くありませんのであしからず・・・。 jQuery 昔々、JavaScript MV(V)Cみたいなものがなかった時代、JavaScriptでリッチなものを作ろうとなるとjQueryやDojoのような低レイヤーのフレームワークが主に利用されていました。 その当時簡単なシングルページアプリケーションを作っていましたが私はjQueryを採用しま
onScreen - 使い道が多そう。表示されたら発動するイベント処理 MOONGIFT
スクロールを使った面白い処理です。 Webサイトにおいてある部分までスクロールしたら処理を実行したいといったニーズは良くあると思います。例えばMOONGIFTの場合はソーシャルボタンを表示するのはその部分までスクロールしてからにしています（描画が遅いので）。 他にも対象の画像を表示されたタイミングで読み込みたいといった場合もあるでしょう。そこで使ってみたいのがonScreenです。 デモを表示しました。このタイミングではイベントは発動していません。 Demosを表示。この時点でイベントが発動します。 使い方はjQueryプラグインなのでシンプルです。 $('elements').onScreen({ container: window, direction: 'vertical', doIn: function() { // 表示されたタイミングの処理 }, doOut: function
グリッドレイアウト採用時に便利なjQueryプラグイン 20 - NxWorld
有名なサイトだとPinterestやBehanceなどで取り入れているような、グリッドレイアウトを簡単に実装できるjQueryプラグインのまとめです。 少し前はポートフォリオのギャラリー部分などのような箇所で主に使われている印象が個人的にあったのですが、最近ではブログの記事一覧やECサイトなどでもよく見かけますし、コーポレートサイトのトップに採用しているサイトなども多く見かけます。 基本的な動きは同じようなものでもサポートブラウザやアニメーションの有無などがプラグインによって違うので、自分の中で幾つか使いやすいものを見つけておくと良いと思います。 一応グリッドレイアウトを実装するためのプラグインということでまとめていますが、中にはフィルタリング・ソート・ドラッグ&ドロップなどの機能も併せて実装できるプラグインもあります。 また、基本的にフリーで使用できるもの中心でまとめていますが、商用利用
jQuery/JavaScriptの高速化テクニック | Find Job ! Startup
FINDJOB! 終了のお知らせ 2023年9月29日にFINDJOB!を終了いたしました。 これまでFINDJOB!をご利用いただいた企業様、求職者様、様々なご関係者様。 大変長らくFINDJOB!をご愛顧いただき、誠にありがとうございました。 IT/Web系の仕事や求人がまだ広く普及していない頃にFind Job!をリリースしてから 約26年間、多くの方々に支えていただき、運営を続けてまいりました。 転職成功のお声、採用成功のお声など、嬉しい言葉もたくさんいただきました。 またFINDJOB!経由で入社された方が人事担当になり、 FINDJOB!を通じて、新たな人材に出会うことができたなど、 たくさんのご縁をつくることができたのではないかと思っております。 2023年9月29日をもって、FINDJOB!はその歴史の幕を下ろすこととなりましたが、 今後も、IT/Web業界やクリエイティブ
$.onScreen();
A jQuery plugin that does stuff to elements when they enter or leave the viewport Download How to use Basic usage The basic form $('element').onScreen(); will only toggle the onScreen class on the matched elements. This is optimal for CSS animations, like the demos section above. You can set the tolerance parameter and allow the elements to enter the viewport certain amount of pixels before doing
今、AngularJSというフレームワークがヤバい - (ﾟ∀ﾟ)o彡 sasata299's blog
2013年11月05日10:36 JavaScript 勉強会 今、AngularJSというフレームワークがヤバい 先週の土曜日、ランサーズさんで行われた 第３弾 週末ランサーズ に参加して個人的に今アツい AngularJS について話してきました。 AngularJS は ng-repeat が便利だったり、コードの見通しが良くなるなどいろいろなメリットがあると思うのでうまく使えば大変メリットがあると思います。特に、データの状態（要素の追加・削除や、状態のon/off など）を制御すればそれに合わせて view の表示はすべて AngularJS がやってくれるというのは素晴らしいですね。 ちなみに、以下の資料の中で ng-app とか ng-repeat とか出てきますが（これは directive と呼ばれます）、この ng というのは AngularJS の２文字目と３文字目を表
「D3.js」を使ったデータビジュアライゼーション
Webやスマートデバイス、センサーなどあらゆるものから情報を収集出来るようになり、世の中には膨大なデータが溢れかえっています。また、ビッグデータやデータサイエンティストといったキーワードに注目が集まり、データ活用への期待が高まっています。しかし、単純に収集したデータはそのままでは見づらく、そこから意味を汲み取ることは困難です。そこで、データの見せ方や伝え方が重要になってきます。 D3.jsとは D3.jsは、Mike Bostock（mbostock）が作成したデータ可視化用途で人気のJavaScriptライブラリで、データをDOMと結びつけ、データ駆動によりグラフを作成することができます。ソースコードはGithubで公開されており、人気を表すStarの数がGithubに公開されているリポジトリ全体で6番目に多いことからも、注目の高さが伺えます（2013/10現在）。ライセンスは修正BSD
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HTML/SELECTカスタマイズ