jQuery：よく使用される機能をまとめて実装できるプラグイン - NxWorld
スムーススクロール・タブ切り替え・ロールオーバー・アコーディオンなどといった、サイト制作時によく使われる機能をまとめて実装することができるjQueryプラグインのまとめです。 予め使用する機能がはっきりわかっていれば、こういった便利なものを使用することでファイルの散乱も防げますし、管理もしやすくなりますね。 紹介するプラグインの中には必要な機能だけを選択してダウンロードできたりもします。 yuga.js web制作を優雅にするために作られたjQueryプラグインで、7種類の機能が実装されています。 ライセンスはMIT Licenseで、ライセンスに従う限り許可なく自由に使用できるそうです。 機能 ロールオーバー 現在のページをハイライト表示 外部リンクを別ウインドウで開く 画像をthickboxで表示（thickbox.jsを使用） スムーススクロール タブ機能 CSS3の擬似クラスをクラ
yuga.js TT Custom - yuga.jsの個人的なカスタマイズ
概要 yuga.js の個人的なカスタマイズです。 何かの参考になれば幸いです。 使い方はサンプルページにてご確認ください。 サンプル ダウンロード（GitHub） ページの先頭へ戻る
jQuery.supportでのブラウザ判別
chromeとsafariを対象とする場合 if(!jQuery.support.checkOn){ alert('あなたがお使いのブラウザはChromeもしくはSafariっぽいです'); } if文の条件式の中で!をつけたので、checkOnがfalseであればこの条件文に該当します。該当するのはwebkitだけなので、これでchormeとsafariのみに振り分けたコードを記述できます。なお、Android標準ブラウザ、iPhone / iPad標準ブラウザといったスマートフォンも同じChromeとSafariなので、この条件に合致します。 FirefoxとOperaを対象とする場合 if(jQuery.support.checkOn && jQuery.support.noCloneEvent){ alert('あなたがお使いのブラウザはFirefoxもしくはOperaっぽいです'
[JS]最近リリースしたjQueryのプラグインのまとめ -2013年1・2月
紹介済みから未紹介のものまで、最近リリースしたjQueryのプラグインをまとめました。 去年までは33+1選としてましたが、今年から新たなフォーマットで。
idée de décoration de maison et de jardin | horylog.com
Les 11 Best Jardin Mineral Design s from jardin mineral design , image source: bulavtoracingteam.info
【JQuery】Ajax:onload()で一部HTMLを読み込み | はるる*Weblog
仕事で、今流行のダイナミックなページを作るための調査をしています。ユーザーがブラウザのページリロードしたり、ページ遷移しなくても、どんどん情報が更新されるという、シングルページアプリケーション的なモノを目指してます。 んで、レスポンスをHTMLの一部に反映させるという機能が大必須になるけども、その実装にはAjaxが一般的かと思います。そして、JQueryのAjax:load()関数を使う、一番ベーシックなコードをノートしときます。 デモと全ソースコード Resultタブをクリックすると、デモ画面に切り替わります。それぞれのタブで、書かれているCSS,HTML,Java Scriptが参照できます。動作説明は下のやりたいこと参照。 コードをいじりたい人、全画面表示はここからどうぞ やりたいこと ｢Yahoo.co.jp｣をクリックすると、ロード失敗のエラー表示 ⇒ Yahoo.co.jp
jQueryでhtmlの簡易ローディング画面をつくる | 2GRAVITY
大きな画像を多用していたり、パララックスサイトなどで1ページあたりの容量が大きくなった場合、通信回線にもよりますが全ての画像とソースコードの読み込みが完了するまで結構な時間がかかったりします。 読み込み中の間は画像が順次表示されていって美しくなかったり、不具合が起きたり、訪問者がイライラして離脱に繋がったり…いろいろ不都合があります。 これを解消するために、ページを読み込み中の間はローディング画面を表示し、読み込み完了後にコンテンツを表示する方法をとります。 イメージとしては、読み込み中は上記の画像のようにコンテンツの上に目隠し用のレイヤーを表示し、全ての読み込みが完了したタイミングで目隠しを非表示にするイメージです。 ソースコードは左から右へ、上から下へと読まれていくので、ソースコードを書く位置にも注意しましょう。 ソースコードと画像が「全て読み込まれた」というイベントは、javascr
Google Libraries APIを使う - jQueryファイルの読み込み - jQueryの使い方
前のページでGoogleやMicrosoftがCDNにて用意しているjQueryファイルを読み込んで使う方法について記述しましたが、Googleの場合はGoogle Libraries APIとして様々なJavaScriptライブラリを読み込むことができる仕組みが用意されています。 ・Google Libraries API Google Libraries APIを使用する場合、jQueryファイルを読み込むには2つの方法が用意されています 1つ目は前のページで見たように読み込みたいjQueryファイルのフルパスを指定して読み込む方法。そしてもう1つは google.load() を使い、読み込みたいJavaScriptライブラリのモジュール名とバージョンを指定して読み込む方法です。 ではgoogle.load()を使って読み込む方法を確認します。まず最初に下記のように読み込みます。 <
howtohp.com - howtohp リソースおよび情報
Get a new domain registered at NameSilo.com. Find out who owns any domain name with the WHOIS tool. This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
クライアントワークでよくお世話になっているjQueryプラグインいろいろ
私が仕事で Web制作をする時に、よく利用させてもらっている jQuery のプラグインをまとめてみました。ライセンスは MIT、GPL のものばかりです。デザイン、レイアウト的に汎用性のあるものになっています。また、IE 特有のバグ（透過PNGの黒ずみなど）対策についても少し触れてみました。 Webサイトを作る時に、何かとお世話になっている jQuery のプラグイン。HTML と CSS だけでは表現できないことも、Javascript を使うことでいろいろできるようになりますよね！インターネットを見ていると、本当にたくさんの jQuery のプラグインが公開されています。feed を読んでいても、1日一個くらいは新しい jQuery のプラグインに出会います。どれを使ったらいいか迷うくらい … 。 今回は、そんな数ある jQuery のプラグインの中から、 私がクライアントワーク（仕
ディスプレイのサイズに合わせて画面いっぱいに背景画像を表示するCSSやjQueryプラグインいろいろ
ディスプレイサイズ（ブラウザサイズ）いっぱいに背景画像を表示する方法はいくつかありますが、最近見つけた jQuery のプラグインを使って、いろいろ試してみたりしたのでレビューをまとめてみました。 背景に画像を使った Webサイトってたくさんありますよね。大きくてキレイな画像は、見た目にもインパクトがあってとても印象的です。でも Webサイトを閲覧している人の環境は様々で、ディスプレイのサイズが違ったりするもの。ディスプレイ（ブラウザ）のサイズにあわせて、画像を拡大表示する方法はいくつかありますが、その中からいくつかをサンプル付きでご紹介します！ 画面いっぱいに背景画像 目次 CSSのみで画面いっぱいに背景画像 jQuery プラグイン fullscreenr を使ってみた Full Size Background Image jQuery Plugin を使ってみた jQuery max
jQueryで背景に画像をフルスクリーンで表示するいろいろ【単一画像／スライドショー／ランダム】｜BLACKFLAG
今ではあちこちで見かけるようになった Webページでの背景全体の画像フルスクリーン表示。 単純に一枚の画像を表示するパターンや 複数画像を切り替えて背景でフルスクリーンスライドショーにしたり ランダムで表示する画像を切り替えたり などなど、魅せ方はさまざまですが、 これらをjQueryを使ってできるだけシンプルなスクリプトで 実装ができないか試してみたので紹介してみます。 今回は、単一画像／スライドショー／ランダム の全部で3パターン紹介しますが、 HTMLとCSSは全て同じ構成になりますので 先にこの２つのソース構成について。 まずはHTMLから。 ◆HTML <div id="container"> <div id="contents"> <div id="wrapper"> <h1>jQuery FullScreen BackGround IMG</h1> <p>ここはコンテンツエリ
レスポンシブなレイアウトに役立つ２５個のjQueryプラグイン - colopixie
PCやスマートフォンなどに自動的に対応してくれるレスポンシブなサイトに役立つjQueryのプラグインが25 jQuery Plugins to help with Responsive Layoutsにありましたので、紹介したいと思います。 Response.js スマートフォンに最適化してくれるJS Menu to a Dropdown for Small Screens 画面が小さくなると、ドロップダウンのメニューになる Doubletake 画像のサイズを動的に変更してくれる FitText 画面のサイズに合わせてフォントサイズを変更してくれる jFontSize フォントサイズを変更してくれる Elastislide カルーセルメニュー。 スライドショー。 Responsly Blueberry wmuSlider PhotoSwipe FlexSlider Responsive
ブラウザのサイズに合わせて画像を伸縮する作業を全自動化するjQueryプラグイン「maxImage」:phpspot開発日誌
PHPからbit.lyやtr.im等のURL短縮サービスをまとめて扱える「PEAR::Services_Sho... 次の記事 ≫：Windows7風ナビゲーション作成チュートリアル ブラウザのサイズに合わせて画像を伸縮する作業を全自動化するjQueryプラグイン「maxImage」。 このプラグインを使えば、画像のサイズをブラウザサイズの変更があったとしてもページのサイズに合うように調整してくれ、デザイン崩れを防ぐことが出来ます。 以下にその機能を紹介してみます。 活用例１ 背景画像自動 背景画像をブラウザサイズ変更に合わせて自由に伸縮 ブラウザのサイズを変えても違和感がないようにすることが可能 活用例２ ブラウザ幅にあわせた画像の自動伸縮 ページの右端に画像があって、自由に伸縮します。 サイズを変えてもこの通り、画像が残りスペースのサイズになります 活用例３ ブラウザ幅に合わせる、がオ
要素の高さを揃える超軽量なjQueryプラグインjquery.tile.jsを公開 | URIN HACK
使用方法１―全ての要素の高さを揃える 指定した複数の要素の高さを、その中の最大の高さに揃えます。 各要素の幅が同じであれば、各要素のサイズ（高さ・幅）は全て同じになり、タイル状に要素が並びます。 各要素に対してheightを指定する必要はありません。 javascriptサンプル tile-sample1というclass属性を持つ要素の高さを、その中の最大の高さで揃えるには、以下のように記述します。 1 $(function(){ 2 $(".tile-sample1").tile(); 3 }); 実行結果 使用方法２―同じ行にある要素の高さを揃える タイルの列数を指定して、同じ行に並ぶ要素の中で最大の高さに揃えます。 javascriptサンプル tile-sample2というclass属性を持つ要素が横に４つ並んでいるとき、横に並んだ要素の高さを各行毎に揃えるには、その列数（＝４）を
ブラウザサイズに応じてsrcやwidthを置き換えてくれるjQueryプラグイン「Responsive Img」:phpspot開発日誌
ブラウザサイズに応じてsrcやwidthを置き換えてくれるjQueryプラグイン「Responsive Img」 2012年11月22日- Responsive Img - a jQuery Plugin for Responsive Images ブラウザサイズに応じてsrcやwidthを置き換えてくれるjQueryプラグイン「Responsive Img」 単に画像をリサイズするだけではなくsrcも置き換えてくれるそう。 PC版を単に縮小するのではなくて、スマホでは別の画像を使う、といった場合にも使えそうですね ブラウザサイズに応じて別の画像に切り替えて最適化したいという場合はそれなりにあると思うので、覚えておいてもよさそうですね 関連エントリ WEBデザインする人なら入れておきたいレスポンシブWEBサイト作成に役立つブックマークレット「Viewport Resizer」 レスポンシブ
css-lecture.com - css lecture リソースおよび情報
This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Bootstrapなサイトで使えそうなクールなツールチップ実装jQueryプラグイン「Smallipop」:phpspot開発日誌
Loading...
Dynamic Drive DHTML(dynamic html) & JavaScript code library