ウィンドウサイズで読み込むJavascriptを切り替える方法
パララックスのページを作成しているときにパララックスのjsが邪魔してたので、読み込まないようにする方法をまとめました。 ウィンドウサイズで読み込みJSの切り替えレスポンシブサイトの制作時にPCで読み込んでいるjavascriptを変更したいときに使用するコード。 PCサイトでパララックスのページを制作していて、スマホ表示では真っ白になる現象が起きたので、調べるとでparallax.jsが悪さしてるみたい。そこでスマホ表示のとき、つまりブラウザのウィンドウサイズが649pxのときにはparallax.jsを読み込まないようにしました。 <script type="text/javascript"> jQuery(document).ready(function($) { //PC環境の場合 if (window.matchMedia( '(min-width: 649px)' ).match
銀行コード、銀行名など金融機関情報の検索・自動入力API
[ポイント] ▼入力欄データから部分一致検索を行なう。 ▼検索キーは半角数字、半角ローマ字（最大6文字）、ひらがな（最大6文字）、漢字名称。 ▼ガイダンス画面の行選択で確定し、各欄に結果を自動入力します。 ※支店情報は銀行が決まってから動作する。 ※入力欄右端の「×」クリックでデータ削除。 ▼使い方はjavascriptファイルを1行追加。 ▼特記事項としてid名を合わせること。 （bank_code、bank_name、branch_code、branch_name） ▼標準で最大3箇所に設置できます。 [データの更新について] ▼無料版は、当方が気付いた時に手動で行います。 ▼有償版は、下記データソースの更新に合わせて自動で行います。 ▼金融機関情報のデータソースは、角谷様のページ データを利用させて頂いております。 ▲ページの先頭へ ◎BankAutob.js の利用方法 【 事前準
使ってみよう！Intersection Observer！ - Qiita
１）はじめに スクロールに追従して、 画像の遅延ロード YouTubeの自動再生 コンテンツの追加読み込み といったことを行いたい。 このようなケースにおいて、今まではスクロールイベントをフックとして実装することがほとんどでした。しかし、頻繁に実行されるスクロールイベントは、ブラウザにとって優しい処理とは言えず、特にスマホではスクロール詰まり（Scroll Jank）を引き起こしてしまうこともありました。 そこで登場する、比較的新しいAPIがIntersection Observerです。 今回はその利用方法について模索してみます。 ２）Intersection Observerとは その名の通り「Intersection（要素間交差）」を「Observe（監視）」するAPI。 任意の要素（DOM）同士の交差を監視することが出来ます。 デフォルトでviewport（見えている範囲）とある要
Polymer Project
The Polymer library is in maintenance mode. For new development, we recommend Lit. The Polymer library provides a set of features for creating custom elements. These features are designed to make it easier and faster to make custom elements that work like standard DOM elements. Similar to standard DOM elements, Polymer elements can be: Instantiated using a constructor or document.createElement. Co
[JS]スマホやタブレットのタッチデバイスでの操作がめちゃ快適な画像ギャラリーのスクリプト -PhotoSwipe
サポートするタッチジェスチャーの一覧 PhotoSwipeの使い方 Step 1: 外部ファイル 当スクリプトとスタイルシートを外部ファイルとして記述します。 <!-- Core CSS file --> <link rel="stylesheet" href="path/to/photoswipe.css"> <!-- Skin CSS file (optional) --> <link rel="stylesheet" href="path/to/default-skin/default-skin.css"> <!-- Core JS file --> <script src="path/to/photoswipe.min.js"></script> <!-- UI JS file --> <script src="path/to/photoswipe-ui-default.min.j
![[JS]スマホやタブレットのタッチデバイスでの操作がめちゃ快適な画像ギャラリーのスクリプト -PhotoSwipe](https://cdn-ak-scissors.b.st-hatena.com/image/square/d65d654192b6c35de8b5e9ca6ebde66452cbfe56/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201404%2F2014121601.png)
W3Schools Online Web Tutorials
W3Schools offers a wide range of services and products for beginners and professionals, helping millions of people everyday to learn and master new skills. Free Tutorials Enjoy our free tutorials like millions of other internet users since 1999
WebPJS - Google's new image format WebP for not supported browsers (with alpha-channel)
WebPJS Home Examples & Downloads Examples without WebPJS Libwebpjs Introduction libwebpjs first release libwebpjs 0.1.2 libwebpjs 0.1.3 NEW!!! libwebpjs 0.6.0 NEW!!! PIK in JavaScript Update!!! butteraugli.js Libwebpjs (lossless) Example WebM JavaScript Decoder Example --> Source Code Ogg Vorbis JavaScript Decoder Example --> Source Code
営業日・定休日カレンダー
設置がやや大変ですが毎月○日とか毎週○曜日とかそういう指定と複数設置が簡単になったバージョンのカレンダーです。基本的な流れはステキカレンダーと同じですが、細部が調整されており、カスタマイズはしやすくなっていますが、設置作業にはちょっぴり知識が必要になったかもしれません。 営業日・定休日カレンダーの概要なるべく柔軟に更新せずにい営業日や定休日、イベントや商品発送予定日などの告知をわかりやすくカレンダー形式とリスト表示で告知するためのスクリプトです。 class指定の他に説明文やURLを指定することもできます。設置方法は2.x系と少し変わりましたがDOMを使って半永久的にめくることができる点などは変わっていません。 営業日・定休日カレンダーの機能 日曜日以外の曜日から開始できる カレンダーは基本的に一番左が日曜日ですが、一番左を月曜日にすることなどができます。 パラメータを付けてクリック 年・
NILAM189 ^ Hanya Di Sini Bisa Menjadi Jutawan!
Siap meraih kekayaan besar? NILAM189 adalah tempat terbaik untuk kamu yang ingin mengejar impian menjadi jutawan! Dengan koleksi game seru, peluang menang besar, dan bonus melimpah, setiap permainan di sini memberi kamu kesempatan untuk meraih kemenangan maksimal. Jangan tunggu lama, gabung sekarang dan buktikan sendiri kenapa NILAM189 adalah pilihan para pemain yang ingin sukses besar! Yang di Ma
FirefoxとOperaでword-break:break-allを実現する「wordBreak.js」
FirefoxとOperaでword-break:break-allを実現する「wordBreak.js」 IEやsafari、Google Chromeではword-breakプロパティが実装されていますが、FirefoxやOperaではword-breakプロパティは実装されていません。 そこで、FirefoxとOperaでword-break:break-allを実現するJavaScriptライブラリ「wordBreak.js」を作成しました。 使い方 ダウンロードした「wordBreak.js」をhead要素などで読み込んでください。 <script type="text/javascript" src="./wordBreak.js"></script> word-break:break-allを利用したいtable要素のclass名に「wordBreak」というclass名を追
jQueryAutoHeight.js - 複数のカラムの高さを最大値にそろえるjQueryプラグイン | かたつむりくんのWWW
Movable Type, Craft CMS, Drupal, HTML, CSS, JavaScript, jQuery etc. jQueryAutoHeight.js とは jQueryAutoHeight.js とは、複数のボックスの高さを自動的にそろえるシンプルな jQueryプラグインです。高さのそろえ方は、次の２通りです。 セレクタで指定したすべての要素を、その中の最大値にそろえる セレクタで指定した要素を、オプションで渡した数ごとに、その中の最大値にそろえる（1行ごとにそろえられる） サンプル 複数のボックスの高さを最大値にそろえるjQueryプラグイン ダウンロード Releases · tinybeans/jQueryAutoHeight ※jQuery 1.9 以降で利用する場合は v0.04 以降をお使いください。 使い方 ファイルの読み込み ダウンロードしたファ
Lightbox
Getting started Download a zip of the latest release (or any previous one) from the Github Releases page. Or install using npm: npm install lightbox2 --save Open up the zip file and take a peek at the barebones, working example that is included in the /examples folder. Ready to set Lightbox up on your page? Start by including the Lightbox CSS and Javascript. You can grab both these files from the
[JS]ページのデザインに影響を与えないパーフェクトなスクロールバーの超軽量スクリプト -Perfect Scrollbar
Perfect Scrollbar Perfect Scrollbar -GitHub 何をもってパーフェクトなのか Perfect Scrollbarのデモ Perfect Scrollbarの使い方 何をもってパーフェクトなのか このスクロールバーにパーフェクトとつけた理由は、下記の4つだそうです。 ページ上のあらゆる要素にCSSで影響を与えないこと スクロールバーがオリジナルのデザインに影響を与えないこと スクロールバーのデザインは完全にカスタマイズ可能であること コンテンツの大きさが変化したら、スクロールバーの大きさと位置がそれに合わせて変化すること Perfect Scrollbarのデモ デモではあずにゃんの画像をホバーすると、スクロールバーが表示されます。 デモ：領域を拡大 バーの長さが変化していることに注目してください！ Perfect Scrollbarの使い方 Step
[JS]アナタのソーシャルコンテンツをまとめてPinterest風レイアウトで表示するスクリプト -Socialist
ブログのRSSをはじめ、Facebook, Twitter, Tumbler, Google+, Pinterest, Flickr, YouTubeなどのコンテンツを全てPinterest風のグリッドレイアウトで表示するjQueryのプラグインを紹介します。 幅800pxで表示 Socialistの使い方 Step 1: 外部ファイル head内に当スタイルシートと「jquery.js」と当スクリプトを記述します。 ※ダウンロードできるデモファイルにはjQueryの記述が無いのでご注意を。 <link href="../jquery.socialist.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <scri
コーディングが少し楽になる（かもしれない）meca.js - Webtech Walker
meca.jsはマークアップエンジニアのお仕事を補助しようという趣旨で作ったjavascriptのライブラリです。画像のロールオーバーやIE6の透過png対応などを実装しています。 meca.js yuga.jsやsisso.jsなど、この手のライブラリが数多く出回っている中、なぜ今更こんなものを作ったのかというと、まあ色々と作るに至った理由があるのですが、結局のところ自分で作ったのが一番使いやすし、好きにできるからというのが一番の理由です。 yuga.jsやsisso.jsと違うところは、機能の有効/無効や指定するセレクタなどの設定を外に出して簡単に変更できるようにしたところです。設定を簡単に変更できることで、ある程度柔軟に対応することが可能だと思います。 例えば、それぞれの機能で有効/無効にする設定があるので、ロールオーバーしか使わないのに他の機能も実行するのが無駄だよね、とかいう心配
EXCELをHTMLのTABLEに変換するjQueryプラグイン | ユージック
EXCELをHTMLのTABLEに変換するjQueryプラグイン 更新日：2008年12月26日｜公開日：2008年12月26日 All Aboutで連載もしているJavaScriptで有名な高橋登史朗氏が作ったEXCELをHTMLのテーブルに変換するjQueryプラグインjquery.csv2table.jsが便利そうなのでご紹介しようと思います。 想定される使用例 テーブルを使用する更新頻度の高い以下のケースに特に有効だと思う。 料金表 対応表(価格や品番など) スペック表(材質や機能など) CMSなどではテーブルをシステム化するのが難しい CMSなどでサイト構築しているとほとんどのページが動的なモジュールで更新可能なのに対してテーブルというのはプログラムによってなかなかシステム化できないというケースが多いと思います。 クライアントはEXCELを利用してデータをまとめているケースが多い
jQueryでページ内スムーズスクロール | 1：n – DETELU Blog
jQueryでページ内リンクをスムーズに移動（ページトップへ等）するものを作ろうと思いいろいろ調べていたら、いいページを見つけたので早速試してみました。 We Ain’t Seen Nothin’ Yet. : [Rails meets jQuery] jQueryで作るページ内目次とスムーススクロール 上記の記事では「Interface.js」を利用しているようなのですが、動作させるコードを読んでいるとInterface.jsをどこで使っているかわからなかったので、jQueryだけで動作確認すると、とりあへず動きました。jQueryの古いバージョンでは「scrollTop」がjQuery自体に含まれていなかったのかもしれませんが、最近jQueryをいじり始めたため詳しいことはわかりません…。 ということでコードはほぼそのまま利用させていただき、スクロール動作だけを変更しています。 使用フ
IEをcss3に対応させる事ができるJavaScript「ie-css3.js」 | Web活メモ帳
ie-css3.jsはInternet Explorerでcss3を使用可能にするライブラリです。 インラインのCSSには対応していないようですので、<link>タグを使用して外部cssにする必要があります。 詳しくは以下 使い方 ie-css3.jsはDOMAssistantというライブラリを使用していますので、まずは２つのjsをダウンロードします。 ie-css3.js DOMAssistant この２つのファイルを<head>タグ内で読み込むだけのようですね。 サポートタグ 以下のセレクタをサポートしているようです。 :nth-child :nth-last-child :nth-of-type :nth-last-of-type :first-child :last-child only-child :first-of-type :last-of-type only-of-type
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CodyHouse | Web Design Nuggets
サイオステクノロジー株式会社
