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

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

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

【jquery必要なしスライダー】swiper

/bodyの上にswiperのjsファイルを配置すること。それ以外だとバグります。 その下に <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script> <script> var mySwiper = new Swiper ('.swiper-container', { effect: "fade", autoplay: 3000, noSwiping: true, noSwipingClass: 'no_swipe', loop: true }) </script> …

【javascript】ブラウザ 条件分岐

//UserAgent var ua=window.navigator.userAgent; var browserIE=false;//IE判定 var browser_v=0;//IEバージョン番号 var browser_nm="";//browser名 //IE判定 if(ua.match(/MSIE/) || ua.match(/Trident/)) { // IEの挙動 } if (browserIE) {browser_nm="I…

【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'); …

CreateJSのメモ

●graphics.drawCircle(0,0,100)のかっこの中は(円の中心のx座標、円の中心のy座標) .x、.yはdrawCircleで決めた円の中心の座標がそれぞれxpx、ypx移動する。 drawCircleの基準点は円の中心 ●graphics.drawRect(0,0,200,100)のかっこの中は(短形の左上頂点…

velocity.jsのコールバック

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

ハンバーガーボタンのスクリプト

ハンバーガーを連打したとき、そのアニメーションとグローバルナビが出るときたまにずれるときがある。それを下記コードで解決 <div id="sp_g"> <nav> </nav> </div> <a class="menu-trigger" href="#"> <span></span> <span></span> <span></span> </a> .menu-trigger, .menu-trigger span { display: inline-block; transition: all .4s; box…

ローディングの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

複数サイトのRSSフィードをまとめて最新順に表示する

①headタグ内に以下記述。 <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("feeds", "1"); //

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>

【google map】複数のマーカーを設置して、マーカーをアルファベットに。

下記コードをheadタグ内に記述。 <script src="http://maps.google.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var currentWindow = null; function initialize() { var myOptions = { zoom:10, scrollwheel: false, center: new google.maps.LatLng(32.818199, 130.753743), mapTypeId: google.maps.Map…

ページを読み込んだ後、数秒後にアンカーまでスクロールする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>

javascript 圧縮ツール

超便利!!それだけ!!w http://dean.edwards.name/packer/

responsive nav(スマホナビゲーション) 設置方法

①headタグ内に以下記入 <link rel ="stylesheet" href="css/styles.css" type="text/css" /> <script type="text/javascript" src="js/responsive-nav.min.js"></script> ②styles.cssの編集 以下記入 /* ------------------------------------------ NECESSARY STYLES FOR RESPONSIVE NAV --------------------------------------------- *…</link>

positon fixedのヘッダ固定でページ内リンクのずれを解消

ヘッダの高さが100pxの場合、 <div id="header"> ヘッダーがはいります </div> <div id="content"> <a href="#link01">なんとか</a> <div name="link01" id="link01">かんとか</div> </div> ①cssで調整 #header { width: 100%; min-width: 960px; height: 100px; position: fixed; left:0; top:0; z-index: 10; } #content{ padding-top: 100px; } #link01 {…

wow.jsをIE8&スマホで起動させない

wow.jsは少しのコードでアニメーションができるので楽だが、スマホでアニメーションつけるとなると重くてページが表示されない。 また、IE8でwow.jsのコードを読み込ませると、アニメーションさせたところが表示されなくなってしまう。なので下記コードを記…

スマホ、ipadのときのみjavascript無効化

パララックスなどのサイトを作った際、重すぎてスマホでサイトがみれないよーということがあったので。 <script type="text/javascript"> if(!navigator.userAgent.match(/(iPhone|android|iPad)/)){ //ここにPC向けに読ませるjs } </script> 【参考URL】 http://hpseisakuwa.com/blog/js-2.html