October 1, 2008 20:39
menufolder.jsとsmooth.pack.js
|
menufolder.jsについては、以前から使用させていただいているが、先月来サイトを弄っている中で、ナビゲーションを加減した際に、行頭へのリンクをクリックして、瞬時にページの頭に飛ぶのは芸が無いと思い、smooth.pack.jsを試してみた。
設置は簡単なもので、<head>～</head>間にコードを記入するだけ。
だが、設置後にmenufolderが開かなくなった。ありがち（？）なスクリプトの競合によるエラーで、smooth.pack.jsは無くても問題無いが、menufolderが動かないのは問題なので、smooth.pack.jsを削除。
また、サイトの組みなおし以来、どうにもprototipの具合が良くなく、原因はスクリプトの多さ・重さからくるエラーのようで、IEでのみ発現するのだが、ページが表示されない事から、ページによりこれも削除した。
そこで、ちょっとスクリプトを見直したのだが、今や必需品のprototypeはバージョン上がるごとに重くなってるし、highslideは下にぶら下がっているスクリプトを読まないようにしても重い。サーバーの性能も絡んでくる部分ではあるが、スクリプトの競合は色々な所に影響を及ぼすようです。
見る側の、通信速度やＰＣの性能まで考えれば、少々の芸や利便性なら、競合は極力避けるべきものなのでしょう。
|
【 menufolder.jsとsmooth.pack.js
| comments (0)
| track backs (0) 】
March 28, 2008 22:23
IEでのPNGの扱い
|
そんな偉そうなモンではなく、jsの比較。
なんだかんだ言って、jsを幾つか使わせてもらっているのだが、トップページについては今のところ「これ」といったデザインが出来ず、とりあえず「背景画像のアクセス毎の変更」スクリプトと、そこに透明⇒白のグラデーションをかけるためにPNGを使ったのだが、IEできれいに透過させるためのjsを使っている。
単純にグラデーションをかけたjpgを用意すればいいのだが、それでは勉強にならないので。
最初は「alphafilter」を使ったのだが、どうも中に入れたswfがIEでは動かない。仕方ないので「iepngfix」を使った。「仕方なく」というのは、逆にFF等で表示されなくなる為、IEに向けてハックを書いて対処したのと、このフィルターの中ではフォントにジャギが出るからだ。
もっとも、ジャギに関してはディスプレイによってはあまり気にならない場合も有るのだが、swfが動かないものよりはハックを書かされても、少々ジャギが出ても表示・動作確認取れる方がましというもの。
どうも「透けた」のが好きなようで (^^;)ゞ
swf以外の透過はCSSで出来るからね・・・黒を透過させるには背景を白く飛ばさないとうまくないので。。。
|
【 IEでのPNGの扱い
| comments (0)
| track backs (0) 】
January 7, 2008 18:34
Prototip
|
今まで「ツールチップ」はあまり必要というか、興味を持たなかったのだが「prototip」なるツールチップを見た時、「ただのツールチップ」と大きく違うそのデザインの広さと、汎用性に興味を持った。
件のサイトにて幾つかのデモを見たが、とりわけ画像を表示させるものについては、色々な場面での使い回しが利きそうなので使ってみる事にした。
勿論、MovableTypeといかに組み合わせるかがポイント。
数日試行錯誤、MTのエントリーからいかに画像を呼び出すかを考えたが、EntryImageというプラグインとの組み合わせで、エントリーには画像が必須となるが、呼び出す事が出来た。
で、その結果が「SurfReport」の「Recent reports」、エントリータイトルにカーソルを合わせると表示される。
前述「エントリーに画像必須」だし、W3C規格からするとエラーとなるコードを吐き出しているが、
<ul>
<MTEntryImages img_lastn="20" limit_per_entry="1">
<li>
<div id="s_<$MTEntryID$>">
<script type="text/javascript">
<!--
function createDemos()
{
new Tip('s_<$MTEntryID$>', '<img src="<$MTEntryImageSrc$>" width="192" height="128" alt="report photo" />', {title : 'Caption<$MTEntryExcerpt$>',className: 'darktip',hook:{target: 'bottomMiddle', tip: 'topRight'}});
}
document.observe('dom:loaded', createDemos);
//--></script><a href="<$MTEntryPermalink$>"><$MTEntryDate format="%Y"$>.<$MTEntryDate format="%m"$>.<$MTEntryDate format="%d"$> <$MTEntryTitle$></a>
</div>
</li>
</MTEntryImages>
</ul>
とする事で、
Win XP IE6
IE7
FireFox1.5&up
Opera9x
Mac OSx Safari1.52
FireFox2.0
にて動作・表示を確認、動いているから良しとしている・・・規格に沿っていない事と、画像が無い場合のツールチップの表示はおいおい併せて改善していきたい。
|
【 Prototip
| comments (0)
| track backs (0) 】
Surf&Sea
