mippe | Shared With: Everyone - Sep 05 2007 | Javascript, news, css, web design
2007年8月にヒットしたエントリやサイトの、WEBデザイナー向けまとめ。
一ヶ月もたてばブックマークも結構色々ノイズが入ってくるもので、ここで整理の意味も込めてまとめておきます。SEO系や、モバイル系は別エントリに分離しないと、前回重くてアクセスが集中して見れませんと言われる方がいましたので、分離して書こうかと思っています。
Quoted: 売れない、人が来ないホームページにならない為の、インターネットの知識とブログネタ
- mippe | Shared With: Everyone - 5 days ago | javascript, Form, onkeyup
JavaScriptを使うと、テキストエリアなどの文字列入力フォーム上で、ユーザが入力した文字数をカウントすることが簡単にできます。それを活用すると、テキストエディタのように、「現在の入力文字数」をリアルタイムに表示することもできます。
例えば、以下のように。 - mippe | Shared With: Everyone - 10 days ago | javascript, css, flash
Quoted: 売れない、人が来ないホームページにならない為の、インターネットの知識とブログネタ
ShareViewed: 14 Times - mippe | Shared With: Everyone - 10 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/ShareViewed: 6 Times - mippe | Shared With: Everyone - 10 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が主流になった場合に簡単に削除できる方法なので、是非試してみてください。
ShareViewed: 21 Times - mippe | Shared With: Everyone - 28 days ago | 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 ...
ShareViewed: 2 Times - mippe | Shared With: Everyone - 28 days ago | Javascript
BoxOverはマウスオーバー時にボックスダイアログを表示するためのJavaScriptライブラリ。
表示されるダイアログボックスはこのような感じです。かなり細かくパラメータ設定ができるようで、どんな表示ができるかはこちらのサンプルページを参考に。
Tooltips, Popups, Javascript, Dhtml - BoxOver
結構意外な箇所でダイアログボックスが表示されて、なかなか楽しいです。ShareViewed: 13 Times - mippe | Shared With: Everyone - 29 days ago | 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.comShareViewed: 7 Times - mippe | Shared With: Everyone - 29 days ago | 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
その他ShareViewed: 12 Times - mippe | Shared With: Everyone - 29 days ago | Javascript, GreyBox
GreyBoxは画像の表示だけでなく他のページも読み込んで同一ページ上に表示させることができます。GreyBoxでは他のページはインラインフレーム内に表示されます。
他のページを表示する場合には<a>タグのrel属性にrel="gb_page[横幅, 縦幅]"を指定します。横幅と縦幅はページ内に表示されるウィンドウの幅をピクセル値で指定します。サンプル07では以下のように指定しています。
ShareViewed: 8 Times - mippe | Shared With: Everyone - 29 days ago | Javascript, Ajax
Quoted: How to upload files using AJAX, without reloading the page? Read about the cross browser method to upload files using AJAX in only 1Kb of code.
ShareViewed: 13 Times
Send mippe a friend request or a personal message instead.