mippe | Shared With: Everyone - 11 days ago | javascript
Quoted: 株式会社ディノ社員による技術メモ
- mippe | Shared With: Everyone - 21 days ago | javascript, Form, onkeyup
JavaScriptを使うと、テキストエリアなどの文字列入力フォーム上で、ユーザが入力した文字数をカウントすることが簡単にできます。それを活用すると、テキストエディタのように、「現在の入力文字数」をリアルタイムに表示することもできます。
例えば、以下のように。 - mippe | Shared With: Everyone - 27 days ago | javascript, css, flash
Quoted: 売れない、人が来ないホームページにならない為の、インターネットの知識とブログネタ
- mippe | Shared With: Everyone - 27 days ago | 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/ - mippe | Shared With: Everyone - 27 days ago | 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が主流になった場合に簡単に削除できる方法なので、是非試してみてください。
- 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 - Jun 11 2008 | Javascript
BoxOverはマウスオーバー時にボックスダイアログを表示するためのJavaScriptライブラリ。
表示されるダイアログボックスはこのような感じです。かなり細かくパラメータ設定ができるようで、どんな表示ができるかはこちらのサンプルページを参考に。
Tooltips, Popups, Javascript, Dhtml - BoxOver
結構意外な箇所でダイアログボックスが表示されて、なかなか楽しいです。 - mippe | Shared With: Everyone - Jun 10 2008 | Javascript, Ajax, DHTML
Menu scripts
Window scripts
Calendar scripts
Gallery scripts
Form widgets
XP widgets
Table widgets
Drag and drop
Folder trees
Tooltips
AJAX scripts
Misc scripts
Javascript games
Chess widgets
DHTML Suite
Tutorials
Tips and Tricks
Color schemer
Color schemer II
Regex tool
CSS lookup
Hosting Reviews
Forum
Terms of use
Link to us
RSS feed
Advertise
Donate
Top sponsors
Metis.net
myeasyinvoice.com
echoPANEL.com
More
Resources
Experts Round Table
cbolson.com - Demos
HotScripts
ScriptSearch.com
Vision.To Design
Other resources
Top referers
Google
noupe.com
miniajax.com
hotscripts.com
smashingmagazine.com - mippe | Shared With: Everyone - Jun 10 2008 | Javascript, Ajax, AJS.js
画像JSライブラリ（イメージギャラリー／画像ポップアウト）
Couloir
galleria - Google Code 〔jQuery.js使用〕
Images Gallery using jQuery, Interface & Reflections 〔jQuery使用〕
GreyBox
jCarousel 〔jQuery.js使用〕
Lightbox 〔prototype.js／scriptaculous.js使用〕
Lightview 〔prototype.js／scriptaculous.js使用〕
LightWindow 〔Lightboxベース、prototype.js使用〕
Lytebox 〔Lightboxベース〕
Photo Slider 〔jQuery.js使用〕
ProtoFlow 〔prototype.js／scriptaculous.js／reflection.js使用〕
Slideshow 〔Mootools.js使用〕
SmoothGallery 〔Mootools.js使用〕
ThickBox 〔jQuery.js使用〕
TripTracker
その他 - mippe | Shared With: Everyone - Jun 10 2008 | Javascript, GreyBox
GreyBoxは画像の表示だけでなく他のページも読み込んで同一ページ上に表示させることができます。GreyBoxでは他のページはインラインフレーム内に表示されます。
他のページを表示する場合には<a>タグのrel属性にrel="gb_page[横幅, 縦幅]"を指定します。横幅と縦幅はページ内に表示されるウィンドウの幅をピクセル値で指定します。サンプル07では以下のように指定しています。
Related Content from Around Faves
javascript
-
1 FaverViewed: 2 TimesQuoted: Adobe revives a neglected product, and what Dreamweaver CS4 offers is really game changing. It is making me as a web developer, excited over Dreamweaver again.
- lmanolov - Apr 09 20074 FaversViewed: 51 Times
- kuri - Mar 13 200715 FaversViewed: 36 Times
css
-
1 FaverViewed: 17 TimesQuoted: Tooltips provide another method of website branding. Why throw a vanilla tooltip to the user when you can brand your website? MooTools 1.2 provides a Tips plugin that allows for easy-to-customize tooltips. Let me show you how to create a sweet, branded tooltip
- mippe - Jun 12 20081 FaverViewed: 11 Times
- Claire16 - Aug 23 200610 FaversViewed: 52 Times
