[B! jQuery] kjtecのブックマーク

画像上の任意の場所をクリックできる「クリッカブルマップ」の使い方 | HPcode（えいちぴーこーど）

Webサイト上に配置した画像内の任意の場所をクリックできるようにするコーディング方法の紹介です。﹁クリッカブルマップ﹂あるいは﹁イメージマップ﹂と呼ばれたりしていて、特別な実装方法ではなくHTMLがあらかじめ用意されている仕組みで対応できたりします。使うタグとしてはmapとareaですね。この記事では﹁クリッカブルマップ﹂の実装方法と、レスポンシブに対応する方法について紹介していけたらと思います！クリッカブルマップの基本コード今回はこの画像の﹁1﹂と﹁5﹂の場所をクリックできるようにしていきます。︵全部の番号も可能ですが、コード量が増えるだけなので…︶まだ何もコードを入れてないので、マウスでクリックしても何も反応しないことを確認しておいてください。 imgとmapとareaを用意クリッカブルマップの基本コードが以下の書き方になります︵※ 型なので、このコードを貼り付けても動き

kjtec 2022/12/07

jQuery

リンク

jQuery $(this).remove() not working after append

kjtec 2021/07/06

事後に定義した要素の削除について

リンク

webnonotes.com - webnonotes リソースおよび情報

This webpage was generated by the domain owner using Sedo Domain Parking. Disclaimer: Sedo maintains no relationship with third party advertisers. Reference to any specific service or trade mark is not controlled by Sedo nor does it constitute or imply its association, endorsement or recommendation.

kjtec 2020/09/15

無名関数

jQuery

リンク

【jQuery】超簡単jQueryスライダー［bxSlider］の使い方。

今日紹介する jQuery プラグイン﹇bxSlider﹈はレスポンシヴ・デザインにも対応した高性能なコンテンツ・スライダーです。まずはサンプルをご覧ください。 jQuery bxSlider‥サンプル・デモ特徴は初心者でも簡単に設置できること、ファイル容量が小さい軽量設計、レスポンシヴ・デザイン対応で、各種スマートフォンやタブレットでも横幅に合わせてコンテンツのサイズを自動的に調整してくれること、また、画像だけでなく動画も含めた表示が可能、そしてオプション機能が豊富に用意されていることも大きな魅力の1つです。実装方法は以下のとおり。﹇bxSlider﹈の設置方法最初に﹇bxSlider﹈の本体ファイルをダウンロードします。リンクは以下より。 bxSlider‥ダウンロードフォルダの中にいくつかのファイルが含まれていますが、基本的に必要なのはスクリプトの﹇jquery.bxsl

kjtec 2020/09/14

jQuery

リンク

Canvasで超可愛いグラフが作れる！「Chart.js」の紹介 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

こんにちは。デザイナーのハルエです。最近ちょくちょくグラフを用いた制作物に関わることがあり、案件によってはエンジニアさんにお願いしたりIllustratorのグラフツールで作ったりしていたのですが、なんやかんやで時間とられちゃうんですよね。で、もっとこうオシャレでスマートにさくっとハイテンションで作れるものはないかと探してみました。そこで見つけたのがこれ。﹁Chart.js﹂。めちゃくちゃ愛くるしい動きをしてくれます。デザインもフラットでいい！ポートフォリオやプレゼンなんかにもきっと役立ちますよ。 Chart.jsとは？折れ線グラフ、棒グラフ、円グラフ、レーダーチャートなど、6種類のグラフが簡単に描けてしまうJavascriptのライブラリです。 HTML5のCanvasを使って描画され、表示の際の気持ちいいアニメーションの動きが特徴的です。とても分かりやすいマークアップなので、

kjtec 2019/08/20

jQuery

リンク

スマホに適したlightbox系javascriptプラグイン「PhotoSwipe」 | スターフィールド株式会社

var initPhotoSwipeFromDOM = function(gallerySelector) { var parseThumbnailElements = function(el) { var thumbElements = el.childNodes, numNodes = thumbElements.length, it ems = [], figureEl, linkEl, size, it em; for(var i = 0; i < numNodes; i++) { figureEl = thumbElements[i]; // <figure> element // include only element nodes if(figureEl.nodeType !== 1) { continue; } linkEl = figureEl.children[0]; //

kjtec 2019/02/06

リンク

[JS]モーダルウインドウを設置するスーパーシンプルなスクリプト -leanModal

モーダルウインドウを設置する必要最小限のカスタマイズを備えた超軽量のjQueryのプラグインを紹介します。デモページ：サインアップフォーム leanModalの主な特徴モーダルウインドウが簡単に実装できます。超軽量（780バイト）です。幅と高さをカスタマイズできます。画像は使用しません。 1ページに複数のモーダルボックスを設置できます。ログインフォーム、サインアップフォーム、アラートパネルなども可能です。オーバーレイはスタイルシートで簡単にカスタマイズできます。非対応スーパーシンプルなため、下記には対応していません。ギャラリー機能 iframeコンテンツの表示 AJAXコンテンツの表示 IE6 leanModalの実装 Step 1 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src

kjtec 2018/12/21

“leanModal”

リンク

PhotoSwipe简介-CSDN博客

kjtec 2018/09/12

ライブラリ

jQuery

リンク

iOS8.1のSafariで$(window).height()を使うときの注意点 - 備忘録β版

表示領域を取得するときにお馴染みの $(window).height(); をiPhoneのSafariで考えなしに使うと痛い目を見るのでメモとして残しておく。環境 iPhone 5s︵iOS8.1︶ jQuery 1.11.1 注意すべきところ iPhoneのSafariが他のブラウザと比べて特徴的なのがURLバー︵を含む上下のバー︶がスクロールで小さくなったりする部分。これが本当にやっかいな挙動をする。縦︵portrait︶表示の時は良いとして、問題なのは横︵landscape︶表示のとき。 URLバー︵を含む上下のバー︶は、縦から横に回転させたとき隠れ、スクロールすると表示される。このURLバー︵を含む上下のバー︶が表示されているか否かで、表示領域の高さは変わるはずなのに、$(window).height()は同じ値を返す。 iPhone 5sで実行した時返す値取得方法UR

kjtec 2018/08/04

jQuery

リンク

【jQuery】自動でQRコードを生成する［jquery.qrcode.js］が便利だった！

本日ご紹介するのは自動でQRコードを出力するjQueryライブラリ﹇jquery.qrcode.js﹈です。同じようにQRコードを出力する方法として、だいぶ以前に﹁Google Chart API を使用するテクニック﹂を紹介しましたが、その代替案として有力な選択肢の1つです。﹁Google Chart API﹂を使ってQRコードを生成する方法。まずは公式サイトより﹇jquery.qrcode.js﹈本体をダウンロード。下記GitHubから入手してきましょう。 https://github.com/jeromeetienne/jquery-qrcode ダウンロードしたファイルはjQuery本体と共にHTMLの適当な箇所で読み込みます。 <script src="//ajax.google apis.com/ajax/libs/jquery/2.0.3/jquery.min.js">

kjtec 2018/08/03

QRコード作成プラグイン

jQuery

リンク

jQuery：jQueryでsubmit（サブミット）する方法 | raining

jQueryを使用し、フォームの値をsubmitする方法をメモします。送信したいデータを変形や追加、バリデーションのチェックなど jQueryやjavascriptを使用するとデータを送信する前に処理することが可能です。色々な用途で使用できます。いつも忘れてしまうので、jQueryでformをsubmitする方法と javascriptでformをsubmitする方法をメモします。 ■ jQueryでsubmitする方法︻jQuery︼ <script src="http://ajax.google apis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#form1').submit(funct

kjtec 2018/07/30

jQuery

リンク

qTip - The jQuery tooltip plugin - Home

About qTip2 is the second generation of the advanced qTip plugin for the ever popular jQuery framework. Building on 1.0's user friendly, yet feature rich base, qTip2 provides you with tonnes of features like speech bubble tips and imagemap support, and best of all... it's completely free under the MIT/GPLv2 licenses!

kjtec 2018/05/30

qTip

jQuery

リンク

jQuery Content Slider | Responsive jQuery Slider | bxSlider

We value your experience and would love to hear your thoughts. Could you spare just two minutes to fill out a quick survey? Your feedback helps us make bxSlider even better! Thank you for your support 🤗

kjtec 2018/05/02

プラグイン

jQuery

リンク

iOS11 Safari でテキスト入力のカーソルがずれる問題 - Qiita

iOS11 Safariではテキスト入力要素である<input type="text">や<textarea>タグをfocusした際にカーソルがずれる不具合があるようです。シミュレータでも再現します見た目がずれているだけならまだいいのですが、タッチしてコピーや切り取りをする場合に思うようにテキストが選択できないのは問題です。必ず発生しているわけではなく、再現にはどうやら条件があるようで「position: fixed」を指定している要素の配下に入力要素があること入力項目にfocusが当たった際に、ソフトウェアキーボードによって項目の位置が押し上げられることこの2点を満たしていると発生しているように見えます。色々と試行錯誤してみたところ、以下の方法でズレなく正常に動作しました。ソフトウェアキーボードに押し上げられないページ上部にfixedの要素を置く UIを既存から大きく変え

kjtec 2018/04/25

リンク

【2017年最新版】用途別jQueryプラグイン47選と基本的な使い方｜フリエン

jQueryプラグインとは、jQueryの拡張機能のことです。jQueryプラグインを導入して使いこなすことができれば、Web開発のスピードは格段に早くなり、クオリティも高くなることは間違いありません。今回はそんなjQueryプラグインについて解説し、おすすめのプラグインを紹介してから、その基本的な実装方法なども解説していきます。︻目次︼ ■jQueryプラグインとは ◆jQueryとは ◆プラグインとは ◆8つの用途別系統 ■用途別おすすめプラグイン47選 ■jQueryプラグインの基本的な使い方 ◆実装方法 ◆使用方法 ◆作り方 ■実例 ■おすすめ教材3選 ■まとめ jQueryプラグインとは jQueryプラグインとは冒頭で触れた通り、jQueryで用いられるJavaScriptライブラリ、及び拡張機能です。主にWebコンテンツを制作する際に力を発揮します。ところで、﹁そもそもjQ

kjtec 2018/04/20

innerText(textContent)/innerHTMLを使ったHTMLエスケープは充分でないので今すぐやめろ、お前たちはもう終わりだ - TODESKING

// jQueryでHTMLエスケープする例 function escape(content) { return $('<div />').text(content).html() }

kjtec 2018/02/27

リンク

Remove whitespace and line breaks between HTML elements using jQuery

Using jQuery, I'd like to remove the whitespace and line breaks between HTML tags. var widgetHTML = ' <div id="widget"> <h2>Widget</h2><p>Hi.</p> </div>'; Should be: alert(widgetHTML); // <div id="widget"><h2>Widget</h2><p>Hi.</p></div> I think the pattern I will need is: >[\s]*< Can this be accomplished without using regex?

kjtec 2018/02/20

“Remove whitespace and line breaks between HTML elements using jQuery”

リンク

もっさりとは言わせない！jQuery高速化のポイント | 丸ノ内テックブログ

フロントエンド front end バックエンド back end アプリ開発 app インフラ infra その他 other データドリブン data driven タグ一覧 Ajax（1） Android（20） Apache（2） AR（2） benchmark（1） BigQuery（2） browsersync（1） C4（1） CakePHP（1） CentOS7（1） CI（1） CMS（3） CoreNFC（1） CraftAR（1） CSS（1） DeepLab（2） Dmitry Stogov（1） ECMAScript（1） ECMAScript6（1） ElePHPant（1） Facebook（3） FFmpeg（1） firebase（1） fluentd（1） Framework（1） GD（2） gif（2） Git（1） GLSL（5） Google A

kjtec 2018/01/30

パフォーマンス

jQuery

リンク

jQuery 3.3登場、約1年ぶりのアップデート。新機能も追加

JavaScriptライブラリとして知られるjQueryが約1年ぶりにアップデートされ、﹁jQuery 3.3﹂が1月19日付けでリリースされました。1つ前のバージョンであるjQuery 3.2のリリースが2017年3月16日で約10カ月前、さらにその前のバージョンであるjQuery 3.1のリリースがそこから8カ月前に遡る2016年7月7日ですので、jQueryはゆっくりながらも着実にアップデートされてきたといえるでしょう。配列に対してまとめてクラスの追加や削除が可能に新機能として.addClass()、.removeClass()、.toggleClass()の3つのメソッドが、列挙されたデータに対して利用可能になりました。以下がその例です。 jQuery(elem).addClass([ 'dave', 'michał', 'oleg', 'richard', 'jason',

kjtec 2018/01/29

jQuery3.3

jQuery

リンク

Autosize

Usage The autosize function accepts a single textarea element, or an array or array-like object (such as a NodeList or jQuery collection) of textarea elements. // from a NodeList autosize(document.querySelectorAll('textarea')); // from a single Node autosize(document.querySelector('textarea')); // from a jQuery collection autosize($('textarea')); Methods Triggers the height adjustment for an assig

kjtec 2018/01/26

テキストフォームの自動拡張

リンク

はてなブックマーク

タグ

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

jQueryに関するkjtecのブックマーク (55)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第3週）

今週のはてなブックマーク数ランキング（2024年7月第2週）

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス