mippe | Shared With: Everyone - Jun 11 2008 | Javascript, Tooltips
Best uses for BoxOver This shows some of the situations where BoxOver can be really nifty. It also gives you fellas out there an example ...
- mippe | Shared With: Everyone - 4 days ago | CSS, javascript
コンテンツの内部リンクを利用すると、ページが長い場合など見出しを設けたりして、ユーザーが簡単に目的の文章にたどり着くことが出来る。しかし、アンカータグをクリックした場合、瞬間的に移動が行われるためページ遷移した場合との差別化が難しい。そこで利用される手法がスムーススクロール。
df Smooth Scrollの優れた点は、すでにコンテンツで利用されているアンカータグでもスムーススクロールを実装できる点。HTMLヘッダ部分で下記のようにJavaScriptライブラリを呼び出しておくだけで、既存のアンカータグがスムーススクロール用のリンクとして動作するようになる。
<script type="text/javascript" src="smooth.pack.js"></script>
アンカータグの記述
アンカータグをHTMLで記述する際<a name= として記述する。しかし、XHTML、XHTML Basicではname属性が利用できない。id属性ではdf Smooth Scrollが動作しないので、注意する必要がある。<a name="middle" href="#top">GO TO TOP</a>
アンカータグに対してスムーススクロールを実装することが出来るため、非常に便利。しかし、前述したname属性での利用に限定される点や、他のページから遷移してくる場合はスムーススクロールされない。簡単に導入できるので、試しに導入してみてはいかがだろうか？最新記事をRSSでお知らせします
ITニュース
df Smooth Scroll - アンカータグを利用してスムーススクロールを実装する
Yahoo!のレンタルサーバーが月額980円で使える！関連する記事
マウス操作で写真にズームするギャラリーswf（PostcardViewer）
CSSとCanvasで描写するWeb用のUIフレームワーク（Mocha UI）
透明感のあるデザインをJavaScriptで実装する（glassbox.js）
MP4、FLVなど再生するFlashプレーヤーswf （JW FLV MEDIA PLAYER）
FlashやFLV、MediaPlayerに対応したスライドショーJavaScript（shadowbox）
デザインが魅力的なスライドショーJavaScript (Lightview)
楽にフォーム入力チェックを実装するJavaScript （JSValidate）
CSSデザインレイアウトをオンラインで簡単に作成する （YAML）
ユーザーが再配置可能なWedgetを実装するJavaScript （Prototype Portal Class）
フォームボタンCSSデザインするテクニック （Rediscovering Button Element）
半透明の角まるツールチップを表示するJavaScript （CoolTips）
JavaScriptでプログレスバーを簡単に実装する （jsProgressBarHandler）
JavaScriptコード圧縮して盗用から守る （packer）
iTuneのようにカバーアートを表示するFlash （iTunes Coverflow）
画像をサムネイルのサイズで表示するJavaScript （jQuery Thumbs）
Ajaxでサクサク動くWebファイルマネージャ （Relay）
アンカータグを利用してスムーススクロールを実装する （df Smooth Scroll）
MacでもFlashでホイール操作が出来るようにする （SWFMacMouseWheel）
HTMLなどタグ編集を楽にするエディタ機能JavaScript （jTagEditor）
使いやすいYUIライブラリのWYSIWYGエディタ （Rich Text Editor）ShareViewed: 12 Times 
mippe | Shared With: Everyone - 12 days ago | Information Architecture, Interface, jQuery, javascript
jQueryでかっこいいUIを実装したい。
そんなときにおすすめなのが、『10 useful jQuery plugins』。jQueryの便利なプラグイン10選だ。
以下にご紹介。
・jQuery UI
Webアプリをデスクトップアプリのように動作させる。タブメニューやスプリットペイン、ドラッグできるフォトマネジャーなど・Mark-It-Up
テキストエリアをマークアップエディタに変えてくれる・jQuery cookie plugin
クッキーを簡単にセット、削除できる・lightbox for jQuery
jQuery用のlightbox・jQuery Corner Plugin
jQueryで角丸を作成・jTip
クールなツールチッププラグイン・LavaLamp
CSSメニューにスムーズなスライドエフェクトを追加・Superfish
jQueryのアニメーションを使ったアクセシビリティの高いメニュー・jQuery easing plugin
jQueryによるアニメーションのイージング・jCarousel
jQueryによるcarousel（スライドする画像ギャラリー）それぞれデモがついていてわかりやすい。
デモは↓から。
» 10 useful jQuery plugins
jQueryの便利なプラグイン、チェックしてぜひ使ってみてはいかがだろうか
ShareViewed: 7 Times- mippe | Shared With: Everyone - 16 days ago | javascript, jQuery
Quoted: 前回は、『Scriptを使わないCSSエフェクト、Tipsいろいろ』をご紹介いたしました。 今回は、逆にjQueryを使ったサンプル集です。なるべく簡単に使えそうな、プラグインを中心にまとめてみました。
ShareViewed: 7 Times - mippe | Shared With: Everyone - 16 days ago | javascript
Quoted: 日々覚えたことの記録。
- mippe | Shared With: Everyone - Jul 14 2008 | javascript
Quoted: 株式会社ディノ社員による技術メモ
- mippe | Shared With: Everyone - Jul 04 2008 | javascript, Form, onkeyup
JavaScriptを使うと、テキストエリアなどの文字列入力フォーム上で、ユーザが入力した文字数をカウントすることが簡単にできます。それを活用すると、テキストエディタのように、「現在の入力文字数」をリアルタイムに表示することもできます。
例えば、以下のように。ShareViewed: 29 Times - mippe | Shared With: Everyone - Jun 28 2008 | javascript, css, flash
Quoted: 売れない、人が来ないホームページにならない為の、インターネットの知識とブログネタ
ShareViewed: 23 Times - mippe | Shared With: Everyone - Jun 28 2008 | javascript, css, design
動作環境は以下のとおり
・Internet Explorer 6 & 7
・Firefox 2.0
・Safari 2.0
・Opera 9.0導入は比較的簡単です。
ダウンロードしたファイルのうち、index.htmlを開いてみるとわかると思います。<link rel="stylesheet" href="bubbles.css" type="text/css" media="screen" charset="utf-8" />
<script type="text/JavaScript" src="rounded_corners.inc.js"></script>
<script type="text/JavaScript">
window.onload = function() {
settings = {
tl: { radius: 10 },
tr: { radius: 10 },
bl: { radius: 10 },
br: { radius: 10 },
antiAlias: true,
autoPad: true
}
var myBoxObject = new curvyCorners(settings, "rounded");
myBoxObject.applyCornersToAll();
}
</script>呼び出しはこれ。
これを<head>～</head>の中にいれる。後は表示したい部分で呼び出せばOK。
灰色背景の場合
<div class="bubble">
<blockquote>
<p>Works great for blog comments!</p>
</blockquote>
<cite><strong>John Smith</strong> on 1st January 2007 at 3:55pm</cite>
</div>バック灰色、淵が白の場合
<div class="bubble">
<div class="rounded">
<blockquote>
<p>Customize colors and styling to your taste from within the CSS, then simply edit the pointer tip image. Works on any background to fit with your design.</p>
</blockquote>
</div>
<cite class="rounded"><strong>Rounded Bubble</strong> using <a href="http://www.curvycorners.net/">curvy corners</a></cite>
</div>バック黒、淵白の場合
<div id="pimped" class="bubble">
<div class="rounded">
<blockquote>
<p>Expands to fit any layout and scales nicely with big and small font sizes.</p>
</blockquote>
</div>
<cite class="rounded"><strong>Dark Bubble</strong></cite>
</div>お試しあれ。
http://www.willmayo.com/2007/02/10/css-speech-bubbles/ShareViewed: 30 Times - mippe | Shared With: Everyone - Jun 28 2008 | CSS, Javascript, IE6, behavior
InternetExplorer 6.xでmin-width、max-heightをCSSプロパティで指定しても適用されません。過去に紹介したCSSとJavaScriptを利用して対応する方法を、今回はさらに使いやすい方法に変更してみます。
スタイルシートのセレクタでBehaviorプロパティ指定するだけで有効になります。min-width等のプロパティを変更する必要はありません。Behavior（ビヘイビア）とは、JavaScript等によって構成されるHTC（HTML Component）を使用するIE独自の機能です。
CSSへBehaviorプロパティの追加
ieFixed HTCの最新版をダウンロードします。下記のコードのようにCSSへBehaviorプロパティの追加してください。また、ご利用の環境に合わせてURLパスは変更してください。<style type="text/css">
#sample{
behavior:url(iefixed.htc);
margin:0 auto;
min-width:400px;
max-width:760px;
}
</style>
min-heigh、max-heightも同様に利用することが出来ます。サイズ指定には必ずpx単位で指定してください。HTCファイル内のJavaScriptではstyle.setExpressionを利用して、widthプロパティにexpressionを設定しています。IE7が主流になった場合に簡単に削除できる方法なので、是非試してみてください。
ShareViewed: 26 Times
Send mippe a friend request or a personal message instead.