[続きを読む]でテキストを省略、開閉できる「jTruncate」「jTruncSubstr」
「jTruncate」は、長くなってスペースをとってしまう文章を[続きを読む]などであらかじめ指定した文字数で省略して表示してくれるjQueryプラグインです。 ダウンロードはこちら デモ スクリプト <script src="jquery.min.js" type="text/javascript"></script> <script src="jquery.jtruncate.js" type="text/javascript"></script> 実装 対象の要素にidもしくはclassを指定して、オプションを設定します。 <div id="div627">折りたたみする文章</div> <script type="text/javascript"> $().ready(function() { $('#div627').jTruncate({ length: 200, // 表示す
【jQuery】無限スクロール［Infinite Scroll］を極限までカスタマイズ。 - ONZE
無限スクロールを実装する jQueryプラグインの［Infinite Scroll］を紹介します。 スクロールしてページの最下部まで移動すると、次のページの情報を自動で読み込み、ページの遷移無しで次々とコンテンツを表示してくれます。 ご存知のとおりFacebookのフィードやTwitterのタイムライン、TumblrのUIなど、超有名SNSサイトやモバイル版のアプリケーションでも導入されているので、その挙動は誰もが一度は体験しているでしょう。 最近ではクリエイティブ系のブログでも比較的多く実装されていて、需要も高まっているので、ウェブクリエイターの方々はマスターしておくべき技術の1つだと言えます。 さて。今日は、単に［Infinite Scroll］の実装方法を紹介するだけでなく、弊社オンズが実際に行った極限カスタマイズの方法も伝授します。 以下より本編をどうぞ。 基本の導入方法 ［Inf
jQuery非同期、Image()で画像読み込み表示｜jquery｜POPSブログ｜POPS WEB KOUBOU
jQueryで、画像読み込み表示には色々な方法はありますが、javascriptの new Image()を使用して表示させる例が多いようです。 new Image()での、画像読み込み表示 jQueryで、画像読み込み表示には色々な方法はありますが、javascriptの new Image()を使用して表示させる例が多いようです。ネットで調べれば沢山の情報がありますが、私の場合の経験を踏まえて記述します。 Image()が使用される理由は、 1. 表示サイズではなく画像の実寸を得ることができる。 2. 画像にアクセスして、ロード完了を知ることができる。 3. ERRORの場合の処理ができる。(余り使用はされていないが、、) 4. Loading中の「Loading画像」など表示させる時に便利。 5. jQueryで画像のロードに適したメソッドがない。(ほとんどが、html text な
jQueryでツイート数、はてブ数、いいね数を取得して自由にデザインする方法 | アンギス
注意※Twitterのツイート数の取得のコードについて この記事のコードでは後日、ツイート数の取得ができなくなるとご指摘いただきました。確認したところ2013年5月7日に行われるTwitterの仕様変更によりツイート数の取得ができなくなってしまいます。（それについての記事）その他はてブ、いいね数のコードにつきましては正常に動作します。問題のコードはサンプルとして残しておきますが、ご利用の際はくれぐれもご注意ください。今回の件についてご指摘くださった方々に御礼申しあげます。そして、すべてのユーザーの方々に不確かな情報を提供してしまったことをお詫び申しあげます。 さらに追記※Twitter APIの仕様変更について Twitter APIの仕様変更後もこのコードで動作し続けています。もともとAPIのリファレンスにも載っていませんしいつ仕様が変更されるかわかりません。ご利用の際はくれぐれも気をつ
7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座
HOME>jQuery>7つのサンプルでjQueryを学ぼう！「jQueryが全く分からない人のため」の超初級者向け入門講座 約半年前まで、興味はあれども全くもって触れたことのなかった「jQuery」。それどころか、「Javascript」を「Javasprict」と何度となく書き間違える癖のあった私。 結局、「スク水すいすいスクリプト」と語呂を合わせることによりようやく正しい綴りをマスターしたわけなんですが、仕事で扱うと言うこともあり多少はjQueryの仕組みが分かってきた今日この頃です。 そんなわけで、今回は「jQueryが全く分からない人のため」の超初級者向け入門講座と銘打ちまして、jQueryの基礎の基礎を学ぶための記事を書いてみました。 とは言っても「jQueryとはなんたるか」などといった難しい理論を記すつもりは一切ございません。（っていうかそんな偉そうなこと言える程修めてない
【30選】簡単にドラッグ&ドロップを実現できるプラグインのマトメ – iPhone等スマートフォン対応プラグインも含む | Stronghold Archive
スマートフォン対応系 pep.jquery.js 多機能かつシンプル。そのスムーズな動作には驚かされました。 この中では一番便利なプラグインだと思います。 jQuery UI Touch Punch – PC,SP Jquery Mobile Drag And Drop dragreplace.js テーブル入れ替えをドラッグ&ドロップで実装する際に活用したいです。 レイアウト系 gridster.js 動作がスムーズで使いやすいです。アイディア次第では色々と活躍しそうです。 iNETTUTS Collapsible Drag n Drop Panels googleRSSリーダーの用なDragDropが実現できます。 AnimaDrag googleRSSリーダーの用なDragDropが実現できます。 移動時の効果を指定できますが…プラウザによって挙動不審。 dragsort jQuer
jQueryでTwitterのトップページのように一定のタイミングでコンテンツをスライドさせる
jQueryでTwitterのトップページのように一定のタイミングでコンテンツをスライドさせる Twitterのトップページは人気のツイートが次々とスライドして表示されてますね。 この記事ではjQueryを使用して見た目のスライドするだけの部分を再現してみたいと思います。 投稿日2011年02月25日 更新日2011年04月02日 ベースとなるhtml+css Twitterの場合は裏でajax的なことを色々やっているのだと思いますが、見た目しか再現しないのでプレーンなhtmlを使用します。 html <div id="slide"> <ul> <li> <strong>2011.02.01</strong> 最初です。最初だけどむしろ最後です。 </li> <li> <strong>2011.02.12</strong> Twitterのトップページのようにコンテンツを一定の時間でスライ
[JS]ただのツールチップだと思ったら大間違い、ホバー時にインフォメーションを表示するスクリプト -Hovercard
さまざまなHTMLのエレメントのホバー時にカード状のインフォメーションをアニメーションで表示するjQueryのプラグインを紹介します。 ただのツールチップとは違い、カードのインフォメーションに更にカードを表示したり、Facebook, Twitterと連携したり、コールバック関数も備えています。 Hovercard [ad#ad-2] Hovercardの特徴 Hovercardのデモ Hovercardの実装 Hovercardの特徴 Hovercardは軽量のjQueryのプラグインで、リンクをはじめとするさまざまなHTMLエレメントにホバーするとそれに関連したインフォーメーションを表示することができます。 スムーズなアニメーションでインフォメーションを表示することができます。 外部スタイルシートではなく、最小のCSSを使用します。 表示されるHTMLはフルコントロールが可能です。 T
TwitterやFacebookのように一番下までスクロールしたら自動的にコンテンツを表示する「jQuery.Bottomプラグイン」
TwitterのタイムラインやFacebookのニュースフィードように、ページの一番下までスクロールしたらコンテンツを自動的に表示する「jQuery.Bottomプラグイン」を紹介します。 １．サンプル jQuery.Bottomプラグインにはデモページが用意されていますが、いまいちなのでサンプルページを作りました。 jQuery.Bottomプラグインサンプル ページの一番下までスクロールすると自動的にコンテンツを表示します。 なお、最初に表示した状態でコンテンツがすべて表示されてしまっているとそもそも動作しないので注意してください。 ２．プラグインの機能 jQuery.Bottomプラグインは「bottom」イベントを登録するためのものです。このイベントを利用してページの一番下までスクロールすれば、bottomイベントが発生します。 ３．プラグインのダウンロード githubのjQue
jQueryUIのsortableをiPhone/iPadで使うときにマルチタッチを無効化する方法 - tech-kazuhisa's blog
jQueryUIのsortableって便利ですよね。でも、iPhoneやiPadだとタッチイベントをうまく検出してくれずそのままでは動作しません。 そこでjQuery の sortable を iPad 対応するで紹介されているようにタッチイベントをマウスイベントに置き換えて動作させる方法があります。 function dispatchMouseEvent( event_type, touch_event ){ var simulatedEvent = document.createEvent("MouseEvent"); simulatedEvent.initMouseEvent( event_type, true, true, window, 1, touch_event.screenX, touch_event.screenY, touch_event.clientX, touch_
ボックスに収まるように長体をかけるjQueryプラグイン jQuery.compressedFont を公開します - 不動産屋のラノベ読み
以前に作成して放置していたjQueryプラグインを、会社で利用することにしたので、その前に公開することにします。これは個人で作成したものであり、業務の成果物ではないことを明記しておきます。 これはなに? ボックス内のテキストに擬似的な長体をかけて、ボックスから溢れたテキストをボックス内に収めるjQueryプラグインです。 なにに使うの？ Webデザインをしていると「長さ可変の文字列が入るけど1行に収めたい」というようなシチュエーションがあると思います。CSSでoverflow:hiddenしたり、スクリプトで文字数を調整したりして対応すると思うのですが、そういう時に使えるかもしれません。 どうやって使うの？ .compressedFont() 対象ボックス内にテキストが収まるように、擬似的に長体をかけます .compressedFont( maximumRows:int ) 対象ボックス内
jQueryで簡単に作れるマウスオーバーでアニメーションするボタン５種
jQueryで簡単に作れるマウスオーバーでアニメーションするボタン５種 ちょっと前まではマウスオーバーといえば画像の切り替えくらいでしたけど、最近ではアニメーションで切り替わるマウスオーバーも増えてきましたね。 ということでこの記事ではjQueryを使用して、わりと簡単に作れるマウスオーバーアクションをご紹介します。 投稿日2010年10月24日 更新日2012年03月05日 ナビゲーションはテキストにしないとseo的にあれだよとか言われていますが、コーポレートサイトではまだまだ画像を使用されていることが多いと思います。なので、今回は画像ナビゲーション限定です。（テキストでもあまり変わらないと思いますが……） 縦型+テキストタイプのナビゲーションはこちらの記事をご覧ください。 「jQueryで作るマウスオーバーアニメーションするテキストタイプの縦型ナビゲーション10種」 htmlと画像の準
jQuery Clip - jQueryのプラグインをまとめました。
jQueryの便利で実用的なイメージスライダーやレスポンシブ対応のプラグインをタグやカテゴリで見やすくまとめました。
HTMLで文字詰めするタイポグラフィー用JS | fladdict
HTMLのテキストに対して、文字詰めを行えるスクリプト FLAutoKerningクラスを作ってみた。サンプルはこちら。zipも。 スクリプト内に任意のカーニングペアを定義することによって、ブログのタイトル等のテキストに字詰めを行ってくれるスクリプトです。なんか探しても見つからなかったので自分でやってみた。いちおう朗文堂の新宿私塾に行ったわけだし、僕もなんか成果物作らんとなぁ。。。的に。 実行はとても簡単。jQueryと一緒にhtmlにロードして、 FLAutoKerning.process($(‘h1′)); FLAutoKerning.process($(‘h2′)); FLAutoKerning.process($(‘h3′)); といった具合に、適用したhtml要素を一括していしてやるだけ。カーニング情報の定義も、FLAutoKerningクラスの頭に、下のようにem単位で定義する
「jQuery Mobile」の登場で、モバイルアプリケーション開発は大きく変わる － Publickey
このところHTML5関連のモバイルアプリケーション開発について調べていて、先週の水曜日にはSwapSkills主催のイベント「jQueryモバイルで簡単！ スマートフォンサイト作成」に参加してjQuery Mobileについて勉強してきました。 jQuery Mobileとは、jQueryのプラグインとして利用するモバイルアプリケーション用のライブラリです。そしてその驚異的なまでの簡単さは、これから業務用のモバイルアプリケーションの作り方を一変させてしまう可能性を感じさせます。 jQuery Mobileの大きな特徴は次の3つです。 1）HTMLを書くだけでモバイルアプリケーションができてしまう 2）モバイルのユーザーインターフェイス対応の部品が多く揃っている 3）iOS、Android、WebOS、Windows Moblie、Symbianなどクロスプラットフォーム対応である 具体的な
Croppi!
croppi! の使い方 クロップしたい画像をドラッグアンドドロップ、もしくは、その下のボタンをクリックして画像を選択 チェックボックスをクリックし、クロップ後の画像サイズ（横幅・高さ）を入力。クロップ後の画像サイズに合わせて元画像の縮小率をスライダーで調整して、クロップしたい位置を選択 最後に「crop」ボタンをクリックして、クロップされた画像をゲット！
Ajaxでどんな事が出来るのかを知るサンプル集26種類 jQuery interface編 : 4GALAXYのメモ
16 26 08 2007 Ajaxでどんな事が出来るのかを知るサンプル集26種類 jQuery interface編 jQuery, Samples, Ajax 海外のjQueryを使ったAjaxサンプル集に日本語の紹介文をつけた記事 Effects Ajaxエフェクト集 要素の出現・消滅など全62種類のAjaxエフェクトサンプル Test new animate function 要素のAjaxアニメーションジェネレーター Use new functions stop, stopAll and pause to clear queue and stop flickering Ajaxでディレイ(遅延)を設定できるツールチップを表示サンプル Draggables | Droppables Ajaxでドロップ＆ドラッグ出来るサンプル10種類 Sortables list
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Missing
Sortable | jQuery UI
syboos.jp