タグ

関連タグで絞り込む (21)

タグの絞り込みを解除

javascriptとJavascriptに関するlocalnaviのブックマーク (35)

  • 「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
    「JavaScriptで要素をドラッグして移動する簡単な方法」という記事が初耳だらけだった件 - Qiita
    localnavi
    localnavi 2024/02/28
    前に要素をドラッグ＆ドロップで操作するJavascriptを書いたときには、もっともっと面倒くさい事を書いたのに、桁違いに楽ちんになってる。もちろん、初耳だらけである
    リンク

  • 【コピペ可】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

    【コピペ可】iOSのバージョンを判定するjavascriptコード

  • 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)"

    JS で端末の向きや PWA で動いてるかを判定する - yKicchan's blog
    localnavi
    localnavi 2023/05/10
    JavaScriptでPWAかどうか判定できる（ただし、Standaloneの場合のみ）
    リンク

  • アンカーリンク〜様々な状況に対応できるJavascript記述方法〜 | デザインやWEBに関する情報を発信する【まるログ】


    アンカーリンクにはページ内リンクや、ページをまたいで特定の場所にリンクさせる方法があります。特定の場所へリンクさせることができるので便利ですが、ヘッダーなどがフローティングでページ上部に固定されている場合は、何も対策をしないとアンカー位置がそれらのナビと重なってしまいます。今回はその対処法を紹介したいと思います。 デモページ デモページは前提として、ヘッダーがフローティングしていて、各ページのタグに固有のidが指定されているものとします。 source1‥ページ内リンク︵ページ内アンカーリンクを押した際の挙動︶ $(function () { var headH = $("header").outerHeight(); //ヘッダーの高さを取得 var animeSpeed = 500; //アニメーションスピード $("a[href^='#']").on({ "click": funct
    localnavi
    localnavi 2023/02/06
    なぜかスマホのブラウザ（Chromeもsafariも）でアンカー付きURLを開いてもページの一番上が表示されるので、こちらの２番目の手立てで解決。
    リンク

  • RSS表示ブログパーツ(API)＆jQueryプラグイン [無料ホームページ作成クラウドサービス　まめわざ]


    ブログのRSSフィードからブログ記事の目次を表示するブログパーツ(API)とjQueryプラグインを公開します。使用はもちろん無料です。 プラグイン内ではGoogle Feed APIを利用しています。jQueryプラグインはGPLライセンスです。いずれもSSL対応なので、httpsのサイトでもご利用いただけます。 PCではIE8～11・Firefox・Chrome・Safari、スマートフォンではiOSのSafari・Android標準ブラウザで動作確認済みです。
    RSS表示ブログパーツ(API)＆jQueryプラグイン [無料ホームページ作成クラウドサービス　まめわざ]
    localnavi
    localnavi 2022/03/07
    ブログの最新記事をJavaScriptで埋め込み表示させる方法
    リンク

  • 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 の背景色を変更する。 サン
    localnavi
    localnavi 2021/09/25
    いつか役立つ日が来るかもしれないのでブクマ
    リンク

  • 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

    localnavi
    localnavi 2021/06/23
    JavaScriptの難読化ツール
    リンク

  • 新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました - ICS MEDIA

    新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました アニメーションを作る時に、「思いついた演出をすぐに実装したい」「頭の中ではできているのに、コーディングするのが面倒」と思ったことはありませんか？アニメーション作成にはライブラリを使用することが多いと思いますが、使い方を調べて覚えて、ドキュメントからコピペしたり、ひたすらタイピングをして… 私はこれらの問題を解決するために、「Tween24」というライブラリを作りました。Tween24はメソッドチェーンで記述するのが特徴で、たった1行でアニメーションが実装できます。依存ライブラリもなく、単体で動作します。アニメーションライブラリの多くはオブジェクト型でプロパティを指定するためタイピングが多くなりがちですが、メソッドチェーンであればエディターのコード補完機能でスラスラと記述できます。 その他にも、メソ

    新感覚！メソッドチェーンでアニメーションがスラスラ書ける「Tween24.js」を作りました - ICS MEDIA

  • ページ内リンクのジャンプ先がずれる原因と解決方法【HTML】


    ページ内リンクのジャンプ先がずれてしまう原因と、その解決策について解説します。 別ページの特定の場所にリンクを貼る場合には、ハッシュ(#)で要素のIDを指定しますよね。 例えば、こういう感じで。 もちろん、これはHTMLの文法的には正解で、なんの間違いもありません。 でも、実は、これだけでは不十分なケースもあるんです。 例えば、レスポンシブデザインを採用しているケースです。 レスポンシブデザインの弊害 レスポンシブデザインのサイトでは、ウィンドウサイズに応じて画像サイズが動的に変更されます。 画像の幅は親要素と同じ、高さはそれに合わせて自動で調整するという指定の仕方が一般的です。
    ページ内リンクのジャンプ先がずれる原因と解決方法【HTML】

  • JavaScript：DOMでmeta タグを挿入してみる | むずむずサイト製作：凝ったきれいなブログのコツ

    一定期間更新がないため広告を表示しています

    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

    jQueryでカラーピッカーをパレット表示できる超便利プラグイン | PisukeCode - Web開発まとめ

  • テンプレートリテラル (テンプレート文字列) - 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}) で示されます。プレースホルダー内の式とバッククォート文字 (`) の間にあ

    テンプレートリテラル (テンプレート文字列) - JavaScript | MDN

  • viewport の指定を JavaScript で行う | UB Lab.


    スマートフォンサイトを制作するときに欠かせないのが、viewport の指定だ。ページを表示したときに、表示領域の幅や高さ、ズーム操作の可否、ズーム倍率などを指定できる。一般的には、meta タグを使って以下のように指定する。 <meta name="viewport" content="width=device-width,initial-scale=1.0"/> meta タグを自由に記述できる場合は問題ないが、コンテンツの中身だけ制作しシステムの一部として組み込まれる場合や、ルールにより meta タグを追加できない場合もある。しかし、見た目は整えなければならないので viewport の指定は必要だ。タグを追加する方法に比べると少し面倒だが、JavaScript で meta タグを追加する方法を調べてみた。 viewport を指定する meta タグを新規に追加する場合 単純に
    localnavi
    localnavi 2020/08/25
    メタタグ
    リンク

  • JavaScriptで複数行文字列を代入する一番簡単な方法 | PisukeCode - Web開発まとめ

    JavaScriptで複数行文字列を代入する方法は色々ありますよね。調べると+で行を連結するやり方とかやたらトリッキーな手法とかが見つかります。 ですが現在はテンプレートリテラルを使えば長い文字列でもスマートに代入したり表示する方法があるので、わざわざ面倒なことをする必要がなくなりました。 ここではこのテンプレートリテラルについてまとめてみてみます。

    JavaScriptで複数行文字列を代入する一番簡単な方法 | PisukeCode - Web開発まとめ

  • Web上で画像をトリミングするにはCroppieがいい感じかもしれない - Qiita

    P&Dアドベントカレンダー10日目の記事です。まだ10日目です。UTC的にはまだ10日目です。 ブラウザで画像を切り取るとき 画像をトリミングするといえば、「Cropper.js」といったツールや他にも「Jcrop」などがあります。これらの共通点としては、画像のトリミング範囲をバウンディングボックスを動かす形で指定するところでしょう。 Cropper.js Jcrop しかし、Twitterのような画像のトリミング方法を採用したとき、上記のライブラリだと厳しいものがある。 その時に活躍するライブラリが「Croppie」です。

    Web上で画像をトリミングするにはCroppieがいい感じかもしれない - Qiita

  • 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
    JavaScriptを使って要素をドラッグ＆ドロップで移動 | q-Az

  • 【サンプル付き】Local Storageとは？使い方を詳しく解説 | webliker

    html5から導入されたLocalStorage（ローカルストレージ）の使い方をサンプルアプリを用いて丁寧に説明していきます。 この記事を通して LocalStorage（ローカルストレージ）とはなにかLocalStorage（ローカルストレージ）の基本的な使い方サンプルアプリで実際の使い方 をしっかりと理解することができます。 LocalStorage（ローカルストレージ）とは ローカルストレージで何ができるかわかった上で、そもそもローカルストレージ(LocalStorage)とは何か？に触れていきましょう。 前述したようにローカルストレージ(LocalStorage)とはjavascript利用することでユーザーのデータをwebブラウザ(ローカル環境)に保存することができる仕組みです。 他にはwebstoroageなんて呼び方もあります。 ローカルストレージ(LocalStorage)

    【サンプル付き】Local Storageとは？使い方を詳しく解説 | webliker

  • script タグの外部スクリプトを遅延読み込みする方法 | Design Hack and Slash


    画像︵img タグ︶を遅延読み込み︵LazyLoad︶するプラグインと同じように、外部スクリプト︵script タグ︶を遅延読み込みする方法です。 具体的には、JavaScript で提供されている広告タグや、各種ブログ パーツを、ページのレンダリングをブロックしないように配置する方法です。厳密には画像の遅延読み込みとは異なりますが、遅い外部スクリプトを貼らなければならない場合、いわゆる UX︵ユーザー エクスペリエンス︶の改善に劇的な効果があります。 フレンドリー アイフレーム︵Friendly iFrame︶ 簡単に説明すると、対象の外部スクリプトを呼び出す部分だけを別の HTML ファイルにしてサーバーにアップロードし、iframe タグで その HTML ファイルをページに埋め込みます。 例えば、i-mobile というアドネットワークの広告タグの場合は以下になります。 広告タグ用
    script タグの外部スクリプトを遅延読み込みする方法 | Design Hack and Slash
    localnavi
    localnavi 2020/04/01
    ヤケクソめいた方法だが、これは実際効果的だわ。表示高速化（の数値アップ）の役に全く立ってくれない async や defer とは比較にならない。
    リンク

  • リロードさせた後、スクロール位置を復元 - 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=

    リロードさせた後、スクロール位置を復元 - Qiita

  • 旅行予約サイトの「今あなた以外に○○人が見ています」はウソだったことが判明


    宿泊予約サイトやフライト予約サイトなどで宿泊先や飛行機の搭乗券を検索している時、検索候補の横に小さく﹁今あなた以外の○○人が同じページを見ています﹂といったメッセージが表示されることがあります。海外の旅行予約サイトであるOneTravelでは、表示されているこの人数がページへのリアルタイムな同時接続数ではなく、実は単なるランダムの数字だったことをセキュリティ研究者のOphir Harpaz氏が発見しました。Harpaz氏がOneTravelで飛行機の搭乗券を予約しようとした時、予約購入を急がせるためか、﹁38人がこの搭乗券をチェックしています﹂と表示されたとのこと。﹁38人もチェックしているの？！﹂とHarpaz氏は焦ってしまったものの、38人もの人がこの搭乗券をチェックしていることに逆に疑問を抱いたそうです。 [1/4] Ok this is really funny, check t
    旅行予約サイトの「今あなた以外に○○人が見ています」はウソだったことが判明
    localnavi
    localnavi 2019/10/21
    要素のクラス名が「view_notification_random」おお、可読性が高い／「Math.random()は暗号に使用可能な安全性がありません。私ならCrypto.getRandomValues()を使います」突っ込むとこ、そこかよ！　バレたらまずいけど暗号じゃないし
    リンク
  • 1 2 次のページ

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

    リリース、障害情報などのサービスのお知らせ

  • @hatebu

    最新の人気エントリーの配信

はてなブックマーク

公式Twitter

はてなのサービス

  • App Storeからダウンロード
  • Google Playで手に入れよう
Copyright © 2005-2024 Hatena. All Rights Reserved.