Home > Javascript

Javascript Archive

smart-crossfade.js(画像のみでロールオーバーさせる)

smart-crossfade.jsはCSS HappyLifeさんで紹介されているsmartRollover.jsにcrossfadeする部分を付け足していて、ロールオーバーにフワーッとした効果を持たせるものです。

注意点:ロールオーバー画像を変更しても、キャッシュのせいでなかなか画像が変わらないことがあります。
そんな時は画像のファイルパスの一番最後に?と数字(数字は何でもOK)
【例】 <img src=”img/XXX.jpg?001″ />とすると画像が変わります。

ダウンロードはこちらから。
http://www.8pusdesign.com/js/smart-crossfade.js

jQueryでキャッシュを使った文字サイズ可変

久々のJavascriptの記事です。
jQueryで、キャッシュを使って文字サイズを可変にできるjavascriptです。
たまにクライアントからの要望で「文字サイズ可変にしてー」というのがきますがちょっと面倒なんだよねぇ~。
けど、今回ご紹介するJavascriptはとても簡単です!

jQueryはキャッシュ機能に対応した1.3.2以降を使用してください。
ちなみに1.5.2でトライしてみたらイケました。(現在の最新版は1.6のようです)
ちょっと理解すれば設置、カスタマイズはごく簡単。

まずはこちらでダウンロード。
http://angstrey.com/index.php/projects/jquery-text-resizer-plugin/

<head>タグ内に以下を記述します。
※以下の例はcommon/js/フォルダに格納した場合で記述しています。

<script type="text/javascript" src="common/js/jquery.textresizer.js"></script>
<script type="text/javascript" src="common/js/jquery.cookie.js"></script>
<script>
$(document).ready(function() {
	$("ul.fsChange a").textresizer({
		target: "#content",
		sizes: [ "75%", "93%" ]
	});
});
</script>

targetは文字サイズのサイズ変更を適用するdivのid名を入れます。
sizesは小・中・大という順番でボタンを設置した場合、htmlで記述したときの上からの順番で記述します。

以下は、「中」と「大」のみの場合です。

<ul class="fsChange">
<li><a href="#">中</a></li>
<li><a href="#">大</a></li>
</ul>

僕の場合はいつも、div#contentにfont-size: 75%;を効かせているので、
div#contentに対して、「中」が75%で平常時と同じ値を入れて、「大」の時に93%を効かせています。

ulのクラス名の「fsChange」は変更可能です。
自分で任意のクラス名を設定したい場合は、
$(“ul.fsChange a”).textresizer({
と、
<ul class=”fsChange”>
の「fsChange」を同じものに変更してください。

このJSの便利なところは

  • 数値の設定が楽であること(※全てのHTML内に記述するのは面倒なので外部ファイル化した方がいいかもしれない)
  • ある程度の数、数値を増やせること。サイズ「極小」「小」「中」「大」「極大」とかできるっぽい。

CSSでfont-sizeを指定してるタグを把握したサイトであれば、すごく簡単なので是非使ってみてください。
※font-sizeをメチャクチャ&ゴチャゴチャに指定しているサイトでも、サイズ指定の単位をpxにすれば割と楽かもしれません。

【文字サイズ可変によるデザインの問題】
文字サイズを大きくした状態でもサイトの見栄えをチェックしていないと、
予期しない改行が入ったり、リストマークの位置がズレまくったりと、
ヒドイ状態になるかもしれないので、その辺りにこだわる方はきちんと文字サイズが大きい時も確認しておくことをおすすめします。

スクロールについてくるナビゲーション、スクロール追従ナビゲーション

スクロールに追従するナビゲーションを使うことになったので、
jqueryを使って動くモノに限定して調べてみました。

サイト名:CSS Tricks
記事名:「Scroll/Follow Sidebar, Multiple Techniques」
http://css-tricks.com/scrollfollow-sidebar/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed:

jqueryのバージョンは1.3.2で動作。
WindowsのIE6、Firefox3.5.10、Chromeで動作確認済み。
Firefoxではやや動作がカクカクです。

設置方法

jqueryをリンクして、その直後に以下のソースコードを挿入し、
ナビゲーション部分をdiv#sidebarでマークアップしただけで動きました。

<script type="text/javascript">
$(function() {
    var offset = $("#sidebar").offset();
    var topPadding = 15;
    $(window).scroll(function() {
        if ($(window).scrollTop() > offset.top) {
          $("#sidebar").stop().animate({
            marginTop: $(window).scrollTop() - offset.top + topPadding
          });
        } else {
          $("#sidebar").stop().animate({
            marginTop: 0
          });
        };
    });
});
</script>

iepngfix_tilebg.js

これまでiepngfix.jsというIE6で透過PNGを使えるようにするJavascriptがありましたが、
CSSで背景で使用すると間延びしてしまったりと色々問題が発生しました。
その問題のせいで、使いどころには制約がありましたがiepngfix_tilebg.jsならそれを解消してくれます。
設置もそんなに難しくありませんでした。

http://www.twinhelix.com/test/

上記サイトよりIEPNGFix v2.0 Alpha(ZIP形式)をダウンロード&解凍して、
iepngfix.htcとblank.gifとiepngfix_tilebg.jsを取り出し、各サイトに放り込みます。
初期状態だと、この3つのファイルは同じ階層の場合で設定されているので、
blank.gifやinpngfix.htcの階層を移動させた場合はそれぞれパスを変更しなければいけません

【 フォルダ構成 】
html
┣index.html
┣iepngfix.htc
┣img/blank.gif
┗js/iepngfix_tilebg.js

【 html側に記述する内容 】

<style type="text/css">img,div{behavior: url(iepngfix.htc);}</style>

imgタグでhtml内にpngを挿入する場合に必要。htmlと同階層にある場合で記述しています。

<script type="text/javascript" src="js/iepngfix_tilebg.js" charset="utf-8"></script>

bakground等でpngを挿入する場合に必要。jsフォルダに格納した場合で記述しています。

【 iepngfix.htc内の記述を変更 】
16行目のblank.gifのファイルパスを格納した場所に変更。

IEPNGFix.blankImg = 'img/blank.gif';

※blank.gifをimgフォルダに格納した場合で記述しています。

iepngfix.htcからblank.gifを、htmlファイルからiepngfix_tilebg.jsを、
このそれぞれを呼び出すパスを制作しているファイル構成に合わせて書き換えるだけで
htmlファイル内の全てのpngファイルがIE6でも透過されます。

【重要な問題】

  • 問題1:ページを開くのが重くなった。
  • 問題2:IE8以上でiepngfix_tilebg.jsが適用された場所が表示されなくなる。
  • 問題3:ページ印刷時にiepngfix_tilebg.jsが適用された場所が表示されなくなる。

問題1「ページを開くのが重くなった。」の解決方法

<style type="text/css">img,div{behavior: url(iepngfix.htc);}</style>

を、透過PNGを使用している場所のみに書き換える

例)
<style type="text/css">
div#mainImg img,
div#contentsBg{behavior: url(iepngfix.htc);}
</style>

問題2「IE8以上でiepngfix_tilebg.jsが適用された場所が表示されなくなる。」の解決方法

【 html側に記述する内容 】

<style type="text/css">img,div{behavior: url(iepngfix.htc);}</style>

を、以下のように書き換える。

<!--[if lte IE 6]>
<style type="text/css">img,div{behavior: url(iepngfix.htc);}</style>
<![endif]-->

意味としては、IE独自の条件分岐コメントでIE6以下のバージョンの時のみ適用するというもの。

問題3:「ページ印刷時にiepngfix_tilebg.jsが適用された場所が表示されなくなる。」の解決方法

print.cssを用意してhtmlファイルにリンク、そのCSSの中に以下を記述。

script {display:none;}

以上で、印刷時にも表示されます。

Zen Coding

Zen Codingという素晴らしい拡張機能(エクステンション)を偶然発見。
何で今まで知らなかったんだろうって思ってしまうくらいコーディングにおいてとても便利。
もっと情報のアンテナを広く保っとかないとなぁ~ということを痛感しました。
色々なエディターに対応してるのも凄い。

使い方は以下の通り

自分はDreamweaverCS3を使っているので、
http://code.google.com/p/zen-coding/downloads/list
でCS4対応版の拡張機能(エクステンション)のファイルをダウンロードし、解凍します。
Dreamweaverを起動して[コマンド]→[拡張機能の管理]を開きます。
そして[ファイル]→[拡張機能をインストール]を開き、解凍したファイルの中にある.mxpファイルを選択します。
これでZenCodingはインストール完了です。

CS3を使用している方はその後、
http://code.google.com/p/zen-coding/issues/detail?id=121
から、CS3対応用修正版js(zen_editor.js)をダウンロードして、

ローカルの

該当ドライブ:\Documents and Settings\該当ユーザー名\Application Data\Adobe\Dreamweaver 9\Configuration\Commands\ZenCoding

を開いて、その中にあるjsをさっき落とした「zen_editor.js」で上書きしてあげるだけで使えるようになります。
一連のインストール作業が終わったらDreamweaverを再起動することをお忘れ無く。

そしてHTMLファイルを開いて、

div#wrap>div#contents>ul#gNav>li*3

と記述した後、Windowsの場合は[ Ctrl ]+[ , ]を押すことで以下のHTMLソースに!

<div id="wrap">
  <div id="contents">
    <ul id="gNav">
    <li></li>
    <li></li>
    <li></li>
    </ul>
  </div>
</div>

ちなみに*で個数、+で前のタグの下に要素の追加ができます。

div.box>p.img+p.txt
<div class="box">
  <p class="img"></p>
  <p class="txt"></p>
</div>

という感じでCSSのように書くことでザクザクとコーディングできちゃいます。

ホーム > Javascript

Search
Feeds
Meta

Return to page top