タグ

jQueryに関するryownetのブックマーク (50)

  • LPからの離脱時にポップアップ表示機能を導入する - Qiita

    やりたいこと 広告や他社に出稿してるページから弊社の企業ページにランディングした時、 「戻る」というアクションをした時に離脱防止をするためのポップアップを表示させたい PC・SPでもどちらでも動いて欲しい 前提 jQuery を1.9 以上に上げること 内容 <script type="text/javascript"> $(function(){ jQuery(document).ready(function(){ (function(b) { var c = function() { this.initialize(); }; c.prototype = { initialize: function() { history.replaceState("beforeunload", null, null); history.pushState(null, null, null); b(w

    LPからの離脱時にポップアップ表示機能を導入する - Qiita
    ryownet
    ryownet 2020/02/19
    SP離脱防止のやつ。うざいけどCVRが如実に上がるので短期的には使ってしまう
  • 一休.comホテルページのスマホ版からjQuery依存を取り除くためにやったこと - 一休.com Developers Blog

    一休.comでWebフロントエンドを開発している宇都宮です。 先日、一休.comホテルページのスマホ版から、jQueryを取り除きました。jQueryを取り除いた経緯、やったこと、結果について書きます。 ちなみに、ホテルページには以下のURLでアクセスできます(スマホで開くか、PCの場合はUAをスマホに偽装する必要があります) https://www.ikyu.com/sd/00001290/ なぜjQueryを取り除いたのか? どうやったのか 何をやったのか jQuery.ajax() => fetch に置き換え fetchのpolyfillを採用した理由 DOM操作を標準APIに置き換え 要素の取得 show/hide addClass/removeClass html/text アニメーション $.ready() イベントフィルタリング jQueryの使用を防ぐ目印 jQuery削

    一休.comホテルページのスマホ版からjQuery依存を取り除くためにやったこと - 一休.com Developers Blog
    ryownet
    ryownet 2019/01/17
    コスパが悪かったで締められてるけど4ヶ月をUI改善とかにあてればもっと測りやすい成果になったのではと思った
  • jQuery Floating Widget plugin demo - terkel.jp

    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qu

  • jQueryを使うなら知っておきたいjQueryプラグインの作り方|クロノドライブ

    現在、JavaScriptのライブラリであるjQueryは多くのWebサイトで使われ、フロントエンドのコーディングを支えています。ただ、様々な関数が用意されているとはいえ、デフォルトで用意されている関数だけでは実現できない処理があったり、処理をコンパクトに記述したいことがあると思います。 そのような場合はjQueryのプラグインを作ってしまい、処理をjQueryの関数の一つとして使うことをお勧めします。 コラムでは、jQueryプラグインの作り方と基的なサンプルをお伝えします。 jQueryプラグインの例 それでは、早速jQueryプラグインの例を見てみましょう。

    jQueryを使うなら知っておきたいjQueryプラグインの作り方|クロノドライブ
    ryownet
    ryownet 2015/07/01
    基本ね
  • timedropper jQuery time plugin

    DateDropper datedropper JS is a Pure Javascript user-friendly date picker that allows users to easily select a specific date from a calendar-like interface. What does Datedropper do Datedropper streamlines date selection, saving time and reducing errors. This datepicker allows users to select the desired date by clicking on it. The selected date will then be displayed in the input field and can be

    timedropper jQuery time plugin
    ryownet
    ryownet 2015/02/23
    終わったとされるjQueryプラグインだからこそ、サイトがこんなにおしゃれでないと話題にならない。モバイル最適なカレンダー入力UIの提案ね。いいね
  • Bower入門(応用編) - from scratch

    Bower入門(応用編) さて、応用編を書いていきます。 基礎編ではBowerのインストールとライブラリ管理する上での基的なコマンドを紹介しました。 応用編ではBowerのライブラリを管理する上で利用するべきツールやライブラリを公開する上で心がけるべきことについて書いていきます。 少し長いのでサマリ Bowerを管理する上で利用すると良いツール:grunt-bower-taskがオススメです ライブラリを公開する上で心がけること、その1:mainとignoreをちゃんと書きましょう ライブラリを公開する上で心がけること、その2:ちゃんとgit tagを使ってバージョン管理しましょう Bowerからインストールしたライブラリを利用する場合 前回の基礎編で少し書きましたが、おさらいすると、Bowerはあくまでパッケージマネージャなので、インストールしてもフォルダ構造までは変えてくれません。

    Bower入門(応用編) - from scratch
    ryownet
    ryownet 2014/10/26
    grunt-bower-taskを使ってbowerでパッケージ管理、JSのパスはgruntにまかせる
  • jQuery.SnapScroll

    ryownet
    ryownet 2014/07/09
    スクロール位置吸着プラグイン。ヘッダフッタなどは吸着して見えなくならないのでwindows.jsより良い
  • [JS]最近よく見かける1ページ垂直スクロールコンテンツで、スクロール位置を自動補正するスクリプト -windows.js

    スクロールしすぎも補正 windows.jsの使い方 実装は簡単で、既存のコンテンツにclassを加えるだけで適用できます。 Step 1: HTML HTMLは各コンテンツを配置しているdivやsectionにclassを加えるだけです。 classは変更可です。 <section class="window"></section> <section class="window"></section> <section class="window"></section> <section class="window"></section> <section class="window"></section> Step 2: 外部ファイル 「jquery.js」と当スクリプトをhead内に記述します。 <script src="http://cdnjs.cloudflare.com/aja

  • jQuery でアニメーションの前後に .css() とか .addClass() とかしたい時に .queue() を使う - ダーシマ・ヱンヂニヤリング

    やりたいこと jQuery の animate メソッドを使って見た目を作っている時、アニメーションの完了後にクラスを付与したいとか、 CSS を変更したいというようなことはよくある。これをエレガントな感じに書きたい。 何も考えずに jQuery っぽく書いてみる $('.target') .animate({ left: '100px', top: '100px' }, 500, 'swing') .css('background-color', 'red'); これだとうまくいかない。アニメーションが終了した時に背景色が赤になってほしいが、アニメーションが始まったと同時に赤くなってしまう。 animate のコールバック関数を指定する 解決策のひとつとして、 animate メソッドの最後の引数にコールバック関数を指定する方法がある。指定したコールバック関数は、アニメーションが完了した

    jQuery でアニメーションの前後に .css() とか .addClass() とかしたい時に .queue() を使う - ダーシマ・ヱンヂニヤリング
    ryownet
    ryownet 2014/06/09
    jqueryアニメーション終了後のコールバックをきれいに書く方法
  • jQueryのfind()を利用した高速化

    jQueryのfind()を利用した高速化 最近、jQueryのfind()のちょっとよろしくない使い方をチラホラと見かけるのでfind()の高速化について解説をします。 アンチパターン 最近、見かけたパターンとしては以下の様なものがあります。 $('.foo #bar') このセレクタをfind()を使って高速化する為に以下のように書きなおす。 $('.foo').find('#bar') というもの。これは、ケースによっては高速化が見込めるものの、多くのケースでは低速化されてしまいます。 また、以下の様なパターンも見かけました。 var $ul = $('ul'), $a = $ul.find('.a'), $b = $ul.find('.b'); $a.css('color', 'red'); $b.css('color', 'green').text('Hello'); こちらも、

    jQueryのfind()を利用した高速化
    ryownet
    ryownet 2014/01/07
    基準となるjQueryオブジェクトの要素を少なくしぼって、それからfindすると良いという話
  • スマートフォンサイトにフリック・スワイプ実装できるjQueryスライダプラグイン

    ※コメントにも頂いておりますが、この公開版はバグがありますので、承知の上でご利用になるか、ご自身でカスタマイズされる方がお使いください。 スマートフォンサイトにおいて、左のムービーのようなフリック動作ができる画像スライドのjQueryプラグインを作りました。(ムービーはiOSシミュレータによるデモです)iPhoneAndroidでご覧の方はデモに直接アクセスしてください(ムービーは再生されません)。 【デモを見る(iPhoneAndroidで見てください)】 【ダウンロード】 なぜプラグイン化したか 横向き対応がハードルを高くする ご自身でこの手のUIを組んだ経験がある方はわかると思いますが、絶対配置(position:absolute)を使ったリキッドレイアウトを組むのはなかなか手の込んだことが必要で、今後の仕事で都度ゼロからUI作成を行うのは効率が悪くなってしまうと思ったからです。

    ryownet
    ryownet 2013/11/04
    フリックスライド
  • クリックしてカードをめくる - jsdo.it - Share JavaScript, HTML5 and CSS

    (function($){ $.fn.rotate_box = function(){ var elm = $(this), elm_in = $('.inner', this), btn = $('.face, .back', elm), deg = 0, turn = false, turn_cls = 'reverse'; var rotate_anm = function(){ elm_in.css({ 'transform' : 'rotateY(' + deg * -2 + 'deg)' }); }; var rotate = function(){ setTimeout(function(){ rotate_anm(); if( deg == 45 ){ if( turn === false ){ elm.addClass(turn_cls); } else { elm.re

    クリックしてカードをめくる - jsdo.it - Share JavaScript, HTML5 and CSS
  • ScaleOut | Supership

    2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。件に関する詳細は、プレスリリースをご確認ください。 2024年4月1日より、Supership株式会社は親会社であるSupershipホールディングス株式会社に吸収合併されました。 合併に伴い、存続会社であるSupershipホールディングスは社名をSupershipに変更し、新たな経営体制を発足しました。 件に関する詳細は、プレスリリースをご確認ください。

    ScaleOut | Supership
  • FlexSlider 2

    // Can also be used with $(document).ready() $(window).load(function() { $('.flexslider').flexslider({ animation: "slide" }); }); <!-- Place somewhere in the <body> of your page --> <div class="flexslider"> <ul class="slides"> <li> <img src="slide1.jpg" /> </li> <li> <img src="slide2.jpg" /> </li> <li> <img src="slide3.jpg" /> </li> <li> <img src="slide4.jpg" /> </li> </ul> </div>

    ryownet
    ryownet 2013/06/18
    jQスライダー
  • Webサイトの読み込み体感速度が2秒くらい上がるかも。SNSボタンは後から読み込め! - Web学び

    2012年 6月 13日 新しいサーバーでブログをリニューアルして気がついた、SNSボタンの有無でかなり読み込み速度に差がある。といっても2,3秒ほどですが、これは結構命取りだったりします。 まぁ私もそんなに詳しいわけではないので断言できませんが。 ・訪問者はその数秒でサイトから逃げる ・Googleはその数秒を評価基準に入れる たしか遅延ロード(Lazy Load)とかいう技術ですね。 わりとポピュラーなコードで何とかなったので書いときます。 ピュアなJavaScriptではなく、jQuery使いますね。 方法その1 時限式読み込み body閉じタグの前あたりに書きます。 . . . <div id="snsbox"></div> <script type="text/javascript"> var snscode = 'ここに、SNSのコードを書く' + '一行でつなげても良いが見に

    Webサイトの読み込み体感速度が2秒くらい上がるかも。SNSボタンは後から読み込め! - Web学び
    ryownet
    ryownet 2012/06/14
    ボタン類をまとめて後で読み込む方式
  • ページ内でどれくらいスクロールされているかをGoogleアナリティクスで解析する為のjQueryプラグイン・Scroll Depth

    ユーザーにどれくらいページ内で スクロールされているかをGAの イベントAPIを使って解析する為 のjQueryプラグイン・Scroll Depth のご紹介。 スクロールに応じて視差効果を演出できるパララックス系サイトやペラサイトのような1ページで完結するタイプのコンテンツを持つサイトは割と見かけるので、どれくらいスクロールされているかを解析する方法もあるといいかもですね。という需要に応えたライブラリみたいです。 ※時間なくて動作テストしてないのでその程度の記事という事で今日はご了承下さい。 ユーザーのスクロール状況をパーセンテージでトラッキングするプラグイン。デフォルトでは25%、50%、75%といったポイントで解析できるようになってるみたい。また、任意のDOM要素をターゲットにする事も出来るそうです。 コード<script src="https://ajax.googleapis.c

    ページ内でどれくらいスクロールされているかをGoogleアナリティクスで解析する為のjQueryプラグイン・Scroll Depth
    ryownet
    ryownet 2012/05/24
    これを使った解析で何を得られるかを語らないと導入する意味ないね。俺用メモ
  • jQueryをロードする際のナイス!と思った書き方

    概要 ▶ 出典:Initializr - Start an HTML5 Boilerplate project in 15 seconds!先日開催された「CSS Nite in NIIGATA, Vol.3 with Microsoft」でせっかくHTML5の事を学んだので、実際に使ってみようと勉強を進めています。このブログも実はPC版は形式上HTML5のページになっているんです。見た目はほとんど変わって 出典:Initializr - Start an HTML5 Boilerplate project in 15 seconds! 先日開催された「CSS Nite in NIIGATA, Vol.3 with Microsoft」でせっかくHTML5の事を学んだので、実際に使ってみようと勉強を進めています。 このブログも実はPC版は形式上HTML5のページになっているんです。 見た目

    jQueryをロードする際のナイス!と思った書き方
    ryownet
    ryownet 2012/05/21
    それHTML5 boilerplateのベストプラクティスだから、何も知らずにinitializr使うよりそれぞれ単体で使ってみたほうが勉強になるよ
  • jQuery UI Bootstrap

    A preview of the jQuery UI Bootstrap themejQuery UI Bootstrap A Bootstrap-themed kickstart for jQuery UI widgets (v0.1) Welcome! This is a live preview of new the jQuery UI Bootstrap theme - a project I started to bring the beauty of Twitter's Bootstrap to jQuery UI widgets. With this theme, not only do you get the ability to use Bootstrap-themed widgets, but you can now also use (most) of Twitter

    ryownet
    ryownet 2011/12/31
    jQueryUIを使ったTW-bootstrapを簡単に利用するFW
  • 【解決】jQueryを利用しているブログで、IEでの閲覧が上手く動かない場合の対応方法について

    2013/6/26 問題は解消しました。今後はjQuery利用のサイトでZenbackを設置いただき、IEで閲覧しても問題なくウィジェットが表示されます。 zenbackは、スムーズな読み込みを実現するエフェクトのためなどにjQuery 1.4.2を利用しています。 そのため、ブログ側で違うバージョンのjQueryを利用しているサイトでは、IEのみjQueryのコンフリクトが発生し、zenbackが表示されないことがございます。※大手ブログサービスをご利用で、ご自身でjQuery設置を含むカスタマイズを行っていなければ、件は対応不要ですのでご安心ください。 この事象を回避するには、お手数ですが、ブログ側で利用している jQuery で以下のようなご対応をお願いいたします。 (1)jQuery の関数名を '$' で利用するのではなく、 'jQuery' で開始するようにする。 (2)j

    【解決】jQueryを利用しているブログで、IEでの閲覧が上手く動かない場合の対応方法について
    ryownet
    ryownet 2011/12/12
    zenbackはユーザを馬鹿にしてるのか? 埋め込みJS側でまずjqueryの存在とバージョンを確認してから読み込んでくれないと、強制的に1.4.2にデグレさせられる。jQuery().jqueryでできるのに #zenback
  • pushStateに対応している場合には利用して、それ以外にはjQuery.hashchangeを使う < egashira.jp

    pushStateに対応している場合には利用して、それ以外にはjQuery.hashchangeを使う Last Update: 2011-10-14先日に引き続きpushStateに関する話題です。この前はpushStateに対応していない場合にはlocation.pathnameもlocation.hashも変わらず、ブラウザの履歴には何も残らない状態でした。このサイトはIEの比率が高くないのでいいんですが、別途作っているサービスではWeb初心者の比率が高く、IEユーザにも配慮する必要があるため、hashchangeも利用することにしました。以下は簡単なサンプルです。pushStateに対応していない場合にはhashchangeプラグインは必要無いので別ファイルにして選択的にロードするとか改良の余地はありますが、IE6やIE8なんかでも意図したとおりに動作しているので良しとします。 $

    ryownet
    ryownet 2011/12/12
    pjaxをjquery.hashchangeも使っていい感じに