javascript interface.jsのメモ

2008年9月 5日 09:41

JQueryの強力ライブラリのinterface.js。
いまさらながらブックマークの意味も含めて、メモ。


http://interface.eyecon.ro/

javascript | comment(0) | trackback(0) |

javascript h2タグからリスト作るよ

2008年9月 4日 21:09

久々にjavascriptのライブラリ・・・というか、関数を作ったので、また公開します。

久々にlaboの公開です。

よかったら使ってみてください。

■laboページ
http://sevenstyleweb.com/labo/index.html

■作成したプログラム
http://sevenstyleweb.com/labo/mklist/

javascript | comment(0) | trackback(0) |

javascript page-scroller

2008年9月 4日 12:51

コリスさんのサイトの中に、ページスクローラーの最新版がアップされてた。
(しばらくネットが使えてなかったので、いまさら・・・ですが)

http://coliss.com/articles/build-websites/operation/javascript/296.html


このページスクローラーは、本当に役に立つ。

使わせてもらおう。...んでいつか作ってみよう。

javascript | comment(0) | trackback(0) |

ちょっと動きのきれいなlightbox〜SexyLightBox

2008年8月30日 10:38

メモ。

セクシーな動きをするLightBox


http://www.coders.me/ejemplos/sexy-lightbox/

javascript | comment(0) | trackback(0) |

pngfix メモ

2008年8月20日 16:38

IE6などで、png画像を表示させたいときの処理。
IE7.jsについての記事とは別の方法。

まずは前回のを参考までに。。。
http://sevenstyleweb.com/blog/2008/05/ie6png.html

ってことで、これとは別のpng表示用のpngfixです。

http://homepage.ntlworld.com/bobosola/pnghowto.htm
使い方は↑をみる。

そもそものプログラムはここ↓
http://homepage.ntlworld.com/bobosola/pngfix.js

とりあえず、メモ。
こっちのほうが影響が少なくよさげ。

javascript | comment(0) | trackback(0) |

javascript スクロールでのデモ

2008年8月18日 10:53

javascriptのメモ。
スクロールを実現するライブラリ。

http://lab.centralscrutinizer.it/the-tiny-scrollings/

jqueryなどを使っていないので、軽量か?
ただ今サイトで使っているようなjqueryを使ったスクロールのような滑らかな動きはない。

とりあえず。メモ。
サイトの中のほかのライブラリもあとでチェック。

javascript | comment(0) | trackback(0) |

16+top javascript/ajax effectなんたら

2008年8月 8日 10:54

javascriptやらajaxやらを使って色々エフェクトをかけている最近な感じのするサイトが紹介されていた。


http://acomment.net/16-top-javascriptajax-effects-for-modern-web-design/246


こういうeffect関係も徐々に増えていくんだろうなぁ。何がいいかはその時々だろうけど・・・。
2個前に書いたCSS3のほうで、色々出来ていることがやはりこの中にもちょろっとある。まだjavascriptで書かないといけない部分も多分にあるみたいね。まぁそうだわな。

ということで、メモ。

javascript | comment(1) | trackback(0) |

アーカイブページを作成してみた。

2008年7月 2日 19:41

このブログのアーカイブページを作成してみた。一覧性を求めてテーブルで再現。
その際に、テーブルが使いやすくできるように、とあるライブラリを使用。

使用したのは、to-Rさんのsortable.js系。
http://blog.webcreativepark.net/2007/09/24-172811.html

使用方法などはto-Rさんを参考してみてください。

右サイドバーの上部から。   

javascript | comment(0) | trackback(0) |

swfの上にhtmlの画像をのせる

2008年6月26日 21:07

ちょっとテスト事項として、
HTMLファイルに埋め込まれているswfファイルの上にimgタグなどの画像をのせたい。
というものを行ってみた。
ちなみに、swfファイルは、<embed>タグでよみこんでる。とする。
そのまま、例えば、CSSなどで、
embed{z-index:1;}
ってして、該当imgをそれより上にすれば・・・と思ってみたが、案の定そうはカンタンにはいかない。

色々調べてみると、
http://oshiete1.goo.ne.jp/qa3134334.html
などの記事で「なかなかできんよーそれは。」と書いてあるものが引っかかる。うーむ。中々難しいんじゃの~。と思いながらクドクド探していると、

見つかった。
http://staff.ark-web.jp/~takemura/public/pukiwiki/27.html

なんと、embedタグにとある値を設定してやるといいとな。
それは・・・それは・・・それは・・なんと!

wmode="transparent"

・・・。
なんじゃこれ。しらん。よーわからん。しかもembed自体はCSSでどうこう値を設定できるもんじゃないので、直接書き込むしかない。

んで、書き込んでみたら・・・
あらーできたじゃない。すばらしい。ちなみに、今回はswfobjectを利用していたので、javascriptのほうから書き込む形となったけど、うまくいった。ひとつの手として使えるぜこれは。

という情報でございました。

javascript | comment(0) | trackback(0) |

クリエイティブCSS実践講座 東京に参加中

2008年6月21日 11:20

今日はセミナーに参加しております。
サイバーガーデンの益子さんのクリエイティブCSS実践講座 東京です。金額はドンとしておりますが、前回の参加でかなりの刺激を受けたので、今回も思い切って参加。

今午前の休憩中。

とりあえず、ちょこちょこメモします。

まずはJqueryについて
http://jquery.com/からダウンロードするんだけど、
そのときには、packedがいい。Gzippedは実は実装時に一気に重くなる。

$(document).ready(function(){
    hogehoge
};
のように、
$(document).readyを使うことでロードよりも早くDOMの解析が行われる(?)

jqueryのチュートリアルは以下より
http://docs.jquery.com/Tutorials


thickboxすげー。外部HTMLの一部も読める。http://jquery.com/demo/thickbox/
jqueryと一緒にいろいろ試してみる価値があり。AJax系もいける。外のファイルも読める。しかし、本当にそれがthickboxで必要かどうかは見極める必要がある。

javascript | comment(0) | trackback(0) |

IE6でpng画像を~。

2008年5月23日 19:17

ちょっと仕事で使ったので、メモ。
IE6でpng画像...特に透過画像を使いたいとなったとき、いろんな方法があるけど、
なかでも簡単に使えそうなのが、IE7.js
googleCodeから利用可能。

詳しくは、以下から。
http://code.google.com/p/ie7-js/

こちら導入の仕方はピカイチ。なんだけど、ちょっと使いづらいことがわかった。
何が使いにくいかというと、背景に透過pngを置くとき。

pngデータを
hogehoge-trans.png
というファイル名で保存をしたあと、背景に使ってみると・・・

左上に配置されてしまいます。
しかもそこにポツンと。。。

つまり、IE7.jsで背景画像をpng画像で置くときには、次の制限がでます。

背景のリピートができない
背景に置いた画像の移動(background-positionの設定)ができない

ということで、利用には要注意。

javascript | comment(0) | trackback(0) |

prototype.jsで外部htmlファイルを読み込む

2008年5月12日 17:24

builderの記事でこんなのがあった。

prototype.js を利用してコンテンツをインクルードする

SSIなどのやり方があるけど、実際これはサーバの具合などが結構面倒だからなーって思ってた。
JSで「document.write();」でやる方法もあるけど、jsがきちゃなくなるし、更新のとき気持ち悪いなぁって思ってた。

なので、この記事タイトルを見たとき、おーって思ったね。

さーて、どういうやりかたかっていうと。すんごくカンタン。

まず、prototype.jsを読み込む。
<script type="text/javascript" src="hogehoge/prototype.js"></script>

読み込み用の関数を作成。
<script type="text/javascript">
function my_include(id, file) {
document.open();
document.write('<div id="' + id + '"></div>');
document.close();

var options = {};
options.method = "get";
options.asynchronous = false;
new Ajax.Updater(id, file, options);
}
</script>
もちろん関数名などはなんでもよい。これをhead内に。直接書かなくても、こいつを別ファイルとしておいて、読み込んでもOK。

...で、読み込みたいHTMLファイルを作成して、外部に置いておく。このとき、Ajax利用なので、当然の事ながら同じドメイン内においておくこと。
んで、以下のコードを差し込みたい場所に差し込んでおく。これでOK。
<script type="text/javascript">my_include("sample_id","sample.html");</script>

これはいい。
ファイルの作成もHTMLを作るようにできるわけだし、サーバのことを考えなくてもよいわけだし。

これは今後使えるなら使っていこうと思います。

javascript | comment(0) | trackback(0) |

iPhotoみたいな動きができるiphSlider.js

2008年4月 1日 16:09

またまた自作のjavascriptを公開します。
こちらもまだベータ版として。ご意見いただければなぁとおもいます。

今回も画像表示関係のライブラリ。Macユーザならご存知のiPhotoのようにスライダーを動かすと写真の大きさが変わるやつを作りましたので、よかったらどうぞ。

今回は、prototypescript.aculo.usのslider.jsを使います。
それぞれダウンロードしてきます。(といってもscript.aculo.usのページからダウンロードすれば、自然とprototypeはついてきます。)

それから、こちらのファイルをダウンロードします。

http://sevenstyleweb.com/sample/iph/js/iphslider.js
コピーをして保存してください。

また、今回のスライドバー用のCSSをダウンロードします。
http://sevenstyleweb.com/sample/iph/css/slider.css
こちらもコピペでお願いします。

さーて、使い方ですぅ。
まず、もちろんですが、インポートします。
<link rel="stylesheet" href="css/slider.css" type="text/css" media="all">
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/slider.js"></script>
<script type="text/javascript" src="js/iphslider.js"></script>

そして、
<script type="text/javascript"><!--
    window.onload = iphslider;
// --></script>

ページをロードときにスライダーのスクリプトを起動させるために、こちらの上記のコマンドを打ち込みます。これで準備はOKです。

さて、スライダーを機能させたい画像に対して、rel属性でiphを入力します。以下のようにいれます。
<img rel="iph" src="hoge.jpg" width="○○" height="○○" />

さらに、スライダーを表示する位置に次のHTMLを書き込みます。
<!--For SlideBar space Start -->
<div id="slidebar">
    <div id="sliderBG">
        <div id="ptr"></div>
    </div>
</div>
<!--For SlideBar space End -->


これで、完了です。スライダーに対応した画像を複数使いたい場合でも、同じようにrel属性を指定すれば、スライダーで同時に拡大縮小されます。
画像に対してfloatをかけていれば、結構面白い動きをします。

サンプルデモ

現状最小サイズは30%に設定してます。その設定は変更できます。
ダウンロードした、jsファイルのiphslider.jsの3行目
var min_per = 30;
の部分の数値を%で変更すると問題なくいけます。

よかったら使ってください。

サンプルサイトまとめたサイトをこちらからダウンロードできます。
http://sevenstyleweb.com/download/iphsample.zip

javascript | comment(0) | trackback(0) |

Mootools関係でmooSlideBox3

2008年3月31日 22:56

javascriptのライブラリのmootools。これをつかったスライドボックスの面白いやつを見つけた。その名もmooSlideBox3(もう3かい!)

ちょっと解説をしましゅ。

まずはmootoolsの中身をとりあえず全部とmooSlideBox3をダウンロードします。それを適当なフォルダに入れます。

HTML側で、
<script language="javascript" type="text/javascript" src="common/js/mootools.js"></script>
<script language="javascript" type="text/javascript" src="common/js/mooSlideX.js"></script>
で両方のjavascriptを読み込みます。

スライドさせるコンテンツですが画像をスライドインさせるとき(といっても画像しかいかないけど)
<a href="hoge.jpg" rel="designSlide" title="Sample::testtest text">Slide</a>
と書きます。

mooSlideBox3を使うときは、rel属性にdesignSlideと記載します。title属性には、スライドインしてくるレイヤーに記載されるテキストを記載します。その際、タイトル部分と本文部分を分ける意味で、::(コロン2つ)を記載。これが区切り文字になります。

ものによっては、title属性では事足りないことがあります。
そのときは、その後に<div>タグなどで追記情報を記載します。

<div id="mycontent">
        <h2>test test test</h2>
        <p>テストストテストテストテストテストテスト</p>
</div>

上記のように追記情報を記載し、そのid属性の値(今回はmycontent)を先ほどのaタグにrev属性を書き加えます。
<a href="hoge.jpg" rel="designSlide" rev="mycontent" title="Sample::testtest text">Slide</a>

これで、追記情報も表示されるようになります。
ただし、ここで注意ですが、rev属性の部分は、追記情報がない場合記載をするとエラーになり大本すら動かなくなります。

画像表示を表現するのに結構おもしろいエフェクトじゃないでしょうか・・。

ちょっと使ってみたいのでした。

javascript | comment(0) | trackback(0) |

気に入っちゃったサイト"GOTOCHINA"

2008年3月31日 14:12

このブログでは珍しく、サイトの紹介。
すんごい気に入ってもうた。GOTOCHINAというサイト。こちら、完全CSSとJavascriptで作られている。なのに、なんか気持ちのいい動きをします。

javascriptってことで、若干動作に重さを感じることもありますが、最近のモダンブラウザなら問題なくサクット動くんじゃないでしょうか。

写真などを表示するのに、大きな画面のほうがやっぱりいいなーと思う。けど、リサイズのときに困るなぁとも思っていたけど、javascriptをうまく利用すればこんな感じでできるのねー。って関心したし、
背景画像が、一時的にloadingってなってるのが、また面白い。これは、CSSをきってみたらわかるけど、画像サイズに合わせるために、この背景画像は、背景画像ではなく、普通にimgタグで読み込んだものを指定場所に配置している。しかもこの背景用の画像は、ユーザビリティを考慮してか、HTMLでは終わりのほうに置いてある(本来必要内情報だから・・・?)。だから、loadingとだして、その場をしのいでいる。

すごい面白アイデアだなー。と思ったね。


javascript | comment(0) | trackback(0) |

画像とかボックスの隅っこにマーカーつけるのである。

2008年3月28日 16:29

corner.jpg
久々に自作ライブラリのご提供。まだβ版にしておいてください。
これは、画像とかボックスの4隅にちらりと装飾をするというもの。

さてチュートリアルでございますが、
まずjsをインポートします。
<script type="text/javascript" language="javascript" src="js/waku.js"></script>

このwaku.jsを使っていくわけですが、枠を付けたいものにたいして、
rel="waku"
を指定します。

今反応しているのは、aタグとdivタグに反応するようになっているので、
画像にリンクをおきたいときは、
<a class="sample1" href="hogehoge.com" rel="waku">
    <img src="hoge.jpg" width="640" height="480" />
</a>
のようにaタグに指定をします。

画像にリンクをしたくないときは、ちょっと面倒ですが、
<div rel="waku">
    <img src="hoge.jpg" width="640" height="480" />
</div>
とします。

これで、コーナーが入ります。ちなみに、サンプルでは、コーナーの色をオレンジ色にしていますが、これはあくまで目立たせるためです。
この色を変えたいときは、 waku.jsの7行目
var color ="#f73";
のカラー部分を書き換えると反応します。

また、コーナーのサイズは、rel="waku"を指定する際に、
rel="waku10"
とすれば、10pxのラインでかかれます。
もちろん
rel="3"
とすれば3pxのラインでかかれます。デフォルトは3pxにしています。(1pxでも反応します)
現状小数点などには対応してません。整数値をwakuのあとにスペースなどをつけずに記載してください。

これで出来る・・はず。

ちなみにサンプルはこちら
http://sevenstyleweb.com/sample/4cnr/

jsのダウンロードはこちら。
http://sevenstyleweb.com/download/waku.zip

javascript | comment(0) | trackback(0) |

ぼんやりなるエフェクトcovers.js~javascript

2008年3月 4日 22:31

ついにオイラもjavascriptのライブラリを一個作っちゃった。なので、ちょっとこちらに紹介。
ダウンロードしてもらってかまいませんが、その際は、コメント入れてもらえるとうれすぃっす。

covers.js

初期状態で若干の暗さを画像に持たせておいて、マウスオーバーのときに明るくなるというエフェクト。

使い方
prototypeとscriptaculousのeffect.jsが必要になります。

上記各ライブラリとcovers.jsをダウンロードしたあと、ヘッダに以下コード入力

<script language="javascript" type="text/javascript" src="js/prototype.js"></script>
<script language="javascript" type="text/javascript" src="js/effects.js"></script>
<script language="javascript" type="text/javascript" src="js/covers.js"></script>
画像を次のようにdivタグでくくる。このとき、親にあたるdivタグにはidの指定が必要。
<div id="hoge" class="crap">
    <img src="hogehoge" width="100" height="100" rel="covers">
</div>
またimgタグの属性として、rel="covers"と指定。

以上。

サンプル画面

使用感などもらえたらうれしいっす。

javascript | comment(0) | trackback(0) |

javascriptで時計。Polar Clock

2008年2月29日 19:41

javascriptのprototype.jsとexCanvasというライブラリをもってきて、色々ごにょごにょすると、時計チックなものができるとな。でもこれって、IEには対応できていないという。その理由は、IEはCanvasタグをもっていないからだとのこと。

まぁ、テストというか遊びとして楽しめるのではないでしょうか。
こちらも、この週末に色々やってみようと思います。

http://snipersystems.co.nz/community/polarclock/polar.html

javascript | comment(0) | trackback(0) |

GlassBox~VistaっぽいLightBox パラメータ系

2008年2月28日 17:18

さてGlassBoxの各パラメータの説明簡単に。。
・init
myGlassBox.init( 'myGlassBox', '450px', '360px', 'hidden', 'white' );
初期化します。
第1引数:id名、第2引数:幅、第3引数:高さ、
第4引数:オーバーフローしたときの設定、第5引数:ボーダーのスキン
 

・vscreen

myGlassBox.vscreen( '50px', '5px' );
位置の設定 第1引数:左位置、第2引数:マージン

・ipos (inline position)

myGlassBox.ipos();
オブジェクトのインラインポジションの設定
 

・apos

myGlassBox.apos( '690px', '35px' );
オブジェクトの絶対位置を設定。


・lbo

myGlassBox.lbo( true, 0.50 );

第1引数:LightBoxのように表示するか否か、第2引数:透明度の設定。

・appear

myGlassBox.appear(3000);
表示するための時間。
 

・draggable

myGlassBox.draggable();
オブジェクトをドラッグできるようにする

・zindex

myGlassBox.zindex('100');

オブジェクトのz-indexを指定するためのもの

javascript | comment(0) | trackback(0) |

GlassBox~VistaっぽいLightBox

2008年2月28日 10:43

新しいやつがでてきた。LightBoxの改良版みたいなやつで、
すんごいおもろー!(世界のナベアツ風)

http://www.glassbox-js.com/

えっと使い方ですが・・・。

1.スクリプトの読み込みをする。
<script src="glassbox/glassbox.js" type="text/javascript"></script>

2.divタグでid(class)をふって、コンテナを一つつくる。
<div id="myGlassboxContent">
<!-- Content -->
</div>
3.で、スクリプトを初期化。ほんで、id(class)渡して・・・
<script type="text/javascript">
var myGlassBox = new GlassBox();
myGlassBox.init( 'myGlassboxContent', '400px', '300px', 'auto' );
myGlassBox.apos( '290px', '35px' );
</script>
4.指定したdivタグ内に色々書き込むって感じ・・・みたい。

それぞれパラメータもあるみたいだし、XMLの読み込みなども色々でけるみたい。
このあとちょろっと時間を見つけてサンプルを作ってみます。
ちょっと表示がおもいけど、なんかおもろー!(世界のナベアツ風)。

javascript | comment(0) | trackback(0) |

Mootoolsメモ

2008年1月22日 17:45

仕事関係でちょっとメモ。
SEVENSTYLEWEBのphotoページでも使っているけど、画像がスライドして入ってくるJSライブラリの紹介ページ。

http://coliss.com/articles/build-websites/operation/javascript/496.html

ちょっとそれだけ。

javascript | comment(0) | trackback(0) |