制作備忘録

仕事でぶちあたった壁の備忘録です。Wordpressが多め。

jQuery

【youtube】スマホでも自動再生&ループをさせる

prythmworks.tokyo HTML <div class="main-title-wrap"></div> jQuery var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstSc…

【jQuery】指定した個数づつ開くアコーディオン

www.weblab.co.jp

レスポンシブメニュー

www.webopixel.net

jqueryでもmediaqueryを使いたい

spyweb.media var mediaQuery = matchMedia('(max-width: 798px');// ページが読み込まれた時に実行 handle(mediaQuery);// ウィンドウサイズが変更されても実行されるように mediaQuery.addListener(handle);function handle(mq) { if (mq.matches) { // ウ…

ヘッダー固定の時のズレをjqueryで解消

レスポンシブで固定ヘッダー高さが可変する際のアンカースクロールを簡単実装 | WordPress・Bootstrap・jQueryのサイトvar headerHight = $("ここにheaderのclass").outerHeight(); $("a").click(function() { var href = $(this).attr("href"); var target …

【簡単!】ページのアクセス時にモーダル(フロート)を表示するjQuery.layerBoard.js

blog.idea-clippin.com

アクセスしたらポップアップ

www.webprofessional.jp

slick.jsを使ったスライド画像をランダム表示する

<div class="slideshow"> <div class="slide"><img src="xxxx.png"></div> <div class="slide"><img src="xxxx.png"></div> <div class="slide"><img src="xxxx.png"></div> <div class="slide"><img src="xxxx.png"></div> <div class="slide"><img src="xxxx.png"></div> </div>var $slideshow = $('.slideshow'); var $s…

【jQuery】遅延実行 – 秒後に実行する

www.webantena.net

【jQuery】ボックスを伸ばしたり

not(“:animated”)とstop()の使い分けについて〜jQuery | IT工房|Webデザイン入門

bxSliderで動画再生終了後にスライドショーを始める

https://try-m.co.jp/blog/jquery/1365/ HTML <ul class="bxslider"> <li><video id="video" src="video.mp4"></video></li> <li><img src="img_01.jpg" alt=""></li> <li><img src="img_02.jpg" alt=""></li> </ul> JS $(function() { var $video = $('#video').get(0); $slider = $('.bxslider').bxSlider({ infiniteLoop…

【wordpress】Contact Form 7でエラー時にフォーム上部にスクロールさせる

(function($) { var position = $('form.wpcf7-form').offset().top; $('.wpcf7').on('wpcf7:invalid', function() { $('html, body').animate({ scrollTop: position }, 700); });})(jQuery); 参照: 《Wordpress》Contact Form 7でエラー時にフォーム上部…

jQueryでウィンドウサイズによって画像を切り替える

記録用 jQueryでウィンドウサイズによって画像を切り替える | Tips Note by TAM <img src="image_sp.png" alt="" class="js-image-switch"> <img src="image_pc.png" alt="" class="js-image-switch"> $(function() { // 置換の対象とするclass属性。 var $elem = $('.js-image-switch'); // 置換の対象とするsrc属性の末尾の文字列。 var sp =…