プログレスバーを簡単に実装できるprogressbar.js - bagelee（ベーグリー）
はじめに 本記事では、プログレスバーを簡単に実装できるprogressbar.jsをご紹介します。 こちらのライブラリは以前からありますが、ちょこちょこアップデートされているので改めてどんなことができるのか、どういった特徴があるのかなどを振り返っていきたいと思います。 また、bageleeでは以前画像に簡単にアニメーションをつけるライブラリもご紹介してますので、ぜひご覧ください。 画像に簡単にアニメーションをつけるcurtain.js progressbar.jsとは progressbar.jsは簡単にスタイリッシュでレスポンシブ対応をしているプログレスバーをSVGパスで作れることができるライブラリです。 モバイルデバイスでもアニメーションが崩れることなく綺麗に表示されるだけでなく、線のバー、丸のバー、半円のバーなどシェイプにも種類がいくつかあり、さらにカスタムでシェイプを作ることもでき
表示文章中の、指定の単語だけを動的に強調表示(ハイライト)する方法 - JavaScript TIPSふぁくとりー
《2018年2月9日 2:41 PM 公開/更新》 表示文章中の、指定の単語だけを動的に強調表示(ハイライト)する方法 [装飾・内容変更] ウェブページに掲載されている文章の中から、指定の単語だけを動的にハイライトしたり消したりする機能をJavaScriptで作る方法を解説。文章中の単語に最初からハイライトを加えていると読みにくくなる可能性がありますから、標準では何もせず、閲覧者がハイライトする意思を示したときにだけハイライトするような仕組みを設けておく方が使いやすいでしょう。ボタンを押す度に、ハイライトのONとOFFが切り替わるようにする作り方をご紹介。 指定の単語だけを動的に強調表示(ハイライト)したい ボタンクリックでハイライトをON/OFFする動作例 動的ハイライト対象のHTMLソースを書く 動的ハイライト表示のためのCSSソースを書く ハイライトを加えたり消したりするためのJav
ページ離脱防止機能を実装する - knowledge base
beforeunloadイベントを利用して実装 先日、とあるCMSの管理画面にて、記事入力途中・画像入力途中でのページ離脱防止機能の実装を行いました。 要件としては、Google Chromeのみで、離脱時にアラートを表示するというものでした。 ページ遷移前に発火するbeforeunloadというイベントを利用した実装を行なったのですが、僕自身このイベントに真正面から向かい合って実装に取り組んだことがなかったので、ところどころ小さな落とし穴があったため、その備忘録としてこの記事を書かせていただきます。 ちなみに、beforeunloadイベントの詳細はこちらを参照ください。 developer.mozilla.org テストは必ず入力フィールドのあるページで とても基本的な落とし穴ですがテストは必ず入力フィールドのあるページで行なってください。 Google Chrome公式でもRequi
Text particle
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
日付・時間のピッカーを単独のWebコンポーネントとして利用できる軽量JavaScript -Aeon Date Picker
デスクトップでもスマホでもタブレットでも動作し、フレームワークの有無に関係なく機能する、日付・時間のピッカーを簡単に実装できるわずか5Kbの軽量JavaScriptを紹介します。 依存関係は一切なく、単独のWebコンポーネントとして利用できるので、非常に便利です。日本語環境のフォーマットにも対応しています。 依存関係はなし スタンドアロンの単体で動作する軽量JavaScriptで実装されたWebコンポーネント。 どこにでも使用できる どんなページにもどんなフレームワークにも設置可能。 プログレッシブエンハンスメント コードの読み込みに失敗した場合は、ネイティブのピッカーまたはテキストボックスにフォールバック。 アクセシブル マウス・タッチ・キーボード・スクリーンリーダーで動作し、ネイティブのフォーム要素として動作します。 多言語対応 デフォルトでブラウザのローカル言語と日付形式を使用します
Vue + Vue Router + Vuex + Laravelで写真共有アプリを作ろう (1) イントロダクション | Hypertext Candy
はじめに 対象者 JavaScript / Vue.js / PHP / Laravel の入門レベルの方、入門書を読んだあとに「何か作ってみたい」という方が、それぞれの知識を組み合わせて本格的なアプリケーションを開発できるようになることを目指しています。 上記のいずれかの知識がまったくない状態だとこのチュートリアルの内容は少し難しいかもしれません。チャレンジするのもいいですが、参考文献に挙げた市販の入門書か、関連記事のチュートリアルを先に読んでおくと理解しやすいと思います。 学べること Vue.js と Laravel を組み合わせて SPA を構築する方法 SPA におけるクッキー認証と CSRF 対策 Vue Router を使用した画面遷移 Vuex を使用した状態管理 Vue でのタブやローディング UI の表現 SPA におけるエラー処理 扱わないこと デザインと CSS コー
式と演算子 - JavaScript | MDN
JavaScript での基本的なキーワードと一般的な式です。これらの式は最も高い優先順位を持ちます（演算子よりも高い）。 this this キーワードは関数の実行コンテキストを示す特別なプロパティです。 リテラル 基本的な null、論理値、数値、文字列のリテラルです。 [] 配列初期化子またはリテラル構文です。 {} オブジェクト初期化子またはリテラル構文です。 function function キーワードは関数式を定義します。 class class キーワードはクラス式を定義します。 function* function* キーワードはジェネレーター関数式を定義します。 async function async function は非同期関数式を定義します。 async function* async function* キーワードは非同期ジェネレーター関数式を定義します。 /
Document: getElementsByName() メソッド - Web API | MDN
Document Object ModelDocumentコンストラクターDocument()インスタンスプロパティactiveElementadoptedStyleSheetsalinkColorallanchorsappletsbgColorbodycharacterSetchildElementCountchildrencompatModecontentTypecookiecurrentScriptdefaultViewdesignModedirdoctypedocumentElementdocumentURIdomainembedsfeaturePolicyfgColorfirstElementChildfontsformsfragmentDirectivefullscreenfullscreenElementfullscreenEnabledheadhiddenimagesimp
changeイベント：フォームや選択メニューが変更されたとき
change イベントはフォーム( input 要素)や選択メニュー( select 要素 )、テキストエリア( textarea 要素)にてユーザーの操作によって値が変更されたときに発生するイベントです。 onchange 属性または onchange プロパティに対してイベントハンドラを設定したり、 addEventListener メソッドの引数として change を指定してイベントリスナーを登録できます。ここでは JavaScript を使って change イベントが発生した場合の処理を記述する方法について解説します。
bxSliderのスライド内のリンクが効かなくなった際の対処方 | ウェブマガジン カミナリ | 鳥取県米子市のホームページ制作・広告代理店・デザイン
こんにちは。 佐藤です。 最近作業してて驚いたのですが、 スライダープラグインbxSliderがアップデート後のchromeで スライド内のリンクをクリックしても反応しなくなってました。 ※クロームバージョン: 73.0.3683.86(Official Build)(64 ビット)(windows) 同じ現象はbxSliderだけじゃないでしょうし 今後のchromeのアップデートで直る可能性も大いにあるのですが その保証もありませんし、いつになるかもわからないので対応策のご紹介です。 対応策① 「mousedown」で対策する //単純なタイプ、ページ内リンクだけの場合は基本これでＯＫ $(document).on('mousedown','.bx-viewport a',function(){ window.location.href = $(this).attr('href');
bxSlider で画像のtitleの内容をキャプションにする | 9ineBB
slideをWebサイトに実装するjQueryのプラグインですが 表示した画像に、その画像が持つtitleをキャプションとして表示することが可能です http://bxslider.com/ bxSlideを使ってスライドの画像にキャプションを表示する まず、bxSliderの基本的な設置 head部分にjqueryとbxsliderのファイルを読み込むコートを記入します <link rel="stylesheet" type="text/css" href="bxslider/jquery.bxslider.css" /> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="bxslider/jquery.bxslider.js"></script
分割代入 - JavaScript | MDN
分割代入 (Destructuring assignment) 構文は、配列から値を取り出して、あるいはオブジェクトからプロパティを取り出して別個の変数に代入することを可能にする JavaScript の式です。 const [a, b] = array; const [a, , b] = array; const [a = aDefault, b] = array; const [a, b, ...rest] = array; const [a, , b, ...rest] = array; const [a, b, ...{ pop, push }] = array; const [a, b, ...[c, d]] = array; const { a, b } = obj; const { a: a1, b: b1 } = obj; const { a: a1 = aDefault,
Object.defineProperty() - JavaScript | MDN
Object.defineProperty() で、あるオブジェクトのプロパティを明示的に追加または変更することができます。代入による通常のプロパティ追加では、プロパティ列挙 (for...in ループや Object.keys() メソッドなど) に現れ、値は変更可能で、また削除も可能なプロパティが生成されます。このメソッドでは、これらの詳細事項を既定値から変えることが可能です。既定では、 Object.defineProperty() を使って追加されたプロパティは書き込み不可、列挙不可、構成不可になります。加えて、 Object.defineProperty() は内部メソッドの [[DefineOwnProperty]] を [[Set]] の代わりに使用しますので、プロパティが既に存在する場合でもセッターを呼び出しません。 プロパティの記述子は、データ記述子とアクセサー記述子の二
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
JavaScriptで日付セレクトボックスを作ろう！～うるう年も考慮してみよう！～ - みみぺんブログ
https://spyweb.media/2018/01/20/jquery-nextall-pure-javascript/
KumaTechLab
WordPressのお問合せフォームをステップ式にする方法 | SNIPPET
https://tr.you84815.space/slick/settings/centerMode.html
【ajax】通信エラーとなった原因の取得方法 | クロジカ
閉じる - ページを離れる javascript