「JavaScriptで要素をドラッグして移動する簡単な方法」という記事が初耳だらけだった件 - Qiita
はじめに まず↓の記事を見てない方はぜひ見てください！ 自分にとってはこの記事には「えっ、ナニコレ！」なテクニックが多く、特に解説もなかったのでいろいろ調べてたら休日が消えてました... なのでその時間の供養もかねて、自分が知らなかった部分を中心に、僭越ながら元記事の解説を書いてみたいと思います。 ちなみに、以下が元記事のコードそのままを実装したものです。たしかに掲載コードだけで要素がグリグリ動きますね。 See the Pen js-drag-move-original by www-tacos (@www-tacos) on CodePen. 初耳1: $img まずコードのここ <img id="$img" src="https://js.cx/clipart/ball.svg" width="40" height="40"> <script> $img.onpointermove
【コピペ可】iOSのバージョンを判定するjavascriptコード
ユーザーエージェント文字列を利用してiOSのバージョンを判定するjavascript関数のスニペットを紹介します。iOSのバージョンによってCSSやjavascriptの対応状況が異なったりしてjavascriptの処理を分けたい場合に活用できます。 iOSのバージョンを判定する方法 navigator.userAgentから現在のブラウザーのユーザーエージェント文字列を解析することでiOSのバージョンを判定することができます。ただし、この値はユーザー側で設定を上書きできるため、必ず正しいバージョンが取得できるわけではないことに注意してください。 以下のスニペット関数をそのままコピーして使うことができます。 function getiOSVersion(){ return parseFloat( ('' + (/CPU.*OS ([0-9_]{1,5})|(CPU like).*Apple
JS で端末の向きや PWA で動いてるかを判定する - yKicchan's blog
JS から MediaQuery 使えるんだって MDN: window.matchMedia 指定された メディアクエリ文字列のパース結果を表す、新しい MediaQueryList オブジェクトを返します。 状況に応じてリッチな UI や振る舞いを表現するために使えそう。 自分はアプリケーションが PWA で動いているかどうかで動作を変えたいシチュエーションがあったのでそこで活かした。 使用例 PWA の判定 ※ manifest.json で "display": "standalone" の指定がされていること if (window.matchMedia('(display-mode: standalone)').matches) { // PWA のときの処理 } 画面の向きの判定 if (window.matchMedia( "(orientation: landscape)"
アンカーリンク〜様々な状況に対応できるJavascript記述方法〜 | デザインやWEBに関する情報を発信する【まるログ】
アンカーリンクにはページ内リンクや、ページをまたいで特定の場所にリンクさせる方法があります。特定の場所へリンクさせることができるので便利ですが、ヘッダーなどがフローティングでページ上部に固定されている場合は、何も対策をしないとアンカー位置がそれらのナビと重なってしまいます。今回はその対処法を紹介したいと思います。 デモページ デモページは前提として、ヘッダーがフローティングしていて、各ページのタグに固有のidが指定されているものとします。 source1：ページ内リンク（ページ内アンカーリンクを押した際の挙動） $(function () { var headH = $("header").outerHeight(); //ヘッダーの高さを取得 var animeSpeed = 500; //アニメーションスピード $("a[href^='#']").on({ "click": funct
Element から Selector を取得する - アカベコマイリ
CSS や JavaScript で document.querySelector に指定する Selector を DOM Element から取得したくなって方法を調べていたら以下の記事をみつけた。 javascript - Get CSS path from Dom element Element を指定すると Selector を返すような API を想定していたのだが自前で Node/Element をチェックする必要があるようだ。動作の理解と実証のため簡単なサンプルを作成する。 以下のような HTML から <h1>、<p>、<th>、<td> がクリックされたとき、その Element から得た Selector を表示。Selector が正しいことを確認するために document.querySelector へ指定して得られた Element の背景色を変更する。 サン
JavaScript Obfuscator Tool
A free and efficient obfuscator for JavaScript (including support of ES2022). Make your code harder to copy and prevent people from stealing your work. This tool is a Web UI to the excellent (and open source) javascript-obfuscator@4.0.0 created by Timofey Kachalov. FAQWhy would I want to obfuscate my JavaScript code?There are numerous reasons why it's a good idea to protect your code, such as: Pre
新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました - ICS MEDIA
新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました アニメーションを作る時に、「思いついた演出をすぐに実装したい」「頭の中ではできているのに、コーディングするのが面倒」と思ったことはありませんか？アニメーション作成にはライブラリを使用することが多いと思いますが、使い方を調べて覚えて、ドキュメントからコピペしたり、ひたすらタイピングをして… 私はこれらの問題を解決するために、「Tween24」というライブラリを作りました。Tween24はメソッドチェーンで記述するのが特徴で、たった1行でアニメーションが実装できます。依存ライブラリもなく、単体で動作します。アニメーションライブラリの多くはオブジェクト型でプロパティを指定するためタイピングが多くなりがちですが、メソッドチェーンであればエディターのコード補完機能でスラスラと記述できます。 その他にも、メソ
JavaScript：DOMでmeta タグを挿入してみる | むずむずサイト製作：凝ったきれいなブログのコツ
一定期間更新がないため広告を表示しています
jQueryでカラーピッカーをパレット表示できる超便利プラグイン | PisukeCode - Web開発まとめ
カラーピッカー表示には２つの方法があります。 １つめ : OS依存のカラーピッカー ２つめ : 外部ライブラリの導入 HTML5からは type="color" がサポート済みです。 でもOS依存のカラーピッカーって何かダサいですね。 そこでjQueryでプラグインを探したところ・・・ よさげな md-color-picker というのを発見！ かなり気に入っているので、 ここではこの使い方とかパレット表示をまとめます。 おおよその導入と使い方は次の通りです。 １．まず必要なファイルを読み込み このプラグインの正式名称は 「material-design-inspired-color-picker」 という少し長い名前。 その名の通り、マテリアルなカラーピッカーです。 そのダウンロードは 次のgithubページから可能 ▼A javascript color picker inspire
テンプレートリテラル (テンプレート文字列) - JavaScript | MDN
// タグなし。これらは文字列を生成します。 `string text`; `string text line 1 string text line 2`; `string text ${expression} string text`; // タグを付けると、関数 "example" を最初の引数にテンプレート、 // 後続の引数に置換値を指定して呼び出します。 example`string text ${expression} string text`; テンプレートリテラルは、ダブルクォートやシングルクォートの代わりにバッククォート文字 (`) （グレーブアクセント）で囲みます。 テンプレートリテラルにはプレースホルダーを含めることができます。プレースホルダーはドル記号と波括弧 (${expression}) で示されます。プレースホルダー内の式とバッククォート文字 (`) の間にあ
viewport の指定を JavaScript で行う | UB Lab.
スマートフォンサイトを制作するときに欠かせないのが、viewport の指定だ。ページを表示したときに、表示領域の幅や高さ、ズーム操作の可否、ズーム倍率などを指定できる。一般的には、meta タグを使って以下のように指定する。 <meta name="viewport" content="width=device-width,initial-scale=1.0"/> meta タグを自由に記述できる場合は問題ないが、コンテンツの中身だけ制作しシステムの一部として組み込まれる場合や、ルールにより meta タグを追加できない場合もある。しかし、見た目は整えなければならないので viewport の指定は必要だ。タグを追加する方法に比べると少し面倒だが、JavaScript で meta タグを追加する方法を調べてみた。 viewport を指定する meta タグを新規に追加する場合 単純に
JavaScriptで複数行文字列を代入する一番簡単な方法 | PisukeCode - Web開発まとめ
JavaScriptで複数行文字列を代入する方法は色々ありますよね。調べると+で行を連結するやり方とかやたらトリッキーな手法とかが見つかります。 ですが現在はテンプレートリテラルを使えば長い文字列でもスマートに代入したり表示する方法があるので、わざわざ面倒なことをする必要がなくなりました。 ここではこのテンプレートリテラルについてまとめてみてみます。
Web上で画像をトリミングするにはCroppieがいい感じかもしれない - Qiita
P&Dアドベントカレンダー10日目の記事です。まだ10日目です。UTC的にはまだ10日目です。 ブラウザで画像を切り取るとき 画像をトリミングするといえば、「Cropper.js」といったツールや他にも「Jcrop」などがあります。これらの共通点としては、画像のトリミング範囲をバウンディングボックスを動かす形で指定するところでしょう。 Cropper.js Jcrop しかし、Twitterのような画像のトリミング方法を採用したとき、上記のライブラリだと厳しいものがある。 その時に活躍するライブラリが「Croppie」です。
JavaScriptを使って要素をドラッグ＆ドロップで移動 | q-Az
ドラッグ＆ドロップで色々なものを移動させる UI が最近は多くなってきました。モバイルなどでも直感的でわかりやすいため色々な場面で利用されているように感じます。 この記事では要素をマウスによるドラッグ＆ドロップまたはスマホでのタッチイベントで動かせるように JavaScript コードを書いています。よく使われている技術なので有名なコードかもしれませんが、自分なりに考えてみました。ネイティブな JavaScript コードです。PC とモバイル一応対応済み。 使い方 .drag-and-drop のクラス名が付いた要素をドラッグ＆ドロップで移動できるようにします。複数あっても大丈夫なように書いたので .drag-and-drop はいくつあっても大丈夫です。 HTML例 <div class="drag-and-drop" id="red-box"></div> <div class="d
【サンプル付き】Local Storageとは？使い方を詳しく解説 | webliker
html5から導入されたLocalStorage（ローカルストレージ）の使い方をサンプルアプリを用いて丁寧に説明していきます。 この記事を通して LocalStorage（ローカルストレージ）とはなにかLocalStorage（ローカルストレージ）の基本的な使い方サンプルアプリで実際の使い方 をしっかりと理解することができます。 LocalStorage（ローカルストレージ）とは ローカルストレージで何ができるかわかった上で、そもそもローカルストレージ(LocalStorage)とは何か？に触れていきましょう。 前述したようにローカルストレージ(LocalStorage)とはjavascript利用することでユーザーのデータをwebブラウザ(ローカル環境)に保存することができる仕組みです。 他にはwebstoroageなんて呼び方もあります。 ローカルストレージ(LocalStorage)
script タグの外部スクリプトを遅延読み込みする方法 | Design Hack and Slash
画像（img タグ）を遅延読み込み（LazyLoad）するプラグインと同じように、外部スクリプト（script タグ）を遅延読み込みする方法です。 具体的には、JavaScript で提供されている広告タグや、各種ブログ パーツを、ページのレンダリングをブロックしないように配置する方法です。厳密には画像の遅延読み込みとは異なりますが、遅い外部スクリプトを貼らなければならない場合、いわゆる UX（ユーザー エクスペリエンス）の改善に劇的な効果があります。 フレンドリー アイフレーム（Friendly iFrame） 簡単に説明すると、対象の外部スクリプトを呼び出す部分だけを別の HTML ファイルにしてサーバーにアップロードし、iframe タグで その HTML ファイルをページに埋め込みます。 例えば、i-mobile というアドネットワークの広告タグの場合は以下になります。 広告タグ用
リロードさせた後、スクロール位置を復元 - Qiita
IE6,IE11,Firefoxにて確認。 keep_scroll_reload() を呼んでGET値にx,y座標を渡し、 リロード後にスクロールする // リロード TODO: ?が無い場合対応 function keep_scroll_reload() { var re = /&page_x=(\d+)&page_y=(\d+)/; var page_x = document.documentElement ? document.documentElement.scrollLeft : document.body.scrollLeft; var page_y = document.documentElement ? document.documentElement.scrollTop : document.body.scrollTop; var position = '&page_x=
旅行予約サイトの「今あなた以外に○○人が見ています」はウソだったことが判明
宿泊予約サイトやフライト予約サイトなどで宿泊先や飛行機の搭乗券を検索している時、検索候補の横に小さく「今あなた以外の○○人が同じページを見ています」といったメッセージが表示されることがあります。海外の旅行予約サイトであるOneTravelでは、表示されているこの人数がページへのリアルタイムな同時接続数ではなく、実は単なるランダムの数字だったことをセキュリティ研究者のOphir Harpaz氏が発見しました。 Harpaz氏がOneTravelで飛行機の搭乗券を予約しようとした時、予約購入を急がせるためか、「38人がこの搭乗券をチェックしています」と表示されたとのこと。「38人もチェックしているの？！」とHarpaz氏は焦ってしまったものの、38人もの人がこの搭乗券をチェックしていることに逆に疑問を抱いたそうです。 [1/4] Ok this is really funny, check t
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
RSS表示ブログパーツ(API)＆jQueryプラグイン [無料ホームページ作成クラウドサービス まめわざ]![RSS表示ブログパーツ(API)＆jQueryプラグイン [無料ホームページ作成クラウドサービス まめわざ]](https://cdn-ak-scissors.b.st-hatena.com/image/square/59194e8ec27d448dff4dab444c73231a90e06d11/height=288;version=1;width=512/https%3A%2F%2Fmamewaza.com%2Fimg%2F1438919246365s.jpg)
ページ内リンクのジャンプ先がずれる原因と解決方法【HTML】
