Simple Tooltip w/ jQuery & CSS | jQuery Tutorials | Web Design Tutorials and Front-end Development Blog by Soh Tanaka
Latest Word » Tutorials » Simple Tooltip w/ jQuery & CSS Oct.4.2010 Simple Tooltip w/ jQuery & CSS Tags: Intermediate There are a lot of tooltip plugins out there, but not many of them explain what exactly goes on in the logic of a tooltip. I would like to share how I’ve created mine today, and am also open to any critiques and suggestions for those jQuery ninjas out there. Lets take a look. The M
jQuery での CSS プロパティの表記方法についてのメモ | JavaScript | かたつむりくんのWWW
今『jQueryクックブック』を読んでいるんですけど、この本すごくいいですね。こういう jQuery の本が欲しかったんだよな〜という感じで大満足しながら読んでます。 さて、jQuery で要素のスタイルを確認するとき、.css( propertyName ) メソッドを使って値を取得できますね。 例えば、フォントサイズを取得するとき、propertyName は「font-size」でも「fontSize」でも取得できます。それは経験上なんとなく知っていたのですが、はて、実際はどちらがいいのだろうと思って少し調べてみました。 結論 結論から言えば、どちらでもいいんですね。jQuery 側で、 Firefox, Safari, Opera の場合は「font-size」 IE の場合は「fontSize」 という表記に正規表現で置換しているみたいです。 なので、僕は CSS の指定をしてい
「JavaScriptでできて、jQyeryではできないこと」にはどのようなことがあるでしょうか？…
「JavaScriptでできて、jQyeryではできないこと」にはどのようなことがあるでしょうか？ 思いつく限り教えてください。 （今からjQueryを勉強しようと思うのですが、jQueryにできることとできないこと（できないのでJavaScriptでやること）を知っておきたいので。）
HTML をプレゼン形式に表示する jQuery プラグインを作ってみた - Cyokodog :: Diary
先日「jQuery の紹介」と題して、職場（情報システム部門）向けのプレゼン資料を作成する機会がありました。うちの職場では「新技術紹介」という名目で、隔週でプレゼンを行うという決まりがありやむなく作ったものです。（資料の内容自体は、大量にブクマした記事から jQuery の紹介文の部分だけをコピペして作った手抜き資料ですが･･･） はじめはパワーポインタで作ってた資料ですが、jQuery の紹介で jQuery のプレゼンツール使わないのもどうかなと思いプラグインを探しはじめましたが、例のごとくなかなか IE6 にもやさしいやつを見つけられずに･･･（会社の標準ブラウザは未だに IE6 なんです） そんな訳で、結局自前で作ることになった jQuery ベースのプレゼンツールを紹介致します。 機能概要 html モードとプレゼンモード html モード（普通の html ページの表示）とプレ
今までに公開したjQueryプラグイン :: 5509
はじめに、この記事は役に立つリンク集ではないです。 ブログを初めて2年ちょっとが過ぎ、半年くらいやるやる言ってやらなかったexValidationもようやく公開できたのもあって、自分の中で一段落したので、今まで公開したプラグインの振り返り等も兼ねて書きました。 そもそもは誰かの役に立てばいいなと思って始めたブログなので（ほとんど役に立たないものだと思いますけど）もしかするともしかしてどこかで誰かの役に立てるものもあるかもしれません。 ところで最初のプラグインを公開したときは、（JavaScript的な意味で）それはもう何も知りませんでした。そんな感じで今でも恥ずかしいコードなんですけど、最初の頃はもっと恥ずかしいコードなんですね。だから見ないで… いままで公開したjQueryぷるぎんたち プルダウンで日付を入力(選択)するイライラを解消するDateSupport.js サンプル この頃は些
画像を使ったいろいろなjQueryプラグイン224個まとめ - かちびと.net
画像にエフェクトをかけて拡大表示したり、スライドを作ったり、ツールチップで表示したり、というような画像を使用したjQueryプラグインが沢山あるのと、探してる方が直ぐに見つけられるように、という事でリンク集を作りました。 という訳で、集まっているjQueryのプラグインの共通点は画像を使っている、という事だけです。一貫性無いといえば無いですが、個人的にも必要とする事が多いので自分用のメモも兼ねてシェア。 日本語 English 結構カテゴリ分けはいい加減かもしれませんのであしからずご了承下さい。画像じゃなくてもいいんじゃ・・みたいのもありますが、デモで画像を使ってる、画像と相性が良さそう、みたいなものは基本的に掲載しています。 リンクにマウス乗せればキャプチャが出ます。 Lightbox Lightbox風に画像を表現できるjQueryいろいろ Lightbox2 / ベーシックなタイプ。
画像ギャラリーの切り替えにjQueryでインパクトを！「Blockster transition effect 」
twitter facebook hatena google pocket 画像ギャラリーのJavaScriptの切り替えってありきたりなものが多いですよね。 そんな時、jQueryプラグインのBlockster transition effectを使用するとインパクトのある切り替えが可能になります。 sponsors 使用方法 Blockster transition effectからファイル一式をダウンロードします。 またjQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="/test/js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="/test/js/blockster.js"></script> <script> $(
jQueryを使ったプレゼンテーションツールjQuery-Presentationの使い方 - 小さい頃はエラ呼吸
MOONGIFTさんのエントリで紹介されていたjQueryで作られたプレゼンテーションツールjQuery-Presentationを実際に使ってみました。 MOONGIFT: » jQuery製のプレゼンテーション「jQuery Presentation」:オープンソースを毎日紹介 jquery-presentationのダウンロード 1.以下のサイトにアクセスします。 davist11's jQuery-Presentation at master - GitHub 2.右上にあるDownload Sourceから必要なファイルを一式ダウンロードします。 3.ダウンロードする形式を選択します。(zipかtarが選択できます。) jquery-presentationの使い方 ダウンロードしたファイルを解凍して、index.htmをブラウザで見るとすぐに動きます。スライドを作成するには、i
シンプルだけどとってもクールなスライドショー実装jQueryプラグイン「simpleSli.de」:phpspot開発日誌
シンプルだけどとってもクールなスライドショー実装jQueryプラグイン「simpleSli.de」 2010年04月15日- simpleSli.de: A Super-Simple jQuery Slideshow Plugin シンプルだけどとってもクールなスライドショー実装jQueryプラグイン「simpleSli.de」。 画像は勿論、テキストベースのコンテンツなどもスライドとして枠内に複数のコンテンツを収納してしまえる便利なプラグインです。 カーソルが合うと、左右のページナビゲーションが現れ、クリックでページ移動が可能。 スライドの下部にプログレスバーが表示されており、大体どの辺かというのも分かるようになってます。 実装時のHTMLの次のように綺麗に定義できます。simpleSlide-slide の中に好きなHTMLで書けばOK <div class="simpleSlide-
jQuery製のプレゼンテーション·jQuery Presentation MOONGIFT
jQuery-PresentationはjQuery/JavaScript製のオープンソース・ソフトウェア。プレゼンテーションを作成するソフトウェアと言えばPowerPointやKeynote、WebアプリケーションであればGoogleドキュメントを利用する方法がある。 HTMLでプレゼンを だが画一的な表示のプレゼンテーションは聴衆をすぐに飽きさせてしまう。もっと柔軟性に富んだプレゼンテーションを行いたいならばHTMLを使ってみると良いだろう。jQuery Presentationを使えばさらに拡張性も期待できそうだ。 jQuery Presentationは名前の通りjQueryを使って作られているプレゼンテーションソフトウェアだ。矢印キーの左右やリンクをクリックしてスライドを切り替えることが出来る。現状ではそれだけに限定されるようだ。ページ一覧や検索機能などがあるとさらに便利そうだ。
Best jQuery Tutorial Websites - SaveDelete
jQuery is a JavaScript library which works on cross-browser ( multi -browser ) to beautify and simplify user experience in web designing. Developed in Jan 2006 at NYC by John Resig it is now the most popular JavaScript library which is being used today in web design arena. Its so popular status is due to its free, open source culture which has made it possible to create awesome animations, handlin
プロフェッショナル用のHTML5+CSS3+jQueryのテンプレート -HTML5 Boilerplate
プロフェッショナル向きに開発された、HTML5+CSS3+jQueryなど直接実装に関わるファイルから、robots.txt, .htaccessなどサーバー関連のファイルも一式にまとまったテンプレートを紹介します。 HTML5 Boilerplate 昨日、当サイトで紹介した「HTML5 Reset」もHTML5+CSS3をベースに開発されたテンプレートセットですが、こちらはよりプロフェッショナル向けに開発されたものとなっています。 下記にその特徴を。 HTML5 Boilerplateの主な特長 クロスブラウザ対応（IE6も） HTML5対応 キャッシュの最適化と圧縮でGrade-Aのパフォーマンス モバイルブラウザへの最適化 クロスブラウザ対応のためにIEでは特定のclassを用意 プリント用のスタイルシート、パフォーマンスの最適化 HTML5でより早いページロードにする「.htac
[JS]フォームの入力欄にテキストを表示するスクリプト -Textbox Hinter
設置も簡単、カスタマイズも容易、フォームのテキストボックスとテキストエリアにテキストを表示するスクリプトを紹介します。 表示するテキストにはclassを付与できます（Demo 3参照）。 jQuery Textbox Hinter Plugin デモページ 主な特長 シンプルで軽量 スクリプトの知識は不要 表示するテキストにclassを付与できる textareaにもテキスト表示が可 クロスブラウザ対応 カスタマイズが簡単 デモと実装方法 実装は簡単で、フォームの各パーツに任意のclassを与え、テキストはJavaScriptに記述します。
[JS]超軽量・超高性能のコンテンツスライダーのスクリプト -Sudo Slider
クロスブラウザ対応、各パネルのブックマークやスクリプトのオフ時も配慮されたアクセシブルで超軽量・超高性能のコンテンツスライダーのスクリプトを紹介します。 Sudo Slider jQuery Plugin デモページ Sudo Sliderの主な特長 リスト要素で簡単にスライダーを実装。 AJAXで画像やHTMLをロード。 スクリプトのオフ時でもコンテンツが可能。 マルチプルなスライダーにも対応。 標準的なスライドからフェードまで多彩な表示を用意。 各パネルへの直接リンクが可能（ブックマーク可）、ブラウザの「前へ」「次へ」をサポート。 パネル内は画像、テキスト、動画、フォームなどさまざまなHTMLコンテンツを表示可能。 自動再生でスライドショーも可能。 ループ再生も可能。 セットアップは簡単で、カスタマイズも簡単。 IE6+, Fx, Chrome, Safari, Opなど主要ブラウザの
様々なUIのギャラリーが簡単に実装できるギャラリーフレーム「jbgallery 2.0 BETA」
WEBで写真をみせるというのは個人的なWEBから商業用のWEBまで幅広く目的としてありますが、今回紹介するのは様々なユーザーインターフェースのギャラリーが簡単に設置できるフレームワーク「jbgallery 2.0 BETA」です。 こちらは jQueryを利用して制作されており、単純な静的なものではなく、フェードインアウト、ローディングバーなどなど様々処理が制御できるようになっています。いくつかユーザーインターフェイスがオプションとして予め設定されていますのでいくつか紹介したいと思います。 詳しくは以下 ■numbers 横にサムネイルをずらりと並べるインターフェイスのギャラリー。 ■Callback for developers 進む戻るボタンなど様々な操作系をインターフェイスに表示させたインターフェイス。 上記のほかにも様々なオプションが設定されています。対応しているブラウザは以下のと
[JS]jQueryのプラグイン33+1選 -2010年3・4月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 YoxView 画像をスタイリッシュに拡大表示するスライドショー。 Roundabout Shapes 複数のオブジェクトをさまざま
Loading Dots JQuery Plugin | CSS-Tricks
DigitalOcean provides cloud products for every stage of your journey. Get started with $200 in free credit! A little while ago reader James Dimick emailed me some jQuery code he was working on to make a “loading dots” thing. You know, the classic design pattern where the screen (or some area) shows “Loading…” with the dots growing out. Loading Loading. Loading.. Loading… Loading…. I took a look at
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]グリッドなど四つのアルゴリズムでレイアウトできるスクリプト -jLayout
IDEA * IDEA
わずか8KBのjQuery用カレンダープラグイン「CalendarPicker」 | Web活メモ帳
