全国対応！外注・下請けのホームページ制作会社をお探しの会社様。 人員リソース不足、技術不足でお困りなら外注・下請け専門のランランドにお任せ下さい

プラグイン不要のjQueryとCSSを使った簡単なモーダルウィンドウの実装方法をご紹介します。 まずはサンプルをご覧ください。 モーダルのサンプル See the Pen simple modal window01 by RECOOORD (@recooord) on CodePen. See the Pen simple modal window01 by RECOOORD (@recooord) on CodePen. 上記2つのサンプルはHTMLの文章量が異なるだけで、CSSとjQueryは同じコードを使っています。 特徴としては、文章量が少ない場合は、ブラウザ中央に表示され、文章量が多い場合はモーダルをスクロールして閲覧することができます。 HTML <!-- モーダルを開くボタン --> <div class="modal-open">モーダルを開く</div> <!-- モーダ

$(window).on (‘load’)関数が動作しない時はjQueryのバージョンをチェック！ 2019 8/13 先日、load関数 $(window).on('load') がページの読み込みごとに動作したりしなかったりする謎の現象に悩まされました。 どうやらキャッシュをクリアした時は正常に動作するのに、普通の更新では全く動作しない。 コンソールを見てもエラーログは出ていない。 これまで通り記述しているのにconsole.log()さえ動かない…。 という内容でした。非常に焦ったのでその時の原因と対処法をメモしておきます。 結論から言うと、使用するjQueryのバージョンを3に変えたことが原因でした。 jQuery3からはdocument-readyが常に非同期になっている 専門的な細かいことまでは分かりませんが、 jQuery3での変更点を分かりやすくまとめてくれているQiita

昨日Twitterのタイムラインで下記を見かけました slickのがたつきの件、NxWorldさんのサイトのサンプルでもなってるからやっぱり自分だけじゃないな。／https://t.co/EJ5swAVGAu — ヤマシタレイコ｜OOOPEN (@OOOPEN_jp) January 30, 2019 以前このプラグインを使った時に同じような不具合に直面し、自力で何とかした経験があるので、同じように困っている方の参考になれば。。 現象 ここのスライドのNextとかPrevを押すと分かりますが、2周目の最初のスライドに来た時と、最初のスライドから最後のスライドに戻る時にがたつきます。 これは.slick-currentというクラスが来た時に透過にしたり大きくしたりしているのですが、がたつくパターンの場合クラスが付与されるまでにDOMの操作が発生しその処理時間の差でがたつくのだと思います。 対

ホーム>【jQuery】モーダルウィンドウとスライダー系プラグイン組み合わせ時の注意点 【jQuery】モーダルウィンドウとスライダー系プラグイン組み合わせ時の注意点 【jQuery】モーダルウィンドウとスライダー系プラグイン組み合わせ時の注意点 2017-12-14 モーダルウィンドウ、いわゆるlightbox系プラグインとスライダー系プラグインを組み合わせる時の注意点と備忘録です。 モーダルウィンドウ単体、またはスライダー単体でそれぞれ使うぶんには基本的には全く問題なく使用していいと思います。 ですが、カルーセル表示（小さいサムネイルを表示させてるあれ）をスライドさせて、そのサムネイルをクリックするとモーダルして拡大させて表示ということをしたいときに注意が必要です。 スライダー系プラグインの仕様に注意 以前、紹介させていただいたプラグインなどがそうなのですが、スライダーをずっとスライド

2021.05.29 修正 codepenのサンプル内からのリンクを別タブで開くと警告されるようになったので、 別でサンプルHTMLを準備しました よく出回ってるhoge.html?id=sec01など、URLのクエリパラメータでIDを指定するようなURLでページ内アンカーをさせるやり方はアクセシビリティ、マシンリーダブルの面では疑問です。 JavaScriptをOFFにされてもきちんと動作し、またGoogleなどのbotにも適切な箇所にリンク先を指定できるページ内アンカー(#id)で指定する方が好ましいと個人的に考えてます。 ✕悪い例 <a href="hoge.html?id=sec01"> ◎良い例 <a href="hoge.html#sec01"> なので素直にハッシュ(#)でID指定してページが自動スクロールするJavaScriptをjQueryで書きました。 Sample h

普段はあまり気にならないのですが、 自動で切り替わるスライダーを実装した時に 最初の1枚目だけ切り替わるのが早く、コピーが読めない。 2周目以降は切り替わる速さは問題ない といった場合の対処方法を説明します。 beforeChangeとslickSetOptionを使う autoplaySpeedの初期値には 指定したいautoplaySpeedの値 + speedの値 を指定。 1枚目以外のスライドに切り替わったタイミングで slick('slickSetOption', 'autoplaySpeed', 8000, true) のように指定。 $slider.slick({ infinite: true, fade: true, speed: 2000, autoplay: true, autoplaySpeed: 10000, }) $slider.on('beforeChange'

こんにちは、ma-ya’s CREATE［まーやずくりえいと］です。 長く親しまれているWEBサイト上のスライドショー。 色々なプラグインが開発されて、中には超多機能なものもあります。 ただ、超個人的な話をすると、スライドショーはシンプルで良いと思ってます。 ぶっちゃけ、全てのスライドをじっくり1枚ずつめくりながら見るユーザー・見せるべきケースってそこまで多くないんじゃないか？？て思うんですよねえ。。 中にはここスライドショーじゃなくてもいいんじゃない？と感じる事さえあるので、いっそ本当にプレーンなスライドショーサンプルを作ってみました。 ページ送りも付いていない、一定間隔でスライドを繰り返すだけの超絶シンプル仕様です。 See the Pen Extreme plain slideshow by mycreatesite (@mycreatesite) on CodePen. うーん潔い

.tabs .is_active { /* 何かタブを変更する設定 */ } .tab-content { display: none; } .tab-content.is_show { display: block; } $(function() { var tabMenu = function() { /** * 変数の指定 * $tabs : tabの親要素のjQueryオブジェクト * $content : tabによって切り替わる要素のjQueryオブジェクト * TAB_ACTIVE_CLASS : tabが選択されたスタイルを変更するclass名 * CONTENT_SHOW_CLASS : contentを表示させるためのclass名 * id_arr : $contentのIDを配列に格納 */ var $tabs = $('.tabs'); var $content =

Midnight.js lets you switch fixed headers on the fly Scroll to try it out! The Header Create your fixed nav (or header) as you typically would. You can use whatever markup suits you, just make sure the header works well with position:fixed. The Sections After that, take any sections of your page that need a different nav and add data-midnight="your-class" to it, where .your-class is the class you

使い方次第で簡単に様々なタイプのカルーセルが実装でき、オプションやイベントも豊富に用意されているのが特徴のjQueryプラグイン「slick」で、スライド総数と現在何枚目が表示されているかをそれぞれカウント表示させるカスタマイズを紹介します。 slickの基本的な使い方や実装方法については下記でもサイトやGitHubで確認できるので省略します。 実装イメージはこのようになっており、現在のスライド数 / スライド総数という形でカウントを表示させます。（イメージは全10枚中5枚目を表示しているという状態） デフォルトで用意されているバレットとかでも全部で何枚あり現在何枚目を表示しているかはわかりますが、よりパッと見でわかるようにしたいときやデザイン的にこのような表示にしたいとき、あとはスマートフォンなど表示領域が狭い場合にバレットやサムネイルなどがごちゃごちゃ配置されているのをどうにかしたいと

HOMEブログウェブ制作slickを使ったスライドショーのカスタマイズ例3つ。 | ネクストページブログ こんにちは、エンジニアのアンドレです。 最近案件でslickを使ってスライドショーのカスタマイズを3件ほど行ったのですが、その際に多少調べたり詰まったりしたので、備忘録も兼ねてこちらでご紹介したいと思います。 幅固定での中央寄せ 中央寄せ用に「centerMode」というオプションがあり、それを「true」にすれば幅可変の中央寄せは簡単にできます。 しかし、例えばPC表示でコンテンツ幅が決まっていて、その幅分を確保して中央寄せにしたい場合に、なかなかうまくいかずに苦労しました。 結論から言うと、オプション「variableWidth」に「true」を指定し、スライドさせる要素（下の例では「.item」）に固定幅を指定することで実現できました。 See the Pen 幅固定での中央寄せ