読者です 読者をやめる 読者になる 読者になる

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

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

jQuery

【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…

【jQuery】n番目の要素にアクセス

jQueryでクリックされた要素が何番目か取得する <ul> <li class="some-item">hoge</li> <li class="some-item">foo</li> <li class="some-item">bar</li> </ul> $('li.some-item').on('click', function(){ var index = $('li.some-item').index(this); console.log(index + 'th item clicked!'); }); インデックスは配列と同じで0から始まる 【参考URL】…

【jQuery】Masonry 実装メモ

①とりあえずまずレイアウトをcssなどでだいたいつくっとく。itemがmasonryのタイル1個1個のスタイル。ここでwidthやmarginプロパティを設定しておくとその通りにタイルが配置されるよう。 このタイルの横並びもdisplay:inline-blockで最初に処理しとく。そん…

【jQuery】マウスクリック連打とかイベント重複を防ぐ

var busy = 0; // これはクリックイベントのコードの直前に記述。 $('div').on('mouseover click', function() { //連打を防止したいイベントコード if (busy == 1) return false; // イベント内最初に記述 // 処理開始 $(this).append('●'); // 処理終了 */…

ページトップへ戻るボタン【追尾バージョン】

JavaScript $(function() { var topBtn = $('#pagetop'); topBtn.hide(); //スクロールが100に達したらボタン表示 $(window).scroll(function() { if ($(this).scrollTop() > 100) { topBtn.fadeIn(500); } else { topBtn.fadeOut(500); } }); //スクロール…

【jQuery】チェックを入れてからボタンを押せるようにする

jQuery $(function() { $('.cart_real').attr('disabled', 'disabled'); $('#cart_check').click(function() { if ($(this).prop('checked') == false) { $('.cart_real').attr('disabled', 'disabled'); } else { $('.cart_real').removeAttr('disabled'); …

【jQuery】ページ内スクロール

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script> $(function(){ // #で始まるアンカーをクリックした場合に処理 $('a[href^=#]').click(function() { // スクロールの速度 var speed = 400; // ミリ秒 // アンカーの値取得 var href= …

【jQuery】waypoint.js やり方

/bodyの直前に以下記述。ただしloadイベントを使っているのはページ自体にローディング機能をつけた場合の記述。 <script src="js/jquery.waypoints.min.js"></script> <script> $(window).on('load',function(){ $('selector1').waypoint(function(){ $('.selector2').addClass('fadeIn'); },{ offset : '-2400px' }); </script>…

velocity.jsのコールバック

$('selector1').velocity({skewX:"-12deg", scaleX:"1.3", translateX:"100%"}, {duration:500, complete: function(){ $('selector2').remove(); $('selector3').addClass('aaa'); } });

【jQuery】カンタンなローディング画面

【html】 <div> <ul id="images"> <li><img src="images/img01.jpg" alt="image"></li> <li><img src="images/img02.jpg" alt="image"></li> <li><img src="images/img03.jpg" alt="image"></li> <li><img src="images/img04.jpg" alt="image"></li> <li><img src="images/img05.jpg" alt="image"></li> <li></li></ul></div>

ローディングのJSを入れたら他のJSが動かなくなった時の対応

ローディングのJSを入れたら、・スティッキーヘッダーが高さ取得できない ・パーティクルのプラグインが動かないこのようなことが起こった 結論からいうとそれぞれのJSにイベントの対応すればOK 通常下記のようになっているところを $(document).ready(funct…

Instafeed.jsの使い方

①instafeed.jsをダウンロード。そしてクライアント用のアカウントを作成する。(自分のアカウントではあんまり作らないほうが良い) ②JSをユーザーアカウントから画像を取得出来るように書き換えるプラグインページに記載されている内容を下記に変更してhead…

【jQuery】fullpage.jsの使い方

html <div id="fullpage"> <section class="section"></section> <section class="section"></section> <section class="section"></section> <section class="section"></section> </div> css head内に記述

【jQuery】関数の設定

関数とは ある特定の処理をするために作られた、比較的小規模なプログラムのこと。関数は定義しただけではなにも働きをせず、定義された関数の機能が必要になったときに呼び出して使う。 関数定義と呼び出し function nameFunction(){ //関数が呼び出される…

【js】圧縮したjsを戻して整形

これも便利!!http://jsbeautifier.org/ こちらは他のjs整形ツールまとめ記事maccle.com

【jQuery】画像の切り替えロールオーバー(プリロード付)

①js記述 jQuery(function(){ var supfix = "_on"; $("img.rollover").hover( function(){ $(this).attr("src",$(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1"+supfix+"$2")); }, function(){ $(this).attr("src",$(this).attr("src").replace(/^(.+)…

loading.jsでの注意点

loading中にスクロールすると下のほうでコンテンツがみえちゃってるときがあるのでその対策。①まず下記URLのloading.jsを保存してサーバーアップhttp://web-pc.net/jquery004 $('head').append( '<style type="text/css">#loading111 { display: none; } #fade, #loader { displa</style>…

【wordpress/jQuery】レスポンシブ対応のrightbox系 spipeboxの使い方

このswipebox、レスポンシブ対応ですぐに実装可能なので便利。wordpressで実装するときにした細工をここに記す。 1.ファイル読み込むまずはheadタグ内に下記記述。 <link rel="stylesheet" href="src/css/swipebox.css"> <script src="lib/jquery-2.0.3.js"></script> <script src="src/js/jquery.swipebox.js"></script> <script type="text/javascript"> ;( function( $ ) { $( '.swipebox'…</link>

ページを読み込んだ後、数秒後にアンカーまでスクロールするJS

<script type="text/javascript"> $(function(){ var targetOffset = $('#main').offset().top; $('html,body').delay(1000).animate({scrollTop: targetOffset}, "slow"); }); </script>【参考URL】 http://webdrawer.net/javascript/scrolljs.html

【jQuery】addClassのタイミングをずらす

下記をfooter付近に記述 <script> (function($){ $.fn.delayAddClass = function(className,delay){ return $(this).delay(delay).queue(function(next){ $(this).addClass(className); next(); }); }; $.fn.delayRemoveClass = function(className,delay){ return $…

【jQuery】animateメソッドでbackgroundColorを適用するには?

下記記述が必要。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>

【jQuery】一定のanimate処理が終わってから、指定の処理がしたい complete

$(".switch").animate( { opacity: '0',}, { duration:500,complete: function(){ //ここにanimate opacity0のあとに処理させたいアニメーションを記述 - }}); 【参考URL】 http://webdrawer.net/javascript/jqueryanimate.html

【jQuery】ある一定の処理を終了させてから指定の処理をする whenメソッドdoneメソッド

下記の例だと 、divが右に300px動いた後、下に300px動き、そのあとにdiv内にテキストで「DONE!」が記述。つまりwhenメソッド内に先に済ましておきたい処理を記述し、メソッドチェーンでdoneメソッドにつなぎ、その中に後でする処理を記述。 <script type="text/javascript"> $(function () {…

スティッキーヘッダー(スクロールすると別のヘッダーがついてくるやつ)

①ヘッダー部のhtml記述。固定のヘッダーとついてくるヘッダーのhtmlを記述。 <header id="header"> <div class="inner"> <h1>Demo</h1> <ul> <li><a href="#">HOME</a></li> <li><a href="#">ABOUT</a></li> <li><a href="#">COMPANY</a></li> <li><a href="#">CONTACT</a></li> </ul> </div> </header> <div id="change"> </div>

supersized.jsを使って全画面ズームインアウトしながらスライドショー

今回はwordpressで構築。 ①まずsupersized.jsなどをheadタグ内で読み込んでスライドショー起動。下記コードをかけば基本は設置できるはず。 <head> <link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/css/supersized.css" type="text/css" media="screen" /> </link></head>

【jQuery】jQuery 2.0を使用する際の注意

下記のようにするとIE8以下では1.9.1、IE9以上やIE以外のブラウザではjquery-2.0.0.jsを読む <script src="jquery-2.0.0.js"></script> 【参考URL】 http://blog.webcreativepark.net/2013/04/24-235534.html

【jQuery】ウィンドウサイズ高さ計算

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script> //開いた画面の高さを取得 var WindowHeight = $(window).height(); //WindowHeightは変数のため任意の名前をつける $(function(){ if(WindowHeight > 320){ //開いた画面が320px以上なら実行 //body要素に高さを書き込む $('body').css('height',WindowHe…

skippr.js 導入コード

skippr.jsの導入コードheadタグ内に入れてとりあえずこれで動いた(wordpressにて) <script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/jquery.skippr.min.js"></script> <script> //Skipperの初期化 jQuery("document").ready(function() { jQuery("#theTarget").skippr({ // スライドショーの変化 ("fade" or "slide") transitio…

【jQuery】レスポンシブ対応のタブコンテンツ「Basic Tabs」設置方法

①html記述 <div id="tabwrap"> <ul id="tabs"> <li class="current"><a href="#home">タブ1</a></li> <li><a href="#about">タブ2</a></li> <li><a href="#services">タブ3</a></li> <li><a href="#contact">タブ4</a></li> </ul> <div id="content"> <div id="home" class="current"> <p>コンテンツ1<…</p></div></div></div>

【jQuery】sidr.jsの使い方

facebookであるようなメニュー。 ①sider.jsをダウンロード sidr.jsをダウンロードするとjquery.sidr.dark.css、jquery.sidr.light.cssの2種類ファイルがあるのでどちらかをheadタグ内に読み込ませる。 <link rel="stylesheet" href="css/jquery.sidr.dark.css"> ②bodyしめタグの直前にJavaScriptを読みこませる記述。</link>…

jQueryで覚えたこと2【アニメーションなど】

はいjquery覚えたこと第2弾~。とりあえず今は文法を覚えるべきだお。表示されている要素を非表示(hideメソッド) <script> $(function(){ $("#aaa").hide(); $("#bbb").hide('fast'); $("#ccc").hdie(5000); }); </script> 日表示されている要素を表示する(showメソッド) <script></script>…

jQueryで覚えたこと【セレクタ・メソッド・イベント】

最近jQueryを勉強しはじめますた。ちょい大事だとおもったこと自分用にメモ。基本の書き方 <script> $(function(){ $("#abc").css("color","red"); }); </script> ひとつのセレクタに複数の支持を出す <script> $(function(){ $("#abc").css({ "color" : "red", "background" : "blue"</script>…

【jQuery】ふわっと半透明するロールオーバー

これも今更感満載だけれども。汎用性高いので備忘録で。 【html】 <img src="images/sample.jpg" width="100" height="100" class="toumei" /> <p class="toumei">サンプルテキスト</p> 【css】 img.toumei { margin-bottom:10px; } p.toumei { background-color:#CCC; width:50%; padding:5px; } 【jQuery(head内に記述)】

【jQuery】bxslider サムネイル付きページャーの挿入

今回はbxsliderのページャーをサムネイルにする。 手順 ①jquery.bxslider.min.jsとplugin/jquery.easing.1.3.jsとjquery.bxslider.cssをサーバーにあげる ②headタグ内にjavascript記述とcssコード呼び出し ③htmlうつ ①jquery.bxslider.min.jsとplugin/jquery…