JQueryでURLパラメーターを取得後、ifで条件分岐 | 東京 岡山 ホームページ制作・WEBコンサルジュのジリキ
URLパラメーターを取得してJQueryで条件分岐をやってみましょう。GETメソッドでURLパラメータが付く場合に、コンテンツの中身を入れ替えたりできるので、A/Bテストの実行にも有用だと思います。簡単な実装なのでこの機会に使ってみましょう。 JQueryで条件分岐させようURLパラメーターを取得するvar url = location.href; params = url.split("?"); spparams = params[1].split("&"); var paramArray = []; まずはURLのパラメーターを取得します。 http://www.example.com/?key=onece このようなURLをsplitで切っているわけですね。 for ( i = 0; i < spparams.length; i++ ) { vol = spparams[i].spl
tipso
There is also a Wordpress version of this plugin. GET IT HERE Getting started 1. Include jQuery <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> Requires jQuery 1.7+ 2. Include plugin's code <link rel="stylesheet" href="/path/to/tipso.css"> <script src="/path/to/tipso.js"></script> To use css3 animation effects please include Animate.css <link rel="stylesheet" hre
ウェブアクセシビリティを重視した使いやすいモーダルウィンドウ・「Modaal」 - かちびと.net
Modaalはウェブアクセシビリティを重視した使いやすいモーダルウィンドウです。WCAG 2.0の達成基準レベルAAをクリアしているそうで、全ての人にとってアクセスブルであると謳っています。jQuery依存っぽいのでこの時点ではい解散って方もいるかもしれませんが。 設定は基本的にカスタムデータ属性を利用して実装します。HTML(iframe)や動画、画像、複数画像によりイメージギャラリー、Confirmationなどの確認ダイアログ、Instagramなどもサポートされています。使った感じクセもなく個人的には良さげな印象でした。ライセンスはMIT。 Modaal いつもご覧頂きありがとうございます。 どうぞよいクリスマスをお過ごしください。
スクロールに合わせてナビゲーションに現在地を明示するスクリプト・「Progress Nav」 - かちびと.net
Progress Navはスクロールとともにナビゲーションに現在地を明示するスクリプトです。上の動作サンプルのようにスクロールに合わせてナビゲーションに用意したバーが動いて現在地を教えてくれる、というもの。この手のは同じように明示する方法ありますけど、この方法も悪くないと思ったので備忘録。 Progress Nav On Github
ページがアクティブではない場合にfaviconとタイトルで呼び戻しを試みる「I-Miss-You」:phpspot開発日誌
GitHub - Bahlaouane-Hamza/I-Miss-You: jQuery plugin to change the title & favicon of the page when the user is not viewing your website ページがアクティブではない場合にfaviconとタイトルで呼び戻しを試みる「I-Miss-You」 ページを見ている時は普通ですが、サイトを離れるとfaviconとタイトルが変わり、ページに戻ってきて、をアピールします。 関連エントリ ページ内テキストをハイライトすることができるJS「mark.js」 WEBCAMを使ったアイトラッキングができる「WebGazer.js」 ページの隅に隠せるコンテンツ実装「jquery.tabSlideOut.js」
resTables by codefog
resTables jQuery plugin for the responsive tables View on GitHub Download .zip Download .tar.gz resTables - jQuery plugin for responsive tables The resTables jQuery plugin allows you to easily make your table responsive. It has been created based on the stacktable.js concept by John Polacek. View the documentation at https://github.com/codefog/restables Basic demo Shrink your browser window below
要素内やページ内でのスクロールに応じてプログレスバーを表示する軽量シンプルなスクリプト・「PrognRoll」 - かちびと.net
PrognRollはページやスクロールが可能なコンテナ内でのスクロールに応じてプログレスバーを表示するスクリプトです。ただそれだけのシンプルなもので、サイズも2kb以下、圧縮すれば1kb以下と軽量です・・が、jquery依存なので軽量と言っていいか迷う所です。上動作サンプルは分かりやすいようにバーの太さを太めに設定しました。少し前に「この記事は～分で読めます」といった類のコンテンツ消化時間の明示が良く見かけられましたが、それと似たような目的じゃないかと思います。 PrognRoll
動画をフルスクリーンで背景にするスクリプト・「Vidage.js」 - かちびと.net
Vidage.jsはフルクリーンで動画を背景にするスクリプトです。スマフォなどのモニタサイズが狭いデバイスなどでは画像が背景になるようにするようです。ファイルサイズは圧縮版で4.7kbほど。非依存型なので単体で動作してくれます。手軽で良いんじゃないでしょうか。ライセンスはMIT。 Vidage.js
jQuery Countdown で残り 1 時間未満のときに「あと 0 時間」と表示しない - milk1000cc
カウントダウン機能を提供する jQuery Countdown プラグインで あと 0 時間 30 分 20 秒ではなく あと 30 分 20 秒のように表示する方法です。 $('#foo').countdown({ until: (終了時刻の Date オブジェクト), layout: 'あと {d<}{dn} 日 と {d>}{h<}{hn} 時間 {h>}{m<}{mnn} 分 {m>}{snn} 秒', format: 'dhms' }); layout プロパティで、0 時間のときに表示したくない部分を {h<} と {h>} で囲うところがポイントです。 ただそれに加えて、format プロパティを指定する必要があります。 というのは、format プロパティのデフォルトが dHMS となっており、このフォーマット (h ではなく H) だと {h<} {h>} で囲っても無視
口内炎の原因と治し方、知っておきたい市販薬、簡単にできる予防法 - 子育ての達人
口内炎の原因と治し方、知っておきたい市販薬、簡単にできる予防法 更新：2019/11/29｜公開：2016/02/05 子育て ほとんどの人が、口内炎で痛い経験をしたことがあるのではないでしょうか？ 2012年に10代～50代の男女1万人に実施した調査によれば、過去1年間に口内炎が発症した割合は53％、年間の平均発症回数は6.5回となっています。人口にすると、1年間に口内炎ができる人は約4000万人となります。性別では女性、年代では若い世代に多く発症しています。 今回は、多くの人が経験している口内炎の原因、予防法、治し方、市販薬などについて詳しく解説していきます。これを機に口内炎とサヨナラできることを願っています。 口内炎の原因 口内炎とは、口内粘膜に発生した炎症を総称した病名で、以下の3つに分類されます。 ① 一般的な口内炎（アフタ性口内炎） ⇒原因：後述 ② 一般的でない口内炎（アフタ
レスポンシブWebデザイン対応のシンプルなイベントカレンダーを実装出来るスクリプト・「monthly.js」
monthly.jsはシンプルなイベントカレンダー実装の為のスクリプトです。jQueryに依存しています。レスポンシブWebデザインにも対応しており、デイトピッカーとして利用する事も可能となっています。少し触ってみましたが、作りがわかりやすく、日本語化も問題なく出来ました。イベントは別途用意したxmlを読み込む形なのでその辺は若干手間では有りますが、それ故に軽量サイズなJavascriptのみで実装する事ができています。あくまでシンプル性を重視しているようで、高性能なものが欲しいならFullCalendarあたりチェックしてみて、との事。ライセンスの明示はありませんでしたが商用個人共に自由、ただし転売はやめてね、との事でした。 monthly.js
ページのスクロール時にviewport内に入った要素をアニメーション表示させる非依存型で軽量なスクリプト・「ScrollReveal」
ScrollRevealはページのスクロール時に、viewport内に入った要素をアニメーションエフェクト付きで表示するためのスクリプトです。他ライブラリへの依存は無く、単体で動作してくれます。圧縮版で2.7KBと軽量でモバイルブラウザにも対応しています。オプションもいろいろ用意されていて応用が効きそう。用途は限られますけど覚えておいて損はなさそうです。ライセンスはMIT。 ScrollReveal
[試] 画像遅延ロード対象の最適化で体感表示速度向上! WordPressプラグイン Unveil Lazy Load | 試行錯誤ライフハック
遅延ロードさせる対象画像を最適化して体感表示速度を改善！WordPressプラグイン Unveil Lazy Loadアップデートのお知らせです。一般的なWordPressの画像遅延ロードプラグイン（Lazy Loadプラグイン）の弱点を克服すべく、新機能を追加しました。その概要と利用法を紹介します。続きを読む 関連記事 [試] 速いは正義！WordPressプラグイン Unveil Lazy Load | 表示速度改善のためのこだわり施策を適用 [試] 表示速度でお悩みの方に。WordPressプラグイン Unveil Lazy Loadアップデートのお知らせ [試] サイトの表示速度改善のお供に。WordPressプラグイン Unveil Lazy Load正式リリース [試] WordPressプラグイン SNS Count Cache （Ver. 0.8.0）リリース | 日本語化
![[試] 画像遅延ロード対象の最適化で体感表示速度向上! WordPressプラグイン Unveil Lazy Load | 試行錯誤ライフハック](https://cdn-ak-scissors.b.st-hatena.com/image/square/24b52a3c6928681209b1ac2121ad8104ac980052/height=288;version=1;width=512/https%3A%2F%2Fmarubon.info%2Fwp-content%2Fuploads%2Fannouncement-update-wordpress-plugin-unveil-lazy-load-01.jpg)
テーブルのソート・フィルタ機能等、超多機能テーブルに変形させられる「jQuery-KingTable」:phpspot開発日誌
RobertoPrevato/jQuery-KingTable GitHub テーブルのソート・フィルタ機能等、超多機能テーブルに変形させられる「jQuery-KingTable」 テーブルを次のように超リッチにしてくれます。ページング、フィルタ、ソート等便利に使えます テーマも色々えらべます 関連エントリ テーブル内容の編集がその場で出来て便利になる「jQuery-Tabledit」 高機能＆高速なテーブル実装jQueryプラグイン「WATable」 ブラウザ内で50万件のテーブルもサクサクで表示できるようにする「Clusterize.js」 ヘッダ、フッタを固定したテーブルを実装できるjQueryプラグイン「jTableScroll」 テーブルをGoogle Chartsを使って多様なグラフに変換することが出来る「Chartinator」
iPhone の Safari でアドレスバーを隠すときにやってはいけないこと - メモ用紙
スマートフォン向けサイトという言葉も下火となったが、良くないテクニックが蔓延しているのでこの記事を書いた。 そのテクニックとは次のようなもの。 window.addEventListener("load", function() { setTimeout(function() { scrollTo(0, 1); }, 100); }, false); ページが読み込まれたあとに縦方向にスクロールすることで、本来ユーザがスクロールして隠れるアドレスバーを強制的に隠すやり方。 Web 上を検索すると多数の記事が見つかる。 スマホサイト制作：URLバーをページ読込み完了時に引っ込める方法 iPhone向けWebページで、アドレスバーを隠す - サンフラットの開発日記 - くらげのChangeLog Android/iPhoneのURLバーを隠す - tweeeetyのぶろぐ的めも iPhoneサ
Quick[select] by eggboxio
Quick[select] A jQuery plugin for quick selection of common options in select boxes. Selectual. View on GitHub Download .zip Download .tar.gz Do you like select boxes? Select boxes are a two tap/click operation. They take the user out of the flow of the form, and usually there are certain answers that will be more commonly chosen than others. Take the example above, most would reply with "yes" or
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
シンプルで高速なカウントダウンタイマー実装「TimezZ」:phpspot開発日誌
microtip
複雑なCSSアニメーションを処理する為のシンプルなスクリプト・「Choreographer.js」 - かちびと.net
textareaに行番号を付けられるjQueryプラグイン:phpspot開発日誌