Warning: strpos() expects parameter 1 to be string, array given in /home/miyucolor/www/risalog/wordpress/wp-includes/blocks.php on line 50

Warning: strpos() expects parameter 1 to be string, array given in /home/miyucolor/www/risalog/wordpress/wp-includes/blocks.php on line 50

Warning: Cannot modify header information - headers already sent by (output started at /home/miyucolor/www/risalog/wordpress/wp-includes/blocks.php:50) in /home/miyucolor/www/risalog/wordpress/wp-content/plugins/all-in-one-seo-pack/app/Common/Meta/Robots.php on line 89

Warning: Cannot modify header information - headers already sent by (output started at /home/miyucolor/www/risalog/wordpress/wp-includes/blocks.php:50) in /home/miyucolor/www/risalog/wordpress/wp-includes/feed-rss2.php on line 8
JavaScript | risalog https://risalog.org Notes on web design, coding. Wed, 11 Nov 2020 02:35:20 +0000 ja hourly 1 https://wordpress.org/?v=5.7.12 jTruncSubstr jQueryプラグイン コードまとめ https://risalog.org/jtruncsubstr-jquery/?utm_source=rss&utm_medium=rss&utm_campaign=jtruncsubstr-jquery https://risalog.org/jtruncsubstr-jquery/#respond Mon, 19 Oct 2020 07:54:41 +0000 https://risalog.org/?p=973 レビュー投稿など文字数が多い場合に、特定の文字数以上は非表示にして、表示非表示を切り替えることができるプラグイン。 1. jQueryの読み込み https://developers.google.com/speed/l […]

The post jTruncSubstr jQueryプラグイン コードまとめ first appeared on risalog.]]>
レビュー投稿など文字数が多い場合に、特定の文字数以上は非表示にして、表示非表示を切り替えることができるプラグイン。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="jTruncSubstr.js"></script>
<script type="text/javascript">
  $().ready(function() {
    $('.comment').jTruncSubstr({
      length: 200,//表示させる文字数
      minTrail: 0,//省略文字の最低文字数
      moreText: "続きを読む",//非表示部分を表示するリンクの文字列
      lessText: "閉じる",//表示した後、再び非表示にするリンクの文字列
      ellipsisText: "...",//続きがあることを表示するための文字列
      moreAni: "fast",//表示時のアニメーション速度
      lessAni: "fast"//非表示時のアニメーション速度
    });
  });
</script>
<style>
  .comment .truncate_more_link {
    text-decoration: underline;
    color: #1242b2;
  }
</style>
<p class="comment">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>

1. jQueryの読み込み

https://developers.google.com/speed/libraries/#jquery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

2. jTruncSubstrスクリプトの読み込み

http://semooh.jp/jglycy/jquery-plugins/jtruncsubstrからjsファイルをダウンロードしてサーバーにアップ。

<script src="js/jTruncSubstr.js"></script>

3. クラスまたはID名で適用する箇所を指定

<script type="text/javascript">
  $().ready(function() {
    $('.comment').jTruncSubstr({
      length: 200,//表示させる文字数
      minTrail: 0,//省略文字の最低文字数
      moreText: "続きを読む",//非表示部分を表示するリンクの文字列
      lessText: "閉じる",//表示した後、再び非表示にするリンクの文字列
      ellipsisText: "...",//続きがあることを表示するための文字列
      moreAni: "fast",//表示時のアニメーション速度
      lessAni: "fast"//非表示時のアニメーション速度
    });
  });
</script>
<p class="comment">この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。この文章はダミーです。</p>

4. スタイル指定

開閉リンクのクラス名:truncate_more_link

<style>
  .comment .truncate_more_link {
    text-decoration: underline;
    color: #1242b2;
  }
</style>

ちょうどいい文字数(font-size: 14pxの場合)

PC(幅1000px):文字数210文字で3行分。
SP(幅355px):95文字で4行分。

jTruncSubstr
アコーディオン表示の「続きを読む」が簡単に実装できるjQueryプラグイン『jTruncSubstr』

The post jTruncSubstr jQueryプラグイン コードまとめ first appeared on risalog.]]>
https://risalog.org/jtruncsubstr-jquery/feed/ 0
スムーススクロール 特定のリンク aタグを除外する https://risalog.org/smooth-scroll-not/?utm_source=rss&utm_medium=rss&utm_campaign=smooth-scroll-not https://risalog.org/smooth-scroll-not/#respond Thu, 15 Oct 2020 07:57:31 +0000 https://risalog.org/?p=928 スムーススクロールのjs スムーススクロールのスクリプトでは#で始まるaタグの場合すべてスクロールが効いてしまう。 #だけのaタグの場合(アンカー先がない、モーダルや表示スクリプトなど)、ページトップ(#)へスクロールし […]

The post スムーススクロール 特定のリンク aタグを除外する first appeared on risalog.]]>
スムーススクロールのjs
<script>
  $(function(){
    // #で始まるアンカーをクリックした場合に処理
    $('a[href^="#"]').not('.class').not('#id a').click(function() {
      // スクロールの速度
      var speed = 400; // ミリ秒
      // アンカーの値取得
      var href= $(this).attr("href");
      // 移動先を取得
      var target = $(href == "#" || href == "" ? 'html' : href);
      // 移動先を数値で取得
      var position = target.offset().top - 15;
      // スムーススクロール
      $('body,html').animate({scrollTop:position}, speed, 'swing');
      return false;
    });
  });
</script>

スムーススクロールのスクリプトでは#で始まるaタグの場合すべてスクロールが効いてしまう。

#だけのaタグの場合(アンカー先がない、モーダルや表示スクリプトなど)、ページトップ(#)へスクロールしてしまう。
ページトップへスクロールしてしまうのを止めたいとき、notで特定のタグを除外できる。

$('a[href^="#"]').not('.class').not('#id a').click(function() {

スムーススクロール(除外するものをnotに)
特定のリンクをスムーススクロールさせないように除外させる
[jQuery]特定のリンクを除外しつつページ内スクロール【2017/03/29追記】

The post スムーススクロール 特定のリンク aタグを除外する first appeared on risalog.]]>
https://risalog.org/smooth-scroll-not/feed/ 0
EC-CUBE カート数量変更 セレクトボックス選択時にサブミット https://risalog.org/ec-cube-cart-selectbox/?utm_source=rss&utm_medium=rss&utm_campaign=ec-cube-cart-selectbox https://risalog.org/ec-cube-cart-selectbox/#respond Tue, 01 Sep 2020 05:27:31 +0000 http://risalog.org/?p=223 カートの中身ページにて、数量選択後、変更ボタンを押下でサブミットされるところ、数量(セレクトボックス)をプルダウンして選択で、サブミットされるように変更。 JavaScriptのonChangeイベントを使用し、セレクト […]

The post EC-CUBE カート数量変更 セレクトボックス選択時にサブミット first appeared on risalog.]]>
カートの中身ページにて、数量選択後、変更ボタンを押下でサブミットされるところ、
数量(セレクトボックス)をプルダウンして選択で、サブミットされるように変更。

JavaScriptのonChangeイベントを使用し、セレクトボックスの値を変更したら指定のリンク先に遷移

<td class="alignC">
  <select name="quantity[<!--{$item.cart_no|h}-->]">
    <!--{section name=foo start=1 loop=51}-->
    <option value="<!--{$smarty.section.foo.index}-->" <!--{if $item.quantity == $smarty.section.foo.index}-->selected=selected<!--{/if}-->><!--{$smarty.section.foo.index}--></option>
    <!--{/section}-->
  </select>
  <a href="?" onclick="eccube.fnFormModeSubmit('form<!--{$key|h}-->','setQuantitys','cart_no','<!--{$item.cart_no|h}-->'); return false">変更</a>
</td>

を下に変更。

<td class="alignC">
  <select name="quantity[<!--{$item.cart_no|h}-->]" onchange="eccube.fnFormModeSubmit('form<!--{$key|h}-->','setQuantitys','cart_no','<!--{$item.cart_no|h}-->'); return false">
    <!--{section name=foo start=1 loop=51}-->
    <option value="<!--{$smarty.section.foo.index}-->" <!--{if $item.quantity==$smarty.section.foo.index}-->selected=selected<!--{/if}-->>
    <!--{$smarty.section.foo.index}-->
    </option>
    <!--{/section}-->
  </select>
</td>

Javascript:セレクトボックス選択時にページ遷移する
教えてください。現在のカゴの中ページの数量変更をselectに変更

The post EC-CUBE カート数量変更 セレクトボックス選択時にサブミット first appeared on risalog.]]>
https://risalog.org/ec-cube-cart-selectbox/feed/ 0
Swiper.js スライダー コードまとめ https://risalog.org/swiper-js/?utm_source=rss&utm_medium=rss&utm_campaign=swiper-js https://risalog.org/swiper-js/#respond Tue, 01 Sep 2020 04:17:10 +0000 http://risalog.org/?p=209 Swiper.js https://swiperjs.com/api/ ページネーション、アローのクリック後にオートプレーが止まるとき。My swiper with Swiper.js stop autoplay aft […]

The post Swiper.js スライダー コードまとめ first appeared on risalog.]]>
Swiper.js

https://swiperjs.com/api/

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.min.js"></script>
<!-- Slider main container -->
<div class="swiper-container">
  <!-- Additional required wrapper -->
  <div class="swiper-wrapper">
    <!-- Slides -->
    <div class="swiper-slide">Slide 1</div>
    <div class="swiper-slide">Slide 2</div>
    <div class="swiper-slide">Slide 3</div>
    ...
  </div>
  <!-- If we need pagination -->
  <div class="swiper-pagination"></div>
  <!-- If we need navigation buttons -->
  <div class="swiper-button-prev"></div>
  <div class="swiper-button-next"></div>
  <!-- If we need scrollbar -->
  <div class="swiper-scrollbar"></div>
</div>

<script>
  var mySwiper = new Swiper('.swiper-container', {
    loop: true,
    loopAdditionalSlides: 3,
    autoplayDisableOnInteraction: false,
    slidesPerView: 1.5,
    spaceBetween: 30,
    centeredSlides: true,
    speed: 1000,
    autoplay: 3000,
    observer: true,
    observeParents: true,
    preventClicks: true,
    preventClicksPropagation: true,
    paginationClickable: true,
    pagination: '.swiper-pagination',
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev'
  })
</script>

ページネーション、アローのクリック後にオートプレーが止まるとき。
My swiper with Swiper.js stop autoplay after slide it with finger, why?
autoplaydisableOnInteraction: Set to false and autoplay will not be disabled after user interactions (swipes), it will be restarted every time after interaction.

autoplayDisableOnInteraction: false,

2ループ目以降の2個目のスライドが表示されないとき。
Slide disappear when using loop and centeredSlides
loopAdditionalSlides: Addition number of slides that will be cloned after creating of loop.

loopAdditionalSlides: 3,

レスポンシブで上手く表示されないとき。
Swiper slider not working unless page is resized
observer: Set to true to enable Mutation Observer on Swiper and its elements. In this case Swiper will be updated (reinitialized) each time if you change its style (like hide/show) or modify its child elements (like adding/removing slides).

observeParents: Set to true if you also need to watch Mutations for Swiper parent elements.

observer: true,
observeParents: true,

ページネーションのドットがクリックできないとき。
clickableClickable: If true then clicking on pagination button will cause transition to appropriate slide. Only for bullets pagination type.

paginationClickable: true,

スワイプ中にリンクがクリックされるのを防ぐ。
preventClicks: Set to true to prevent accidental unwanted clicks on links during swiping.

preventClicks: true,

preventClicksPropagation: Set to true to stop clicks event propagation on links during swiping.

preventClicksPropagation: true,
The post Swiper.js スライダー コードまとめ first appeared on risalog.]]>
https://risalog.org/swiper-js/feed/ 0