Category Archives: JavaScript

Highslide JSの使い方(使用方法)

Posted on by
Reply

Highslide JSの使い方(使用方法)のメモ。

参考url：
http://www.koikikukan.com/archives/2007/01/18-005102.php

ダウンロードページ：
http://vikjavev.no/highslide/download.php

2008-04-10時点での最新バージョンは3.3.12でした。

１．スクリプトのインクルード設定
の直前に設定します。

<script type="text/javascript" src="http://user-domain/highslide/highslide.js"></script>
<script type="text/javascript">
    hs.graphicsDir = 'highslide/graphics/';
    window.onload = function() {
        hs.preloadImages();
    }
</script>

２．ポップアップ用空要素設定
Highslide JS でポップアップする画像を表示させるための div 空要素を設定します。そして div 要素の id 属性に “highslide-container” を設定します。
bodyタグの直下に記述します。

<div id="highslide-container"></div>

３．タグ設定
まず、サムネイル画像表示用の img タグを書き、それを a タグで括ります。a タグの href 属性には元画像の URL を設定してください。
そして a タグに class 属性 “highslide” と、onclick 属性を追加します。
なお、ユーザビリティを考慮して onkeypress 属性も追加しておくと良いでしょう。

<a href="[画像ファイルのURL]" class="highslide" onclick="return hs.expand(this)" onkeypress="return hs.expand(this)"><img src="[サムネイル画像のURL]" alt="..." /></a>

他にもこちらを参考にしました。
http://www.koikikukan.com/archives/2007/03/30-003838.php

テキストエリア等の入力フォームをリサイズ可能にするJavaScript

Posted on by
Reply

テキストエリア等の入力フォームをリサイズ可能にするJavaScript

入力フォームをリサイズ出来る必要性が出て調べたのでメモ。

参考url：
テキストエリアとかリサイズ可能にする JavaScript
http://espion.just-size.jp/archives/06/237175908.html

yukotan hour
http://yukotan.blogspot.com/2007/02/javascript.html

headerでLocationする時のtarget指定について

Posted on by
2

headerでLocationする時のtarget指定について

やり方はJavaScriptでやる方法等何種類かあるみたい。

PHP参考url：
http://ml.php.gr.jp/pipermail/php-users/2002-August/009477.html

<form action="" target="_top" method="post">

JavaScript参考url：
http://oshiete1.goo.ne.jp/qa1789095.html

if ( self != top ) { top.location = self.location; }

scriptaculous.jsのエフェクト(Highlight)使用方法

Posted on by
Reply

JavaScriptライブラリ・scriptaculousのエフェクトの使用方法。

参考url：

http://www.openspc2.org/JavaScript/Ajax/ref/script.aculo.us/ver1.8.1/index.html

まずは、HTMLエレメント。

<div id="resultMsgs">完了しました。</div>

次に、JavaScript。

<script type="text/javascript">
<!--

function execEffect() {
    new Effect.Highlight("resultMsgs", {duration:1.2});
}
Event.observe(window, "load", function(){execEffect();}, false);

// -->
</script>

duration:はハイライトさせる時間(秒数指定)。
値を変える事により、ハイライトする時間が変化する。
以上、簡単なメモ。