JavaScriptでHTML要素の高さを取得する方法 - Qiita
JavaScript で HTMLの要素の高さ / 幅を取得しようと思った時、outer やら avail やら offset やら、オブジェクトにやたらとプロパティが生えていて混乱したのでまとめました。 検証環境 iMac / iPad / iPhone にて 2021年10月時点での Google Chrome 最新版で検証しました。デスクトップ版の Chrome は v94 でした。 プロパティを全列挙するとごちゃごちゃして見づらくなるため、高さに絞って説明しています。幅を得る時は Height を Width に読み替えてください。 ディスプレイのサイズ - screen オブジェクト デバイスのディスプレイのサイズを得るには screen オブジェクト を参照します。 const h1 = window.screen.height; const h2 = window.scree
How to build a Custom HTML5 Video Player with JavaScript
How to build a Custom HTML5 Video Player with JavaScript This guide will teach you how to create a cross-browser HTML5 video player with JavaScript using the Media and Fullscreen APIs. Watching and sharing video content is one of the most common uses of the web, and the way video is embedded on a webpage has evolved over the years. Nowadays, adding video files to a webpage can be achieved using th
Dropzone.js
File uploads made easy Dropzone.js is one of the most popular drag and drop JavaScript libraries. It is free, fully open source, and makes it easy for you to handle dropped files on your website. It's meant to look good by default, and is highly customizable. Source code on GitHub You can get all the source code on GitHub, as well as installation instructions. If you encounter an issue with this l
個性的なデザインのSNSシェアボタン17選【CSS/JavaScript】 - Workship MAGAZINE(ワークシップマガジン)
さまざまなジャンルのWebサイトで目にする、SNSシェアボタン。せっかくなら既存のデザインを使うのではなく、Webサイトの雰囲気にあわせたオリジナルのボタンを使いたいですよね。 今回は、CSSやJavaScriptで制作されたSNSシェアボタンをご紹介します。 1. ブログにおすすめのサイド配置SNSシェアボタン はじめにご紹介するのは、ブログやメディアサイトなどでよく使われている、サイドに配置されたSNSシェアボタン。見出し近くの最上部に固定することも、スクロールに追従させることも可能です。 デザイン性に優れており、自然にWebページに溶け込みます。ブログにオリジナルのSNSシェアボタンを使いたいなら、まずこのテンプレートからはじめてみましょう。 See the Pen Share Buttons Inspired by IGN by Michael Schofield (@michae
ドロワーメニューの「simple-sidebar」の簡単なサンプル
simple-sidebar スマホなどの、ドロワーメニューの追加で便利な「simple-sidebar」。 サンプル通りに作っても、つまづいたので、備忘録代わりに簡単なサンプルを作りました。 作り方 今回のデモは下記から確認できます。 デモはこちら JavaScript読み込み ソースはGitHubの「simple-sidebar」の「download.zip」から、ダウンロードできます。 <head>部分に、jQueryとjQueryUI及び、ダウンロードしてきた 「jquery.simple-sidebar.min.js」を読み込みます。 今回は「js」フォルダ内に「jquery.simple-sidebar.min.js」を置いています。 <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.
CommonJSとES Modulesについてまとめる
モチベーション 普段フロントエンドを領分にしているのになかなかこのあたりの基礎が足りていないと感じることが多いので、なんとかしたい。 ES Modules方式でしか対応されていないライブラリを使おうとしてコケたので色々調べたのも含め、まとめていく。 ちなみにその辺りについてはこの神記事見ると良い。 個人的に気になっているモジュールシステムについて掘り下げていく。 CommonJS CommonJSとは、サーバーサイドなどのウェブブラウザ環境外におけるJavaScriptの各種仕様を定めることを目標としたプロジェクトである。 from Wikipedia 例えばNode.jsで使われている。 Node.jsはデフォルトで全てのモジュールをCommonJSで扱うが、Node.jsは最近のバージョンでES Modulesに対応するなどしていて、潮流はES Modulesに流れつつある。 後述する
ES Modules（import/export）ことはじめ
JavaScriptにも、モジュール機能（import/export）がやってきました！これまではNode.jsなどを用いてモジュールを扱っていましたが、これからはJSの標準機能として使えます。 対応ブラウザ ES Modulesに対応しているブラウザは以下の通りです。 Chrome 61 Safari 10.3 その他のブラウザは未定です。 ES Modulesの使い方 importする側 ES Moduleのimportを使うには、script要素がtype=”module”である必要があります。スクリプト自体は、インラインでも外部ファイルでもかまいません。 <script type="module" src="main.js"></script> type=”module”が指定されたスクリプトは、defer属性が付与された場合と同様の扱いになります。オプションとしてasync属性を
jQueryプラグイン「jquery.cookie.js」でcookieを簡単に扱う ｜ Tips Note by TAM
JavaScriptでcookieを扱うのは、値のエンコード・デコードや書き込む際の文字列結合、値を取り出す実装など、意外に面倒です。しかし、「jquery.cookie.js」を利用すれば、cookieを簡単に扱えるようになり、シンプルなコードで実装できます。 まずはjQueryとjquery.cookie.jsを読み込みます。 ※jquery.cookie.js は GitHub（https://github.com/carhartl/jquery-cookie）からダウンロードすることができます。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.cookie.js"></script> ■cookieの設定 cookieを保存するには
【JavaScript】ドラッグ&ドロップ機能を作成する方法『ライブラリ無し』
JavaScriptを使用して、ドラッグ&ドロップ機能の作成方法を解説します。以下のようなやつですね。ユーザーからの写真やイラストやテキストファイルをサーバーに送信したりする際に使用するプラットフォームです。 こんな感じのファイルを選択も出来て、ドラッグ&ドロップでファイルをアップロードする機能の作り方とかも需要あるのかなあ。 ドラッグ&ドロップの仕様結構気持ち悪くて、dragoverとdropの際にpreventDefault()をしないとうまく挙動しない旨とかも解説すればある程度あるか🤔 pic.twitter.com/9BugzVc6Di — ys@Webエンジニア（サーバーサイド寄り (@sy_sh7711) September 16, 2019 JavaScriptと合わせて実装することで、ボタンでファイルを選択することだけではなく、ファイルをドラッグ&ドロップで選択出来るよう
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Get the scroll position of the current page using JavaScript - 30 seconds of code
Freshman — Articles and Tutorials on Software Development
File Upload using Dropzone.js with PHP
あなたのウェブサイトで - JPDEBUG.COM
darkreader