東京の会社辞めて地方で生きるわ。

勢いで会社を辞めて縁のない地方で生きることはできるのか

jQuery

【jquery】指定のブラウザ幅でリサイズしたらページリロード

// 767以下からリサイズし、そこから768px以上にブラウザ幅をリサイズしたらリロード var timer = false; $(window).on("resize", function() { if (timer !== false) { clearTimeout(timer); } timer = setTimeout(function() { var windowWidth = window.i…

【jquery】ipadのみPCビュー

// ipadはPC画面にする var ua = navigator.userAgent; if (ua.indexOf('iPad') > 0 || ua.indexOf('Android') > 0) { $("head").append('<meta name="viewport" content="width=1100, maximum-scale=1, user-scalable=0">'); }【条件分岐参考】 https://qiita.com/torugatoru/items/2dc895d5db7fc839a8bc</meta>

【jquery】要素の移動のメソッド

before() 指定した要素の前に挿入する。 $(‘挿入先’).before(‘挿入する要素’);after() 指定した要素の後に挿入する。 $(‘挿入先’).after(‘挿入する要素’);prepend() 指定した要素内部の先頭に挿入する。 $(‘挿入先’).prepend(‘挿入する要素’);append() 指定…

【jquery each】eachで初めの数字を1に

$("#testList li").each(function (i) { i = i+1; $(this).text('LI' + i); }); このコードは以下のように吐き出されるLI1 LI2 LI3 LI4 LI5【参考URL】 http://h2ham.seesaa.net/article/114037411.html

【jquery】ブラウザごとに違うクラス付与

var ua, verArr, version, ieVer, ie, chrome, firefox, opera, safari; ua = navigator.userAgent; // IEかそれ以外かどうかを判定 if (ua.match(/msie/i) || ua.match(/trident/i)) { // IEの場合はバージョンを判定 verArr = /(msie|rv:?)\s?([\d\.]+)/i.…

【jquery】リサイズが完全に完了したらPC スマホ 画像切り替え

// スマホ画像きりかえ // 置換の対象とするclass属性。 var $elem = $('.switch'); // 置換の対象とするsrc属性の末尾の文字列。 var sp = '_sp.'; var pc = '_pc.'; // 画像を切り替えるウィンドウサイズ。 var replaceWidth = 768; function imageSwitch(…

【jQuery】ローディングのプログレスバー

$(document).ready(function(){ var loadStatus = 0; //ローディング進捗 var img_num = $('img').length; //読み込む画像の数 $('img').each(function() { //画像が読み込まれたら、、 var src = $(this).attr('src'); $('').attr('src', src).load(functio…

slick.jsでのスライドのガター(マージン)あけるとき

以下のサイトでcssをhttp://ithat.me/2016/10/17/how-to-use-slick-jquery-plugin

【jquery】リサイズイベント発火をリサイズ操作が完全に終わった時だけ処理を実行する

settimeoutをしないとリサイズ時重くなる。 var timer = false; $(window).resize(function() { if (timer !== false) { clearTimeout(timer); } timer = setTimeout(function() { console.log('resized'); // 何らかの処理 }, 200); });

【wordpress】wordpressでjqueryをかくときの処理

①functions.phpに以下記述。 //jQueryの設定を出力 add_action('wp_head', 'myScript', 1); function myScript() { wp_enqueue_script('jquery'); } ②jsファイルに以下を。 jQuery(document).ready(function ($) { // この中に処理。もうこの中では$を使って…

フッター手前で止まる「トップへ戻るボタン」

http://ss-complex.com/work_top_back_button/

【jquery】CSSTransitionのイベントが終わった時に何かの処理をする

https://qiita.com/roana0229/items/b1d3ac9038ff59ce1e0f

【jQuery】リサイズ完了時に要素を移動

// リサイズ処理 var timer = null; $(window).on('load resize',function() { clearTimeout( timer ); timer = setTimeout(function() { //処理内容 var windowWidth = window.innerWidth; if (windowWidth > 768) { // PCの処理 // .info_titleのあとに#in…

電話番号のリンクをスマートフォン端末以外では無効にする

https://qiita.com/shouchida/items/a057a869003e4e2eb009

LOADING中はスクロール禁止

html { overflow-y: scroll; } body{ position: fixed; overflow-x: hidden; } .wrap { overflow: hidden; } #loading { position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: #000; text-align: center; display: table; color: #fff…

【jQuery each】li要素を順番にアニメーション

$(function(){ // リストを非表示 $('#fadein_area ul li').hide(); // 繰り返し処理 $('#fadein_area ul li').each(function(i) { // 遅延させてフェードイン $(this).delay(500 * i).fadeIn(1000); }); }); 【参考サイト】 http://www.dataplan.jp/blog/jq…

【jQuery】タブ切り替え2(レスポンシブ対応でdisplay:noneからのfadein)

<ul id="click_box2"> <li class="select">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> </ul> <div class="f_r"> <div class="content_wrap disnon show"> </div> <div class="content_wrap disnon"> </div> </div>

【jQuery】タブ切り替え

<ul id="tab"> <li class="select">ボタン1</li> <li>ボタン2</li> <li>ボタン3</li> <li>ボタン4</li> </ul> <div class="safety_cw"> <div class="content_wrap no1"> <div class="container_safety"> <h2>コンテンツ</h2> </div> </div> </div>

要素の高さをレスポンシブでそろえたい時【jquery-fixHeightSimple.min.js】

$(function(){ // ページ読み込みでsameheight関数 sameHeight(); // ブラウザリサイズ リサイズ完了時に実行 var timer = false; $(window).resize(function() { if (timer !== false) { clearTimeout(timer); } timer = setTimeout(function() { sameHeigh…

touchmove.noscrollを使ったスマホナビ

これだと、スマホで背景は固定されるがPCではされない。まあいいや var current_scrollY; $(document).on('click', '.menu-trigger', function() { if ($(".menu-trigger").hasClass("active")) { // メニューを閉じるとき $(window).off('.noScroll'); $(th…

falsandtru版pjax やりかた

下記のコードを入れたところpjaxでトップページに戻ったときスライダーの切り替えがぐちゃぐちゃになる。たぶんsetintervalがいかれてる。 このページの「ページ読み込み時の処理」ってとこでいけるかなあ。あとで試す。とりあえずメモ。http://chibinowa.ne…

【jQuery】infinite scrollの使い方

ページングをクリックしなくても、スクロールすれば自動で次のページのコンテンツが出てくる、いわゆる「無限スクロール」をWordPressサイトで実装することができるプラグイン「Infinite Scroll」。とりあえず今回はワードプレスのプラグインのものを使用。 …

jquery callback コールバック queue 使いかた

下記コードは、 #bg_fvがフェードイン後に#logo_indexがフェードイン。そのあとに.home #g_naviがfadeInされる。最後にdequeueを。 $('#bg_fv').fadeIn(1000).queue(function () { $('#logo_index').fadeIn(500).queue(function () { $('.home #g_navi').fad…

背景画像を読み込んだら処理 imagesloaded

まずプラグインimagesloaded読み込み <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.2.0/imagesloaded.pkgd.min.js"></script>そして以下。 $(function(){ $('#bg_fv').imagesLoaded( { background: true }, function() { $('#bg_fv').fadeIn(1000); }); }); 【背景画像】 https://www.imd-net.com/blog/2016/03/01-…

【jQuery】lazyload使い方

head内にlazyloadのプラグインjs読み込ませる。以下はオプションでカスタムのイベントloadImgをつくってる。 kikaku1をクリックすると、lazyloadが始まる。(img.lazyの画像読み込みが始まる)data-originalに本命のimgを。srcにloading中の画像を <img src="dummy.png" class="lazy" data-original="honmei.jpg" alt="*" /> $(functi…

【jQuery】特定の要素が画面内に表示(レンタリング)されたら際、処理を実行する。

$(function(){ // 処理実行の引き金となる要素を設定 var target = $("#target"); $(window).scroll(function(){ // 実行のトリガーになる要素のオフセット(一番上からの距離)から // 画面の縦幅を引いたものを処理実行までの距離とする(画面の下端を基準…

【jQuery】offsetとscrollTop

①offset()の基本 jQueryで要素の位置を取得したり移動させるにはoffset()を使います。 ブラウザの左上ではなく、ドキュメントの左上となります。 ですので、スクロールしたら起点はブラウザ上からは見えなくなります。 ②scrollTop()の基本 $(window).scrollT…

モーダルウィンドウでよく使うバブリング

・クリックなどのイベントは、子要素から親要素へと伝播される(バブリング) ・preventDefault() は、その要素のイベントをキャンセルし、stopPropagation()は、親要素への伝播をキャンセルする。 ・return false; を使うと、その要素のイベントも親要素へ…

【jquery】fadeInupとかのモーションの場合のコーディング

fadeInupとかモーションするときは以下の感じでさきにcssメソッドでopacity:0にしてdisplayをblockにする。そんでshowメソッドからのanimate $("div").css({ "opacity":"0", "display":"block", }).show().animate({opacity:1})

jQueryで特定の要素が存在するかどうかを判別する処理

$(function(){ if($('#sample').length){ ~ ここに「#sample」が存在した場合の処理を記述 ~ } else { ~ ここに「#sample」が存在しなかった場合の処理を記述 ~ } }); もし次の要素がなかった場合次へボタン削除・・・とかで使った if($('.content_mod…