イメージホバーにさまざまなエフェクトを加えるjQueryプラグイン「picBeautifier 3000」
イメージホバーにさまざまなエフェクトを加えるjQueryプラグイン「picBeautifier 3000」 「picBeautifier 3000」はイメージのマウスホバー時にさまざまなエフェクト効果を追加することができるjQueryプラグインです。 投稿日2018年04月20日 更新日2018年04月20日 プラグインのダウンロード&読み込み プラグインを下記URLからダウンロードするかCDNから使用します。 malditoprotozoo/picBeautifier-3000 使用するのは「src/app.js」です。 使用するHTMLでjQueryと一緒に読み込みましょう。 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://cdn.rawgit.com/ma
jquery-fulltable - jQueryで任意のテーブルを便利に
業務システムなどでよく使われるテーブルタグ。素のままでは小さなテーブルはよくとも、多数のデータを表示した際の使い勝手がよくありません。かといって多機能にするのは大変です。 そこで使ってみたいのがjquery-fulltableです。任意のテーブルをjQueryで多機能にします。 jquery-fulltableの使い方 適用後のテーブルです。並べ替え、フィルタリングができます。 インクリメンタルな絞り込みです。 ドロップダウンでの絞り込みも可能です。 データの追加、編集もできます。 jquery-fulltableを使えば任意のテーブルを多機能にできます。サーバサイドの変更もいらず、すぐに実装できるでしょう。他にも色々要望は出るかも知れませんが、まずはjquery-fulltableで対応してしまうことで多くのニーズは満たせそうです。 jquery-fulltableはjQuery/Jav
高度なイベントカレンダーアプリの為のjQueryプラグイン・「FullCalendar」
FullCalendarは高度なイベントカレンダーアプリを実装出来るjQueryプラグインです。jQueryUIも使用可能、Googleカレンダーにも対応しています。多言語化も済んでおり、日本語ファイルも用意されています。カレンダー自体は使いやすい印象でした。MITライセンスの元、オープンソースとして公開されていますが、商用ライセンスも用意されているみたいです。アドオンは3つのライセンスから選択するトライライセンスとの事・・ちょっと複雑なので詳細は開発者さんにお問い合せ下さい。 FullCalendar
HTML要素にスクロールエフェクトを追加できるjQueryプラグイン「ScrollMe」 | TechMemo
ScrollMeは、HTML要素に対して、ズームや回転などのスクロールエフェクトを加えることができるjQueryプラグインです。 今回は、このScrollMeの使い方について解説したいと思います。スクロールエフェクトの動きについては、公式サイトでご確認ください。 ステップ1. ScrollMeのダウンロードと設置 まずは、GitHubからScrollMeをダウンロードして、サーバーに設置します。 必要なファイルは、jquery.scrollme.min.jsのみです。 ステップ2. jQueryとScrollMeの読み込み </body>の直前で、jQueryとScrollMeのファイルを読み込みます。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <scri
テーブルをレスポンシブに対応させるのに便利なjQueryプラグインまとめ｜BLACKFLAG
レスポンシブWebデザインのサイトでテーブル（表組み）を組み込む際に 要素量の多いテーブルの場合、CSSでレイアウトを無理やり調整したり、 スマホレイアウト時はテーブル全体を横スクロールさせるようにしたりと レイアウトに苦労することがよくあります。 そんなテーブルをレスポンシブ対応させる際に いろいろと便利に使えそうなjQueryプラグインを まとめて自分用メモとして紹介してみます。 Basic Table (jQuery Responsive Tables) Basic Table (jQuery Responsive Tables) デモページはこちら まず最初は「Basic Table」。 画面幅に応じて見出し要素を複製するかたちで テーブルを項目の並びを整えて収めてくれます。 様々なレイアウトパターンが用意されていて テーブルが長くなる場合にはスクロール制御する機能もあり、 いろい
YouTubeをプレビューさせるjQueryプラグイン「PreViewTube」
twitter facebook hatena google pocket YouTubeの再生ボタンを押さずにプレビューさせられると興味を持ってもらえるかもしれません。 jQueryプラグインのPreViewTube.jsを利用すると簡単にアニメーション付きでプレビューできます。 sponsors 使用方法 PreViewTube.jsからファイルをダウンロード。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> <script type="text/javascript" src="previewtube.js"></script> <script> $(document).ready(function(){ $('.class名').PreViewTube
jQueryでINPUT[type=file]で画像ファイルのプレビューを表示させる実験｜BLACKFLAG
会員制Webサイトやストレージサービスなどで input入力フォームでファイルをアップロードさせる[type=file]を使用する際、 選択されたファイルが画像だった場合にプレビューを表示させる機会が何度かあったので File APIとjQueryを使って試しに作ってみたサンプルを紹介してみます。 まずは動作サンプルから。 「jQueryでINPUT[type=file]で画像ファイルのプレビューを表示させる方法」サンプルを別枠で表示 サンプル画面上にある入力フィールドinputにて画像を選択させた場合、 入力フィールド下に選択した画像が表示されます。 全体構成についてまずはHTMLから。 ◆HTML <div class="imgInput"> <input type="file" name="file1"> </div><!--/.imgInput--> <div class="img
![jQueryでINPUT[type=file]で画像ファイルのプレビューを表示させる実験｜BLACKFLAG](https://cdn-ak-scissors.b.st-hatena.com/image/square/c662e9771e0c7ac0df846a4838fb1480f378049f/height=288;version=1;width=512/https%3A%2F%2Fblack-flag.net%2Fcommon%2Fimg%2Fogp_jquery.png%3F20231001)
Lightboxプラグイン「Boxer」
「Boxer」はLightboxやモーダルウィンドウを実装できるjQueryプラグインです。画像だけでなく動画にも対応しています。 モバイル環境にも最適化されていて、#レスポンシブ 対応で、#スワイプ も設定で可能となっており、タッチフレンドリーなプラグインになっています。 サイト ダウンロード スクリプト <link href="jquery.fs.boxer.css" type="text/css" rel="stylesheet"> <script src="jquery.min.js" type="text/javascript"></script> <script src="jquery.fs.boxer.js" type="text/javascript"></script> 実装 それぞれのリンクに対してclass("boxer")を指定します。 ギャラリーとして表示したい場
次のプロジェクトで使いたい、CSS3からSVGまでアニメーションを実装するスクリプトのまとめ
最近のウェブやスマフォのページで使われている効果的で面白いさまざまなアニメーションを実装できるスクリプトを紹介します。 スクロールに連動してさまざまな要素がアニメーションで表示されたり、ページを表示する時にふわっとさせたり、画像にSVGでブラーをかけてテキストを載せたり、物理演算エンジンで慣性を楽しんだりなど、デモを見るだけでもかなりいい刺激がもらえるスクリプトばかりです。 Agile Agile -GitHub SVGやWebGLを使用せず、JavaScriptでCSS3アニメーションを生成するライブラリ。デスクトップの各ブラウザ対応だけでなく、スマフォやタブレットにもパフォーマンスが最適化されています。キーフレームやトゥイーンを使ったアニメーションが得意です。
radios-to-slider: jquery plugin to create a slider using a list of radio buttons.
radios-to-slider Star Tweet Radios to slider is a jquery plugin to create a slider using a list of radio buttons. Basic usage: <div id="radios"> <input id="option1" name="options" type="radio"> <label for="option1">1 year</label> <input id="option2" name="options" type="radio"> <label for="option2">2 years</label> <input id="option3" name="options" type="radio" checked> <label for="option3">3 year
[JS]指定した要素内いっぱいに背景画像を最適に配置するシンプルなスクリプト -Wallpaper
幅480pxで表示 Wallpaperの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script src="js/jquery.bp.wallpaper.js"> Step 2: HTML HTMLは通常通りで、背景画像を配置する要素は指定できるようidなどを加えます。 <header id="element"> ヘッダ </header> 複数箇所を適用する時は、classの方が便利です。 Step 3: JavaScript jQueryのセレクタで要素を指定し、sourceに画像を指定し、スクリプトを実行します。 $("#element").w
[JS]実装も簡単、必須入力の有無やメールアドレスのチェックなどフォームのバリデーションをおこなう軽量スクリプト -Validetta
選択しているのが2つかどうか Validettaは、以下の項目がチェックできます。 データが空かどうか。 電子メールのチェック。 数字のチェック。 クレジットカード番号のチェック。 フィールド内の文字数のチェック。 チェックボックスやセレクトボックスの選択数のチェック。 2つのフィールドが同じかどうか。 正規表現を使ったフィールドのチェック。 Validettaの使い方 Step 1: 外部ファイル jquery.jsと当スクリプト・スタイルシートを外部ファイルとして記述します。 <link href="validetta/validetta.css" rel="stylesheet" type="text/css" media="screen" > <script type="text/javascript" src="http://code.jquery.com/jquery-late
画像も動画もGoogle Mapsもあらゆるコンテンツを拡大表示するスクリプト -iLightBox | コリス
画像をはじめ、画像ギャラリー、そして動画、HTMLコンテンツ、外部サイトなど、あらゆるコンテンツを拡大表示するjQueryのプラグインを紹介します。 あらゆるコンテンツをサポートします。 画像、画像ギャラリー、動画（HTML5, YouTube, Vimeoなど）、Flash/swf, Google Maps, iFrame, AJAX, Alert/Confirm/Promptなど 主要なブラウザ全てをサポートします。 IE7/8/9/10, Firefox, Chrome, Safari, Opera iOS4+, Android 主要なデバイスを全てサポートします。 デスクトップ・タブレット・スマートフォン スワイプ操作やRetinaディスプレイもサポートしています。 iLightBoxのデモ デモではあらゆるコンテンツをiLightBoxで拡大表示します。 まずは、画像一枚を拡大表
画像のスワイプにも対応したスマホ時代のjQueryプラグイン「Swipebox」
twitter facebook hatena google pocket PCでの画像拡大と言えばLightBox系が席巻していましたが、スマホだとなんだか使いにくいものでした。 Swipeboxはスワイプ動作による画像間の切り替えも可能で、新時代の到来を予感させます。 なおPCでもキーボードによる遷移ができたりします。 sponsors 使用方法 Swipeboxからファイル一式をダウンロード。 <link rel="stylesheet" href="swipebox.css"> <script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script type="text/javascript" src="jquery.swipebox.js"></script> <script type="text/ja
jQuery 1.9 に更新する際に注意すべき変更点の自分なりのまとめ | 私的なjQuery他
jQuery Core 1.9 Upgrade Guide | jQuery の「Changes of Note in jQuery 1.9」を読んで、 自分なりにまとめました。 誤訳して間違ったことをまとめてたり、 最新の情報でないかもしれないので 読まれる際はご注意下さい。 （※ページをそのまま訳したわけではないと、思います） jQuery 1.9 では API の削除や 挙動の変更を行っています。 この記事は、前のバージョンから更新した時、 既存のコードに影響がでそうな変更を 並べたものになります。 変更点を全部網羅しているわけではありません。 箇条書きにすると以下のような感じ： 削除された機能 .toggle(function, function) の用法 jQuery.browser() .live()と.die() jQuery.sub() document 以外の要素での A
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://izimodal.marcelodolce.com/
HTMLで書いたtableのデータをプレーンテキストやCSV、XLSなどのフォーマットでエクスポート出来るスクリプト・「TableExport.js」
[JS]レスポンシブ対応の画像表示テクニック！見せたい箇所を中心にクロップして表示させるスクリプト -FocusPoint![[JS]レスポンシブ対応の画像表示テクニック！見せたい箇所を中心にクロップして表示させるスクリプト -FocusPoint](https://cdn-ak-scissors.b.st-hatena.com/image/square/89b7f74f30b33e347af5955101ddb9470c5139d7/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014082501.png)
plug 'em in WordPressのプラグイン紹介 plug-em in
» [jQuery] IEのプレースホルダー Web Sytem | AIDREAM