タグ

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

タグの絞り込みを解除

jQueryに関するlocalnaviのブックマーク (40)

  • アンカーリンク〜様々な状況に対応できる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を開いてもページの一番上が表示されるので、こちらの２番目の手立てで解決。
    リンク

  • jQueryのload()を使って外部HTMLを読み込んでページを作る - Qiita


    jQueryによる外部HTMLの読み込みは様々なところで解説されていますが、読み込まれる前提ではない作りのHTMLを読み込む時の解説は少ないように思います。 今回は必要に迫られ、HTMLから一部の内容を抜き出して別ページに表示します。 ﹁外部﹂とは言いつつも、同一ドメイン下でのみ有効です。 使っている技術に難しいものはありません。 環境 macOS Catalina(10.15.7) jQuery 3.6.0 html5 Firebase Hosting MAMP 前提 ﹁HTML資産を横展開しよう﹂というのが出発点。 ただし、横展開するには下記のお約束をクリアする必要がある。 基盤HTMLをコピーしてサーバに格納する。構造変更は基本NG。どうしても変更したい場合、基盤及横展開済みのHTMLの更新も必要。 新サービスでは表示方法が2種存在する。Webページ単独とWebアプリ上でポップアップ
    jQueryのload()を使って外部HTMLを読み込んでページを作る - Qiita

  • jQueryでイベントが発火しないときの簡単な対処法 | PisukeCode - Web開発まとめ

    「ボタンにイベントを設定したはずなのに発火しない」 「チェックボックスにチェックが入ってもイベントが起きない」 こういう風になぜかイベントが発火しないことはjQueryを使っているとちょくちょく遭遇します。 しかもエラーも出ないし、DOMの読み込み後にイベントを設定してるのに関わらずです。 という訳でイベントが発火しないときの簡単にできる対処法について紹介 イベントが発火しないのはなぜ？ まずなんでイベントが発生しないのか？ ということですが、それは単純にイベントハンドラが登録されていないからです。 そもそもイベントハンドラが登録されてなければイベントは発火しようがありません。 ではどういうときにイベントが未登録になってしまうのか・・・ それは動的にボタンやチェックボックスなどの部品を追加したときです。 これだけだと分かりにくいので少し例を使って説明します。 例えば次のようなHTMLを作成

    jQueryでイベントが発火しないときの簡単な対処法 | PisukeCode - Web開発まとめ

  • 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で埋め込み表示させる方法
    リンク

  • 【CSS&jQuery】固定ヘッダー時アンカーリンクの位置を調整する方法


    アンカーリンクを使ってページ内リンクを行う最、ヘッダーを固定にしていると思い通りの動きをしてくれないことがあります。 これは、アンカーリンクのジャンプ先がブラウザ上部を基点に表示されるためです。 ヘッダーは固定のままにしたいですが、スクロールするコンテンツが隠れてしまうのは避けたいところ。コンテンツがヘッダーの高さ分下に表示されればちょうどいいですよね。 これを解消する方法として﹁CSSに記述する方法﹂と﹁jQueryを使う方法﹂があります。 内容的には比較的易しめなものですが、アンカーリンクがずれてしまう現象って割と発生しやすいものかなと思いましたので、今回のブログで取り上げていこうと思います。
    【CSS&jQuery】固定ヘッダー時アンカーリンクの位置を調整する方法

  • 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開発まとめ

  • https://www.web-development-kb-ja.site/ja/jquery/jquery%E3%82%92%E4%BD%BF%E7%94%A8%E3%81%97%E3%81%A6%E6%9C%80%E9%AB%98%E3%81%AEzindex%E3%82%92%E8%A6%8B%E3%81%A4%E3%81%91%E3%82%8B%E6%96%B9%E6%B3%95/971384362/

  • jQueryで後から追加した要素にイベントを設定させる方法 - Qiita

    jQueryを使っていて、あれ？、なぜイベントを設定したのに動作しないんだ？ と少し ハマったことがあったので、アウトプットしたいと思います。 前提 jquery-3.4.0.min.jsを読み込んで動作確認をしています。 Example 単純に以下のように、ボタンを押すとp要素が追加されていく例を見ていきます。 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>jQueryの練習</title> </head> <body> <p>jQueryの練習</p> <button>Add!</button> <script src="https://code.jquery.com/jquery-3.4.0.min.js"></script> <script> $(function() { $('butto

    jQueryで後から追加した要素にイベントを設定させる方法 - Qiita

  • テンプレートリテラル (テンプレート文字列) - 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

  • [jQuery] ドラッグ&ドロップをカンタン実装！【draggableメソッドまとめ編】


    jQuery メソッドはけっこうな数が用意されていて、ドラッグ&ドロップに関してはなんでもできちゃいそうです。のでまとめました。 ドラッグ&ドロップってどうやって実装するの？という場合は コチラ の記事で詳しく書きました！よければどうぞ！ また今回は使用用途ごとにジャンル分けしてまとめました。上記の目次からジャンルを確認できます。 この記事はJQuery UI– SakuraSaku jQuery Libraryさんのサイトを超参考にさせていただきました。 指定要素にドラッグ&ドロップさせる系 ドロップ先を限定する場合に使うメソッドです。 紐付けしたあとに他のメソッドと組み合わせてなにかするようなものが多いです。 connectToSortable
    [jQuery] ドラッグ&ドロップをカンタン実装！【draggableメソッドまとめ編】

  • ドラッグ＆ドロップでコンテンツの配置を変えられるUIを作る (1) - Qiita

    はじめに 過去にご縁がありまして、タイトルのようなWebアプリケーションを作成する機会がありました。 実際納品した物は以下で説明する内容よりももっと複雑だったのですが、自分としてはとても勉強になったので、忘れないうちに記録に残しておこうと思います。 システムの仕様 以下の仕様で進めていきます。 実際のプロジェクトではもう少し複雑な仕様だったのですが、説明のため単純化しています。 ブラウザ上からレイアウトをD&Dで変更できるようにする ブラウザ上からコンテンツを変更できるようにする コンテンツのレイアウトを決定する要素を階層化する 階層はシステム側で用意した固定のものとする 上位からArea, Grid, Blockの順 Area……全体のレイアウト、基本的にユーザーは編集不可 Grid……主にAreaの横方向分割 Block……Grid1個分の縦方向のコンテナ、テキストや画像を格納する 画

    ドラッグ＆ドロップでコンテンツの配置を変えられるUIを作る (1) - Qiita

  • jQueryの$(this)の使い方(どこを指してるのか？)


    結果︵動作サンプル︶ 下記テキストをクリックすると文字色が変わるかと思います。 jQueryのthisについて 参考‥jQueryでcssを追加、削除 説明 $(this)は﹁イベントが発生した要素﹂です。 ここでの$(this)はクリックイベントが発生した<p>要素ということですね。 $(this)を使うときは、基本的にはその$(this)を囲うようにイベントが設定してあるかと思います。 始めのうちは、そのイベントのセレクタが$(this)の対象となると覚えておけばよいでしょう。 $(‘p’).click(function() { $(this).css(‘color’, ‘red’); }); 上記の$(this)は$('p')のことですね。 しかし、わざわざ$(this)とせず、下記のようにしても動作するのであまり意味がありません。 $(‘p’).click(function() {

  • スナック「jQuery」 - Qiita


    ……あら、いらっしゃい。 若いお客さんなんて珍しいわねえ。昔は、この街一番の人気店でね、若いお客さんもたくさんいたんだけどさ。最近はめっきり減っちゃってね。 何飲む？　……水割り？　わかったわ。 じゃあさ、ちょっとだけ、あたしの昔話に付き合ってもらってもいいかしら。 What is jQuery? この店――﹃jQuery﹄がオープンしたのって、2006年なんだけどさ。その頃の、この街の様子って覚えてる？　……知らないか。あなた、まだ若いもんね。その頃って、そりゃあヒドイもんだったのよ。 その頃、シェア率トップだったブラウザって、もちろんInternet Explorerだったんだけど。当時はバージョン7が登場したばかりで、あの悪名高きIE6もまだまだ主流だったの。 他のブラウザは、Safariがバージョン3がMacとWindowsに公開されていた頃で、Firefoxはまだバージョン2.0
    スナック「jQuery」 - Qiita
    localnavi
    localnavi 2020/05/07
    何かしんみりきそうなエントリーだが、「スナックprototypeはどうした？」「jQueryここ数年使いまくっているけど廃れてるの？」「オチがひどいｗ」
    リンク

  • jQueryで文字列を特定の文字数でカットして末尾に「…」などを追加する方法｜BLACKFLAG

    Webサイトのトップページで表示するお知らせ情報など、レイアウトの都合上、長い文字列を特定の文字数でカットしたいことはよくあることかと思います。 そんな際にjQueryを使って文字列を任意の文字数でカットして、末尾に「…」などの追記情報（これも任意の文字列）を追加するやり方をシンプルなスクリプトで実装する方法をご紹介してみます。 【テキストのみ】 jQueryで文字列を特定の文字数でカットして末尾に「…」などを追加する方法 まずは実装するHTMLソースが下記のような構成だったとします。 ◆HTML <ul> <li>このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です。このダミーテキストは文字数カット用です

    jQueryで文字列を特定の文字数でカットして末尾に「…」などを追加する方法｜BLACKFLAG

  • jQuery 便利なonを使おう（on click) - Qiita


    対象者 click()とon('click', function())の違いが分からない人。 click()しか使ったことのない人。 何も考えずにon('click', function())を使っている人。onの有用性 クリックイベントを書くとき
    jQuery 便利なonを使おう（on click) - Qiita
    localnavi
    localnavi 2019/09/27
    たまに「clickイベントが効かない」事例が起こるので、onを使おう。
    リンク

  • [作って学ぶ！jQuery] 第5回 ajaxを使って複数ブログの最新記事一覧を表示する | バシャログ。


    こんにちは、GWはがっつり朝から晩まで子供と遊びまくっていたishidaです。 今回はajaxを利用して、ブログの最新記事を掲載してみようと思います。 ajaxで取得するデータは、同一サーバ内のxmlデータとします。また取得するブログは以下の3つとしています。 馬車道の社長ブログ︵/blog/niidome/index.xml︶ ゴトウ@シーブレインの馬車道︵/blog/goto/index.xml︶ バシャログ。︵/blog/wsg/rss.xml︶ デモ ajaxで複数ブログの最新記事掲載のサンプル htmlソースコード 以下がhtmlソースコードです。該当部分以外は省略しています。 feeds というid部分にデータを読み込んで表示します。 <div id="main"> <h1>ajaxで複数ブログの最新記事掲載のサンプル</h1> <div id="feeds"> ここに表示
    [作って学ぶ！jQuery] 第5回 ajaxを使って複数ブログの最新記事一覧を表示する | バシャログ。

  • ときどきWEB | 『jQueryで特定のURLが一致したら処理してやんよ!!!』

    たとえば共有してるインクルードファイルの記述の中に特定のページにだけバナーやタグを追加したい場合、そのページだけ静的にソースを別個記述するのは更新性的にもイヤなので 特定のページに該当する条件で処理するjQueryをつくる。 1.指定のURLが一致した場合の追加処理 もしこのページにだけ追加したい処理がある場合、URLの下層ディレクトリのファイル名で指定すれば良いので <ul> <li>あああああ</li> <li>いいいいい</li> <li>うううううううう</li> </ul> という記述を共通インクルードファイルに記述していた場合に、特定の下層ページにだけ<li>を追加したいという場合に <ul> <li>あああああ</li> <li>いいいいい</li> <li>うううううううう</li> <li class="eee">えええええええ</li> </ul> と加える。 次にCS

    ときどきWEB | 『jQueryで特定のURLが一致したら処理してやんよ!!!』

  • jqueryでテーブルのカラム数を取得する - Qiita

    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

    jqueryでテーブルのカラム数を取得する - Qiita
    localnavi
    localnavi 2019/05/04
    jQueryでテーブルタグの列数を取得する方法。
    リンク

  • jQueryで遅延ロードを汎用的に実現する「ScrollTrigger」プラグイン


    jQueryで遅延ロード︵遅延読み込み︶を汎用的に実現する﹁ScrollTrigger﹂プラグインを紹介します。スクロールで要素が表示されたときに任意の関数を実行できます。 当ブログでも、記事ページ本文下にあるソーシャルブックマークボタンとFacebookのLikeBoxの表示にこの仕組みを使っています。1．目的 Facebookの﹁いいね！﹂ボタンなど、最近ソーシャル系のパーツをブログなどに表示している方が少なくないと思います。 ですが、パーツの表示にはJavaScriptを使っているものがほとんどで、そのまま設置するとページのロード時間が遅くなるケースが多く、結果的にページ表示時間に影響することになります。 本プラグインは、そういったソーシャル系のJavaScriptのロードを遅延させることができ、初回のロード時間を短縮したいときに効果があります。2．機能 ページをスクロールして、
    localnavi
    localnavi 2019/02/18
    FBやTWのウィジェットが読み込みに時間がかかるのが、これで解決できて良かった。なお、ここで配布している scrolltrigger.js でないと動いてくれない。おかしい。
    リンク

  • 【jQuery】プラグインを使わずに、簡単にサイドからスライドして現れるメニューを実装する(ほぼCSS) | UNORTHODOX WORKBOOK | Blog

    UNORTHODOX WORKBOOK BLOG TOP›Web Design›【jQuery】プラグインを使わずに、簡単にサイドからスライドして現れるメニューを実装する(ほぼCSS) 最近はモーダルっぽい感じでメニューをページ全体に表示するパターンが増えてる気がするし、もう随分色々な方法やプラグインがあって、かなり今さらなネタですけど、クリックでサイドからスライドして現れるメニューの新たな知見を得たので書き残しておきたいと思います。 「新たな知見」といっても、誰でも考えつくようなことで、そんなに大したことではなく、「あぁ、なるほど」とちょっと思った程度のことですが。。。 クリックでサイドから現れるメニューとは 何て言う名前なのか良く分からないので、デモを。デモページ右上の三つの四角いボタンをクリックすると、にょきっと横からスライドして現れるやつがそうです。 jQueryを利用していますが

    【jQuery】プラグインを使わずに、簡単にサイドからスライドして現れるメニューを実装する(ほぼCSS) | UNORTHODOX WORKBOOK | Blog
  • 1 2 次のページ

お知らせ

もっと読む

公式Twitter

  • @HatenaBookmark

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

  • @hatebu

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

はてなブックマーク

公式Twitter

はてなのサービス

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