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

javascript

複数のカテゴリから残り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日(最終更新:1年前)

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

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

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

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

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

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

どもです。

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

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

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

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

$('フリックする要素').bind('touchstart', function() {
	startX = event.changedTouches[0].pageX;//フリック開始時のX軸の座標
});
$('フリックする要素').bind('touchmove', 
... 続きを読む »

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

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

どもです。

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

 

グローバルナビの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日(最終更新:1年前)

どもです。

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

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

 

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

<script src="/js/jquery-1.11.1.min.js"></script>
<script src="http://jpostal.googlecode.com/svn/trunk/jquery.jpostal.js"></script>

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

<script>
$(window).ready( function() {
	
... 続きを読む »