2009年3月5日木曜日
文字数カウンターの設置方法 javascript
<div>
<p>文字数カウンター</p>
<script type="text/javascript">
<!--
function countLength(str){
var bc = 0;
for(var i=0;i<str.length;i++){
if(str.charCodeAt(i)<0x100){ bc+=1; }else{ bc+=2; }
}
obj = document.getElementById('count-disp');
obj.innerHTML = '全角'+Math.ceil(bc/2);
}
// -->
</script>
<div><textarea id="text-counter" cols="40" rows="3" onkeyup="countLength(value);"></textarea></div>
<div id="count-disp"></div>
</div>
----------
cols="40" は横幅
rows="3" は行数
なので、適当にカスタムして使って下さい。
<p>文字数カウンター</p>
<script type="text/javascript">
<!--
function countLength(str){
var bc = 0;
for(var i=0;i<str.length;i++){
if(str.charCodeAt(i)<0x100){ bc+=1; }else{ bc+=2; }
}
obj = document.getElementById('count-disp');
obj.innerHTML = '全角'+Math.ceil(bc/2);
}
// -->
</script>
<div><textarea id="text-counter" cols="40" rows="3" onkeyup="countLength(value);"></textarea></div>
<div id="count-disp"></div>
</div>
----------
cols="40" は横幅
rows="3" は行数
なので、適当にカスタムして使って下さい。
marqueeをXHTMLで実現させる方法
marqueeタグは、最近PCサイトではあまり見なくなったが、表示範囲の狭い携帯サイトでは良くつかわれている。
HTMLで携帯サイトを作る場合、
<marquee bgcolor="#FF0000"><font size="2" color="#FFFFFF">こんにちは</font></marquee>
こんな風にすると、背景赤色に文字白色で「こんにちは」の文字が流れる。
けれど、XHTMLで携帯サイトを作る場合は、これだとうまく表示してくれない。
この場合は、divのstyleで指定する。
<div style="display:-wap-marquee;background-color:#FF0000;font-size:xx-small;color:#FFFFFF;">こんにちは</div>
これで、XHTMLでmarqueeが使えました。
引用元：モバイルサイトの作り方
HTMLで携帯サイトを作る場合、
<marquee bgcolor="#FF0000"><font size="2" color="#FFFFFF">こんにちは</font></marquee>
こんな風にすると、背景赤色に文字白色で「こんにちは」の文字が流れる。
けれど、XHTMLで携帯サイトを作る場合は、これだとうまく表示してくれない。
この場合は、divのstyleで指定する。
<div style="display:-wap-marquee;background-color:#FF0000;font-size:xx-small;color:#FFFFFF;">こんにちは</div>
これで、XHTMLでmarqueeが使えました。
引用元：モバイルサイトの作り方
hover img CSS
ロールオーバー画像をわざわざ作らずに、画像にマウスをあてたとき、白っぽくマウスオーバーするcss小技のメモ。
■ソース
<a href="#" class="imghover"><img src="image.jpg" /></a>
■cssソース
a.imghover:hover img {
filter: alpha(opacity=80);
opacity: 0.8;
}
80や0.8は、50や0.5などに変えると、濃さが変わります。試してみて下さい。
filterはIE向け。opacityはFirefox等向けに書かれています。
■ソース
<a href="#" class="imghover"><img src="image.jpg" /></a>
■cssソース
a.imghover:hover img {
filter: alpha(opacity=80);
opacity: 0.8;
}
80や0.8は、50や0.5などに変えると、濃さが変わります。試してみて下さい。
filterはIE向け。opacityはFirefox等向けに書かれています。
lightbox Ajax
lightbox 2.0 公式ページ
lightbox 2.0は、ページ内の画像を拡大する人気のあるツールです。画像をクリックすると、ページ遷移無しにページ内のコンテンツを背景にして画像を拡大してくれます。
lightbox 2.0は、ページ内の画像を拡大する人気のあるツールです。画像をクリックすると、ページ遷移無しにページ内のコンテンツを背景にして画像を拡大してくれます。
lightbox 2.0の公式サイトのダウンロードページからLightboxのzipファイルをダウンロードして解凍します。本記事執筆時点では、Lightbox2.04を配布してますが、解凍されたフォルダーには、index.html(サンプルファイル)、jsフォルダ、imagesフォルダ、cssフォルダが存在します。
サンプルのindex.htmlを閲覧していただくと、インストールの仕方が分かりますが、ここでも簡単に解説したいと思います。
HTMLの編集
htmlのheadの領域に以下の３行を入れます（表示の都合で４行になっていますがご了承願います）。ligthbox2.0は、prototype.jsとscript.aculo.usをベースに作られているので、JavaScriptを読み込む順番が必ず以下の順番になるようにします。各JavaScriptライブラリーファイルは、jsフォルダーの中に入っています。
<script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js? load=effects,builder"></script> <script type="text/javascript" src="js/lightbox.js"></script>
CSSファイルの読み込み
lightbox.cssを読み込むように、htmlのheadの領域に以下を記入します。
<link rel=”stylesheet” href=”css/lightbox.css” type=”text/css” media=”screen” />
HTML bodyへ記入
拡大イメージを設定する所はたったの１行です。以下の例のように、rel=”lightbox”と書くだけでOKです。あとは、”拡大したい画像のファイル名”と”画像のタイトル”、”画像ファイルのイメージ”の所に必要な情報を記入すれば動きます。
<a href=”images/拡大したい画像のファイル名” rel=”lightbox” title=”画像のタイトル”>画像ファイルのイメージ（imgタグを使う）</a>
複数の画像を扱う場合は、rel=”lightbox[group1]”のようにカギ括弧の中にグループ名を入れると同じグループとして扱われ、画像を表示した時に番号が自動で付与されます。
document type does not allow element "STYLE" here
<style type="text/css">
<!--
-->
</style>
を
<head>～</head>
内に入れて解決。
<!--
-->
</style>
を
<head>～</head>
内に入れて解決。
ID "???" already defined
id は identifier の略だから, 同じ値は (すべてのタグを通じて) 1つのページで 1回しか使えません。
なお, id 属性はほとんど全てのタグで指定することができ, かつ <a href="..."> のリンク先として使えます。
<div id="...">
は１回しか使えないけど
<div class="...">
は1ページの中で何回でも使える。
同じidを何回も使いまわしているためにエラーが出ている。。。
ためになるねぇ。
なお, id 属性はほとんど全てのタグで指定することができ, かつ <a href="..."> のリンク先として使えます。
<div id="...">
は１回しか使えないけど
<div class="...">
は1ページの中で何回でも使える。
同じidを何回も使いまわしているためにエラーが出ている。。。
ためになるねぇ。
index.htmlを最上位に表示するための対策
知り合いの会社のホームページを作ったのですが、会社名で検索するとindex.htmlよりprofile.htmlが上位に表示されてしまった。。。
そこで、対策としてトップへ帰るボタンのURLを全て、「http://-----/」と統一してみた。
とあるサイトによると、
./index.htmlとするとロボットは別のページと判断するらしい。
つまり「http://-----/」と「http://-----/index.html」とは別のページとして認識するらしい。
他のページからトップに移動して表示されるＵＲＬが「http://---/index.html」となる場合は、ほとんど設定ミスらしいです。
ためになるね～。
そこで、対策としてトップへ帰るボタンのURLを全て、「http://-----/」と統一してみた。
とあるサイトによると、
./index.htmlとするとロボットは別のページと判断するらしい。
つまり「http://-----/」と「http://-----/index.html」とは別のページとして認識するらしい。
他のページからトップに移動して表示されるＵＲＬが「http://---/index.html」となる場合は、ほとんど設定ミスらしいです。
ためになるね～。
bloggerで独自ドメイン kagoya
登録:
投稿 (Atom)