ボタンがクリックすると新規ウィンドウが立ち上げるという単純な仕様を実装したのだが、 iOS／Safari でウィンドウが立ち上がらなくて困ったことになった。これはその対応メモです。 調べてみるとiOS／Safariではポップアップブロックがデフォルトで有効になっていて、ボタンがクリックされた後になんらかの処理を入れた場合、その後に新規ウィンドウを「Window.open」で立ち上げようとしてもブロックされてしまうということらしい。 悪意あるスクリプトでウィンドウを立ち上げさせないためのセキュリティ措置なのだろう。つくったスクリプトは確かにボタンがクリックされた後ajax通信していた。 > 下記にもっと詳しく書かれているので下記を参考にしてほしい。 > https://qiita.com/chelcat3/items/b46061d90b6675c34a67 ### 対応策 対応策としては、

Register as a new user and use Qiita more conveniently You get articles that match your needsYou can efficiently read back useful informationYou can use dark themeWhat you can do with signing up

フォームでよく使うselectタグですが、その選択をした時に、ページが遷移するという実装をする機会があったので、忘却録としてサンプルコード付きで解説いたします。 jQueryでページ遷移を行う だいたい普通のホームページ […]

サンプル このサンプルはブラウザの横幅が660px以下かどうかを分岐点に div#content の width を変更する処理をしています。 $(window).on('load resize', function(){ var w = $(window).width(); var x = 660; if (w <= x) { $('#content').css({ width: '100%' }); console.log("660px 以下：SPなど"); } else { jQuery('#content').css({ width: '660px' }); console.log("PC"); } }); WordPressで上手く動作しない場合 WordPressのテーマなどに記述してうまく動かない場合は「$」を「jQuery」に変更します。 jQuery(window).on

script.js にコードをコピペ script.js ファイルに次のコードを貼り付けます。 (function ($){ $(document).ready(function ($){ // フェードイン $(window).scroll(function () { $('.fadeIn').each(function () { var scroll = $(window).scrollTop(); // 現在のスクロール位置 var offset = $(this).offset().top; // 対象の上からの位置 var windowHeight = $(window).height(); // ウィンドウの高さ if (scroll > offset - windowHeight + 150) { $(this).addClass("scrollIn"); } }); });

.hero-slide__img { animation-duration: 15s; // 長さ15秒 animation-iteration-count: infinite; // 無限に再生を繰り返す animation-name: slideAnime; // アニメーション名 animation-timing-function: ease; // 開始と完了を滑らかにする opacity: 0; // 透過設定 }

今回は、「jQueryを使って背景画像をパララックスさせる方法」について紹介します。 デザインの幅が広がるので、是非試してみてください。 パララックスとは？ パララックスは、英語で「視差」という意味になります。 視差とは、サイトを構成するパーツごとのスクロールスピードをずらすスクロール効果のことを言います。 パララックスを使うことで、いつもと違う印象をユーザーに与えることができますよ。 【jQuery】背景画像をパララックスさせる方法 完成形はこちら。 1つ目の背景画像をパララックスなしにして、2つ目の背景画像をパララックスありにしました。 2つ目のパララックスありの背景画像は、テキストと微妙にスクロールのズレがあることが分かると思います。 これがパララックス、つまり視差効果になります。 準備 まずはjQueryのCDNをbodyの閉じタグの直前に書きましょう。 <script src="

プラグイン不要の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> <!-- モーダ

[WordPress] ページネーション（ページ送り）をプラグインなしで設置したい 公開日:2018/08/24 更新日:2020/06/16 アーカイブやインデックスページを作っていると、ページ送り用のページネーションが必要になります ボタンのデザインも自前で整えたい場合、プラグインで作成したページネーションではデフォルトのスタイルが邪魔になってしまいます そこで、プラグインを使用することなく、最低限必要な機能をもったページネーションの実装方法をまとめてみました サンプルコード PHP <nav class="pagination"> <?php global $wp_query; echo paginate_links(array( 'format' => '/page/%#%' , 'current' => max(1, get_query_var('paged')), 'total

こんにちは！フリーランスディレクター兼エンジニアののせっち@nosecchi01です。 スクロールでふわっと要素を出現させるアニメーションを、Javascriptのみで実装します。 jQueryは使いません。 元々jQueryで使っていたコード（スニペット）を元にjavascriptに書き直した形なので、下記のような方にもオススメです。 「jQueryはわかるけどJavascriptはイマイチ・・・」「jQueryを使わずにバニラjsで書いてみたいけど、正直自分で書くのは面倒。」 それではいってみましょう！ 目標物を確認 早速コードペンで見てみましょう！ jQueryと比較するとわかりやすいので、jQuery、Javascriptを両方記載します。 jQuery jQueryで書いたものが下記です。 See the Pen scroll-in(jQuery) by Yuki Nose (@

こんにちは、ゆんつです。 YouTubeの動画を背景として利用したい場合。 ・CSSで調整する方法 ・jQueryのプラグインを使う方法 などがあります。 前回はCSSを使ってYouTubeを背景に設定しました。 CSSでYouTubeを背景にする 今回はjQueryのプラグイン「jquery.mb.YTPlayer」を使用してYouTubeを背景にしたいと思います。 jquery.mb.YTPlayerの導入 jquery.mb.YTPlayerの公式サイトにアクセスします。 「Code」ボタンをクリック。 「Download ZIP」という項目をクリック。 Zipファイルのダウンロードが始まるので、適当な場所にダウンロードして解凍します。 解凍したフォルダのなかの「dist」というフォルダを開きます。 そこにある「jquery.mb.YTPlayer.min.js」というファイルを使用

当記事では、できるだけわかりやすく、簡潔に上記のようなサムネイルスライダーを作成する方法について記しています。 前に以下のような記事を書いたのですが、全く違う方法で簡潔に作成できることに気づいたので、改善版です。 slick.jsのドットをカスタマイズしてサムネイルスライダー作ってみた slick.jsの基本的な使い方はご存知の前提で進めさせていただきますので、slick初めてという方は下記の記事などが参考になるかもしれません。 slick.jsでシンプルなスライダーを実装する方法【たった4ステップです】 ※最後にコードの全文を載せております。 <style> .slider-container{ width:50%; margin:0 auto; } .slick-prev,.slick-next{z-index:2;} .slick-prev{left:0!important;} .s

「スライダーを実装したい！」「でも何を使えばいいの？」という方に朗報です。 この記事ではスライダーを作成するプラグイン「slick」の設定方法から使い方、カスタマイズまでをしっかりばっちり説明していきます。 slickを使えばデザイナーやディレクターの要望にばっちり応えられること間違いなし！（かもしれません。） slick（スリック）とはslickはjQueryベースの、スライダーを作成するためのプラグインです。レスポンシブにも対応し、IE8以上のブラウザであれば完全対応で、カスタマイズの幅も広いため、世界的に利用されています。 また、商用の利用もOK（※ちょっぴり条件があります）なので我々のような制作会社で導入するのにも安心です。 ※slickはMITライセンスというライセンスの中でトップクラスに緩い制限のライセンスを採用しています。MITライセンスはざっくりいうと「このソフトウェアは誰

突然ですが、ホームページなどのコーディング中に下の画像のような状況になった覚えがある方って結構いるんじゃないでしょうか。 例えばお知らせ一覧ページなど、ホームページ公開直後などは記事数が足りずコンテンツ量がまだ少なかったりします。 “コンテンツ量が少ない＝ブラウザ全体の高さに対してコンテンツの高さが足りない”という状態のため、フッターの下に余白ができてしまうわけです。 フッターが浮いた感じもしますし、ほかのページとのレイアウトと同じく画面下部に表示されるようにしたいですよね。 そこで今回は、フッターの表示方法について記事を書いていきたいと思います。 「position:fixed」で固定しちゃえば即解決？ 要素を固定する方法として「position:fixed」を指定するという方法があります。 フッター領域に「position:fixed」を指定すれば即解決するんじゃ？という案もひとつあり

CSSのメディアクエリによって、ウィンドウの幅に応じたスタイルの出し分けは、よく見かけるようになってきました。 そこで、そのウィンドウサイズに応じてJSを発動させたい、という要望もあるかと思います。 メディアクエリによるstyleの値の数値をJSで取得して発動させる手もありますが、単純にメディアクエリ同様のウィンドウサイズを取得して発動させる例を紹介します。 CSSのメディアクエリの例 .pc-mode { /* PCのCSS */ } @media only screen and (max-width: 800px) { .sp-mode { /* SPのCSS */ } } 上記とほぼ同じ出し分けをJSで書くと $(window).on('load resize', function() { var ww = window.innerWidth; if (ww > 800) { //