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

javascript

GoogleChrome、IEでwindow.openの幅・高さの設定が反映されなかったら

どもです。

jsでポップアップウィンドウを開くwindow.openについて、
些細な躓きを見つけましたのでご報告をば。

window.openでwidthを設定しているのに、GoogleChromeだと設定が反映されない

といったご相談を受けました。... 全文を読む »

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

どもです。

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

 

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

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

どもです。

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

この方法はいくつかあるだろうけど、今回はjQueryの、ユーザーエージェント識別で対応することにしました。... 全文を読む »

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

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

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

h271211

選択したものを太字に、しないものを薄くしてみました。... 全文を読む »

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

どもです。

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

特徴は以下の通り。... 全文を読む »

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

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

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

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

どもです。

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

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

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

どもです。

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

 

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

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

どもです。

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

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

 ... 全文を読む »

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

どもです。

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

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

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

どもです。

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

ソースは以下の通り。


var figure 
... 全文を読む »

レスポンシブサイトに対応したスライドするスライドショー

どもです。
スライドショーについて、フェードタイプのものカルーセルとしても使えるスライドするもの... 全文を読む »

スマホサイトによくあるタッチでスライドしてくるメニューってかなり簡単に作れる件。

どもです。

スマホサイトを作るにあたって、注意しなければならないのがヘッダー、特にグローバルナビゲーションだと思います。

PCサイトだとヘッダーに情報量が多くてもそこまで支障はありませんが(僕はヘッダーに情報を詰めるの嫌いですが)、スマホサイトで同じことやるとファーストビューがヘッダーのみ、しかも何度かスクロールして漸く本文が出てくるような惨状になります。
直帰率100%は免れません。

ということで、グローバルメニューも常時は隠し、クリックしたらオープンする仕組みにしたい。... 全文を読む »

スクロールについてくる要素にはやっぱりposition:fixedを使いたい

どもです。
今年もあと少し。今日はキーボードを洗おうと思います。

キーボード引っこ抜きには、ダイヤテックのKeyPullerが良さげ。
といっても、これしか持ってないんですけどね(゚∀゚)

 ... 全文を読む »

ブラウザバックしたらjs(jQuery)のイベントが起こってくれないとき、こうすると解決するかもしれない。

どもです。

今回はjQuery弄ってて躓いたのでめもめも。

 

フォームメールcgiに連動したjsを作ったは良いのですが、cgiのフォームは大体が「確認画面」「完了画面」への遷移をします。

入力内容に不備があってエラーになったり、入力した内容を修正したいときはブラウザの「戻る」を使うか、onclick="javascript:history.back()"などブラウザバック機能を搭載したボタンを設置するのが定石です(でないと入力した内容がチャラになりますし)。... 全文を読む »

指定の数だけ文章を量産し、文中の特定の文字列を連番にするjs

どもです。

今回はWeb作成で稀によく陥る「とても面倒くさい作業」への対策をしたいと思います。

成り行き(こういうときにお使いください)

今回、WordPressのカスタムフィールドで従業員情報を登録するということになったのですが、

・画像... 全文を読む »

ページ内で絞込検索やページ送りをするjQuery

どもです。
喉がほの痛い餅。です。

前回のjQueryを改良してみました。

概要

... 全文を読む »

カテゴリや新着を選択してデータ表示を切り替えるjQuery

どもです。
お腹が空いた餅。です。

意外と使いどころのありそうなjsを開発したのでソース晒しときます。

今回の案件は、
「データ一覧を表示するページで、カテゴリのボタンを押すことでデータの表示・非表示を切り替えたい。また、新着記事も同様に処理したい。」... 全文を読む »

ページ送りを簡単に実現するjQuery

どもです。
キングダムハーツ3DS版を購入した餅。です。

まだプレイ時間1時間弱ですが、早速登場したすばせか民たちにホクホク(゚∀゚)
ファンタジー出身の方々とリアル若者との会話ズレが見てて面白いですw

「守ってね、騎士(ナイト)さん?」... 全文を読む »

矢印やサムネで操作するスライドショー

どもです。
美容院で見つけた漫画が思いの外面白くて翌日に中古本屋に行った餅。です。

大判とはいえ一冊360円はやけに高いな…と思ったら、普通に現在も連載中の漫画でした。
美容院の漫画って古いものが置いてあるという思い込みがあったようです。

なんか悔しかったので既刊全部買って帰りました。財布が寒い…... 全文を読む »