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

javascript

jQueryのajaxでphpを実行して、配列を返り値にして再びjsで処理したい

Web > javascript 2017年8月18日(最終更新:29日前)

どもです。

ajax、苦手です。

苦手というか、不慣れといった方がいいかもしれません。
以前の仕事では覚える必要性の無いものだったので。

それはともかく、
今回の課題は、jQueryからphpを実行して、返り値に配列を受け取って再びjsで処理 です。

①基本形

※新
$.ajax({
    type: 'POST',
	url :'実行したいphpファイル',
	data:{ 
... 続きを読む »

input type="file"でアップロードされたファイル名を取得(IE9以下も)

Web > javascript 2017年7月13日(最終更新:2月前)

どもです。

jsにて、input type="file" でアップロードされたファイル名を参照する必要がありました。

var fileName = 対象のinput.files[0].name;

解決です。

と思いきや、

これではIE9以下では値が取得できないとのこと。

調べてみたところ、.fileにはFileAPIというものを使用しており、IEは10以上からしか対応していないと。

vistaのサポートも終わったしIE9以下とか捨てていーじゃん(゜-゜)
とか思う気持ちはありますが、仕方ないので対応しましょう。

var 
... 続きを読む »

onblurからのalartで再focusしたらバグる問題

Web > javascript 2017年6月6日(最終更新:3月前)

どもです。
まこと久々のjs関係の更新です。

テキストボックスをonblurで入力チェック、
望んだものでなければalart(もしくはconfirm)を呼び、再びfocusで入力し直させる。

一般サイトだと時代遅れのブツではありますが、
裏側ならまだ現役のalart。
こういったことは、やりたくなることがあると思います。

が、

alert("警告メッセージ");
元のテキストボックス.focus();

他の動作であれば正常に動くのですが、focusに限ってはこれバグるようです。

しかも、ブラウザによってバグの内容が異なり、
firefoxならフォーカスが移動してくれない程度で済むのですが、
cromeだと閉じても閉じても延々とalartが発動し続けるという悪夢が。... 続きを読む »

複数のカテゴリから残り1つのカテゴリを絞り込み、選ばれたカテゴリからページを取得する

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

どもです。

今回のお題はこんな感じ。

カテゴリ①②の両方を持つpostのカテゴリ③だけが表示される→選択されたカテゴリ名.htmlを取得して表示!

…この図でわかるのだろうかw
説明しますと、

複数の種類のカテゴリと(カテゴリ①~③)、
複数のカテゴリを持つ記事(post)を用意

カテゴリ①や②を選択すると、そのカテゴリを含むpostを探し、
そのpostが所持している特定のカテゴリ(カテゴリ③)を取得する

取得したカテゴリ③だけを表示し、取得できなかったものは非表示にする

更に、選択されたカテゴリ名を繋げてURLを作り、ページを取得する

といった仕様と手順です。
URLの取得、ページ取得の処理を変更すれば、様々なものに応用できると思います。... 続きを読む »

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

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

どもです。

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

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

といったご相談を受けました。
他のブラウザは良くて、chromeだけというのが引っかかりますが…。
試してみたところ、同じソースでFireFoxはOK、IEはダメでした。

で、調べてみると、

<button onClick="window.open('*.html', '*', 'width=500,height=500,scrollbars=yes')">OK</button>
<button ... 続きを読む »

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

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

どもです。

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

 

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

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

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

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

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

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

どもです。

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

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

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

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

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

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

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

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

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

h271211

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

h271211-2

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

実現するjQueryがこちら。

$(document).ready(function(){

var radioNow = "" ;

$( 
... 続きを読む »

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

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

どもです。

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

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

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

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

// JavaScript Document
$(window).load(function(){
  
    
... 続きを読む »

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

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

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

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

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

$(function(){
$(".photo a").click(function(){
		var base = $(this);
		var href 
... 続きを読む »