テキストの一部を回転させたりしてクールに切替えられるjQueryプラグイン「Super Easy Text Rotator」:phpspot開発日誌
テキストの一部を回転させたりしてクールに切替えられるjQueryプラグイン「Super Easy Text Rotator」 2013年10月02日- jQuery Super Easy Text Rotator by Pete R. | The Pete Design テキストの一部を回転させたりしてクールに切替えられるjQueryプラグイン「Super Easy Text Rotator」 「Super <span class="rotate">Simple, Customizable, Light Weight, Easy</span> Text Rotator with Style」 というマークアップがあった場合、Super Simple Text Rotator with Style、のSimpleの部分がカンマ区切りで区切られたテキストにアニメーションしながら切り替わるという
jQuery Super Easy Text Rotator by Pete R. | The Pete Design
jQuery Super Simple Text Rotator by Pete R. Add a super simple rotating text to your website with little to no markup Created by Pete R., Founder of Travelistly & BucketListly Turn this: Super <span class="rotate">Simple, Customizable, Light Weight, Easy</span> Text Rotator with Style into these.. Super Simple, Customizable, Light Weight, Easy Text Rotator with Style Super Simple, Customizable, Li
iPhone/Android/PC 対応。jQuery で書くタッチイベント
こんにちは！プロダクト企画担当の林です。 今回は、前回予告していた通り、タッチイベントについて書かせていただきます。 他所でもタッチイベントについて取り扱っていますが、当記事でのポイントは、 jQuery を使っている。（jQuery Mobile は不要です） iOS / Android で動作確認済み。 タッチできない PC の場合、マウスで動く。 この３点です。 こちらを実際に動作するコードにて解説します。 動作確認環境 タッチ環境 → iPhone / iPad / Android マウス環境 → Sleipnir / IE / Firefox / Google Chrome / Safari / Opera タッチイベントについて タッチイベントとは、スマートフォンなどで画面を直接指でタッチしたときに発生するイベントのことです。 イベントの種類 touchstart : タッチし
画像のdiffができるjQueryプラグイン「TwentyTwenty」:phpspot開発日誌
ZURB ? Interaction Design and Design Strategy 画像のdiffができるjQueryプラグイン「TwentyTwenty」。 画像の上にスライダーを付けて、ドラッグ＆ドロップで移動できるようなUIが作れます。 激的ビフォアアフターなUIを作りたい場合に最適。 マークアップとJSコードは以下。超簡単。 関連エントリ Photoshopは不要!画像の背景を簡単に透明にできるWEBツール「Clipping Magic」 サムネイルをクリックでその場で画像ズームできるjQueryプラグイン「Ion Zoom」 画像をクリックで選択してフォーム送信できるようにするjQueryプラグイン「Image Picker」 画像レイアウト関連で便利なjQueryプラグイン等まとめ 製品画像等のズームが非常に簡単に行えるjQueryプラグイン「Image Zoom」
【jQuery】要素が見えたタイミングでイベントを発生させるjQueryプラグイン | バシャログ。
はじめまして、今月よりバシャログのメンバーになったfukasawaと申します。 まだまだ勉強中で至らぬ点も多々あるとは存じますが、生温く見守っていただけると幸いです。 本題です。社内で行われているjQuery勉強会のネタ探しのためにWeb DesigningのjQuery Lab.を読んでいたのですが、記事の中でinviewというjQueryプラグインが使われていました。 記事では「グラフを描画する領域がブラウザの表示領域内に入ったタイミングで、アニメーションを実行しグラフを描画する」という動作を行うためにこのプラグインが使われているのですが、inviewを使うことで、このように「ブラウザ上で見えたときに処理を実行する」という動作を実現できるようです。 jquery.inview 気になったので使い方を調べてみました。 簡単な使い方 1. jQueryとjquery.inview.jsを読
RTP Gacor = Slot Online gacor Gampang Maxwin RTP Tinggi
Petir108 ialah situs slot online gacor yang gampang menang dengan RTP tinggi hingga 99% untuk membantu memaksimalkan kemenangan para member baru maupun lama. Situs Slot ini dirancang dengan fitur-fitur yang mendukung pemain untuk mencapai Maxwin atau kemenangan maksimal dengan peluang yang tinggi. RTP (Return to Player) situs slot peti108 yang dirancang lebih tinggi dari rata-rata situs slot onlin
jquery小技まとめ３２
作成：2013/07/1 更新：2014/11/01 Web制作 > 先日ECサイトを制作したときに、動きのあるサイトにしないといけなかったので、色々調べて組み込んでみたんですが、jQueryでもう何でも出来ちゃいますね。近い将来ローカルで画像なんかを編集しなくても、ブラウザだけで色々できるようになるんじゃないでしょうか。今回は定番からちょっとマイナー（Google Analytics関係とか）なものまでjQueryの小技、プラグインを集めさせていただきました。 エンジニア速報は Twitter の@commteで配信しています。 もくじ スクロール １．ページ内リンク／フッターまわり／トップに戻る ２．パララックス スライド ３．カルーセル ４．レスポンシブなスライダー ５．ヌルヌルサクサクなスライドメニュー ６．サムネイル付きクロスフェードスライドショー 補助 ７．Google Ana
ボタンに直接ローディングアニメーションを付けられる「Ladda」:phpspot開発日誌
Ladda ボタンに直接ローディングアニメーションを付けられる「Ladda」。 ボタンを押すとボタンに回転するアニメーションが付与され、そのまま結果をまつ、というような分かりやすいUIが実現可能です 文字＋ボタンを円形のボタンにして背景をグレーにしたり、そのボタン自体をプログレスバーにしてしまうなど、面白いデモが詰まっていますので一度是非試してみて下さい 色々なUIのデザインの仕方があるなぁという関心をしてしまいますね 関連エントリ 範囲指定が可能になるUI実装jQueryプラグイン「noUiSlider」 １ページ内で複数ページに分割できるjQueryプラグイン「windows」 エレメントを立体的に回転させられるjQueryプラグイン「Vortex」 レスポンシブに使えるタブUI実装jQueryプラグイン「Easy-Responsive-Tabs-to-Accordion」 リアルなア
見た目がクールなグラフ描画用jQueryプラグイン「Morris.js」:phpspot開発日誌
Morris.js 見た目がクールなグラフ描画用jQueryプラグイン「Morris.js」。 マウス位置に応じて情報を変えるなど、GoogleAnalytics風のインタラクティブなグラフが描画できます。 実際には次のようなグラフが描画できます。IE6+でも動くということで、そこら辺の心配も無しです サンプルコードも載っていたりするので簡単に使えそうです グラフの種類は線グラフのみですが、多機能すぎて馬鹿でかいよりもシンプルなのが逆にいいかもしれませんね。 関連エントリ HTML5で綺麗でインタラクティブなグラフが描けるライブラリ「Flotr2」 様々な時系列グラフを描画できるJavaScriptライブラリ「Rickshaw」 様々なインタラクティブ要素のあるグラフが描画できるJSライブラリ「Elycharts」
スクロールすると上に固定される一見普通のナビゲーション実装jQueryプラグイン「SMINT」:phpspot開発日誌
SMINT | The simple jQuery plugin for lovers of one page websites. スクロールすると上に固定される一見普通のナビゲーション実装jQueryプラグイン「SMINT」 ページを開くと中部に何の変哲もなく現れるナビゲーションバー。スクロールするとページの上部にfixed固定され、どれだけスクロールしてもナビゲーションできて便利な物を簡単に実装できます デモはレスポンシブにも対応しているっぽいです。１ページにコンテンツを埋めこんでBookmarkによって移動させる的なページで便利に使えそう 関連エントリ レスポンシブなナビゲーションの見本やチュートリアル レスポンシブでクールなナビゲーションを実現できる「Responsive Nav」 ナビゲーションが斬新な３０のサイト
指定した条件でテーブルの行を並び替える - tablesorter - Postal Search Ajax API with jQuery - Postal Search APIs & Solutions
1行間隔で行の背景色を変える widgets プロパティに zebra を指定すると、1行間隔でテーブル行の背景色を入れ替わり表示できます。 jQuery(function($) { $('#r4').tablesorter({ widgets: ['zebra'] }); }); //jQuery tr 要素のクラスに even と odd が交互に付与されるので、スタイルシートを使って even と odd の背景色を指定します。 table.tablesorter tbody tr.odd td { background-color:#F0F0F6; } # 都道府県 フリガナ ふりがな ローマ字
jQuery でフォームの2重送信を禁止する方法
連続送信はサーバーサイド側でワンタイムトークンなどで禁止すれば良いと思いますが、クライアントサイドで複数のステップをしっかりと設けていないフォームでは誤って2回エンターキーを押してしまったりすると、データが送信されたのに関わらず、されたことがユーザーに分からなくなってしまうので、JavaScript 側で保険として2重送信を防止すると良さそうです。 $('form').submit(function() { $(this).submit(function () { alert('フォームからのデータ送信は一度ずつ行なって下さい。'); return false; }); });
WordPressに「トップへ戻る」ボタンを設置して、フックの仕組みについて学ぼう
フックの仕組みを理解して「脱・初心者」しよう 今回はWordPressにjQueryで動作する「トップへ戻るボタン」を設置します。 ボタン制作のセオリーや、調整方法、WordPressのフックを利用する方法も解説します。 合わせて「wp_enqueue_script」で指定できるライブラリの一覧も掲載しています。 目次 今回の例ではTwenty Tenのテーマを利用しています。ファイル名等はテーマに合わせて読み替えてください。 1.指定したjQueryを読み込むため、フックでwp_enqueue_scriptを再定義 2.header.phpにスクロール動作を制御するスクリプトの追加 3.サイトデザインに合わせた「トップへ戻るボタン」の作成 4.style.cssのでボタンの位置や透明度を調整 5.wp_enqueue_scriptを使うメリットとサンプル 6.WordPressにあらかじ
テーブル内容を入力値でフィルタリングできるjQueryプラグイン「FilterTable」:phpspot開発日誌
jQuery.FilterTable Sample テーブル内容を入力値でフィルタリングできるjQueryプラグイン「FilterTable」 シンプルにテーブルを出力してJSで絞り込めるというUIは実装も使うのも楽、ということでこういうUIにしたい場合は選択肢の１つとして。 複数列に対応しており、例えば、列1にマッチすれば列1がハイライトされるし、列２にマッチならば列２がハイライトされます 関連エントリ テーブル行をインクリメンタル検索できるようにするjQueryプラグイン「Sieve」 普通のテーブルをExcel風に超カッコよくしてくれるjQueryプラグイン「ParamQuery」 レスポンシブなテーブル作りに役立つjQueryプラグイン「FooTable」 レスポンシブなテーブルを作るjQueryプラグイン「MediaTable」
スクロールすると自動的にトップへ戻るボタンがでてくるjQueryプラグインを作りました。
最近よく目にする、ページをスクロールしていくと出てくる「トップへ戻るボタン」をjQueryプラグイン化したので公開します。 ダウンロード GitHubで公開しています。 使い方 プラグイン読み込み 下記のコードを記述してjQueryとプラグインを読み込みます。head要素の中とかが良いと思います。 <link rel="stylesheet" type="text/css" href="/PATH/TO/jquery.scrollButton/jquery.scrollButton.css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript" src="
table要素内をキーワードでフィルタリングする軽量なjQueryプラグイン・jquery.table_filter.js
table要素内をキーワードで フィルタリングできる、と いうプラグイン。シンプル な用途ですが、割と需要が あるのと、軽量なので一応 メモ。 キーワードを入力するとマッチしない行がテーブルから非表示される、というもの。圧縮版で0.9KBと結構軽量で済みます。 たまに見かけるタイプのスクリプトですが、フィルタリングのみというのはなかなか無いので助かります。大容量なテーブルデータコンテンツには実装してあげたいところですね。 Sample 動作サンプルです。日本語だとChromeとFirefoxは別の挙動をするかも。IEは分からない。 コード<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js'></script> <script type="tex
アニメーションしながらソートできるjQueryプラグイン「Animated Table Sorter」:phpspot開発日誌
jQuery Animated Table Sorter アニメーションしながらソートできるjQueryプラグイン「Animated Table Sorter」。 ソート可能なテーブルを実現するjQueryプラグインはよくありますが、アニメーションするのははじめてかも。 どこからどこに移動したか？という部分が分かりやすく、一瞬でソートされてしまうテーブルよりもカッコ良いだけではなく使い勝手もよさそう 関連エントリ シンプルにテーブルにソート機能を持たせるだけのjQueryプラグイン「jQuery Table Sort」 テーブルを簡単にカッコよくスタイリングできるjQueryプラグイン「tablecloth.js」
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://blog.e-riverstyle.com/2013/03/jqueryslidesjsjquery.html
tableの幅をドラッグでリサイズ出来るようにするスクリプト・jQuery Resizable Column - かちびと.net
～秒後に、指定した要素をフェードアウトさせる - かちびと.net
