リアルタイム（現在の）注文状況で繁盛感の演出 - ネットショップの作り方
※中級以上の話題なので初心者の方は読む必要ありません。 ネットショップのデメリットのひとつが、客として訪問したお店が「どれくらい賑わっているのか」、見た目にはわからないという点です。実店舗のお店なら、入ろうと思うと、満席だったり行列ができていたりすると、視覚的に繁盛しているのがダイレクトに伝わってきます。 でも、ネットショップは、例えば「1分間に100万件の注文が入っていても」「1億人がお店のページ見ていても」、まったくわかりません。あるのは「自分はお店を見ている」という感覚だけです。そこで、その繁盛している様子を、視覚的に見せようという試みのひとつが「現在の注文状況」です。 リアルタイムに注文情報を公開したり、最新の注文状況などを公開します。もちろん、一般に公開するのは、個人情報を省いた、商品名や都道府県、金額などです。 店主が望むのなら、商品のサムネイル（小さい画像）を表示させることも
【position:sticky】stickyイベントをjqueryで取得したい
兵庫県三田市でホームページ製作をしいているゴリラドットです。 「position:sticky」とっても便利ですよね。これまでjavascriptやjqueryでゴリゴリスクロールイベントを使って追従させてた部分がホントにcss一行「position:sticky」だけで実装できちゃうんだから。 ただ便利なものを使いだすとさらに欲が出てきて「んじゃposition:stickyが固定になったタイミングでイベントを取得してなんかちょっと半透明にしたり高さコンパクトにしたりしたい！」と思いますよね。つまりstickyイベントを取得したい、というケース。 というコトでここでは「position:sticky」のイベント発火をjqueryやjavascriptで検知してなんか処理する方法を紹介します。 そんなイベントはない いきなり「そんなぁ～…」という阿鼻叫喚が聞こえてきますが、残念ながらsti
【超便利】複数の絞り込み機能をCSSとJSで簡単作成
これでは、少し見づらく、ユーザーにとって使い勝手が悪いと思います。 また、スマホユーザーが増えている中で表を使うのはUIの観点からもとても悪いです。 もしも、一つ一つをボタン形式のカテゴリーで選択して写真が見れるようになれば、 もっと使い勝手がよくなると思いませんか？？ 絞り込み機能の使い方 ペットの例を元に絞り込み機能を実装しました。 以下のカテゴリーを選択すると、条件を満たした画像だけが出力されるようになります。 See the Pen �multiple-sort by ryang0613 (@ryang0613) on CodePen. 別ページでみる 簡単に絞り込みが出来ることが確認できましたか？？ これならスマホ画面でも選択できますし、求めているものが簡単に見つけ出すことができます。 ソースコードはコピーして使う事ができますので、活用して頂ければ幸いです。 ご覧いた
input要素やselect要素を制御するjQueryまとめ | それからデザイン スタッフブログ
検索やお問い合わせなどのフォームで使用されるinput要素やselect要素。条件が多岐に渡るほど、フロントエンドでの制御が必要になります。今回は、それらの要素を制御するjQueryをまとめました。 状態を取得する チェックボックス、ラジオボタンの場合 $(“input”).change(function(){ var checked = $(this).prop('checked'); if( checked === true ){ //チェックが入っている場合の処理 } else if( checked === false ) { //チェックが入っていない場合の処理 } });
jQuery の animate の縦方向の出現や隠す動作
jQuery の animate の縦方向の出現や隠す動作は、height に、show、hide、toggle などを指定することで可能。 指定方法 animate( properties, [duration], [easing], [complete] ) メソッド、もしくは、animate( properties, options ) メソッドの1つ目の引数である properties 内の height: *** に指定する。 toggle toggle を指定。 赤いブロック部分を、クリックすると、グレーのブロック部分が、上方向へ動きながら消える。もう一度、赤いブロック部分を、クリックすると、グレーのブロック部分が、下方向へ動きながら出現。速度( duration )は、slow を指定してある。
スクロールが特定のエリアに入ったかどうかを検知するjQuery | HPcode（えいちぴーこーど）
スクロールが特定のエリアに入ったかどうかを検知するjQuery 以下のような、スクロールがセクション3に入った時にヘッダーの色が赤に変わる例を作ってみました。 HTMLとしては、以下のようなものを用意しました。 対象となるエリアに対して.target-areaを指定してあげます。 <div class="section section1"> <div class="section-content">セクション1</div><!-- /section-content --> </div><!-- /section --> <div class="section section2"> <div class="section-content">セクション2</div><!-- /section-content --> </div><!-- /section --> <div class="sec
特定の要素までスクロールしたら表示される固定ボタン
特定の要素を過ぎたら表示されるボタン 特定の要素までスクロールしたら、ページ下部に固定されたボタンが表示される実装方法をまとめました。 スマホでもパソコンでも使えるように、画面トップからの距離ではなく、表示させたい要素に到達した時に表示されるようにしました。 初めからページ下部に、ボタンやバナーがあるのは邪魔なので、一定の要素まできたら表示させたい時などに便利です。 デモページはこちら DEMO HTML class=”btn-show”のコンテンツに到達したら、固定ボタンが表示されます。 class=”btn-show”のコンテンツよりスクロールが上にきたら非表示になります。 <div class="wrapper"> <div class="contents"> <div class="box"> <p>コンテンツ</p> </div> <div class="box"> <p>コンテ
jQueryで複数リストの要素を並べ替える
Category1 cccccc 投稿:1 人気:4 dddddd 投稿:2 人気:1 aaaaaa 投稿:3 人気:2 bbbbbb 投稿:4 人気:3 Category2 HHHHHH 投稿:5 人気:2 FFFFFFF 投稿:6 人気:4 EEEEEEE 投稿:7 人気:3 GGGGGG 投稿:8 人気:1 新着順 人気順 テキスト順 JavaScript、jQuery、両者を使って要素を並べ替える - すたら日記 上記を参考に各リストの要素がid属性の降順で並べ替えられるのを期待して、下記のようなコードを書いて実験してみました。 $('#btn1').click(function() { $('ul').html( $('ul > li').sort(function(a, b) { return parseInt($(b).attr('id'), 10) - parseInt($
jQueryでリスト表示を絞り込む処理を実装する ｜ Tips Note by TAM
リスト表示をJavaScriptで絞り込んで表示させる機会がたまにあるので、実装方法を3パターン試してみました。 ■目次 選択した項目で絞り込み検索をする 複数の項目で絞り込み検索をする 配列を使ってリスト側に複数の値を設定できるようにする 1. 選択した項目で絞り込み検索をする 以下のデモの様に、リスト表示の上部に絞り込み検索の項目を配置して、その項目をクリックすると絞り込み検索が行われるパターンです。 デモはサッカーW杯の出場国をグループステージの組み合わせで絞り込む実装です。 See the Pen gvMZGM by tam_yi (@tam_yi) on CodePen. 設定方法ですが、絞り込み検索部分、リスト表示部分の両方にdata属性(data-groupという名前にしています)を設定して、値が一致するものを絞り込むようにしています。 例えばグループAを選択した場合、dat
ときどきWEB | 『jQueryで特定のURLが一致したら処理してやんよ!!!』
たとえば共有してるインクルードファイルの記述の中に特定のページにだけバナーやタグを追加したい場合、そのページだけ静的にソースを別個記述するのは更新性的にもイヤなので 特定のページに該当する条件で処理するjQueryをつくる。 1.指定のURLが一致した場合の追加処理 もしこのページにだけ追加したい処理がある場合、URLの下層ディレクトリのファイル名で指定すれば良いので <ul> <li>あああああ</li> <li>いいいいい</li> <li>うううううううう</li> </ul> という記述を共通インクルードファイルに記述していた場合に、特定の下層ページにだけ<li>を追加したいという場合に <ul> <li>あああああ</li> <li>いいいいい</li> <li>うううううううう</li> <li class="eee">えええええええ</li> </ul> と加える。 次にCS
Bootstrap3でtextフィールド内にclearボタンを設置する技 | colori
PCサイトのUIではあまり気になりませんが、スマホサイトのUIの場合、一旦テキストフィールド（input type=”text”）に入力したテキストをクリアさせるのは、ユーザーにとって手間ですよね。 クックパッドなどでは親切に「×」ボタンを用意してクリアできるようになっています。 Bootstrapベースのサイトでもできるのかどうか調べると、素晴らしいサンプルが stackoverflow で紹介されていました。 参考：How do I clear a search box with an ‘x’ in bootstrap 3? class=”btn-group” でくくる それが「テキストフォームと削除用のGlyphiconボタン要素をbtn-grpupでまとめる」というもの。 まずはHTMLコードから。 <div class="btn-group"> <input type="text
jQueryで子要素を取得するfindとchildrenの使い方【サンプル有】 | キノコログ
jQueryで子要素を操作する時の処理についてまとめました。 直下の子要素のみを指定する.children .child()メソッドは、指定した要素の直下の子要素を指定できます。 下記のソースコードは、直下のli要素の文字を赤くする、という指定で処理をしています。 <ul class="ex01"> <li>リスト1</li> <li>リスト2</li> <li>リスト3</li> <ul> <li>リスト4-1</li> <li>リスト4-2</li> <li>リスト4-3</li> </ul> <li>リスト5</li> <li>リスト6</li> </ul> <script> $(function(){ $('.ex01').children('li').css('color', 'red'); //$('.ex01 > li').css('color', 'red'); も同じ処理
jQueryで$(this)の使い方【サンプルコード有】 | キノコログ
jQueryで扱うthisについてまとめました。 開発する上で重要なセレクタとなりますので、必ず理解した上で活用してみましょう！ jQueryの$(this)とは？イベントを引き起こしたjQueryオブジェクトを指します 「this」とは日本語で「これ」という意味です。 そして、「$()」はjQueryオブジェクトを指します。 2つを組み合わせると「$(this)」となるのですが、これは 「イベンドハンドラ内で使用できる、イベントを引き起こしたこの要素」 を指します。 上の例で言うと、イベンドハンドラ内で使う$(this)は、「クリックされた$('.hoge')要素」ということですね。 このサンプルコードは、クリックされた要素を$(this)で取得し、文字色を赤くするといった処理をしております。 <p class="hoge">テキスト1</p> <p class="hoge">テキスト2
jQueryで複数のjsファイルをまとめて動的に読み込む | ITハット
jQueryで複数のjsファイルをまとめて動的に読み込む 大規模なサイトを作る際は目的別にjsファイルを分けて作業します。ツールを使ってそのファイルを統合してもよいのですが、分けてあった方がわかりやすいですよね。そこで、jQueryでまとめて読み込む部分を実装すれば楽になれると思ったので紹介します。 htmlファイル <!DOCTYPE html> <html lang="ja"> <head> </head> <body> </body> </html> ９行目の import.js に複数のjsファイルをまとめて読み込む記述をしていきます。 jQueryを使って動的に読み込む $.getScript('test1.js'); $.getScript('test2.js'); // 以下、読み込むファイルを記述していく... import.js に、読み込むjsファイルを記述していきます
【jQuery入門】replace()で文字列を置換する方法まとめ！ | 侍エンジニアブログ
こんにちは！フリーランスの桃太郎です。 ユーザ画面に表示する文章の一部をユーザの操作によって別の文字に置き換える処理を行いたい場合、みなさんはどうされていますか？JavaScriptのライブラリであるjQueryではreplaceメソッドを始めとした様々なメソッドが用意されています。 そこで、この記事では replaceメソッドとは？ それでは、まず最初にreplaceメソッドの基本的な知識から学習を進めていきましょう！replaceメソッドは、文字列を任意の文字に置換することができるメソッドになります。 一般的な文字列はもちろんなのですが、HTMLのテキストを取得して置換するようなことも簡単に実現できるので便利です。また、正規表現を使って複雑な条件による置換も可能なので、活用範囲は非常に広いと言えるでしょう。 本記事では、replaceメソッドの基本から応用まで体系的に学べるように構成し
jQueryでreplaceを使って複数箇所の複数の文字列を一括置換する方法
jQueryでreplaceを使って複数箇所の複数の文字列を一括置換する方法 jQueryでreplaceを使って、HTMLページ内の文字列を別の文字列に置き換えることができます。 CMS等のプログラム中で定義されている文字列を別の文字列に置き換えたいときや、たくさんの文字修正があったときなどに便利です。 基本的な使い方から段階をふんで、最終的に「複数箇所の複数の文字列を一括置換する」という動作になるようにしてみようと思います。途中の解説が不要な方は、ページの下までワープしてください。 一つの要素内の該当する文字列を一箇所だけ置換 一つの要素内の、最初にマッチした文字列を一箇所だけを指定した文字列に置き換えます。 <p id="replace">私はみかんが好きだ。みかんなしでは生きられない。</p> $(function(){ var txt = $('#replace').html()
【jQuery】複数の変数に同時に処理をする方法｜ツーブロッカ
cssでなら複数のクラスに同じスタイルを適用するのはとても簡単ですが、じゃあjQueryで変数（ｊQueryオブジェクト）を作った場合、複数のそれらに同時に処理を適用するにはどうしたらいいのか。 これがcssと同じようには行かないのです。 最近知ったいくつかの方法をまとめました！ まず、ベースとなるHTML <div style=”border: dashed 10px #ccc; padding:10px;”> <h1>mergeで結合して一緒に</h1> <div id=”b1″ class=”block”>id=”b1″</div> <div id=”b2″ class=”block”>id=”b2″</div> </div>
$(function(){});って何？jQueryの実行タイミングについて - jQueryを書けるようになりたい(1) - Qiita
$(function(){});って何？jQueryの実行タイミングについて - jQueryを書けるようになりたい(1)jQuery初心者
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQuery Advanced News Ticker Examples
【JS】リセットボタン押下時にフォーム入力値・選択値をリセット、クリアする方法 - Wataame Frog
