slick.js のフリックが iOS10 で動かないとき - QiitaDeleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?
iPad(+Safari)で、 select の option に対して、 hide,show が効かない現象に対する対策 | JavaScript | みどりのウェブ開発日記
こちらの記事を参考にしました。 http://moshimoworks.com/2012/02/14/jquery-select-tag-manipulation/ MacのSafari（webkit系）では、jQueryのhide、showがきかないと 紹介されていますが、私はiPadのSafariで同じ現象に遭遇しました。 日本ではあまり記事がないのですが（2014年4月現在） stackoverflowでは結構取り上げられています。 http://stackoverflow.com/questions/8373735/jquery-hide-option-doesnt-work-in-ie-and-safari optionをtoggleすれば直るようなことが書いてありますが、 今回はoption全体ではなく、一部を表示・非表示で切り替えたいので toggleでは出来ません。 私の場
jQuery Nice Select
A lightweight jQuery plugin that replaces native select elements with customizable dropdowns. Download View on GitHub Usage 1. Include jQuery and the plugin. <script src="path/to/jquery.js"></script> <script src="path/to/jquery.nice-select.js"></script> 2. Include the plugin styles, either the compiled CSS... <link rel="stylesheet" href="path/to/nice-select.css"> ...or, ideally, import the SASS so
Math.Round(銀行丸め)ではなく四捨五入をしたい - Qiita
この歳まで知らなかったので、忘れぬようメモ。 Roundは四捨五入ではない（銀行丸め） Math.Round()って今まで四捨五入かと思っていたのですが、 厳密に言うと「銀行丸め」と言って、偶数寄りに丸められてしまいます。 (参考:Wikipedia端数処理) 例 Math.Round(1.5) = 2 Math.Round(4.5) = 4 (5ではない) 四捨五入するには そこで、 小数点第１位で四捨五入したい場合には、「0.5 を足して小数部を切り捨て」します。 小数点第２位で四捨五入したい場合には、「10倍して0.5 を足して小数部を切り捨てて10で割り」ます。 サンプル ソースコード ''' <summary> ''' 四捨五入する ''' </summary> ''' <param name="value">四捨五入する値値</param> ''' <param name="d
Chill the lion
About HTML Preprocessors HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug. Learn more · Versions Adding Classes In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-
parallax.js
WOW, that's deep man! parallax.js reacts to the orientation of your smart device, offsetting layers depending on their depth within a scene... Oh, you don't have a smart device? No worries, if no gyroscope or motion detection hardware is available, parallax.js uses the position of your cursor instead. Radical. This project is a collaboration between Matthew Wagerfield & Claudio Guglieri.
【jQuery】JSで共通ナビの現在地をアクティブにする ｜ Tips Note by TAM
グローバルナビを共通ファイル化するとき、PHPやCMSで管理して 現在地判定もそこで設定することが多いのですが、 今回は現在地の判定をJavaScriptで実装してほしいという要望があり、調べてみました。 カテゴリ1 カテゴリ2今ここ カテゴリ3 カテゴリ4 「jquery 現在地」で検索したら、すぐ使えそうなものがいっぱい出てきました。。 やり方はいくつかあり、 ・bodyタグに、該当するディレクトリをIDで指定しておき、マッチする要素にクラスを追加 ・liやa要素にIDをつけておき、現在のURLとIDがマッチしたらクラスを追加 ・現在のURLとナビのリンクURLがマッチしたらクラスを追加 etc. ページごとにIDやクラス指定を追加するのは手間なので、他サイトでもすぐ使いまわせそうな 「現在のURLとナビのリンクURLがマッチしたらクラスを追加する」パターンを紹介します。 こちらは参考
[jQuery] カルーセルライブラリ slick.js の lazyLoad を理解する
jQuery のカルーセルライブラリ slick.js をそのまま使うと slick.js file の読み込みと .slick() method の実行が完了するまで、カルーセルのレイアウトにならず ul, li タグで囲んでいる画像が全て表示されてしまうという問題に直面しました。 これを解決するには 1 枚目の画像だけ src で画像 URL を指定します。 2 枚目以降は data-lazy attribute に image url を指定します。 そして .slick() method に lazyLoad オプションを設定してあげれば OK です。 $('#js-banner-area').slick({ lazyLoad: 'progressive' }); Lazy Loading のサンプルは slick - the last carousel you’ll ever n
phiary
スマートフォンで, リンクやゲーム要素をタップした際の反応を遅いと感じたことはないでしょうか？ 終盤に実機確認してこの問題が発覚! どうしよう... なんてことを経験した方も少なくないと思います. そんなときは, 今回紹介する FastClick を使いましょう. 既存のページでも後から簡単に導入できます. Cordova とかで包んでアプリを出している方なんかにもオススメです. スマートフォンで手軽に確認できるよう QR コードも置いておきます. FastClick とは？ モバイル端末でのクリックイベントは touchstart touchend cilck という順番で発火するのですが, このタップとクリックの間に 300ms の遅延が発生します. この遅延を解消してくれるのが FastClick です! これを導入するだけで, ほぼ touchend と同じタイミングで click
pagePiling.js plugin | Create a stack of scrolling pages
jQuery plugin Pile your sections one over another and access them scrolling or by URL!
jQuery WebGL Ripples
Background images are often boring. Use this effect to make your static CSS background images more interactive! It's as easy as: $('body').ripples({ resolution: 512, dropRadius: 20, perturbance: 0.04, }); You can add drops programmatically by doing $('body').ripples("drop", x, y, radius, strength) And you can change its state: $('body').ripples("pause") $('body').ripples("play") Download or fork t
Drawer
Flexible drawer menu using jQuery, iScroll and CSS. InstallationStep 1: Link required filesDownloadDrawer v3.2.2jQuery 1.11.3+ Created by jQuery Foundation and other contributors.iScroll Created by Matteo Spinelli.CDN<!-- drawer.css --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/drawer/3.2.2/css/drawer.min.css"> <!-- jquery & iScroll --> <script src="https://ajax.google
オンズ
【jQuery】Geometryangle のサンプル・デモ 斬新なポリゴン・スタイルの背景を描画する jQuery プラグイン［Geometryangle］のサンプルです。 HTML5から導入された新要素『canvas』を使って描画しているので、IEなどの古いブラウザやスマートフォンでは何も表示されません。 最新のモダンブラウザを利用してご覧ください。 マウスカーソルの位置に反応してインタラクティブに動きます。 サンプルがうまく動かないときはページを再読み込みしてみてください。 また、エラーや間違い等を発見された方はぜひお知らせください。 オンズでは各スクリプトの実装のお手伝いも承っております。 比較的安価で最新・高機能なシステムを導入できますので、ご希望の方はお気軽にお問い合わせください。 お問い合わせはオンズのお問い合わせフォームからどうぞ。 記事に戻る © ONZE.
Particleground demo
Particleground A JavaScript plugin for snazzy background particle systems Download
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Endless River
https://blog.mismithportfolio.com/web/20150529scrollfixed
[JS]レスポンシブ対応の画像表示テクニック！見せたい箇所を中心にクロップして表示させるスクリプト -FocusPoint![[JS]レスポンシブ対応の画像表示テクニック！見せたい箇所を中心にクロップして表示させるスクリプト -FocusPoint](https://cdn-ak-scissors.b.st-hatena.com/image/square/89b7f74f30b33e347af5955101ddb9470c5139d7/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014082501.png)
iOS Safariでスクロールしただけでリサイズイベントが発生する原因と対処法 - Qiita
MixItUp | KunkaLabs
Particles.js