Google Feed APIの代替手段としてjQueryだけでRSSを表示する方法
iframeのサイズをコンテンツに応じて自動リサイズを出来るようにする「Iframe-resizer」:phpspot開発日誌
iframeのサイズをコンテンツに応じて自動リサイズを出来るようにする「Iframe-resizer」 2015年09月09日- Iframe-resizer by davidjbradshaw デモ iframeのサイズをコンテンツに応じて自動リサイズを出来るようにする「Iframe-resizer」。 iframeってお手軽に使えるんですが、iframe内外のJSが連携するのは別ページであるので面倒であったり、更にクロスドメインが絡むのでややこしいんですよね。 iframe内のresizeイベントが取れるので、JSで動的にコンテンツのサイズが増えても、自動リサイズが出来たりするようです 関連エントリ iframeの高さを中身のコンテンツにあわせて切り替えられる「setIframeHeight」 image, iframeをlazyloadしてロード時の関数を指定可能な「Lazyload
要素サイズに応じてフォントサイズを自動調節してくれる「FlowType.JS」:phpspot開発日誌
FlowType.JS ? Responsive web typography at its finest: font-size and line-height based on element width. 要素サイズに応じてフォントサイズを自動調節してくれる「FlowType.JS」。 通常は要素の幅を変えると折り返し位置のみがかわりますが、こちらを使えばフォントサイズやline-heightを自動調節可能。 レスポンシブなサイトなどで使うことができそうです。最小・最大のフォントサイズを指定することもできるのえ大きすぎたり、小さくなりすぎたりといったことも防げます 文字の大きさの問題はこうしたもので簡単に解決できますね 関連エントリ リストをselectに変換してくれるレスポンシブサイト用jQueryプラグイン「Menutron」 タッチができてレスポンシブなカルーセル実装jQuery
もっと読む、を簡単に実装できるjQueryプラグイン「Readmore.js」:phpspot開発日誌
ボタンに直接ローディングアニメーションを付けられる「Ladda」:phpspot開発日誌
Ladda ボタンに直接ローディングアニメーションを付けられる「Ladda」。 ボタンを押すとボタンに回転するアニメーションが付与され、そのまま結果をまつ、というような分かりやすいUIが実現可能です 文字＋ボタンを円形のボタンにして背景をグレーにしたり、そのボタン自体をプログレスバーにしてしまうなど、面白いデモが詰まっていますので一度是非試してみて下さい 色々なUIのデザインの仕方があるなぁという関心をしてしまいますね 関連エントリ 範囲指定が可能になるUI実装jQueryプラグイン「noUiSlider」 １ページ内で複数ページに分割できるjQueryプラグイン「windows」 エレメントを立体的に回転させられるjQueryプラグイン「Vortex」 レスポンシブに使えるタブUI実装jQueryプラグイン「Easy-Responsive-Tabs-to-Accordion」 リアルなア
[JS]シンプルなHTMLでレスポンシブ対応のスライダーを実装する超軽量のスクリプト -Unslider
シンプルなHTMLでレスポンシブ対応のスライダーを実装する超軽量のjQueryのプラグインを紹介します。 デスクトップのキーボード操作やスマフォ・タブレットのスワイプ操作にも対応！ Unslider Unslider -GitHub Unsliderの特徴 Unsliderのデモ Unsliderの使い方 Unsliderの特徴 超軽量のオープンソース スクリプトは3KBと超軽量のオープンソースです。 実装は簡単でクリーン HTMLは非常にシンプルで、カスタマイズも容易です。 高さの調整 サイズに合わせて、スライダーの高さを自動調整します。 レスポンシブ対応 デスクトップ・タブレット・スマフォなど、さまざまなデバイスに対応。 キーボード操作の対応 キーボード（矢印キー）での操作をサポートします。 スワイプ操作の対応 jQuery.event.swipeをサポートしているので、スワイプ操作に
jQuery サムネイル連動型の高性能なスライダー【Lof JSliderNews】 – リッチなスライダーの中では一番のお気に入り | Stronghold Archive
[JS]操作感が楽しい！左右にドラッグ・フリックしてコンテンツを表示するスクリプト -Snap.js
表示されているページを左右にドラッグ（フリック）して、アニメーションで左右にコンテンツをスライド表示するデスクトップにもスマフォにも対応したスクリプトを紹介します。 jQueryなどの他のライブラリには依存しません。 Snap.js -GitHub Snap.jsの特徴 Snap.jsのデモ Snap.jsの使い方 Snap.jsの特徴 jQueryなどの他のライブラリへの依存は無し CSS3を使った強力なアニメーション スライドは右・左に対応 ドラッグ操作のサポート ドラッグ操作禁止要素も定義可能 スマフォのフリック操作のサポート フックイベントのサポート イベントの有効・無効の設定 カスタマイズが簡単 対応ブラウザ IE10を含む全てのモダンブラウザに対応しています。 IE7/8/9はCSS3での一部の機能が制限されます。 Firefox 10+ Chrome, SafariなどのWe
jQueryでGoogleカレンダーの予定を取得して自分のサイトに表示する
Posted: 2011.04.18 / Category: javascript / Tag: API, jQuery, json クライアント側でイベント情報などの予定をWeb上にのせたいとき、一からシステムを開発する他、最近ではGoogleカレンダーを自サイトに埋め込むという方法もありますね。 でもそれだとデザイン的にあれだよね。ということでjQueryを使用してお手軽にGoogleカレンダー予定を時系列順に表示する方法をご紹介します。 Googleカレンダーの設定 Googleカレンダーは初期設定だと自分しか見られない状態ですので、サイトに表示するためには設定を変更する必要があります。 Googleカレンダーにログインしたら左メニューから「アカウント名@gmail.com」の右の三角アイコンをクリックして、サブメニューから「カレンダー設定」を選択します。 設定画面で「このカレンダー
Agile Carousel - Javascript Slideshow - Image Carousel
Usage Add a div to your page in the location where you would like to add your slideshow. Invoke the plugin as shown below. Provide data in JSON format as shown below. See the "Settings" section at the bottom of the page for available settings. See the "Single Page Examples" (above) for more implementation examples. Invoke the Plugin <link rel="stylesheet" href="agile_carousel.css"> <script src="ht
[JS]設置も超簡単、あなたのウェブページのスクロールを慣性スクロールにするスクリプト -NiceScroll
Juicebox - The Ultimate HTML5 Image Gallery
See Juicebox in Action Check out the demos below to see Juicebox-Lite and Juicebox-Pro at work. Juicebox-Lite Demos Juicebox-Lite provides great out-of-the-box functionality for your image galleries. The following examples show some of the ways that you can use the customization options available. Juicebox-Pro Demos Juicebox-Pro allows you access to many extra features and advanced customization o
[JS]高性能で設置も簡単、ブラウザ枠いっぱいに背景画像を配置するスクリプト -bgStretcher
デモページ：Super Slider スライドのスーパー版で、斜め方向のスライドで画像を切り替えます。 bgStretcherの主な特徴 セットアップはシンプル 全てのモダンブラウザをサポート 画像は一枚だけでなく、複数枚にも対応 対応ブラウザ Internet Explorer 6, 7, 8, 9 Firefox 2, 3, 4 Opera 9+ Safari Chrome bgStretcherの使い方 Step 1: ファイルのダウンロード サイトの「Download」よりファイル一式をダウンロードします。 一式には必要なファイル全て（jqeury.jsも）が含まれています。 Step 2: 外部ファイル 外部ファイルを下記のように<head>～</head>に記述します。 <script type="text/javascript" src="../jquery-1.5.2.mi
Mac OS X風のドックを上下左右どこでも設置できるjQueryプラグイン「Docklr」:phpspot開発日誌
[JS]ページをリフレッシュしないでコンテンツをアニメーションでロードするスクリプト -fLoadingSite
さまざまなタイプのスライドショーが簡単に設置できるスクリプト -Agile Carousel | コリス
ギャラリープラグインデモいろいろ
jShowOff is a jQuery plugin for creating a rotating content module. It works by creating 'slides' from the child elements (eg. <li>) inside a specified wrapper element (eg. <ul>) on which .jshowoff() is invoked. It then rotates through the slides, with options for controls, links, and more. This type of module is often used to promote pages, sections, or features on a site. Required Files the jQue
jQueryのプラグイン「Page Scroller」の機能を追加しました：更新- 3.0.8
ページ内をスムーズにスクロールできるスクリプト：Page Scrollerの最新版「3.0.8」をリリースしました。 簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3 主な変更点は、下記の通りです。 3.0.8 スピードの調整が可能になりました。 動作しないエリアを指定できるようになりました。 area要素を使用したイメージマップでも利用できるようになりました。 詳しくは以下をどうぞ。 [ad#ad-2] ver 3.0.7からのアップデート方法 スクリプトの既存の仕様に変更はありません。 同様に、ご利用いただけます。 スクロールのスピードを調整する方法 スクロールのスピードを調整できるオプションです。 スクロールのスピードを調整 スクロールのスピードを調整する方法 スクロールのスピードを任意に変更することができます。 ※デモはスピー
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA
dev7studios
