ど素人から毛を生やす。<延>

javascript

jQueryでセレクタを複数指定するとコールバック関数も複数起動する

Web > javascript 2016年3月4日(最終更新:3年前)

どもです。

ものっそい今更感あるのですが、初めて遭遇した事柄をば。

 

jQueryのメソッドに.animate()がありますが、これにはコールバック関数なるものを設定することができます。
.animate()の処理を終えたら稼働する関数なので、複数のアニメーションを繋げるときなんかによく使います。

で、このコールバック関数について、セレクタが複数ある場合、コールバック関数も2回起動する
考えてみれば当たり前なのですが、組んでいるときは見落としやすいので記録しておくことにしたのが今回の記事です。

セレクタが複数生じるアニメーションとして、代表的なものがスムーススクロールだと思います。

$("html, body").animate({scrollTop:position},
... 続きを読む »

スマホのとき、画像クリックで通話できるように

Web > javascript 2015年12月23日(最終更新:3年前)

どもです。

スマホ等で閲覧したとき、電話番号の記載されている画像なんかをクリックすると、電話できると良い。
それ自体の実現は、<a href="tel:0000000000">で可能だけど、PC閲覧時にこれは要らない。

この方法はいくつかあるだろうけど、今回はjQueryの、ユーザーエージェント識別で対応することにしました。
そこまでは問題ありません。
問題は、どうやってjsを使って、画像をaタグで囲むかどうかです。

単に、画像をaタグで囲むだけなら方法は色々ありますが、今回は、該当する画像が複数種類あるので厄介です。
できれば自動的に、imgタグ中に置いた値が反映されるようにしたい。

特定の要素をタグで囲むといえばwrapですが、単なるwrapでは、囲うタグの中に変数を設置できないのです。

そこで、.wrap( function(index) ... 続きを読む »

選択した方・しない方、両方がlabelごと変化するラジオボタン

Web > javascript 2015年12月11日(最終更新:3年前)

どもです。
長大なアンケートフォームを作ることになってしまいました。

できるだけ、入力者に負担をかけないフォームにするには、
とにかく文字数を少なくしたり、選択したものが明らかになったりする工夫が必要です。

h271211

選択したものを太字に、しないものを薄くしてみました。
これを応用すると、

h271211-2

こういう多肢選択式(評定)アンケートも可能です。

実現するjQueryがこちら。

けっこうシンプルです。
ラジオボタンがチェックされたとき、親要素のラベルを取得。
その親要素の兄弟要素のcssと、自身のcssをそれぞれ変更させる感じです。

評定アンケートのときは、予めラジオボタンをdisplay:none;にしておくことで、よりスッキリしたフォームにできます。

 

なお、これだけではブラウザバックしたときに変更した色が戻ってしまうので、実際に使うならこんな感じになると思います。
2回同じcss処理を書くことになるので、cssを書くよりクラスを付け外しした方が管理が楽そうですね。... 続きを読む »

レスポンシブに対応したカルーセル(スライドショー)ver2

Web > javascript 2015年11月26日(最終更新:3年前)

どもです。

以前に掲載したレスポンシブ対応のスライドショーですが、
これにいくつか追加要素と変更点を加味したものを作ってみました。

特徴は以下の通り。
・レスポンシブ対応
・スライドで動く
・画像を並べて表示し、中央のもの以外は半透明になる
・フリックにも対応している

大きめの写真が並ぶカルーセルや、サイトのトップページのプロモ向きかと思われます。

というわけでポン_(:3」∠)_

個別の動作についてはコメントアウトで囲んであるので、
いらないものを削除・各セレクタの名前を一括置換と数値の入力でおkです。

CSSについてはこんな感じ。

この記事は役に立ちましたか?
... 続きを読む »

Googleの画像検索っぽく、画像をクリックしたら大きな画像を表示したい

Web > javascript 2015年9月11日(最終更新:3年前)

どもです。
小さい画像をクリックしたら大きい画像が表示される、というのは、よく欲しくなるプログラムです。

が、ライトボックスにはしたくない場合がままあります。
特にスマホサイト。
スマホサイトでライトボックスされると割と鬱陶しい。

ので、Googleの画像検索の如く、クリックしたら下に大きな画像が出てくる感じにしようと思います。

 

これに対応したHTMLはこんな感じです。

 

CSSは最低限この辺が必要かな?

 

jsの解説はソース上に書いた通りです。
大きな画像は.oneの最下部に表示されるため、.oneを小分けにしておくのがおすすめ。
Googleのようにレイアウトを崩さず画像のすぐ下に出てきてくれます。

.imageZoneのCSSですが、必須なのは初期のdispayをnoneにしておくこと。... 続きを読む »

jQueryでフリックイベントを作りたかった件

Web > javascript 2015年8月21日(最終更新:4年前)

どもです。

カルーセルやスライドショーを作るとき、僕は基本的には自作jsを使います。
既成品のプラグインは作成元が日本でなくて権利関係がよくわからなかったり、汎用的故に余分なプログラムが入っていたりするのであまり使用したくないんですよね。

当然、僕の技術の及ばない範囲ではお世話にならざるを得ないのですが、
その「及ばない範囲」は狭いに越したことはない。

ので、今回はカルーセルやスライドショーをフリック(スマホのドラッグ的な)対応させたいと思います。

これらの解決法を載せているサイトは様々あったのですが、どうにも上手く行かないケースが多かったので、jsの書き方によって相性があるのかもしれません。

大抵の場合は、右から左へフリックした場合は中身の要素は右向きにスクロールします。

参考サイトは以下です。
Web Design Note

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった
... 続きを読む »

jQuery1系と2系でslideToggleの挙動が微妙に違う!

Web > javascript 2015年7月8日(最終更新:4年前)

どもです。

ちょっとハマった事件を晒しときます。

 

グローバルナビのliをhoverすると子要素のulがslideToggleで出てくるというどこにでもある仕組みのjs。
以前作ったそれと全く同じ形のを別サイトに設置することになったのですが、hoverしても子要素のulが全く出てこない。

要素を見てみたところ、

h270708

(・∀・)アルェー??
以前作った方のサイトには付与されてない「overflow:hidden」の姿が。

この原因ですが、使用していたjQueryの種類だったんです。
以前のサイトは jquery-2.1.0.min.js、今回はIE対策で jquery-1.11.1.min.js を積んでいました。

で、どうやらjQueryの1系ではslideToggleの対象要素にoverflow:hiddenがついてしまうっぽい... 続きを読む »

jquery.jpostal.jsを使って郵便番号から住所を検索する

Web > javascript 2015年6月10日(最終更新:4年前)

どもです。

フォームメールを設置するとき、郵便番号や住所を入力する欄があることがあります。
郵便番号を入力したら自動的に住所が表示されると親切で良いですね。

というわけで、その方法です。

 

使用するjsは「jquery.jpostal.js」というものです。

head内でjQueryと一緒に読み込みます。

そして、こんな感じの記述をします。
意味は以下の通り。

必要なもののみを記述し、繋げて表示する場合は「%4%5」というように、こちらの記述も繋げて書けばおk。

「click」の行を無くすと、ボタンなしで逐次反映。
一手間省けるのは確かですが、個人的にはボタン有りの方が分かりやすくて親切なんじゃないかなーと思います。

「000」-「0000」みたいな感じで郵便番号の入力欄が2つあるなら、

この部分を、

と変更するだけ。... 続きを読む »

ページを開くと自動的にライトボックスを起動させたい(しかもリンク先がHTML)

Web > javascript 2015年5月29日(最終更新:4年前)

どもです。

ページを開くと自動的にライトボックスを起動させて欲しいとのことでした。
しかも、画像のライトボックスではなく、他ページのHTMLをライトボックスで表示させたいというご要望。

フリーで出回っているライトボックス系プラグインは、HTMLのライトボックスに対応していないものが多いです。
商用サイトは有償、のjQueryであれば結構あるのですが…

 

画像ライトボックスの場合、jQueryを読み込んだ上で、

と記載することで、ページ読み込み完了時にa#firstlinkが自動的に「クリックされる」ことになります。
ので、ライトボックスの指定をしたaタグに対して上記の指定を行います。

 

で、HTMLのライトボックスが可能な商用もフリーのjQueryプラグインなのですが、
venoboxというかなり優秀なものがありました。

SNSで宣伝をすればダウンロード可能です。
詳しい話は配布元のサイト様を見ていただくとして、HTMLを自動的に開くには下記の記述をhead内で行います。... 続きを読む »

数値を割ったり掛けたりして照合したいときにご注意。「2.3」の罠。

Web > javascript > Web > Other 2015年3月5日(最終更新:4年前)

どもです。

jQueryで「小数点第3位以下が入力されている場合、エラーを返す」というプログラムを作りました。

ソースは以下の通り。

照合する数に*100で小数点以下を切り捨て、再度/100で小数点第2位までの数が取得できます。
これと元の数が同じなら、その数字は小数点第2位以上。同じでなければ第3位以下があることになります。

間違いを起こしようのない簡単なプログラムのハズでした。
実際、ちゃんと正しく動作していました。

2.3を入力したとき以外は。

(´・ω・`)なんでやねん。

2.3は「浮動小数点」で対処できない数字

Consoleで調べてみたところ、どうやらfigureBの方が2.29になってしまっているようです。

その原因ですが、2.3は「浮動小数点」という数値の処理形式で対処できない数らしいです。
「浮動小数点」というのは、いわば数値の圧縮形式で(.btm→.pngみたいな感じ)で、桁数を累乗によって扱うもの。これによって膨大な桁の数値も少ないバイト数で扱えるのだそうで。
(例:123000=1.23E+6 ←1.23*10の6乗という意味)... 続きを読む »