ドットインストール代表のライフハックブログ
Demo: images IsotopeにはimagesLoadedプラグインも含まれており、画像のロードにコールバック関数を利用できます。 Isotopeの特徴 レイアウト モード: CSSだけではできない、インテリジェントでダイナミックなレイアウトを実現します。 フィルタリング: jQueryのセレクタを使用して、簡単にエレメントのフィルタリングが行えます。 ソート: あらゆるデータからソートが行えます。 各機能の互換性: レイアウトモード、フィルタリング、ソートの各機能は一緒に利用することができます。 最適化: Isotopeのアニメーションエンジンは、表示しているブラウザごとに最適なものを使用します。例えば、CSS3 transitons, transformsなどで、これらに非対応なブラウザ(IEなど)は、JavaScriptでアニメーションを実現します。 Isotopeの実装
Talexio is a complete HR system for human resources, recruitment and payroll professionals looking to work more efficiently. Our flexible Software as a Service (SaaS) platform gives organisations full control over their HR processes. Through automation and easy-to-use wizards, Talexio saves you time and lowers the cost of your internal processes. Talexio is a scalable solution that caters for busi
TOP > WebDesign > 利用しやすいjQueryで作るツールチップを集めた「25 Useful jQuery Tooltip Plugins and Tutorials」 マウスオーバーしたときに出現するツールチップ、その対象物の内容を説明したり、補足的なデータを表示したりとユーザーインターフェイスを向上させてくれるテクニックの一つです。今日紹介するのは利用しやすいjQueryで作るツールチップを集めた「25 Useful jQuery Tooltip Plugins and Tutorials」です。 qTip – The jQuery Tooltip Plugin 吹き出しタイプやフェードタイプなど様々なもの集められていますが、今回はそのなかからいくつか気になったツールチップをピックアップして紹介したいと思います。 詳しくは以下 ■Prototip 2 – Crea
PHP、JavaScript、CSS、Webページ埋め込みによる音声・動画配信方法など、実用的なプログラミング・テクニックを解説[CSS]jquery.cluetip.css [JS]jquery.js v1.2.6、jquery.dimensions.js、jquery.hoverIntent.js、jquery.cluetip.js 外部ファイルを読み込んだり、いろいろなツールチップが実装できるjQueryプラグイン。 ツールチップのレイアウトや表示位置など、パラメータをいじるだけで簡単に変更できます。 設置イメージ HEAD <!-- JS --> <script src="jquery-1.2.6.min.js" type="text/javascript" charset="utf-8"></script> <script src="jquery.dimensions
Overview The clueTip plugin allows you to easily show a fancy tooltip when the user's mouse hovers over (or, optionally, clicks on) any element you designate in your script. If the element includes a title attribute, its text becomes the heading of the clueTip. If you like this plugin and you're feeling generous, perhaps you'd also like to visit my amazon.com wish list? Quick Start Guide Showing t
■ jQuery用プラグイン jQuery_auto を使用します。 prototype.js とのコンフリクト解消版 jquery_auto はこちらからダウンロード↓ http://logic.stepserver.jp/data_other/jquery_auto_j.zip ■ 1. scriptファイルを読み込ませます <script type="text/javascript" src="js/lib/jquery.js"></script> <script type="text/javascript" src="js/lib/jquery_auto_j.js"></script> ■ 2. ロールオーバー画像ファイル名の最後に _over をつける。 例: 【image.gif】 の場合 【image_over.gif】 ■ 3. HTMLの<img>タグに属性 class=
パソコンソフトのマニュアルをまともに読む人はどれだけいるだろう。Webシステムもそれは同じだ。 Webベースなのだから、システムそのものが使い方をaffordする(教えてくれる)のが望ましい。 具体的にはちょっとしたツールチップでもあればいい。といってもHTMLに自分でしこしこ書くのは大変だ。なにか適当なキーをつけておき、キーに対応するツールチップのデータは別ファイルに出しておいてそいつを表示させたい。ということでjQueryのプラグインを使う。 tooltipというそのものズバリのもあるが、外部ファイルの読み込みは面倒そうなので、cluetipを使うことにした。 でもこれ標準だと、ツールチップを外部ファイルにする場合は、1つのツールチップごとに1個のhtmlを生成しないといけない。そこでちょっと書き足してみた。 まずhtml本体。 <html> <head> <meta http-equ
Example three: simple row highlighting using the default settings simple column highlighting using css class "hover" higlight the current cell using css class "hovercell" fix the current highlight on click using css class "click" $('#tablethree').tableHover({colClass: 'hover', cellClass: 'hovercell', clickClass: 'click'}); ABCD A+A-B+B-C+C-D+D-
This plugin was originally written by Dave Methvin. Dave and I collaborated on several improvements and the project is now hosted on github. The most recent version is also available here: jquery.corner.js. It's important to understand that this corner plugin is pulling off its magic by adding more elements to the page. Specifically, it adds div "strips" to the item to be cornered and sets a solid
twitter facebook hatena google pocket 角丸を作成できるjavascriptは多いですが、ここまで角の形の種類が多いのも珍しいかもしれません。 jQuery Cornerの基本角は8種類と豊富です。 sponsors 使用方法 jQuery Cornerからjquery.corner.jsをjQueryからjquery.jsをダウンロードします。 <script src="http://yourdomain/jquery.js" type="text/javascript"></script> <script src="http://yourdomain/jquery.corner.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $("c
The result here was the result of some random jQuery keypress event experiments over the past few days. I recommend that you use this tutorial as a proof of concept rather than final product. Let’s be real for a moment — there are very few places where you would need the exact effect we’ll be building. However, the logic behind it should be a much more useful in adapting to your own needs. The Goa
Eコマースサイトなどに便利そうな、スライドのアニメーションでフィルタリングを行い、特定の属性のパネル(div要素)のみを表示するスクリプトをCSS-Tricksから紹介します。 Filtering Blocks demo デモでは、ナビゲーションに「View All」と属性4つがあり、それぞれの属性をクリックすると、指定属性のパネルのみをアニメーションで表示します。 「View All」は全部表示です。 仕組みは、ナビゲーション(id)とパネル(class)での指定を元にフィルタリングをしています。 ナビゲーション(例:webonly) <textarea name="code" class="html" cols="60" rows="5"> <a href="#" id="webonly" class="filter">Web Only</a> </textarea>
jQueryは軽量のAjaxフレームワークです。JavaScriptの標準的なコーディングとは異なりますが、非常に短いコードで大きな効果があるスクリプトを記述できるようになります。prototype.jsがRuby風に記述できるライブラリだとすればjQueryはCSS風にJavaScriptを記述できるライブラリといえるでしょう。 主な特徴としては以下のとおりです。
jquery.toggleElements.js - Toggle HTML-Elements with jQuerytoggleElements is designed to hide informations on your site and show it only when the user requests more information. Features unobtrusive script, simple to setup full customizeable via CSS only a class and a title-attribute must be added to your original HTML nesting toggleElements is possible This page uses jQuery Version Version
Purpose Demo Updated for jQuery 1.3 How to use it Download Thanks Purpose A jQuery plugin to make it really easy to enable the specified element/s to behave as a proxy for their first contained link. Uses additional css classes to provide the means for the specified element to visually reflect focus and hover states of it's contained link/s. More to read in my blog post: Bigger link: easier clicki
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く