jQuery(172)

171follower
harada さんのアバター 13views

AjaxでもURLを変更したい

pushStateという関数で、履歴やURLを操作することができるようです。 たとえばWordPressの検索画面をAjaxで動かしていたら、以下のようにすることで、 AjaxでもURLを変更することができます。 jQuery(docum... 2017年1月6日
nissy さんのアバター 117views

要素に雪を降らせる

LINEをいじっていたら雪が降っていたので、もしかしたらjQueryでできるのではと思ってCodepenを利用してやってみました! See the Pen vywdxd by Nissy (@nissy-02110114) on Code... 2016年12月25日
nissy さんのアバター 40views

jsとjQueryでforeachを行う

phpでよく使うforeachですが、jsとjQueryでもやっぱりできる!!とのことなのでハックに残しておきます。 【javascript】 //forEachメソッドを使う var a=[1,2,3,4,5] a.forEach(f... 2016年12月23日
harada さんのアバター 8views

シンプルなグラフを簡単に組み込める「jQuery Sparklines」

「jQuery Sparklines」を利用することで、シンプルがグラフを簡単に組み込むことができます。 利用方法 jQueryとjQuery Sparklinesを読み込みます。 jquery.min.js jquery.spark... 2016年12月19日
harada さんのアバター 20views

Slider for Bootstrapを利用して値をスライダーで絞り込む

Slider for Bootstrapを利用することで簡単に、値をスライダーで絞り込むことが出来ます。 利用方法 ファイルをダウンロードして、基本ファイルを読み込みます。 bootstrap-slider.css bootstrap... 2016年12月19日
nissy さんのアバター 9views

clickイベントに引数を渡す方法

初歩的内容ですが、よくやりたくなる操作なのでハックに残しておきます。 //以下のような要素を考える <p id='hoge'>click</p> //受け取った引数はevent.dataで引用する functio... 2016年12月15日
harada さんのアバター 35views

複数設置のslickでオリジナルの矢印アイコンを設置する

複数設置のslickでオリジナルのナビゲーションを設置し、それぞれ別に動かす方法です。 JavaScript var $sliders = $(".slide_list"); var $arrows = $('.arrows... 2016年12月12日
harada さんのアバター 19views

slickで最初の画像以外を遅延読み込みにする

slickではlazyLoadオプションが標準で用意されています。 slickのスライドですべての画像を一度に読み込むとページ表示完了までに時間がかかってしまいます。 そんなときこのlazyLoadオプションを利用することで、表示されていな... 2016年12月6日
harada さんのアバター 13views

jQueryで指定したclassが存在したら実行する分岐の書き方

以下のように記述することでclass="home"があるときだけ実行できます。 if($('.home').length) { //classが存在したら実行する } 参考:jQueryで特定の要素が存在するかどうかを判別する処理 c... 2016年12月1日
hirokas さんのアバター 54views

jQueryを使ったクロスドメインAjax通信

Cross Domain Ajax プラグインを用いると、クロスドメイン制約が解除される。 https://github.com/padolsey-archive/jquery.fn/blob/master/cross-domain-aj... 2016年11月29日
harada さんのアバター 27views

jQueryで動的に作成されたDOM要素にアクションを追加する

lightboxのウインドウで別のjQueryプラグインのアクションを実行したかったのですが、lightboxのウインドウは動的に作成されているため、普通の記述では効きませんでした。 以下の記述で無事実行できましたのでメモしておきます。 ... 2016年11月25日
harada さんのアバター 18views

jQueryでweb上の画像にPhotoshopのトーンカーブ設定を適用する方法

そんな魔法みたいなことが、jQuery filter.meというjQueryプラグインで実現できます。 サンプルはこちら 簡単さでは前回の読み込むだけで画像にInstagramのような加工ができるCSSライブラリ「CSSgram」にはか... 2016年11月25日
harada さんのアバター 19views

PHP&jQuery:URLにパラメータを付けてパラメータの内容をフォームで取得し値に挿入する

特定のIDを持つページでフォームへのリンクをクリックした場合にそのページのIDをURLで送信し、どのページからリンクを押したかをフォーム側で取得する方法です。 ※以下のjQuery記述はWordPressの管理画面用になっていますので適宜... 2016年11月17日
harada さんのアバター 40views

jQueryでformのselect要素を選択できない状態にして、かつ値を送信する

IDにselect_inputが設定されたセレクトボックスを選択できないようにdisabledを設定して、なおかつselectedで選択されている値がフォームで送信されるようにするには以下のように設定します。 disabledを設定するだ... 2016年11月15日
harada さんのアバター 27views

iCheck利用時のチェックの判定による動作の切り替え

たとえばWordPressの記事公開のボタンが押された際に、iCheck利用のチェックボックスにチェックが入っているかどうかを調べて、入っていない場合はjQuery Validateを動かすためにrequiredクラスを付与したい場合は以下... 2016年11月9日
harada さんのアバター 30views

WordPressでMasonry+Infinite scrollを利用する2(手動&改善)

以前もかいたことがあるのですが、以前の方法では読み込み中のローディング表示にずれが生じていましたので変更しました。 また、自動ではなく手動で読み込むようにしてみました。 functions.php リンクボタンに特定のクラスを追加 a... 2016年10月31日
Yukimi Sato さんのアバター 93views

jQueryでスクロールしたら上からヌルっと出て来るヘッダーを実装する

参考:【jQuery】ナビゲーションをアニメーションで表示しページ上部に固定する方法 – North-Geek 参考サイトだと、ヘッダーはトップイメージの下にあり、そこが基準になっていますが、今回は下記のようにしました。 ... 2016年10月24日
nissy さんのアバター 28views

jQuery .prev() と.next()の使い方

以下のような、DOM要素があったとき、 <ul> <li>list item 1</li> <li>list item 2</li> <li class="th... 2016年10月9日
nissy さんのアバター 34views

jQuery BabySteps スライド切り替え時に処理を加える

このプラグインでは、以下の用意されている関数で2つの用意したスライドを遷移できるようにしてくれます。 // slide1とslide2は紐付けたいスライドのセレクタを指定 var slide1 = $('#hoge1'); var s... 2016年10月7日
かしこ さんのアバター 41views

jQuery と html と css で複数選択可能なボタンを作る

タイトル通り、複数選択可能なボタンを作ろうと思い作成しました。 とりあえず、ボタンを押したら今押されているボタンのIDを取得して画面に表示させています。 ※ 細かいバグがあるかも ■ index.html <!DOCTYPE ... 2016年10月4日