- このトピックには6件の返信、2人の参加者があり、最後に
により11ヶ月、 1週前に更新されました。
-
投稿
-
【お使いの Snow Monkey のバージョン】25.2.4
【お使いの Snow Monkey Blocks のバージョン】20.3.5
【お使いの Snow Monkey Editor のバージョン】9.3.2
【お使いのブラウザ】chrome### 実現したいこと
scroll-hintをアコーディオンブロックの中身に適用したい。### 発生している問題
scroll-hintをアコーディオンブロックの中身に適用したいのですが、何故か動作しません。
別サイトでmy-snow-monkey.phpからフックで差し込んだtableでは正常に動いています。### 試したこと
CDNでだめだったのでダウンロードしてファイルを設置。ー＞変わらず
scroll-hint自体の読み込みも、その他CSSやjsファイルと合わせているので読み込まれていないはずはないと思われます。
中身のtable自体はスクロールするようにcssで設定済みscroll-hintに使用するclassはアコーディオンブロックの中身のtableを囲っているfigureに設定しています。
いいねをした人: 居ませんご返信ありがとうございます。
こちらクライアントの許可など必要なので共有ができません。すみません。
しかし、通常は問題なく実装出来るという事だと思いますので、my-snow-monkey.phpの読み込み順など、もう一度試してみます。
いいねをした人:
お世話になっております。
その後、読み込み方法やjsの記述など試してみたのですが、解決しませんでした。
以下は関係ある3ファイルの記述例です。どこか見落としているおかしなところなどありますでしょうか？
==============================================================
my-snow-monkey.php
add_action( 'wp_enqueue_scripts', function () { /* scroll-hint.css読み込み */ // wp_enqueue_style( // 'scroll-hint_css', // 'https://unpkg.com/scroll-hint@1.1.10/css/scroll-hint.css' // ); // /* scroll-hint.js読み込み */ // wp_enqueue_script( // 'scroll-hint_js', // 'https://unpkg.com/scroll-hint@1.1.10/js/scroll-hint.js', // ); wp_enqueue_style( 'scroll-hint', MY_SNOW_MONKEY_URL . '/override/dist/assets/css/scroll-hint.css', [Framework\Helper::get_main_style_handle()], filemtime(MY_SNOW_MONKEY_PATH . '/override/dist/assets/css/scroll-hint.css') ); wp_enqueue_script( 'scroll-hint', MY_SNOW_MONKEY_URL . '/override/dist/assets/js/scroll-hint.min.js', ['swiper_js'], MY_SNOW_MONKEY_PATH . '/override/dist/assets/js/scroll-hint.min.js', ); } );===================================================================
アコーディオンブロックの中身<div class="smb-accordion__item__body is-layout-constrained wp-block-accordion-item-is-layout-constrained"> <figure class="wp-block-table alignfull is-style-stripes is-scroll c-scroll-hint" style="margin-top:0;margin-right:0;margin-bottom:0;margin-left:0"> <table style="border-width:1px"> <tbody> </tbody> </table> </figure> </div>=======================================================================
js
new ScrollHint(".c-scroll-hint", { suggestiveShadow: true, remainingTime: 5000, i18n: { scrollable: "スクロールできます", }, });いいねをした人: 居ませんとりあえず上記のコードをこちらの環境には入れてみたのですが、わからなかったところがあるので教えてください。
1.
scroll-hintの js の依存関係に['swiper_js']が指定されています。この場合、swiper_jsな js が読み込まれていないとscroll-hintも読み込まれないと思うのですが、そこは大丈夫でしょうか？2. デフォルトだとテーブルはコンテンツ幅を超えずに横スクロール自体をしない状態で表示されると思います。別途 CSS 等でテーブルの中身の折返しを無効化したりとか、セルの幅を指定したりとかして、テーブルがスクロールする状態にはしていますかね？
いいねをした人: 居ませんちなみに、こちらの環境ではこれででました。
document.addEventListener( "DOMContentLoaded", () => { new ScrollHint(".c-scroll-hint", { suggestiveShadow: true, remainingTime: 5000, i18n: { scrollable: "スクロールできます", }, }); } );いいねをした人: 居ません
- トピック「scroll-hintをアコーディオンブロックの中身に適用したい」には新しい返信をつけることはできません。