2022.04.18
横に長いコンテンツ(表組みなど)を表示させる場合、画面のサイズによっては横スクロールがでてしまいます。
特にスマホで見ている場合、スクロールバーがみえずらく、横にスクロールできることがわかりずらい場合があります。
横長コンテンツの上には下記のような画像を表示させるようにしていました。
画像でもわかると思いますがScrollHintを使うと、動きを加えてよりわかりやすく横スクロールがあることを表示できます。
ScrollHint 公式サイト
設定はすごく簡単です。
(1)
上記ScrollHint公式サイトからダウンロードしたscroll-hint.cssとscroll-hint.jsをhead内でリンクする。
※CDNを利用することもできます。
(2)
横スクロールが出るコンテンツを下記divで囲う。
(3)
下記スクリプトをコンテンツより後に記述。
【例】
※オプションで色々と表示を変更できます。
公式サイト オプション↓
https://appleple.github.io/scroll-hint/#options
特にスマホで見ている場合、スクロールバーがみえずらく、横にスクロールできることがわかりずらい場合があります。
横長コンテンツの上には下記のような画像を表示させるようにしていました。
画像でもわかると思いますがScrollHintを使うと、動きを加えてよりわかりやすく横スクロールがあることを表示できます。
ScrollHint 公式サイト
設定はすごく簡単です。
(1)
上記ScrollHint公式サイトからダウンロードしたscroll-hint.cssとscroll-hint.jsをhead内でリンクする。
※CDNを利用することもできます。
(2)
横スクロールが出るコンテンツを下記divで囲う。
<div class="js-scrollable">〜</div>
(3)
下記スクリプトをコンテンツより後に記述。
<script>new ScrollHint('.js-scrollable');</script>
【例】
Col1 | Col2 | Col3 |
---|---|---|
Lorem ipsum dolor sit. | Lorem ipsum dolor sit. | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam. |
Lorem ipsum dolor sit. | Lorem ipsum dolor sit. | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam. |
Lorem ipsum dolor sit. | Lorem ipsum dolor sit. | Lorem ipsum dolor sit amet, consectetur adipisicing elit. Et, magnam. |
※オプションで色々と表示を変更できます。
公式サイト オプション↓
https://appleple.github.io/scroll-hint/#options
2022.03.04
jQuery UI を利用することで、つまみを左右にドラッグして操作するスライダーUIを簡単に作成することができます。
jQuery UI は2021年10月の時点で開発終了してしまいましたが、メンテナンスは継続されるようです。
基本の実装
●jQuery UI をダウンロード
以下のサイトからjQuery UI をダウンロードします。
その際、不要な機能を除外したり、好みのテーマを選ぶこともできます。
https://jqueryui.com/
●HTML
・ダウンロードした以下のファイルを任意の場所に格納し、jQueryと併せて読み込みます。
また、imagesフォルダも同じ場所に格納しておきます。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="jquery-ui.min.css" rel="stylesheet" />
<script src="jquery-ui.min.js"></script>
・<body>内に以下のタグを記述。
●JavaScript
以上で実装完了です。
実装デモ
スマホ対応
スライダーはそのままではスマホで操作することができません。
「jQuery UI Touch Punch」を使うことで、スマホでの操作に対応させることができます。
ダウンロードサイトからダウンロードし、読み込みます。
こちらは読み込むだけで完了です。
基本の実装
●jQuery UI をダウンロード
以下のサイトからjQuery UI をダウンロードします。
その際、不要な機能を除外したり、好みのテーマを選ぶこともできます。
https://jqueryui.com/
●HTML
・ダウンロードした以下のファイルを任意の場所に格納し、jQueryと併せて読み込みます。
また、imagesフォルダも同じ場所に格納しておきます。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<link href="jquery-ui.min.css" rel="stylesheet" />
<script src="jquery-ui.min.js"></script>
・<body>内に以下のタグを記述。
<div id="jquery-ui-slider"></div>
●JavaScript
<script type="text/javascript">
$(function() {
$('#jquery-ui-slider').slider({
min: 0,
max: 10,
value: 0,
slide: function( event, ui ) {
/* ここに処理を記述 */
console.log(ui.value);
}
});
});
</script>
以上で実装完了です。
実装デモ
スマホ対応
スライダーはそのままではスマホで操作することができません。
「jQuery UI Touch Punch」を使うことで、スマホでの操作に対応させることができます。
ダウンロードサイトからダウンロードし、読み込みます。
<script src="jquery.ui.touch-punch.min.js"></script>
こちらは読み込むだけで完了です。
2020.08.19
iOS 12までのiPadはユーザーエージェントに文字列"iPad"が含まれているかで判別できました。
しかしiOS 13以降のiPadのSafariには「デスクトップ用Webサイトを表示」という機能が実装されており、それがオンになっていると(デフォルト)ユーザーエージェントに"iPad"の文字が含まれなくなるようです。
そのためユーザーエージェントでの分岐に追加をする必要があります。
"macintosh"という文字列が含まれており、タッチ操作に対応している。という条件で判定します。
しかしiOS 13以降のiPadのSafariには「デスクトップ用Webサイトを表示」という機能が実装されており、それがオンになっていると(デフォルト)ユーザーエージェントに"iPad"の文字が含まれなくなるようです。
そのためユーザーエージェントでの分岐に追加をする必要があります。
var ua = window.navigator.userAgent.toLowerCase();
if(ua.indexOf('ipad') > -1
|| ua.indexOf('macintosh') > -1 && 'ontouchend' in document){
// iPad用の処理
}else{
// それ以外の端末用の処理
}
"macintosh"という文字列が含まれており、タッチ操作に対応している。という条件で判定します。
2019.07.17
複数に分けて管理しているjsonファイルを読み込み、すべての読み込みが完了した時点で次の処理を行う、ということをやったので忘れないようにメモ。
.when() を使うことで複数のファイルを扱うことができます。
.when() を使うことで複数のファイルを扱うことができます。
$.when(
$.getJSON("data1.json"),
$.getJSON("data2.json")
)
.done(function(data1, data2) {
// すべての読み込みが成功した時の処理
})
.fail(function() {
// 失敗したときの処理
});
2018.10.03
ヘッダー固定のサイトでアンカーリンクを使用する際、そのままだとヘッダーの分だけコンテンツが隠れてしまいます。
同じページ内のアンカーリンクであればスムーズスクロールのJSに直接書き加えてしまったりするのですが、別ページへの遷移+アンカーリンクの場合の対応を考えてみました。
以下のJSを遷移後のページに記述します。
要jQueryです。
ヘッダーの高さはサイトに合わせて変更してください。
これでヘッダー分下がった位置にスクロールされます。
ただこの手法、ページ内のすべての要素が読み込み終わってからの動作になるので、どうしても目当ての位置にスクロールされるまで時間がかかってしまい...。
どうにも気持ちの良くない感じになってしまうので、onloadを使わない手法に改善できないか考えてみたいと思います。
同じページ内のアンカーリンクであればスムーズスクロールのJSに直接書き加えてしまったりするのですが、別ページへの遷移+アンカーリンクの場合の対応を考えてみました。
以下のJSを遷移後のページに記述します。
要jQueryです。
$(function(){ var headerH = 50; //ヘッダーの高さ $(window).on("load", function(){ if(location.hash !== ""){ var targetOffset = $(location.hash).offset().top; $(window).scrollTop(targetOffset - headerH); } }); });
ヘッダーの高さはサイトに合わせて変更してください。
これでヘッダー分下がった位置にスクロールされます。
ただこの手法、ページ内のすべての要素が読み込み終わってからの動作になるので、どうしても目当ての位置にスクロールされるまで時間がかかってしまい...。
どうにも気持ちの良くない感じになってしまうので、onloadを使わない手法に改善できないか考えてみたいと思います。