タグ

JavascriptとWeb制作に関するhalohalolinのブックマーク (65)

  • [JS]jQueryのプラグイン100選 -2010年総集編

    2010年に紹介したものを中心としたjQueryのプラグイン100+α選です。 今年は、アニメーションのエフェクトやレイアウト、後半は背景画像関連のプラグインが特に目立っていたように思います。 [ad#ad-2] コンテンツスライダー・カルーセル関連 ギャラリー・画像拡大関連 ナビゲーション関連 タブ関連 パネル・ボックス関連 ツールチップ関連 レイアウト関連 背景画像関連 その他UI関連 アニメーション関連 スクロール・ドラッグなど操作関連 テーブル・リスト・データ関連 フォーム関連 コンテンツ生成 その他 コンテンツスライダー・カルーセル関連

    halohalolin
    halohalolin 2010/12/21
    コンテンツスライダー・カルーセル関連/ギャラリー・画像拡大関連/ナビゲーション関連/タブ関連/パネル・ボックス関連/ツールチップ関連/レイアウト関連/背景画像関連/その他UI関連/アニメーション関連/スクロール…
  • 広告等に使えそうなjQueryプラグインいろいろ - かちびと.net

    広告表示などにうまく使えそうな jQueryプラグインのまとめです。 諸事情で調べたのでついでに メモしておきます。応用すれば 画像を使ったものは全て広告に 使えますが、その中でも特に 良さそうだったものを中心に。 広告に使えるというか、クリック率を高めそうとか目立たせるとかそういう類のプラグインになります。曖昧なまとめですが個人的なメモになりますのでご了承下さい。順不同です。 Cycle Plugin 省スペース内で画像を切り替えるプラグインです。エフェクトもいつくか選べます。 Cycle Plugin jQuery.popeye こちらも省スペースに置けるギャラリー。マウスを乗せるとキャプションが出てそこにリンクも貼れます。 jQuery.popeye Step Carousel Viewer シンプルなカルーセルです。複数の広告をまとめて表示するのに使いやすそう。 Step Caro

    halohalolin
    halohalolin 2010/10/21
    省スペース内で画像を切り替える/省スペースに置けるギャラリー/シンプルなカルーセル/端にめくり/クリックでひっくり返る/フリップ/onmouseで別画像・オーバーレイ/テキスト連続表示/LPO/RSS一行見出し
  • ついに iPhone Safari ブラウザから位置情報を取得できるようになります - Cirius Lab. ブログ

    「昔から自分のナニのサイズが小さいのがコンプレックスになっています」 コンプレックスになったきっかけは中学の時の修学旅行です。 それまで特に気にならなかったのですが、お風呂の時間に友人のを見て、自分が小さい方なことに気が付きました。 それからは恥ずかしく思うように。 それから10年近く経ちましたが、特にサイズは変わっていないです。 大人になってふと思ったんです。 コンプレックスを解消する方法って無いのかなと。 そして調べてみたら、最近は色々な方法があることを知りました。 特に気になったのは【凝縮黒ウコンDEX】という増大サプリメントです。 全体的に評価も高くて、レビューを読んでいてもかなり期待できるなと思いました。 ですが初めてのことなので、自分に効果があるのかという不安もあります。 なので凝縮黒ウコンDEXについて詳しく調べてみたいなと。 調べ尽くして、使いたいという気持ちが強ければ注文

    ついに iPhone Safari ブラウザから位置情報を取得できるようになります - Cirius Lab. ブログ
    halohalolin
    halohalolin 2010/10/14
    iPhone Safariに代表される(社内LANで接続されたWindows用Firefoxでも精度はともかく動作は確認)位置情報が取得できるブラウザからJavaScriptを使用して取得するサンプルプログラム
  • jQuery 関連記事まとめ - Cyokodog::Diary

    はてブだと埋もれるのでこちらに書き足してきます。 jQuery 基機能 家 jQuery.com リファレンス jQuery 日語リファレンス jQuery 開発者向けメモ jQuery リファレンス- openspc2 jQuery 1.2.6 リファレンス - StackTrace チートシート HTML/CSS, jQuery, WordPressなどウェブ制作者のためのチートシート集 - coliss スライド・関連情報 はじめての jQuery jQueryのプレゼンVIDEO - JAM LOG 第1回 Silverlight vs. jQuery+ASP.NET AJAX - @IT チュートリアル jQuery 入門 - openspc2 jQuery を使って Ajax 開発を単純化する - IBM jQueryの魔法 - All About jQuery ではじめ

    jQuery 関連記事まとめ - Cyokodog::Diary
    halohalolin
    halohalolin 2010/10/10
    jQueryリンク集→CSS セレクタ/メニュー、リスト、リンク/位置、リサイズ調整/エフェクト/スクロール/ギャラリーページ/テーブル/マッシュアップ(Twitter/YouTube/Google Maps/はてな)
  • 【ハウツー】iPhoneゲーム自作工房5 - Googleマップ回転ゲームの作成 (1) ジェスチャーの利用 | パソコン | マイコミジャーナル

    iPhone + Safariによるジェスチャー処理 iPhoneのSafariにはタッチされた時のイベントを取得することができます。このタッチ関係のイベントを使ってピンチイン/アウトや回転操作を行うためのプログラムを書くこともできます。が、実際にそのようなコードをJavaScriptで書くのは手間です。幸いiPhoneのSafariには、そのような処理(ジェスチャー)を検知するための仕組みとイベントプロパティが用意されています。今回は、回転させるジェスチャーを使って、ちょっとした回転ゲームを作成してみます。 今回はシンプルなゲームで指定した回転角度まで画像を回転させるだけのものです。指定した回転角度まで回転させるタイムを競います。普通の画像を回転させても良いのですが、ここではGoogleマップを回転させてみます。 正確に地図を回転させるゲーム ジェスチャーイベント Safariのジェスチ

    halohalolin
    halohalolin 2010/10/10
    iPhoneのWebアプリで、指の操作を検知するための仕組みとイベントプロパティから、回転させるジェスチャーを使ったサンプルゲームを構築例を紹介。スクロールを停止させるのがポイント。
  • フォントサイズを変える「大・中・小」ボタンを実装する方法

    知り合いのデザイナーさんに、「大・中・小」のボタンでフォントサイズを変更する方法ってどうやるのですか?という質問をいただきました。 CSSJavaScript(場合によってはJSのみ)で簡単にできてしまうので、サンプルをご紹介しておきます。 フォントサイズを変える「大・中・小」ボタン実装 jQueryを使ってフォントサイズを変える「大・中・小」ボタンをサクサクっと実装してみようと思います。 まずは仕様を考えてみましょう。 仕様 ・大・中・小のボタンをクリックするとフォントサイズが変更される ・それぞれのボタンにIDをセットしておき、そのID名をもとにclassをセット ・CSSにあらかじめ各class用のフォントサイズを入れておく ・再度訪れたとき、クッキー情報があればそのサイズ、なければ中サイズを。 スタイルシートごと変更する方法もあるのですが、今回はCSSとclassでセットで対応し

    フォントサイズを変える「大・中・小」ボタンを実装する方法
    halohalolin
    halohalolin 2010/05/21
    jQueryを使ってフォントサイズを変える「大・中・小」ボタンをサクサクっと実装
  • dfltweb1.onamae.com – このドメインはお名前.comで取得されています。

    このドメインは お名前.com から取得されました。 お名前.com は GMOインターネットグループ(株) が運営する国内シェアNo.1のドメイン登録サービスです。 ※表示価格は、全て税込です。 ※サービス品質維持のため、一時的に対象となる料金へ一定割合の「サービス維持調整費」を加算させていただきます。 ※1 「国内シェア」は、ICANN(インターネットのドメイン名などの資源を管理する非営利団体)の公表数値をもとに集計。gTLDが集計の対象。 日のドメイン登録業者(レジストラ)(「ICANNがレジストラとして認定した企業」一覧(InterNIC提供)内に「Japan」の記載があるもの)を対象。 レジストラ「GMO Internet Group, Inc. d/b/a Onamae.com」のシェア値を集計。 2023年10月時点の調査。

    halohalolin
    halohalolin 2010/04/21
    jquery plug-in各種:グラフを作る/ファイルをアップロードする/フォームにうっすらテキストを表示する/日時の入力を軽減してくれる/並び替えをする
  • これは新しい日付ピッカー実装用jQueryプラグイン「calendarPicker」:phpspot開発日誌

    BugsVoice - turn bugs into opportunities これは新しい日付ピッカー実装用jQueryプラグインのjQuery.calendarPickerが公開されています。 通常、日付ピッカーというとカレンダーを想像しますが、今回紹介するものは次のようなUIで、1週間が基となっています。 不要な日付を出来る限り非表示にすることで、分かりやすくなったりする場面もありそうです。 現在の日付は黄色の枠で表示されるようになってるみたいです。 オプションに値を与えることで、月、曜日の表示名カスタマイズをすることが出来るのでローカライズも容易ですね。 関連エントリ GoogleカレンダーみたいなカレンダーをjQueryで一瞬で作成できる「jquery-week-calendar」 jQueryを使ったカレンダー型、日付入力補完ライブラリ

    halohalolin
    halohalolin 2010/03/27
    不要な日付を出来る限り非表示にしたカレンダー、1週間が基本になっている
  • Dynamic Drive DHTML Scripts- Ultimate Fade-in slideshow (v2.0)

    Note: March 7th, 16': Updated to v2.6.1 for miscellaneous bug fixes. Description: This is a robust, cross browser fade in slideshow script that incorporates some of your most requested features all rolled into one. Each instance of a fade in slideshow on the page is completely independent of the other, with support for different features selectively enabled for each slideshow. Here's a lowdown on

    halohalolin
    halohalolin 2010/03/04
    jQueryを利用したFlashがなくてもフェードインフェードアウトのスライドショーが実装出来るプラグイン
  • ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」:phpspot開発日誌

    ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」 2010年01月19日- rikrikrik.com - jQuery autosave plug-in ブラウザが落ちてもフォーム内容が消えないようにするjQueryプラグイン「jQuery autosave」。 データを編集中にフォームに書き込んでいて、ブログ記事などが消えたりするとても悲しい気持ちになりますが、このプラグインを使えばデータをブラウザのクッキーに保存してくれて、次にアクセスした時にリストアできるという素晴らしいプラグインです。 クッキー保存のため、サーバに保存する必要はないですし、手軽に使うことができそうです(ブラウザごとにクッキーに依存した文字数制限などは存在すると思います) こういうことを1からやろうとすると結構大変ですが、毎度のことながら、jQueryプラグ

    halohalolin
    halohalolin 2010/01/21
    Cookieにフォームの内容を自動保存する。IEでページ戻り(history.go(-1))の際に、新しいタブを作ったりすると入力内容が消える問題にも対応できそう!
  • 複数のCSS/JavaScriptを結合&圧縮·phpFlair MOONGIFT

    phpFlairはPHP製Webベースのオープンソース・ソフトウェア。jQueryなどのJavaScriptフレームワークやCSSフレームワークを用いていると、ついつい一度のアクセスで多数のコネクションが張られるようになる。これではサーバの負荷はもちろんクライアントでも表示が遅くなってしまう。 利用するサンプル(公式サイトより) そこで考えたいのがJavaScript/CSSファイルをそれぞれ結合して一度のアクセスで済ませてしまう方法だ。手作業でもできるが、メンテナンスを考えると自動処理の方が便利そうだ。phpFlairを使えばそれを簡単に実現できる。 phpFlairはPHPで作られているのでPHPを使ったプロジェクトでは手軽に導入できそうだ。JavaScriptファイルやCSSファイルを表示する際にphpFlairを経由して呼び出すことでキャッシュしたり、レスポンスのヘッダにもキャッシ

    複数のCSS/JavaScriptを結合&圧縮·phpFlair MOONGIFT
    halohalolin
    halohalolin 2010/01/09
    JavaScriptファイルやCSSファイルを表示する際にphpFlairを経由して呼び出すことでキャッシュ・結合したり、レスポンスのヘッダにもキャッシュ指定をして負荷を下げられるようになる
  • 製品の特徴についてカッコよく表示できるjQueryプラグイン「Feature List」:phpspot開発日誌

    製品の特徴についてカッコよく表示できるjQueryプラグイン「Feature List」。 次のような、製品の紹介なんかでどこかで見たようなUIパーツを簡単に実装できるみたいです。 実装方法 最初はちょっと難しいような気もするのですが、実はかなり簡単で次のように<div>以下に2つのulを置いておきます <div id="feature_list"> <ul id="tabs"> <li> <a href="javascript:;"> <img src="services.png" /> <h3>Services</h3> <span>Lorem ipsum dolor sit amet consect</span> </a> </li> <li> <a href="javascript:;"> <img src="programming.png" /> <h3>Programming<

    halohalolin
    halohalolin 2009/12/14
    会社のトップページなどに使えそう
  • スクロールした位置についてくるサイドバーをjQueryで実装するサンプル例:phpspot開発日誌

    スクロールした位置についてくるサイドバーをjQueryで実装するサンプル例が公開されており、チュートリアルと共にダウンロード可能になっています。 サンプルを見ると、殆どの面倒なことがjQuery側にてやってくれるため、非常に簡単なプログラムになっています。 付いてくるのがリアルタイムにしすぎるとガクガクして酔いますが、ちょっとした遅延があったあと、アニメーションして付いてくるので、動きとしてもよいですね。 jQueryの学習用に、また実際にサイトにサクッと組み込んでみる際にもよさそうですね。 以下のエントリを参照してください。 Scroll/Follow Sidebar, Multiple Techniques | CSS-Tricks

    halohalolin
    halohalolin 2009/12/05
    フレームの代わりとしてメニューに使えそう
  • CSSとJavaScriptを組み合わせたアニメーションライブラリ·emile MOONGIFT

    emileはCSS/JavaScript製のオープンソース・ソフトウェア。Webブラウザ上でアニメーションを行う際、まず思いつくのはFlashを使った手法だろう。だがそこまで複雑なアニメーションでもなく、そもそもFlashを扱うのが苦手な場合はどうしたら良いだろう。そこで使えそうなのがJavaScriptだ。 動作サンプル 最近のJavaScriptは表現力が高く、簡単なアニメーションくらいなら十分に実現できるようになっている。さらにCSSを使うことで位置の設定も容易に、色の変更もできるようになる。それを使って作られているのがemileだ。 emileはPrototype.jsやjQueryといった有名なライブラリを使わずに作られている。アニメーションを使いたいとなった途端に重たいフレームワークを導入というのでは萎えてしまう。わずか50行程度でアニメーションを実現しているのだから面白い。

    CSSとJavaScriptを組み合わせたアニメーションライブラリ·emile MOONGIFT
    halohalolin
    halohalolin 2009/11/24
    Prototype.jsやjQueryといった有名なライブラリを使わずに作られている。アニメーションを使いたいとなった途端に重たいフレームワークを導入というのでは萎えてしまう。わずか50行程度と軽い。
  • IDEA * IDEA

    ドットインストール代表のライフハックブログ

    halohalolin
    halohalolin 2009/10/22
    文字数をカウント/残り文字数をカウント/エラーチェック/リストから入力/リストへ入力
  • 【特集】詳解! HTML 5と関連APIの最新動向 - Webアプリ開発編 (1) 本特集の趣旨 | エンタープライズ | マイコミジャーナル

    特集は、HTML 5の仕様や実装状況に関する現時点での最新レポートとして、実際に動作するサンプルを添えた詳細な解説をお届けするものである。特集の後半となる今回は、Webアプリケーションを作成するにあたって有用な、JavaScript APIを中心として取り上げる。今回紹介する内容は以下の通りだ。 アプリケーションキャッシュ クロスドキュメントメッセージング Web Workers Web Storage Web Database Web Sockets Geolocation API HTML5で新しく導入されたタグなどに関しては、前回の特集を参照していただきたい。 今回調査対象としたブラウザは、前回と同じく次の通り。ベータバージョンも含めた最新のバージョンをチョイスした。Internet Explorerについては、最新バージョンの8でもHTML 5への対応があまり進んでいなかったため

    halohalolin
    halohalolin 2009/08/18
    アプリケーションキャッシュ/クロスドキュメントメッセージング/Web Workers/Web Storage/Web Database/Web Sockets/Geolocation API
  • Webサイトをスライド化する·SiteFlow MOONGIFT

    通常、Webサイトは縦に長くなる傾向がある。そのため縦書きの文字はほとんど使われず、横書きで下へ、下へ伸びていく。そのため、あまりページが長くなるとページネーションとしてページを区切って読み進めるようになっているのが一般的だ。 Webページをスライド化して読みやすくする だがこのページネーションは果たして便利な機能だろうか。都度マウスでクリックしたりするのが面倒だし、縦長のページを移動するのも大変だ。そこでSiteFlowが登場した。 今回紹介するオープンソース・ソフトウェアはSiteFlow、Webサイトの可読性、操作性を向上するJavaScriptライブラリだ。 SiteFlowはJavaScriptで提供されるソフトウェアで、ブックマークレットとしても動作する。主な機能は二つで、一つはページ内の移動に関する機能で、もう一つはページネーションに関係する機能だ。ページ内の移動処理では、C

    Webサイトをスライド化する·SiteFlow MOONGIFT
    halohalolin
    halohalolin 2009/08/17
    縦に長いページを分割する際に役立ちそう
  • IE6のアップデートを促してくれたり、アクセスブロックしたりする物まとめ:phpspot開発日誌

    IE6のアップデートを促してくれたり、アクセスブロックしたりする物まとめ。 YoutubeやTwitter等の大手サイトでも古いブラウザを使ってますよの表示がでるようになってきているみたい。 そういうものを簡単に実装するための仕組みが色々とありましたのでまとめてみました。 アップデート喚起・ブロック IE6 No More - Home コードを貼り付けるだけで、以下のようなイメージを出してくれるみたい IE6ユーザへのアップデートをスマートに促すことが可能な「ie6update.js」 情報バーみたいなUIでアップデートを促してくれます IE6ブラウザでアクセスするとWarningを出してくれる「ie6-upgrade-warning」 ワーニングとして結構大きく表示してくれます IE6でのページ表示をブロックする「IE 6 Blocker」 アクセスをブロックしてくれます その他 サイ

    halohalolin
    halohalolin 2009/08/07
    IE6のアップデートを促してくれたり、アクセスブロックを簡単に実装する
  • GoogleカレンダーみたいなカレンダーをjQueryで一瞬で作成できる「jquery-week-calendar」:phpspot開発日誌

    GoogleカレンダーみたいなカレンダーをjQueryで一瞬で作成できる「jquery-week-calendar」 2009年08月05日- jquery-week-calendar - Project Hosting on Google Code GoogleカレンダーみたいなカレンダーをjQueryで一瞬で作成できる「jquery-week-calendar」。 次のような、ドラッグ&ドロップでイベントを作れるGoogle カレンダー風のウィジェットがjQueryプラグインとして公開されました。 なんと、次の1行で初期化という簡単っぷりです。 $("#calendar").weekCalendar(); 当然、コールバックを設定して、イベント追加時のコードをかけたりします。 プロジェクトページのリファレンスも充実しているようで、カスタマイズも簡単でしょう。 関連エントリ とても洗練さ

    halohalolin
    halohalolin 2009/08/06
    ドラッグ&ドロップでイベントを作れるGoogle カレンダー風のウィジェットがjQueryプラグイン、初期化はたった1行のみ
  • まだまだあったJavaScript製のWYSIWYGエディタコンプリート:phpspot開発日誌

    まだまだあったJavaScript製のWYSIWYGエディタコンプリート、ということで、ブログで紹介していない(したものも一部あるかもしれませんが)ライブラリ等をメインにご紹介。 WYSIWYGといっても、それぞれの使い方には特徴があって、微妙に自分の使い勝手にあってなかったりする場合もありますね。ということで選択肢を増やすという意味でご紹介 Free Rich Text Editor OfficeスタイルのリッチなWYSIWYGエディター →デモページ jHtmlArea - The all NEW HTML WYSIWYG Editor for jQuery WYSWYGエディタ実装用jQueryプラグイン jwysiwyg シンプルなUIのWYSIWYGエディター。jQueryプラグイン SPAW Editor UIが美しいタブ付きWYSIWYGエディタ →デモページ TTW HT

    halohalolin
    halohalolin 2009/08/05
    JavaScript製のWYSIWYGエディタあれこれ