[JS]不可視のDOMをコントロールしてUIを拡張するスクリプト -Shadow UI
tooltip ツールチップ Shadow UIの使い方 Step 1: 外部ファイル まずは、ベースとしてhead内にjquery.jsと当スクリプトを外部ファイルとして記述します。 <script src="/shadow-ui/assets/js/jquery.js"></script> <script src="/shadow-ui/js/shadow.js"></script> スタイルシートはベースとなるファイルとそれぞれ用のファイルが用意されています。 <link rel="stylesheet" href="/shadow-ui/assets/css/main.css"> <link rel="stylesheet" href="/shadow-ui/css/ui.css"> <link rel="stylesheet" href="/shadow-ui/css/ui-dr
フォームの入力欄にテキストを表示する際、ユーザーが使いやすくよりセマンティックに実装する方法
フォームの入力欄にテキストを表示するテクニックとして、HTML5のplaceholder属性やtitle属性にいれたテキストをスクリプトで置き換える方法などがあります。 しかし、placeholderはplaceholderなので、ラベルの代替として利用するのはW3Cでも推奨していません。 参考：The placeholder attribute -W3C フォームに余分なHTMLを追加せず、ラベルを利用してシンプルに解決する方法を紹介します。 入力時はラベルがツールチップで 実装 実装のポイント label要素内のテキストをラベルとして利用する。 初期状態でラベルのテキストを表示する。 入力時にもラベルがユーザーの目に見えるようにする。 ラベルの配置はフォームとページのレイアウトで行われるようにする。 スクリプトが利用可能でない時でも、ラベルを利用できるようにする。 これらのポイントを踏
YouTube動画にテキストを表示させる方法
ご存知の方も多いと思いますが、YouTube動画にテキストを表示させる方法を紹介します。 練習で作った動画として、Movable Typeプラグインのデモ動画をおいておきますのでよければご覧ください。タイトルやふきだしなどが表示されます。 １．アノテーション YouTubeでは自分のアップロードした動画に、タイトルやコメント、ふきだしなどのテキストや動画へのリンクを表示させることができます。 この機能は「アノテーション（annotation：あるデータに関連する情報（メタデータ）を注釈として付与すること）」と呼ばれるものです。 アノテーションでは次の5種類のオブジェクトを設定できます。 吹き出し メモ タイトル YouTube MUSIC WEEK ラベル ２．アノテーションの設定（吹き出し） ここではアノテーションを設定する簡単な例として、吹き出しを追加してみます。 まず、動画の管理画面
[CSS]動きがカワイイ！扇形にふわりと広がるツールチップ -Circular Tooltip
Creating a Radial Menu in CSS マウスのホバーで、「扇形のツールチップ」がアニメーションで表示されます。 続いて、二つ目のデモ。上記にインスパイアされたもので、動きが絶妙ですごいです！ Circular Tooltip こちらはクリックで、「扇形に広がるツールチップ」がアニメーションで表示されます。 実装はデモページにも掲載されていますが、下記のようになっています。 HTML !-- content to be placed inside <body>…</body> --> <a class='button ctrl' href='#' tabindex='1'>★</a> <ul class='tip ctrl'> <li class='slice'><a href='#'>✦</a></li> <li class='slice'><a href='#'>✿
jQuery PowerTip
PowerTip is a jQuery tooltip plugin with a smooth user experience that features a very flexible design which is easy to customize, gives you a variety of different ways to create tooltips, supports adding complex data to tooltips, and has a robust API for developers seeking greater integration with their web applications. Download v1.3.2 Zip file with examples, CSS, and script. For older versions,
画像の任意の箇所にツールチップを配置出来るjQueryプラグイン・iPicture
画像内の任意の箇所に自由にホバーで テキストを表示するツールチップを 配置出来るjQueryプラグイン・iPicture のご紹介。この手のライブラリは、 実務でかなり有効的に使えますので 覚えて置いて損は無いのでは。 画像上にツールチップを配置出来るライブラリです。ECサイトや不動産、ホテル、アミューズメント施設などなど用途は沢山ありそうです。 こういうやつ。画像の上にオブジェクトを配置してマウスホバーで情報が見られる。 ECサイトなんかでは、こうやって生活してる写真にしてあげることでユーザーはプロダクトを使用してるイメージをしやすくなりますので、訴求力アップに貢献できます。 コード<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></s
サイト利用のインタラクティブなチュートリアルをリストで定義するだけで超簡単に実現できる「jQuery Joyride」:phpspot開発日誌
サイト利用のインタラクティブなチュートリアルをリストで定義するだけで超簡単に実現できる「jQuery Joyride」 2011年10月14日- jQuery Joyride Feature Tour Plugin - ZURB Playground - ZURB.com サイト利用のインタラクティブなチュートリアルをリストで定義するだけで超簡単に実現できる「jQuery Joyride」 サイトを最初に訪れた人に、どういうふうに操作するかという部分をサイトをそのまま使って説明することができます。 使い方が超簡単で、<ol>リストにチュートリアルをリスト形式で列挙していき初期化します。 <li data-id="****">のdata-idの部分にポップアップを表示させたい要素のIDを指定します するとリストの順にポップアップがどんどん出て、「Next」ボタンを押せば次の要素にアニメーショ
CSSのみでマウスオーバー時にリンク先のURLをツールチップで表示させる
cssの小技的な内容です。さほど使う機会は無さそうなんですけど、JavaScriptを使うほどでも無いようなものなのでcssだけでやって見た、みたいな記事。リンクにマウスを乗せるとそのリンク先のURLをツールチップとして表示させます。 対応ブラウザはモダンブラウザとIE8以上です。:afterを使うのでIE7以下は対応できません。 cssでリンク先のURLを表示するまずはcssのみでリンク先のURLを表示させます。 マークアップは以下で固定。 <a href="http://kachibito.net/">かちびと.net</a>HTMLはこのままで、cssのみでリンク先のURLをマウスオーバーによるツールチップで表示させます。 URLを表示させるまずはURLを表示させます。 a[href]:after { content: attr(href); }これはよく印刷用のcssで用いられる手
要素にヒント表示したい際に使えそうなポップアップ実装jQueryプラグイン「grumble.js」:phpspot開発日誌
要素にヒント表示したい際に使えそうなポップアップ実装jQueryプラグイン「grumble.js」 2011年07月26日- Grumble.js 要素にヒント表示したい際に使えそうなポップアップ実装jQueryプラグイン「grumble.js」 $('h1').grumble(options) と唱えると、h1要素のとなりに次のようなバブルを表示させることが出来ます。 要素指定なので簡単です。optionsにはアングルや距離等も指定できます。 一定秒数超えたら消すということも出来ます。オレンジ色だけじゃなくて、別の色にすることもできるみたい なんとも注目してしまいそうなポップアップですが、注目させたいポイントに置くとCVRアップなどに貢献できるのかも。 関連エントリ カッコよく動くポップアップでより分かりやすくメッセージを表示出来る「JQUERY BUBBLE POPUP」 リンクにカー
ページメニューにツールチップを表示して分かりやすくするjQueryチュートリアル:phpspot開発日誌
Building an Elegant Tooltip Dropdown Menu Powered by jQuery - Web Design Blog ? DesignM.ag ページメニューにツールチップを表示して分かりやすくするjQueryチュートリアル。 ページヘッダーのメニューなんかに、このブログでは「ホーム」とか「このブログについて」といったものが配置されていますが、たまに、それが何を意味するか補足したほうがよい場合があります。そんな場合にカーソルを合わせるとツールチップで補足説明を表示できるようにするチュートリアルです。 メニューはスペースの関係上、シンプルに短くしたいですがそれが逆に短すぎて何を意味するのかわからないなんていうことも多かったりしますね。 そんな場合にツールチップで次のように表示されると飛び先が何を意味するのかよりクリアに示すことができてユーザフレンドリーで
ツールチップも出せるニュースティッカー用jQueryプラグイン・Dynamic News
なかなかユニークだったのでメモ的に。 進める、戻る機能の付いたニューステ ィッカーを実装するjQueryプラグインで、 ツールチップもついでに出してくれます。 省スペースで情報を凝縮できるのは なかなかいいですね。 RSSはGoogleAPIを使用しているようです。 ティッカーにマウスオーバーするとnext、prevのボタンと同時にツールチップを表示します。 進むボタンを押すとニューステキストがスライドします。カルーセルをかけ合わせた感じですね。 使い方GoogleAPIキーを使ってRSSを取得し、jQuery本体とプラグインを読み込みます。 <script type="text/javascript" src="https://www.google.com/jsapi?key=*****"></script> <script src="jquery-1.4.4.min.js" type=
Home - Konstantin Kovshenin
I’m Konstantin Kovshenin, a WordPress core contributor, ex-Automattician, public speaker and consultant, enjoying life in Moscow. I blog about tech, WordPress and DevOps. I do code review, training and consulting on WordPress performance, scaling and security. Schedule a call if you’re interested. Subscribe to my newsletter and follow me on Twitter. Sail is a great and much more affordable alterna
飛ぶ前にbit.lyやTinyURL等の短縮URLの飛び先を調べられるjQueryプラグイン「longshore」:phpspot開発日誌
飛ぶ前にbit.lyやTinyURL等の短縮URLの飛び先を調べられるjQueryプラグイン「longshore」 2010年08月04日- longSHORE - The missing URL service 飛ぶ前にbit.lyやTinyURL等の短縮URLの飛び先を調べられるjQueryプラグイン「longshore」。 bit.ly なんかで短縮されたURLの上にカーソルを合わせると次のようにポップアップが表示され、リンク先に関する情報が分かります。 なんと、驚くことに５４５のURL短縮サービスに対応しています。 →対応サービスはこちら 実装は、単にプラグインを読み込むだけで超簡単ですね。 英語部分は直接日本語化しちゃえばすぐ使えそうです。 関連エントリ PHP25行で書くURL短縮プログラム PHPからbit.lyやtr.im等のURL短縮サービスをまとめて扱える「PEAR::
[CSS]CSS3対応・非対応ブラウザで動作するアイコン付きの素敵なツールチップ
CSS3対応ブラウザではより美しく、非対応ブラウザでもそれなりに美しいアイコン付きのツールチップを紹介します。
泳げなくてもできる？スキンダイビング
泳げなくてもできる？スキンダイビング 誰でも人魚のように美しく、海中を泳ぎ回ってその様子も撮影できるスキンダイビング、沖縄の美しい海でいま導入されているサービスとなっています。そんなスキンダイビングの魅力やどんな人に向いているのか、そしてその費用についてご紹介いたします。 普通のダイビングとはどう違うの？ 海中を自由に泳ぎ、魚やサンゴ礁を楽しむダイビング、沖縄のように澄み切ったアオイ海の中の光景は非常に幻想的で、海中はまるで別世界のようにみえます。 そんな海中の様子に魅せられている人は非常に多く、あまりアクティブな趣味が好きでは無かった人も海中の美しい光景がくせになり、ダイビングを趣味としている人も多いです。 またダイビングにもライセンスがあり、その専用のスクールに通う人も、ダイビングスクールの運営はもちろんですが、趣味であるダイビングをより極めたくて取得している人もいる、そんな広い人気を
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
IDEA * IDEA