JSタブ切替え応用編 —他ページから直接タブにアクセスする— - Archiva
Make a note of it: Web tech, montaineering, and so on. Note: この記事は、3年以上前に書かれています。Webの進化は速い！情報の正確性は自己責任で判断してください。 他ページからそれぞれのタブにリンクすることってできますか？ —タブ切替をサクッと実装, くりはらさんのコメント 確かに便利そうなので、やってみました。ページ内リンクと同じように「なんたら.html#Contents」とかってURLでアクセスできます。意外と簡単～。サンプルは以下の画像から。 考え方 tab.dive = function(){ var hash = window.location.hash; hash = hash.split("?"); hash = hash[0].split("#"); if(hash[1] == 'page2') tab.sho
Snap.svg - The JavaScript SVG library for the modern web.
Why SVG (and Snap)? SVG is an excellent way to create interactive, resolution-independent vector graphics that will look great on any size screen. And the Snap.svg JavaScript library makes working with your SVG assets as easy as jQuery makes working with the DOM. Modern features for modern browsers Snap.svg is designed for modern browsers and therefore supports the newest SVG features like masking
簡単で高機能！デザイナー必見の汎用性が高いjQueryプラグイン7選 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。LIGフィリピン支社代表のせいと(@seito_horiguchi)です。 最近、いろんな先輩方から「お前服だっせえな」と言わるので、ファッションの傾向を泣く泣く変えました。嵐の相葉君をお手本にこれまで頑張って参りましたが、相葉君には近づけませんでした。無念。 さて、今回はさまざまなシーンで活用できる、汎用性の高いjQueryプラグインを7つほどご紹介させていただきます。簡単＆シンプルで優れた機能のものばかりなので、ぜひご覧ください。ダウンロードできる本家サイトのほかに、日本語で分かり易く解説してくださっているサイト様のURLも合わせて載せておきます。 1.世界一使いやすいスライダー”bxslider.js” カスタマイズ豊富で、設置の仕方も超簡単！弊社CTOづやさんのオススメでもあります。 フリック、スワイプも対応しています。最強すぎます。 ダウンロード：bxslider様
カスタマイズ性の高いカレンダー機能が実装出来るjQueryプラグイン『CLNDR.js』 | バンクーバーのうぇぶ屋
「サイトにカレンダー機能付けて！」って時って、意外と悩みませんか？Wordpress何かで作る時はプラグインで対応しますが、CMS無しで、ランディングページ的なの作って的な案件の時は、まーなんだかんだよく迷う。Googleカレンダーの埋め込みだと見栄えがちょっと…って事も多いですよね。 僕はと言えば、プログラマーさんにカレンダー部分だけ別で依頼したりする事も少なくは無かったんですが、それにしたってカスタマイズ性を考えて高機能な物にすればする程、コストは掛かるし、ちょっとどうしたもんかと更に頭を悩ませる事も少なくありませんでした。 今日ご紹介する、jQueryのカレンダープラグイン『CLNDR.js』はもしかしたらそんな悩みを解決してくれる手段の一つになるかもなと思ったので、共有させて頂きます。 中を見てみると、結構jsの知識が無いとキツイ感じですが、jQuery触ったことあるレベルの人でも
animo.js • Labs by Big Room Studios
animo.js A powerful little tool for managing CSS animations Stack animations, create cross-browser blurring, set callbacks on animation completion, make magic. August 13th, 2013 by Daniel Raftery You can easily install animo via the GitHub repo or using bower's package manager. Using First and foremost, animo includes the amazing animate.css library by Dan Eden which provides you with nearly 60 be
デバイスを判定し、CSS/JavaScriptで簡単に利用できるようにするスクリプト -Device.js | コリス
ページにほんの一行外部ファイルを加えるだけで、iPhone, iPadなどのiOSをはじめ、Android, Blackberry, Windows Phone, Window Tabletなどスマフォやタブレット、デスクトップなどのデバイスを判定し、簡単に条件付きのCSSやJavaScriptを利用できるにするスクリプトを紹介します。 Device.js -GitHub Device.jsの使い方 Device.jsのデモ Device.jsの使い方 Device.jsの実装は、簡単です。 外部ファイルとして、当スクリプトを記述するだけです。 <script src="device.js"></script> スクリプトを設置すると、表示デバイスに基づいて<html>に適切なclassを付与します。 iPhoneでアクセスすると、こんな感じに。 <html class="ios ipho
コンテナに画像をフィットさせられるjQueryプラグイン「imagefill.js」:phpspot開発日誌
imagefill.js | Project Page コンテナに画像をフィットさせられるjQueryプラグイン「imagefill.js」 HTMLの指定した位置に画像をフィルさせたい場合に使えます。 次のように、画像を特定サイズのブロックに適度に拡大させておさめられます。 それ用の画像を作る必要はもうなく、動的にフィットさせられるというのは便利でレスポンシブWEBデザインにも使えます 関連エントリ 製品画像等のズームが非常に簡単に行えるjQueryプラグイン「Image Zoom」 画像のカーソル位置を拡大できるjQueryプラグイン「mlens」 マウスホバーだけの簡単操作で画像をズームできて便利な「jQuery Zoom」
ページがずれて立体的なメニューを作れるjQueryプラグイン「BoxLid」:phpspot開発日誌
Box Lid Menu by jimjh ページがずれて立体的なメニューを作れるjQueryプラグイン「BoxLid」。 次のようにページが傾いてメニューが現れるというシンプルながらカッコいいエフェクトが作れます。 対応ブラウザ（Safari等）で見てみて下さい。 こういう地味な3Dエフェクトは今後、どんどんサイトで使われるようになってきそうですね。 関連エントリ 2Dの地図をリアルな3Dにして3Dマップを作れるPhotoshopアクション 3Dのキューブのアニメーションで迫力あるエフェクトを付けられるjQueryプラグイン「HexaFlip」 WebGLを使った3Dマップ描画エンジン「Cesium」 ドラッグで回転する3Dオブジェクトが作れる「ThreeSixty」 3D Transformsを使った次世代の3Dサイドメニュー実装スクリプト「Meny」
プレロード（先読み）｜jQuery plugin｜Ajax｜PHP & JavaScript Room
ページロード完了後に指定した間隔で画像をフェードイン表示していく方法が掲載されています。 ページロード時にページ上の画像をすべて隠しておき、完全にページが読み込まれたら、ページ上の画像を上から順に配置されている順にフェードイン表示するようになっています。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta
SVGをもっと活用するために使いたい·svg.js MOONGIFT
svg.jsはアニメーションやイベント駆動型のSVGを実現するライブラリです。 SVGはまだ広く利用されているとは言いがたいですが、ビットマップではなくベクターデータなので拡大してもきれいなど特徴が多数あります。今回紹介するsvg.jsはSVGを使ったアニメーションを実現するライブラリになります。 デモです。単純なオブジェクトの生成、移動、中央寄せが簡単に指定できます。 クローンして重ね合わせ。重心の判定、傾けるのも手軽です。 X軸、Y軸のずらし。塗りつぶし。 枠だけを描く、グラデーション（線形、円形）。 クリック、マウスオーバー、画像マスクもできます。 クリックしたオブジェクトだけ色を変更します。 さらにアニメーションも自在に。 プラグインによる拡張もサポート。 svg.jsを使えばアニメーションはもちろんのこと、画像を重ねて表示したり、マウスイベントによって形状や色を変更したりすること
[WebStorm]JavaScriptファイルをMinifyする(Source Maps対応) | バシャログ。
日頃から愛用してるIDEのPhpStorm 6 がリリースされました。JavaScriptにコンパイルされる系の言語のサポートが強化されたのが目立ちますね。 今日は、6の新機能というわけではないですが、WebStormを使ってJavaScriptファイルをMinifyする方法について紹介します。 概要 WebStormでjsファイルを編集したら自動的にMinifyされるようにします。JavaScriptにおいてMinifyとは余計な空白をとったり変数名を短くしたりして、機能的動作を変えずにJavaScriptのファイルサイズだけ小さくすることをいいます。今回はClosure Compilerを使います。 インストール まず、Minifyを実行するプログラムをダウンロードします。Getting Started with the Closure Compiler Applicationからリン
![[WebStorm]JavaScriptファイルをMinifyする(Source Maps対応) | バシャログ。](https://cdn-ak-scissors.b.st-hatena.com/image/square/e09ad8f655ea0962c3fc07c12b65c5a618375e0d/height=288;version=1;width=512/https%3A%2F%2Fbashalog.c-brains.jp%2Fimages%2Fcat_tools.png)
Textillate.js
About Textillate.js combines some awesome libraries to provide a ease-to-use plugin for applying CSS3 animations to any text. Usage Simply include textillate.js and it's dependencies in your project to start creating unqiue effects. Credits Textillate.js is built on top of the simple, yet amazingly powerful animate.css and lettering.js libraries.
チェックボックスとラジオボタンをスタイリングする為のjQueryプラグイン・iCheck.js
checkboxesとradioボタンをスタイリングするjQueryのプラグインです。カスタマイズ性に優れており、使い方も手軽そうだったので備忘録的にご紹介します。 よくあるプラグインですけど、使いやすそうだったのでメモ。 checkboxesとradioボタンをスタイリングするライブラリ。IE7にも対応しています。 かわいい。 スタイルは最初からいろいろと用意されていますのでカスタマイズの参考にもなりますね。 コード<script src="jquery.js"></script> <script src="jquery.icheck.js"></script>コアとプラグインを読み込みます。 $('input').icheck();初期化します。 $('input').icheck({ handle: '', // 'checkbox'か'radio'とすればどちらかに限定できる ch
スクラムによるプロジェクト管理を推進するUI·TrackerTracker MOONGIFT
TrackerTrackerはPivotal Trackerのデータをスクラムにあった形で表示してくれるソフトウェアです。 最近のプロジェクト管理のスタイルはアジャイルが多いように思います。また、その中でも人気があるのはスクラムです。Pivotal Trackerのデータをスクラムにしてビジュアル化してくれるのがTrackerTrackerです。 カラムがステータス、その中にタスクが入っています。 タグによる絞り込みが可能です。 タグは複数設定できます。 イテレーションのステータスやベロシティをグラフ化できます。 TrackerTrackerはPivotal TrackerのデータをWeb API経由で取得して表示しています。さらに表示だけでなく、操作による書き込みにも対応しています。複数プロジェクトの出し分けにも対応しており、よりアジャイルなプロジェクト管理に最適な画面を提供します。 T
Canvas+JavaScriptを使って画像解析·Resemble.js MOONGIFT
Resemble.jsはCanvasを使って画像の解析、二つの画像の差分を抽出するJavaScriptライブラリです。 Canvasを使って何ができるかをみんな模索していると思いますが、特に多いのが画像解析、表示ではないかと思います。今回はJavaScript+Canvasによる画像解析ソフトウェアであるResemble.jsを紹介します。 一例。写真のRGB解析と明るさを解析しています。 二つの画像を比較しています。 色を排除した比較。 サンプル。これで間違い探しが快適になりますね。 Resemble.jsではresembleという関数を提供します。これにファイルデータを渡すと、RGBと明度の値が返ってきます。さらに二つ目の画像を渡すと差分のパーセントやその差分となる画像データが返却されます。そのまま使うのはもちろん、画像解析の手法として参考になる部分も多そうです。 Resemble.j
Browserhacks
What’s this? Browserhacks is an extensive list of browser specific CSS and JavaScript hacks from all over the interwebs. Press the first letter of a browser to jump to the according section, like F for Firefox. How to? Pick the hack you want Copy it into your stylesheet Add the style you want between the braces Enjoy the new styles for the browser you targeted! Reminder! Please keep in mind using
[Sublime Text2]SublimeLinter+jshintでJavaScriptコードを自動チェック | バシャログ。
最近、JavaScriptの新刊が本当に増えててうれしいなーと思うtanakaです。Web+DB PRESS vol.73 の連載で、JavaScriptのユニットテストについて書かれていたのを読みました。主に3つのツール・ライブラリが紹介されていましたが、中でも複数のブラウザに対して一斉にテスト実行させるtestemがすごい便利そうです。以前、同様のツールであるjsTestDriverをバシャログで紹介しましたが、testemはnpmコマンドでインストールしたらすぐテストを書き始められるし、設定を書けば、自動でブラウザを起動してくれるので楽でした。(Windows,Macともに導入できました)テスト書きたいと思っている方がいましたら是非読んでみてください。 さて、testemはまだあんまりいじってないので、今日は JavaScript のコードをjshintというツールでチェックする方法
HTML、CSS、JavaScriptのコード整形ツール・「Dirty Markup」
Dirty Markupは、HTMl、css、JavaScriptのコードをインデントして整形してくれるツールです。高機能ではありませんが、シンプルで使いやすく、動作も軽量です。 Dirty Markup
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WEBSITE.WS - Your Internet Address For Life™
ドラッグ&ドロップでファイルのアップロードを可能にするJavaScriptライブラリ – creamu
