サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
GPT-4o
qiita.com/mimoe
編集中のものがあったりして、保存されませんが、続けますか?という確認をするあれです。 Nuxt.jsで書きます。 ブラウザを閉じたり、リロードしたりしたとき export default { created () { window.addEventListener("beforeunload", this.confirmSave); }, destroyed () { window.removeEventListener("beforeunload", this.confirmSave); }, methods: { confirmSave (event) { event.returnValue = "編集中のものは保存されませんが、よろしいですか?"; }, } }
Help us understand the problem. What are the problem?
Vue.jsでタブメニューをつくります。 使い慣れているjQueryなら5分もかからずにデザインも込みで完了しますが、 まだ良くわかっていないVue.jsでは、正直どこから手を付けていいものやらだった。 他の記事にも書いたけど、間を開けずに取り組むべき・・・ 自分の理解を深めるためにも、jQueryと改めて見比べてみました。 サンプルコードを試す場合は、jQueryもVue.jsもCDNを読み込んでください。 (このバージョンでなくてもどこのCDNでも問題ないです。) <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.min.js"></script> ul{ margin: 0;
やりたいこと Nuxt.jsの環境でSassを使いたい CSSフレームワーク(Bulma)を導入したい 設定した変数をvueファイルで使いたい 共通スタイルcommon.cssみたいなファイルを全ページで読み込みたい 使うもの Bulma node-sass sass-loader nuxt-sass-resources-loader 作業内容 ターミナルでインストール $ npm install sass-loader node-sass --save-dev $ npm install bulma --save $ npm install --save-dev nuxt-sass-resources-loader // Import a Google Font @import url('https://fonts.googleapis.com/css?family=Nunito:400
前置き(とばしてください〜) めっちゃ久しぶりに更新します。 プロフィールなども古いですがとりあえず今度そのあたりも更新しようと思っています。 簡単に今の私について。 携帯の販売→スマートフォンアプリの専門学校→Web制作会社→フリーランス→フリーランスの時に仕事を受けたスタートアップの会社に就職(まだ2週間前の話) こんな感じです。 フリーランスのときは(今もまだ仕事はちょこちょこ受けてますが) 基本的に私ができる仕事はなんでも受けていました。 ので、エンジニアの仕事があればデザインの仕事、Botのシナリオ作成(UXライター的な)、プログラムとはかけ離れた仕事などなどもしていました。 また、ガッツリエンジニア!!という仕事はなかったので、(なぜが割とがっつり常駐していたスタートアップではメンバー半分がエンジニアだった!) 逆に、仕事で新技術学べる機会は殆ど無く… 今の自分が活躍できる領域
よく忘れるのでメモ。 CSS TransformsでCSS Animation/Transitionと組み合わせて、要素を移動させたり、拡大縮小させるとちらつくことがあるらしい。 ちらつく現象はiOSのSafariの専売特許ではなく、PCやスマホに関係なく発生するらしい。 position: fixed;を指定したスタイルに以下を追加する。
<img src="img/1.png"> <img src="img/2.png"> <img src="img/3.png"> <br> <img src="img/3.png"> <img src="img/1.png"> <img src="img/2.png">
slick.js http://kenwheeler.github.io/slick/ こちらのスライダーのプラグインを、モーダル内で使おうとしたとき、表示崩れが起きた。 調べてみたら、display: none;のため、widthが0pxになっていた。 再設定できるeventが用意されていたので、それを試してみても、うまくいかず・・・ $(function(){ var slider = $('.slider').slick(); $('.open-modal').click(function(){ slider.slick('setPosition'); }); }); 丸2日頭を悩ませてしまったが、とてもシンプルな理由だった。 私はてっきり、slider.slick('setPosition');が動いていないと思ってしまった。 原因は、モーダルが300ミリ秒かけて表示していたこと。
// スクロールを無効にする $(window).on('touchmove.noScroll', function(e) { e.preventDefault(); }); // スクロール無効を解除する $(window).off('.noScroll'); スマホの独自イベントのtouchmoveイベントを切ってスクロールを止める。 解除したい時はoffする。 イベント名に、.noScrollと名前を付けることで、他の部分でtouchmoveイベントを使っていたとしても、そのtouchmoveイベントまでイベントをoff()してしまうこともなく、.noScrollの名前のイベントのみをoff()することができる。 参考 iphoneでスクロールをさせない処理をする。 特定のエリアのみスクロールを無効にする方法 ドロワーメニューを左側に表示するときにコンテンツ側を固定するときなど //
hoverしたらsetIntervalが始まり、条件を満たしたらclearIntervalしたかった。 しかし、短時間に何回もhoverを繰り返したときに、clearIntervalが効かなくなることがあった。 そんな時の解決策。 ページが表示されたらsetIntervalが始まり、「ストップ」をクリックしたらclearIntervalする場合 boxAime = setInterval(boxChange, 50); var boxWidth = 0; function boxChange(){ boxWidth++; $('.box').width(boxWidth); } $('.stop').click(function(){ clearInterval(boxAime); });
The XSS Auditor refused to execute a script in 'URL' because its source code was found within the request. The auditor was enabled as the server sent neither an 'X-XSS-Protection' nor 'Content-Security-Policy' header. 発生状況 とあるCMSで、登録したコンテンツの編集を行い、登録ボタンを押したとき、data:,というURLで真っ白な画面になる。 Consoleを見てみると、登録ボタンを押した時ではなく、画像のアップロードボタン・画像の取り消しボタンを押したときにエラーをはいている。 ちなみに、どの画像をアップロードしようとしてもダメで、他の投稿にアップロードすることは出来た。
上記のように、そのタグにhogeというclassがついているかどうかを判定する。 例えば、こんなときに使える。 <div class="hoge">テスト1</div> <div>テスト2</div> <div class="hoge">テスト3</div> <div>テスト4</div> <div>テスト5</div> $('div').click(function(){ if($(this).hasClass('hoge')){ $(this).css('color','red'); } }); クリックしたとき、hogeというclassがついていたら、文字色を赤くする。 など。 しかし、これではclassが存在するかどうか、を判定する場合には使えない。 そこで使えるのが、length。 length=長さ、個数を表すメソッドである。 これで、hogeというclassが存在しているかど
div[data-color="red"][data-size="small"]{ background-color: red; font-size: 10px; } var colorVal = 'red'; var sizeVal = 'small'; $('div[data-color="' + colorVal + '"][data-size="' + sizeVal + '"]').show(); 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
実在するカード番号を利用することもできます。 カードの番号として妥当であれば上記以外の番号も利用することができます。 こちらのページで、番号の確認ができます。 【PHP】クレジットカードチェックサンプル カード番号以外の情報について 基本的に何でも大丈夫です。 名前・・・スペース区切りで名字と氏名を記入した名前なら何でも使用できます。(例: Taro Tanaka) 有効期限・・・現在時刻より未来の年月を有効期限として指定してください。 セキュリティーコード・・・適当な任意の3桁か4桁の数字を入れてください。 エラーさせるカード番号 テスト環境では、有効期限切れや、カード会社に決済を拒否されたり、偶発的に接続へ失敗した場合などに発生する例外(card_error)を、以下の番号を指定することで意図的に発生させることができます。 クレジットカード番号 card_errorのcode エラー内
PCとスマホ両方に対応したサイトを構築するにあたって、 レスポンシブで対応する(読み込むファイルを分ける) PC用・スマホ用でページ(URL)を分ける PC用・スマホ用で読み込むソースを分ける(同じファイル内で) PCではあるけど、スマホにはないページがある(またはその逆) のような場合がでてくる。 アクセスされたくないページにアクセスされてしまっても、正しいページに誘導してあげることが必要になる。 上記の場合がメインの内容です。 metaタグによるリダイレクト
Enterキーを押すと、フォームが送信されることがある。 キーボード入力後、マウス操作してクリックする、という手間が省けてとても便利だと思う。 しかし、入力中にうっかり押してしまったりなど、期待しない挙動をしてしまうこともあるだろう。 この挙動は、HTMLの仕様がそうなっているからである。 ※ 古いブラウザでは以下の内容で対処できない場合があります。 ※ ブラウザの仕様が変わり、以下の内容では対応できなくなる場合があります。 対処方法① 送信ボタンを書き換える(テキストフィールドなどが2つ以上のとき) テキストフィールドなどがアクティブな状態で、Enterキーを押すとフォームが送信される。 <form name="testform1" action="test1.html"> <input type="text" name="text1" /> <input type="text" nam
レスポンシブに対応するのではなく、PC用にコーディングしたソースをそのまま綺麗にスマホでも見れるようにする方法。 viewport設定 何も指定しないと、初期値は980pxだが、横にはみ出た状態になってしまう。
ページ読み込み時に処理を実行したい場合、いろいろな書き方があると思います。 このあたりの違いをまとめました。 種類 jQueryのready と jsで昔から愛用されているonload がある。 ready $(function(){ alert('Hello'); }); //または $(document).ready(function() { alert('Hello'); }); //または jQuery(function() { alert('Hello'); }); //または jQuery(document).ready(function(){ alert('Hello'); }); //JavaScript document.addEventListener('DOMContentLoaded', function(){ alert('Hello'); }, false);
このページを最初にブックマークしてみませんか?
『@mimoeのマイページ - Qiita』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く