youtubeの埋め込みをレスポンシブにする
使うときにはいつも忘れているのでメモ。 ■指定の場所にyoutubeのリンクを持ったiframeがあれば、youtubeFrameというdivで囲む $(function(){ youtubeFrame(); } function youtubeFrame() { $('#hoge iframe[src^="https://www.youtube.com"]').wrap('<div cla […]
JavaScript
クリックで回転するドーナツ型メニューの実装
１、要素数分のliを用意 ２、css内「$menu-items: 11;」の数値にliの個数を入力 上記でメニューの設定は出来る。ただし、li要素同士が重なり合うのでスタイルを調整する ■html <ul class="wrapper rotated-1"> <li> <span>Menu Item 1</span> </li> < […]
要素の数によってbxSliderの挙動を変更する
- 2017.08.18
- bxSlider
【挙動について】 １、共通設定となる（infiniteLoopを設定していない状態）bxSliderを定義 ２、要素の数によって挙動の出し分け ３、bxSliderをリロードする // 共通の初期設定の配列 var defaultOpt = { speed: 900, minSlides: 3, maxSlides: 3, moveSlides: 1, slideWidth: 270, slide […]
IE11対応 jsによるIEブラウザとバージョンの判別
var userAgent = window.navigator.userAgent.toLowerCase(); if( userAgent.match(/(msie|MSIE)/) || userAgent.match(/(T|t)rident/) ) { var isIE = true; var ieVersion = userAgent.match(/((msie|MSIE)\s|rv:) […]
ウィンドウのスクロール位置をjs+Cookieで保存する
ページをまたいだ場合、ページでリロードを行う処理をする場合に表示位置を固定したい場合に用いる。 記述例）Cookieを保存するjsにより、変数指定が若干変わる。下記はそれぞれ案件に併せて若干修正済。 ■https://github.com/js-cookie/js-cookie を使用する場合 <script> $(function(){ var key = 'keep-positio […]
ページ全体にブラー効果をかけるVague.jsの使い方
１、ブラーを付けたい要素をブロック要素で囲む <div id="blurArea"> ～略 通常どおりのコーディング～ </div> ２、jQuaryの本体と、vague.jsを読み込む <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src= […]
bxSliderに設定するパラメータの一覧
// スライドモードを指定する // horizontal（水平）, vartivcal（垂直）, fade（フェード）の3パターン mode: 'horizontal', // horizontal // スライダーの対象とする子要素を指定する // セレクタの指定はjQueryのセレクタルールを利用する（div.slideなど） slideSelector: '', // '' // スライド […]
リストを個数毎に区切ってスタイルを指定する
$('li').each(function(index){ //3つごとに設定 if(Math.floor(index/3)%2==0){ //classを付加 $(this).css('color','blue'); }else{ $(this).css('color','red'); }; });
スクロール上下の取得
// スクロール上下の取得 var start_pos = 0; function scrollUpdown() { var current_pos = $(this).scrollTop(); if (current_pos > start_pos) { console.log('down'); } else { console.log('up'); } start_pos = curre […]
IE8でメディアクエリを使用する
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>