http://infinityforest.net/home/archives/2772
Masonry.jsを使ってみる
レスポンシブ対応のグリッドレイアウトを実装できるjQueryのプラグイン「Masonry.js」の使い方をメモ。 今回はバージョン4のプラグインを使用していますが、バージョン3だと記述方法が少し違うところがあるようなので注意してください。 使い方 下記からダウンロードできます。 GitHub – desandro/masonry: Cascading grid layout library HTML内に必要なファイルを読み込みます。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="./masonry.pkgd.min.js"></script> HTML <div class="grid"> <div class="grid-item"
jQuery とっても簡単、ページ内リンクでスムーズスクロール
ページ内リンクでスムーズにスクロール移動させる方法の紹介です。 とても簡単に実装できます。 スムーズスクロール？というかたは、↓の DEMO をご覧になって、どこかリンク部分（下線がある文字）をクリッックしてください。ページ内でリンクが貼ってある場所へスムーズにスクロールするはずです。 ＊味も素っ気もない DEMO ですが、余計な装飾をすると、ソース説明や理解に余計なものがはいるのであえてそうしています。 ▶ DEMO INDEX 手順１：jQueryの記述 手順２：HTMLの記述 WordPressの場合 サンプルソース 補足 位置調整 ページ間でのスムーススクロール 手順１：jQueryの記述 まず、 <head>〜</head> の間に以下のソースを記述してください。 <!-- jQuery.jsの読み込み --> <script type="text/javascript" src
Androidのバージョン判別 | クロジカ
function androidVersion() { var ua = navigator.userAgent; if( ua.indexOf("Android") > 0 ) { var version = parseFloat(ua.slice(ua.indexOf("Android")+8)); return version; } } } UAからバージョン数のみを抜き出してきます。 「2.3」「4.4」などの数値で返します。 下記のように利用できます。 if (androidVersion() >= 4) { //Android4以上 } else if (androidVersion()) { //Android4未満 } else { //0:Androidでない }
プラグインなしでAdBlockを検出-する方法
WordPressにはAdBlockを検出して動作するプラグインがあるのですが, このサイトでは上手く動作しませんでした. プラグインなしでAdBlockを検出 して動作するjavascriptがあったので, 試しに使ったところ, 問題なく動作しました. そこで, 自分の備忘録も兼ねて紹介したいと思います. はじめに Google Adsenseをこのサイトに導入して, 訪問数に比べてAdsenseの表示回数が少ないことに気付きました. 元々, 訪問数が見込めない内容なので訪問数が少ないのは仕方ありません. ですが, ただでさえ少ないAdsenseの表示回数がAdBlockによってさらに減っているようでした. そこで, AdBlockの仕様に対して何かしらの対策が取れないかを調べたところ, WordPressの場合は, プラグインがあることに気付きました. 私のようにWebプログラミングの
2015年版 jQueryでUA(User agent)判別のまとめ | [k]id
最近のUA判別 レスポンシブWEBデザインによりUA(User agent)判別がより細かく指定してあげないと、 思わぬところで表示が崩れたりするケースが出てきました。 さらにWindows IEをどこまで対応させるかで構築時の工数がだいぶ変わるので、 どこかで線引きをしなければなりません。 そこで大きく分けると ・タブレット ・スマホ ・Old Internet Internet Explorer ・それ以外のブラウザ とおおまかに４タイプに分ける事にしています。 そこで最近使用しているJQueryによる機種判別方法をまとめてみました。 判別方法 下記を記述しています。 var _ua = (function(u){ return { Tablet:u.indexOf("ipad") != -1 || (u.indexOf("android") != -1 && u.indexOf("m
![2015年版 jQueryでUA(User agent)判別のまとめ | [k]id](https://cdn-ak-scissors.b.st-hatena.com/image/square/b566faa023a335da57be2d69bc303dec93110ffd/height=288;version=1;width=512/https%3A%2F%2Fkidokorock.com%2Fwp-content%2Fuploads%2F2015%2F07%2Fua.jpg)
BigVideo.js - The jQuery Plugin for Big Background Video
BigVideo.js The jQuery Plugin for Big Background Video (and Images) 12-30-2015 Update This project is no longer under active development. Much has changed since the summer of 2012 when BigVideo.js was launched. For more current information on implementing video backgrounds, check out these links: CSS Tricks - Should I use a video as a background? Dudley Storey - Create Fullscreen HTML5 Page Backgr
slidr.js·軽量、自由の高いスライダーライブラリ MOONGIFT
スライドライブラリは色々な場面で活躍します。例えばWebサイトの最初に使う説明であったり、Eコマースでの商品画像を切り替える際にも役立ちます。さらにWebベースのプレゼンテーションスライドでも便利です。 そんな活躍の幅が広いスライドライブラリslidr.jsを紹介します。簡単に使えますのでアイディア次第で様々な使い道があるはずです。 使い方はまずHTMLを下記のように記述します。 <script type="text/javascript" src="/path/to/slidr.min.js"></script> <ul id="slidr-ul" style="display: inline"> <li data-slidr="one">apple</li> <li data-slidr="two">banana</li> <li data-slidr="three">coconut<
Masonryの使い方：サイズの異なるBOXをタイル状に整列 [ホームページ作成] All About
Masonryの使い方：サイズの異なるBOXをタイル状に整列大きさの異なる複数のブロックを、うまい具合に隙間無くタイル状(レンガ状)に自動整列してくれる「Masonry」の使い方を解説。横幅や高さの異なるボックスがいくつあっても、できるだけ無駄な隙間ができないように詰めて配置してくれます。当初の「jQuery Masonry」とは違ってjQueryなしで動作可能になり、CDN経由で読み込めるようにもなって手軽になりました。
![Masonryの使い方：サイズの異なるBOXをタイル状に整列 [ホームページ作成] All About](https://cdn-ak-scissors.b.st-hatena.com/image/square/2d598cb7c9e1437f59a7459deffaf32757e9eedb/height=288;version=1;width=512/https%3A%2F%2Fimgcp.aacdn.jp%2Fimg-a%2F1200%2F900%2Faa%2Fgm%2Farticle%2F4%2F0%2F2%2F5%2F4%2F9%2Ftopimg_original.png)
Adobe製のJavaScriptデバッガTheseusがすごい - Qiita
この前、研究室の先生に教えてもらったAdobe製のJavaScriptデバッガTheseusがかなり便利なのでご紹介します。 Theseusとは Theseusは、AdobeとMITの共同研究から生まれたJavaScriptのデバッガです（→学会論文）。ChromeとNode.jsの上で動きます。具体的に何をしてくれるのかをざっくり言うと、関数のコールを追跡して、BracketsというAdobe製のエディタに下画像のような感じで表示してくれます。 Theseusのすごいところは、コールバックの実行まで追跡してくれることです。もちろん、エラーが起きた箇所もすぐに見ることができます。また、デバッグをするとき、気になる箇所にconsole.logを挟むことがあると思いますが、Theseusを使えばその必要もありません。関数の横に表示されているコール回数をクリックすれば、その関数の実行ログを表示し
Androidでoverflowした要素をスクロール可能にするjQueryプラグイン - (・肉・)ブログ
Androidでoverflowするとスクロールできない問題を解決するためにつくりました。 ソースコード https://github.com/yosukedoke/JSOverflowScroll 使い方 #hoge { overflow:auto;//Androidは強制的にhidden的な挙動になる width:320px; height:400px; } $("#hoge"). overflowScroll(); iOSでもoverflowを設定すると慣性スクロールが効かなくなるので有用かもしれませんが、 よほどでなければUAを判定してAndroidだけ適応するほうがいいと思います。 仕組み touchStartで取得したポイントをと現在の指の位置の差分をscrollTopに設定しているだけです。 模式的に書くと次のようなかんじです。 タッチ開始 $target.on("touch
IE6用透過png対応策、DD_belatedPNGの使用法と注意点
以前もこの「DD_belatedPNG.js」に関してはエントリーしましたが 『IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」』、あまりの素晴らしさにオススメするだけして使用法とか注意事項など大事な部分に触れずじまいでした。 この素敵な透過png対応策であるDD_belatedPNGちゃんですが、img要素に使用する際にも、div要素やp要素等の背景画像に対して使用する際も、ほんのちょっとしたクセがあります。 なので、今回はこの偉大なる「DD_belatedPNG.js」の使用方法と、使用に関するちょっとした注意点などをエントリーしようと思います。 DD_belatedPNGの使用法と注意点 1.使用するための準備 まずはこの「DD_belatedPNG.js」自体をダウンロードしないコトには始まりません。 配布元のDrew Diller’s bl
ColorBox - ポップアップ内を自由に設定できる活かしたjQuery
View Demos 1 2 3 4 5 Released under the MIT License, source on Github (changelog) Download Install via NPM npm install jquery-colorbox Compatible with: jQuery 1.3.2+ in Firefox, Safari, Chrome, Opera, Internet Explorer 7+ Supports photos, grouping, slideshow, ajax, inline, and iframed content. Lightweight: 10KB of JavaScript (less than 5KBs gzipped). Appearance is controlled through CSS so it can
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
