画像にビフォーアフターを実装できるjQueryプラグイン - NxWorld
使う機会がありそうなので調べたら、いくつか良さそうなものがあったので備忘録兼ねて紹介します。 商品の使用前後・家などのリフォーム前後・美容室のカット前後といったように、ビフォーアフターを見せたいときに便利なjQueryプラグインです。 全部で3つのプラグインを紹介していますが、どのプラグインも簡単に設置できてほとんどのブラウザで問題なく動作する感じです。 TwentyTwenty 使用方法 「TwentyTwenty」からファイルをダウンロードし、jQueryと併せて必要なファイルを下記のように記述します。 パスなどは自身の環境に合わせて変更してください。 <link href="css/twentytwenty.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/jquery.js
[JS]スクロールして次に表示するコンテンツを引っ張り上げるように表示するスクリプト -pullupScroll
スマフォやタブレットのアプリでよく見かける、次に表示するコンテンツを引っ張り上げるように少しだけ遅らせて表示するjQueryのプラグインを紹介します。 こういうちょっとしたエフェクトって、楽しいですね。 デモページ デモの動きだけでなく、左上のアイコンに3種類のエフェクトが仕込まれていて、面白いです。 pullupScrollの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/equal-height-columns.js"></script> Step 2: HTML 引っ張り上げる各エレメントにclassを付与し、それらを内包する
レスポンシブWebデザインに対応した「jquery.heightLine.js」
レスポンシブWebデザインに対応した「jquery.heightLine.js」 多くの方に方に愛用いただいている要素の高さを揃えるJavaScriptライブラリ「heightLine.js」の新バージョンとして「jquery.heightLine.js」を公開しました。 heightLine.jsとの違いとしては、 jQueryプラグイン化したのでjQueryが必要です 高さを揃えたい要素をclassではなくjQueryのセレクタで指定します レスポンシブWebデザインに対応、特定のウィンドウ幅の場合のみ高さを揃えます destroyとrefreshメソッドを追加、高さ揃えの無効化や再揃えが簡単にできます などがあります。 ダウンロード / サンプル / GitHub 利用方法 まずは、jQueryとjquery.heightLine.jsをページ内で読み込みます。 <script sr
コナミコマンドを入力したときにイベントを発生させるjQueryプラグイン「jQuery.easterEgg」 | バシャログ。
こんにちは。fukasawaです。 最近になって、関内駅の発車ベルが横浜ベイスターズの球団歌であることに気がつきました。アレンジが変わるとなかなか気づかないものですね。 さて、今回ご紹介するのはコナミコマンドを入力したタイミングでイベントを発生させるjQueryプラグイン「jQuery.easterEgg」です。PCから以下のデモページを表示し、「↑↑↓↓←→←→BA」とキーボードを叩いてみてください。コマンド入力後に画像が表示されます。 デモページ ページを表示した後、コマンド入力より先に別のキーを叩いたりするとイベントが発生しません 入力失敗した場合は一度リロードしてからもう一度入力してください ページ内に隠しコンテンツを作成し、コマンド入力に合わせて表示したい場合などに使えるかもしれません。 jQuery.easterEgg 使い方 jQueryとjQuery.easterEggを読
『jQuery バージョン毎の違い。変更点【JavaScript】』
個人的jQueryメモ jQuery1.4.4 + IE8以下の場合、jQueryのセレクタ周りにバグというかIEｱﾌｫ！のせいか動作が劇的に重い。 特にClass名でセレクタ指定していると半端ない。＞＜； たとえばtableのtdにそれぞれClassを付けて、違う動作または条件分岐を行う。 10行や20行だと問題ないように見えるが、100行ほど表示させるとハングアップするｗ 列数によっては50行ほどでもハングする。（どれぐらいでハングするかはPC性能にもよります） ジーっと待っていると次の警告が。 「このページのスクリプトが、Internet Explorer の実行速度を遅くしています。～～スクリプトを中断しますか? 」 いつまでたっても処理が終わる気配がないので「はい」を選択するしかない。 まったく同じ作業をFireFoxやGoogleChromeにさせるとビックリするぐらい早い。
[jQuery]要素の高さ・幅を取得する | バシャログ。
iPhone5sはどうせすぐには手に入らなくてもよいとおもいゴールドを予約したtanakaです。 今日はjQueryでブラウザに表示されている要素の高さや幅を取得する方法についてまとめます。 …といってもjQueryユーザーであれば$(...).height(), $(...).width() でOKってことはご存じかと思います。 それも紹介しますが、それ以外の方法についてもまとめます。 $(...).height(), $(...).width()について DOM要素の高さ、幅を取得するメソッドです。弊社ウェブサイトのホームにある以下の要素で値を取得してみます。 $('div.info:first').height() // => 120 $('div.info:first').width() // => 200 上記のような感じで取得できます。ChromeのDeveloper Tool
外部サイトへのリンクにtarget=_blank属性を追加（jQuery）
外部サイトへのリンク jQueryを使って、外部サイトへのリンクにtarget=_blankを追加する仕様にしました。 外部へのリンクにtarget=_blank属性を付けることはアクセシビリティの観点から望ましくない。つまり、別ウインドウで開くかどうかはユーザーが判断すべきとされてきましたが、これだけタブブラウザが普及するとかえってアクセシビリティ上よろしくないという気がします。 といって膨大な記事の中から外部へのリンクを探し出して、手書きでtarget=_blank属性を追加するのも大変な作業量です。 そこで、jQueryを使って処理することにしました。 関連リンク Wordpress: 外部リンクをtarget=_blankに - blog.eラーニング.co.jp jQuery (document).ready( function () { jQuery ('a[href^=htt
ブラウザ上でCSSによる3Dを作れるエディタ・「Tridiv」
Tridivはブラウザ上でCSSによる3Dシェイプを作成出来るエディタ。予め用意された複数のシェイプを使って3Dコンテンツを作ることが出来ます。面に画像を使う事も出来ますが、こちらはURLを指定する形になるみたい。 Tridiv
jQueryで手軽にサクッとシンプルなニュースティッカーを作る
今更なTipsなんですけど、まぁ自分用の 復習的な記事です。カスタマイズしやす いニュースティッカーを作るコードで、 1行でも4行でも画像でも、cssで見た目 をスタイルするだけで少量のコードで 実装する事が出来ます。 いろいろプラグインを紹介しておいてアレですけど、実際プラグインに依存すると困ることのほうが多いので簡単なものは簡単なコードで実装出来る程度にはしておきたい所ですね。 Sample:01ティッカーです。実際こんな風には実装せず、目立たないところに配置しますけど・・ 以下のコードで実装します。 function ticker(){ $('#news li:first').slideUp( function(){ $(this).appendTo($('#news')).slideDown(); }); } setInterval(function(){ticker()}, 50
戻り値で関数から値を返すreturnを今一度勉強しなおしてみた
JavaScriptとかjQueryとか使っていろいろしてきていたんですが、今一度ちゃんと基礎を勉強＆復習しておかないとやばそう。覚えていないこととか多々あるので、基礎から勉強しなおしてみることにしました。 まずは「return」について。戻り値とか値を返すとかはわかるのですが、どう使うの？使いどころは？どうなるの？いろいろやってみた。 とりあえず、Firebugを使って色々入力してみることにします。 return; //SyntaxError いきなりreturnだけしてもエラーだよということですね。何かに値とか返すよ～って時に使うものとのこと。 それならってことで、関数の中に入れてみた。 function test(){ return; }; test(); //undefined でも、returnだけしても、何も返すものがないので、undefined。 じゃあ、trueってのをいれ
jQueryによるフォームデータ取得方法のまとめ
jQueryによるフォームデータ取得方法のまとめです。 フォームデータの取得で分かりにくいのは、セレクトボックス・ラジオボタン・チェックボックスの3種類ではないかと思われます。本エントリーではこの3種類にターゲットを絞り、動作サンプルを用いて解説します。「$」は「jQuery」で記述しています。 2012.06.19追記：テキストフィールド・テキストエリアの取得方法も追加しました。 2014.05.11追記：チェックボックスの取得方法をattr()からprop()に変更しました。 ネットで検索したところ、まとまった記事がなかったので自作しました。なお、本エントリーに掲載している方法以外にも色々なやり方があると思いますので、一例として参照して頂ければ幸いです。 １．セレクトボックスの値を変更したときに取得 セレクトボックスの値を変更したときに取得するには、changeイベントとval()を組
素晴らしいjQueryのスライダーを集めた「25 Excellent jQuery Sliders Tutorials and Plugins」
TOP > WebDesign > 素晴らしいjQueryのスライダーを集めた「25 Excellent jQuery Sliders Tutorials and Plugins」 非常に高機能でWEB制作には幅広く利用されている、jQueryプラグインですが、その中でも定番とも言えるのがスライダー。限られた領域でjQueryのプラグインの中でも多く利用されているスライダープラグイン。今日紹介するのはクオリティの高い、素晴らしいjQueryのスライダーを集めたエントリー「25 Excellent jQuery Sliders Tutorials and Plugins」です。 A Beautiful Apple-Style Slideshow Gallery with CSS & jQuery 定番の右から左へ流れるもの、トランジションが効いているもの、キャプチャやサムネイルと連動
ギャラリープラグインデモいろいろ
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のoneでフォームの2重送信を防止する - メモ置き場
フォームのサブミットボタンをダブルクリックすると、リクエストが何度も飛んでしまうことがあるので、なんとかしてくれって要件がたまにあります。 普通のinput type="submit"だったらdisableにしたりするんじゃないかと思います $("input[type=submit]").click(function() { $(this).attr("disabled", "disabled"); }); anchorタグとか、なんでもいいんですが、form要素じゃないものにイベント貼り付けてフォームをsubmitさせてるときはどうなるでしょうか disabled属性は効きません こんな例をみつけてちょっとなるほどと思ったのでメモしておきます。 jQueryのoneを使うってやつです。 $("a.button").one("click", function(e) { e.preventD
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ふじこのプログラミング奮闘記
Disable/enable an input with jQuery?
タッチができてレスポンシブなカルーセル実装jQueryプラグイン「Owl Carousel」:phpspot開発日誌
http://www.landofcoder.com/jquery-plugin/127-lof-jslidernew-plugin.html
5509.me
p010:リアルタイムバリデーションをAjaxでやってみる: まじめにWeb制作