As of v4.0.0, the core code of Cropper is replaced with Cropper.js. I recommend you to use the jquery-cropper instead of Cropper. ×
Cropper
As of v4.0.0, the core code of Cropper is replaced with Cropper.js. I recommend you to use the jquery-cropper instead of Cropper. ×
iOS Safariでスクロールしただけでリサイズイベントが発生する原因と対処法 - Qiita
window.addEventListener("resize", function() { alert("ウインドウがリサイズしました。"); }) Mobile Safari (iPhone 6s、iOS 9.1.2)で最初のスクロールをしてみると、縦持ち・横持ちを切り替えていないのにリサイズした旨のアラートが表示されます。 何故こんなことが起こるのか？ iOS 8からスクロール時にアドレスバーが自動で小さくなる仕様となりました。これにより、アドレスバーが小さくなった分だけウインドウサイズが大きくなったと見なされ、リサイズイベントが発生するようになったのです。ウインドウサイズのことを考えれば当然の挙動なのですが、「スクロールしただけでリサイズイベントが発生する」というのはデスクトップでのブラウザに慣れている人であれば違和感を感じるのではないでしょうか。 意図したとおりにリサイズイベント
jquery.diamonds.js - 菱形を並べたデザインをどうぞ MOONGIFT
Webでの表現は基本的に四角が重なった形で表現されます。そのため、デザインする際の効率は良いのですが、そこから逸脱したデザインをしようと思うと途端に大変になります。例えば円形や菱形などです。 今回紹介するjquery.diamonds.jsはそんなデザインが難しい菱形が連なったデザインを実現できるソフトウェアです。 jquery.diamonds.jsの使い方 例です。こんな格好良い表示ができます。 大きさも自由に変えられ、レスポンシブWebデザインに対応しています。 サイズや各ブロック間の隙間は自由に変えられます。 D3.jsのWebサイトでは六角形のデザインが使われています。単純に四角を並べるのに比べると圧倒的にインパクトが強くなります。サイトを選びますが、知っておくと使いどころがありそうです。 jquery.diamonds.jsはjQuery/JavaScript製のオープンソース
【2016年の完全保存版！】フリーで使えるjQueryのプラグイン30選 | TechAcademyマガジン
【2016年の完全保存版！】フリーで使えるjQueryのプラグイン30選 フリーで使えるjQueryのプラグインをまとめています。jQueryは初心者でも扱いやすく最も普及しているJavaScriptのライブラリです。Webサイトの印象も大きく変わるプラグインばかりなので、ぜひ使ってみてください。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 本稿は、Designmodeのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事
jQueryプラグインを使わずにフリック＆ドラッグで動くスライダーを作ってみる | スターフィールド株式会社
レスポンシブサイトが増えてきて、 フリックへの対応の必要性は日々高まっています。 今広まっている多くのスライダーやカルーセルのjQueryプラグインでは フリックやドラッグで動かすことができるようになってきています。 ただ、特殊な使用等のためプラグインがどうしても使えない場合は、 フリックやドラッグでの動きを、 プラグインなしでつける必要が出てくるかもしれません。 そのため、今回はその方法について調べて、 実際に作ってみました。 方法は、↓こちらのサイトを参考にさせていただきました。 jQueryで作る最もシンプルなフリックスライド DEMOはこちら↓ DEMO 参考にさせていただいたサイトではフリックのみに対応する場合だったので、 せっかくなので、マウスのドラッグに対応させる方法を紹介させていただきます。 まず、参考サイトに紹介されていたフリックに必要なjQueryの記述を載せます。 $
[JS]レスポンシブ対応、画像の配置を文字のツラにぴったり揃えるスクリプト -Baseline Element
画像やテキストなど、コンテンツのデザインで重要なのは縦のリズム。 ページ上の指定した要素を文字のベースラインにツラをあわせて配置し、縦のリズムを簡単にデザインできるスクリプトを紹介します。 デモのように罫線を背景にした時には、画像・文字ともに罫線に揃えることも簡単です。
![[JS]レスポンシブ対応、画像の配置を文字のツラにぴったり揃えるスクリプト -Baseline Element](https://cdn-ak-scissors.b.st-hatena.com/image/square/377f2ddc69b2ef9572766d48a6b972e09609fa5a/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015110601.png)
ページ全体の読み込みアニメーションが簡単実現「jqueryIntroLoader」:phpspot開発日誌
Gix075/jqueryIntroLoader GitHub ページ全体の読み込みアニメーションが簡単実現「jqueryIntroLoader」。 ページ全体が読まれるまで、ローディングアニメーションを表示させるjQueryプラグインです。 アプリなどではページ全体を読み終えるまでローディングアニメーションを表示する事が多いですが、WebViewベースでアプリっぽく、を実現する際に活用できそうです 関連エントリ 流行りのYoutube風ローディングバー実装jQueryプラグイン スクリプトで滑らかに動かすローディングアニメーション実装jQueryプラグイン「shCircleLoader」 超カッコ良いプレローディングエフェクトサンプル
横並びの要素の高さを揃えるjQueryプラグイン「matchHeight」がレスポンシブでもバッチリ動いて素敵
高さが異なる要素を横並びにした時に、その高さを揃えたい–生きとし生けるもの全ての夢。 でまぁ今までとあるプラグインを利用していたのですが、レスポンシブで上手く動かないということでなんかいいやつ無いんかい、と探していたところjquery.matchHeight.jsというのを見つけました。 jquery.matchHeight.js – a more robust equal heights plugin for jquery 動き 簡単なデモページ作ってみましたのでどうぞ。公式でいいじゃんと思ったけど一応テストで作ったので。 デモページ 使い方 使い方も非常に簡単。liabru/jquery-match-heightからコードをダウンロードして、 [html] <head> <script type="text/javascript" src="http://ajax.googleapis
【jQuery】リアルな波紋を再現するプラグイン「jQuery Ripple」
bodyや要素ごとに設定できるリアルな波紋を表現する面白いエフェクトです。エフェクトを指定した要素の背景は少しぼかしが入った画像等を使用すると効果的です。
動画パスを指定するだけで簡単に背景動画を設定できる「video-background-js」:phpspot開発日誌
sethborden/video-background-js GitHub 動画パスを指定するだけで簡単に背景動画を設定できる「video-background-js」。 jQueryプラグインの形で、指定したエレメントの背景をビデオに出来ます。 関連エントリ HTML5ビデオの内容に併せて他コンテンツを連動させて切り替えられるフレームワーク「Popcorn.js」 ビデオのここが面白い！を共有できるライブラリ「HTML5 Video Voting」 JavaScriptから簡単に使えるFlashビデオプレイヤー「Flowplayer」
サクッと読める話題 - ネット等様々な話題を誤報を防ぎながら更新
京アニ放火事件を受けて、メルカリに京アニ関連グッズ出品が急増しています。しかし中には高額すぎる出品があったり、そもそもメルカリで京アニグッズ …
Colorbox を使ってちょっと複雑なグルーピングをした画像を出す方法｜TechRacho by BPS株式会社
どうも、shibuso です。最近暖かくなってきたので深夜のドライブ森の中ツーリングで首都高を走ってみたりしましたが、楽しめるもののたまに死を感じる場面に遭遇しますね。ツーリングも運用も安全運転大事。リサイクルも大事。 ところで、先日のikeda さんの記事にもあったColorbox を利用していたのですが、とある使い方をしようとしてはまったので、今回は経緯と解決方法をまとめてみます。 やりたいこと 複数のリンクが同じ内容を表示させ、且つ遷移可能にさせる、というものです。言葉だと中々伝わらないと思うので、図にしてみます。 グループA のリンクからはA の画像を、グループB のリンクからはB の画像を、という風にしたいわけです。実際には画像ではなくHTML を表示したいと考えていましたが、大差は無いのでここでは画像ということにします。 はまった箇所 ダウンロードしたColorbox のexa
jQuery.Deferredを使って、xml読み込んでから他の処理を実行する方法
前回の続きな感じですが、今回はxmlで内容を読み込んだあとに、それぞれの高さを合わせるために heightLine.jsを使うというお話です。 コード的に変な箇所がありましたらすみません。 高さを取得してみる まずはxmlを読み込んだだけのコードです。それぞれのカラムには高さが解りやすいように青色の背景を、その親divには緑の背景を敷いてます。 $(function(){ function textView01(){ $.ajax({ url: "xml01.xml", async: true, cache: false, dataType:"xml", success: function(xml){ $(xml).find('text').each(function(){ var text = $(this).text(); $('.txt01').append('<p>' + text
[jQuery] ウインドウのリサイズ操作が終わった時にだけ処理を実行する | CreativeStyle
タイトルに書いてあることを実現しようとして、少し悩んだのでメモ。 ウインドウのリサイズ操作やjQueryに限らず、短い周期で連続してイベントが発生する場合に、一連の最後のイベントが発生した時にだけ何らかの処理を行いたい時に使えるパターンです。 何も工夫せずに書くと… こんな感じになります。
xmlをjQueryで読み込んで表示する時に注意すること
サンプルコード ひとまず例として以下のコードがあります。ajaxで読み込みます。 $.ajax({ url: "xml01.xml", async: true, cache: false, dataType:"xml", success: function(xml){ $(xml).find('text').each(function(){ var text = $(this).text(); $('.txt01').append('<p>' + text + '</p>'); }); } }); この場合、処理のところで内容を取得するのですが、そのとき.text()で取得するとテキスト内容がそのまま表示されます。 それで問題なければそれでよいのですが、aタグなどのリンクを反映したい場合はこれではダメです。 <text><a href="#">リンク部分</a>テキスト</text> この
サイトで右クリックしたら他のサイトへ飛ばすjQuery
こんにちは、かしゅうです。 右クリック禁止！というサイトがありますが、もういっそ右クリック禁止の約束を破ったら帰ってもらったらいいんじゃないかと思って、右クリックしてしまったら別のサイトに飛んでもらうjQueryを作ってみました。 デモページ デモページは以下から。右クリックすると別ページの飛ぶので注意。 右クリックしたら他のサイトへ飛ばすのデモページ JavaScript デフォルトだと、みんな大好きyahoo.jpに飛びます。optionのurlを指定し、飛ばしたいサイトのurlを入れておけばそちらのサイトに飛ぶようになります。 (function($){ $.fn.rightClickEscape = function(options){ var defaults = { url : 'http://www.yahoo.jp/' }; var setting = $.extend(d
[JS]映画のエンドロールみたいな演出を加えるスクリプト -End Credits
End Creditsの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <body> ... <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script> <script src="static/endcredits.js"></script> </body> Step 2: HTML まずは、エンドロールを呼び出すボタン。 <a href="#creditos" name="creditos">Open Credits</a> エンドロールはdiv要素などに「#credits」を付与し、その中に記述します。通常時は表示されず、ボタンをクリックをすると表示されます。 <!-- Start of Credits -->
jquery.tile.js Demo page
The parameter columns is number of columns. Click this area to see the result of $('.sample2').tile(4);
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
タイプライター風エフェクトを実現するJS「TYPEWRITING」:phpspot開発日誌
背景画像をマウス位置と連動して遠近感を出せるjQueryプラグイン「jQuery Interactive BG」:phpspot開発日誌