MyController

WEB業界素人の僕がまた見返しそうなことのメモです。

JavaScript

【JS】Audio要素をスマホでも上手く再生する方法

やりたい事は、ボタンを押したら初めて音楽流れ始めてループ再生させるだけ。PCではうまくいくがスマホだとほとんどダメだった。 とりあえず下記だと上手くいった。 時間無いので下記コピペ。JS // オブジェクトを生成 var url = "./music.mp3"; var audio =…

【JS】アニメーション以外でも順番に処理する方法

普通にanimateとかならcompleteとかを使うけど、 動きではない場合とかでも使える。これやらないと下記のようなコードだとスクロールトップに行くと同時にrelativeになったりして、 上手く表示される場合とそうでない場合がある。 $.when( $('#mamaGroup').c…

【JS】ローカル時刻によってリダイレクトさせる(リファラ―付)

何かいろいろとやり方はあるだろうけど、こんな感じにかけばGAとかの解析でもリファラ―拾ってくれるみたいなのでこれでいいんじゃなかろうか。詳細はググってください。 結論、下記の●●を変えるだけ。 <script> $(function(){ //現在時刻を取得 var date_obj = new D…

【JS】良く使うJSメモ(全体をふわっと表示してその間はスクロール禁止、ワンホイールでスルスルスクロール)

ソース的に分かるかと。 CSS省略するけど、body初期値をopacity:0にしておくくらい。 JS function Animation() { "use strict"; this.initialize(); } Animation.prototype.initialize = function() { this.$window = $(window); this.$document = $(documen…

【JS】スクロールイベントの挙動、each functionが上手く動作しないときに確認すること

おそらくは になっていない。これがないとブラウザにしっかりとhtml5であるということをお知らせ出来ないので変な挙動になるらしい。ちなみに自分はeachで順番にスクロールに合わせて文字が出てくるだけという簡単なスクリプトにおいて、 ちょっとスクロール…

【JS】はじめてのcanvas入門

とりあえず長方形を描くのはこんなん。htmlは JS //要素の取得 var canvas = document.getElementById( "canvas" ); //canvas要素から描画コンテキスト取得 var ctx = canvas.getContext( "2d" ); //パス初期化 ctx.beginPath(); //rect(x,y,横、高さ) 長方…

【JS】モーダルウィンドウをモダンに書く勉強

コンストラクタ関数、プロトタイプの考え方で書いたやつ。HTMLではリンクにdata属性で番号を付与、画像を押して拡大した画像が次へボタンとかでちゃんと移動できる。 ウィンドウのロード、リサイズ時も対応済み。ただしあくまで静的なHTMLにのみ対応してる。…

【JS】クリックしたら対象のhtmlタグをそのまま拾ってくるやり方

例 html <a href----------><img src -------></a> ■まるごととってくる JS var $target = $(e.currentTarget); 結果 <a href----------><img src -------></a> ■中身をとってくる JS var $target = $(e.target); 結果 <img src ------->

【JS】インスタンスの継承-プロトタイプチェーン-

コードを見れば理解できるかと。 要は継承できるってこと。 よくわからん人は前の記事を先に参照して。 hiromode.hatenablog.com 本題というかコード。 var Animal = function(){};//コンストラクタ Animal.prototype = { walk:function(){ document.writeln…

【JS】javascriptにおけるコンストラクタ(クラス)、プロトタイプ、インスタンス作成の説明

■流れ 1.クラス(コンストラクタ)作成 2.インスタンス化 3.実行 ■コンストラクタについて ・あくまでオブジェクトを作るための準備、つまり初期化が目的なのでコンストラクタからオブジェクトを返してはならない。 ・オブジェクト生成するのを想定し…

【JS】エラーを厳格にチェック

知らんかった。 "use strict"; と、関数内に最初に書くとエラーを厳格にチェック出来るらしいので開発中には入れた方がよさげ。 例 "use strict";var greet = "Hello World."; 参考というか詳細は下記 JavaScriptでの”use strict”宣言によるStrict モードの…

JSの関数メモ(超初心者用)

今更ながら関数の使い方。 完全自分のメモ用です。 $(function(){ //-------------------------------- var m = menseki(5); //ログ出力 console.log(m); //-------------------------------- }); function menseki(r){ var m = r * r; return m;}

【JS】固定ヘッダ対応のスムーズスクロール

結構汎用的に使えるし使うので。 // スムーズスクロール // #で始まるアンカーをクリックした場合に処理 $('a[href^=#]').click(function() { // スクロールの速度 var speed = 400; // ミリ秒 // アンカーの値取得 var href= $(this).attr("href"); // 移動…

【JS】アニメーションした後に処理を実行

こんな感じ //クリックイベント $('.menucover span').click(function(){ $('.menucover').stop().animate({ top:-793 },500,function(){ ここの処理はアニメーション終わった後に実行される }); })

【デザイン】今後参考にさせて頂くかもなサイトと気になったデザインの実現ヒント

背景の縦グリッドを簡単に実現 http://epoch-inc.jp/http://1st-touch.jp/about/http://norgram.co/http://thefotonaut.com/en/http://www.archi-k.com/ 縦グリッドはCSSでこんな感じのよう。 leftで指定px; transform: matrix(1, 0, 0, 1, 0, 0); ボックス…

【JS】スマホのセンサーにアクセス

後で読むhttp://www.atmarkit.co.jp/ait/articles/1409/03/news109.html

【JS】ボタンをクリックするたびにクラスを付与したり消したりする

これだけ。 フラグ立てる必要もないので便利。 1.Toggleの場合 (function($) { $(function() { var $header = $('#top-head'); // Toggle Button $('#nav-toggle').click(function(){ $header.toggleClass('open'); }); });})(jQuery); 2.click each $("…

【JS】以後表示しないリンクを押すとcookieに有効期限付きで保存する方法

宣言 /* キャンペーン終了日 */^M var end_date = new Date('2017/01/01');^M end_date.setDate(end_date.getDate() - 7); cookie_key = 'XXXXX'; /* 以後表示しない */^M $('.popup_after_not_disp').on('click', function(){^M $('button#cboxClose').clic…

JavaScriptにおけるバリデーションチェック

wordpressで問い合わせフォームを作った時にハイフンなしのバリデーションチェックをしたかったので。ハイフンなしなら下記でおけ。 $('.wpcf7-validates-as-tel').each( function () { if ( jQuery.trim( $(this).val() ) != '' && !$(this).val().match( /…