Category Archive: JavaSpript

[CSS3]PIE.htcとjQueryの共存でPIE.htcが利かない場合。

残念なIE様にCSS3っぽく対応してくれるライブラリPIE.htc。
PIE.htcとjQueryを共存した場合に、PIE.htcが利かないときがあった。
原因は読み込みの順番に関係がありそうだった。

これだとだめで、

<script type='text/javascript' src='commons/scripts/jquery.js'></script>
<!--PIE.htcを使ってるCSS-->
<link href="commons/styles/main.css" rel="stylesheet" type="text/css" media="all">

(jQueryのプラグインは機能すれどCSS3っぽい効果はきえる)

これならよかった、が・・・・

<!--PIE.htcを使ってるCSS-->
<link href="commons/styles/main.css" rel="stylesheet" type="text/css" media="all">
<script type='text/javascript' src='commons/scripts/jquery.js'></script>

CSS3は機能したけど、こんどはjQueryのプラグイン(jquery.maximage)が機能せず。。
むむむ

[JS]言語として基礎から復習できるリンクメモ

言語体系的にJavascriptを勉強するためのメモ。

ITpro:DOMから始めるJavaScriptモダン・スクリプティング
・DOMの構造を基礎からおさらい。
→第6回のaddEventListener()使ったイベント定義で、AS3的に書けそう。
→Objectを利用したクラスの考え方

IT戦記:Prototype.js を使った JavaScript OOP 講座 #01
・クラスの考え方をもう少し掘り下げた説明
→prototype.jsを使わない段階での例が参考になる。

HouseTect, JavaScript Blog:jQueryのクラス定義はトリッキーでかっこいいよ
・jQueryでのクラス定義方法の解説
→ひとつ前でprototype.jsの仕組みを把握した上で読むと比較しやすい

JavaScript Index メソッド、プロパティ、関数・リファレンス
・JavascriptのAPI一覧

[CSS][JS]画像をブラウザサイズへのリサイズ処理するの際の注意

JSで画像をブラウザサイズにフィットさせるときの注意。
imgタグのコンテナとなるブロック要素を、position:fixedとしておかないとSafariで横幅がフィットしないみたい。(iPhoneも)
もしくはhtml要素にoverflow:hiddenでもよいみたい。

※position:fixedとするとiPhone、iPadでいろいろ不都合でるみたい。
overflow:hiddenの方が安全かな。

[AS][JS]FLASHで「このページのトップに戻る」ボタンの設定

FLASHでブラウザのスクロールバーを最上部に戻す方法で、最初出来たと思いきや不完全だったのでメモ。

基本設定は以下の通り。
ステージサイズを500×1000くらいにしておく
インスタンス名:_mcのムービークリップをステージの下の方に配置。

まず最初のイマイチアプローチから
以下フレームアクション

//AS:フレームアクション
_mc.addEventListener(MouseEvent.CLICK , xClick);
function xClick (e):void {
	var tf = new TextField();
	addChild(tf);
	tf.text = "リロードしてないよ";    
	navigateToURL(new  URLRequest("#","_self"));
}

これだけで出来ました。
ジャンプ先を#にするとブラウザリロードせずにページの先頭にジャンプできました。
先頭にはリロードしてないよの文字が表示されます。

で、これでいいや、と思いきや・・・
winのSafari3ではブラウザリロードしてしまいテキストが表示されません。
WINのIE6,7、FF3はリロードされなかったんですがね。。。
(HTMLの解釈的にはSafariの方が正しいっぽいような気がしますが)

というわけで別のアプローチ。
jsでスクロールバーを制御する方法。

js自体のソースはこちらのブログを参考にしました。
※イージングでゆっくりページのトップに戻るような処理のjsです。

//JS:HTMLに埋め込むか、jsファイルとしてhtmlで読み込むか
function backToTop() {
    var x1 = x2 = x3 = 0;
    var y1 = y2 = y3 = 0;

    if (document.documentElement) {
        x1 = document.documentElement.scrollLeft || 0;
        y1 = document.documentElement.scrollTop || 0;
    }

    if (document.body) {
        x2 = document.body.scrollLeft || 0;
        y2 = document.body.scrollTop || 0;
    }

    x3 = window.scrollX || 0;
    y3 = window.scrollY || 0;

    var x = Math.max(x1, Math.max(x2, x3));
    var y = Math.max(y1, Math.max(y2, y3));

    window.scrollTo(Math.floor(x / 2), Math.floor(y / 2));

    if (x > 0 || y > 0) {
        window.setTimeout("backToTop()", 25);
    }
}

上記関数をhtmlに仕込んでおいて、Flash側には以下のように設定

//AS:フレームアクション
_mc.addEventListener(MouseEvent.CLICK , xClick);

// 呼びたいJSの関数名
var callJasFunction:String = "backToTop";

// JavaScriptの実行
function xClick (e):void {
	var tf = new TextField();
	addChild(tf);
	tf.text = "リロードしてないよ";
	ExternalInterface.call(callJasFunction)
}

これでOKなのですが、Htmlにjs仕込むのが面倒くさい。
できることならFLASHだけで完結できないか、と。
と思ったら、こんな書き方でもFLASH上でJSを実行できるらしい。

//AS:フレームアクション
_mc.addEventListener(MouseEvent.CLICK , xClick);

// 呼びたいJSの関数
var callJasFunction:String = "function backToTop() {var x1 = x2 = x3 = 0;var y1 = y2 = y3 = 0;if (document.documentElement) {x1 = document.documentElement.scrollLeft || 0;y1 = document.documentElement.scrollTop || 0;}if (document.body) {x2 = document.body.scrollLeft || 0;y2 = document.body.scrollTop || 0;}x3 = window.scrollX || 0;y3 = window.scrollY || 0;var x = Math.max(x1, Math.max(x2, x3));var y = Math.max(y1, Math.max(y2, y3));window.scrollTo(Math.floor(x / 2), Math.floor(y / 2));if (x > 0 || y > 0) {window.setTimeout('backToTop()', 25);}}";

// JavaScriptの実行
function xClick (e):void {
	var tf = new TextField();
	addChild(tf);
	tf.text = "リロードしてないよ";
	ExternalInterface.call(callJasFunction)
}

ようは、関数名のところに関数全部書いちゃってもOKみたい。
これなら、Html変更しなくていいから楽チンだ!
と思いきや、これだと不具合ありました・・・

jsの再帰処理的な部分が実行されず、最初の一回しか実行されてないっぽい。
↓ここの部分

//上述したJSの一部を抜粋
if (x > 0 || y > 0) {
    window.setTimeout("backToTop()", 25);
}

でも最初の一回は実行されるので、一回でトップに戻るようなjsなら問題なくページの頭だしは可能。
jsをこれだけにすれば、とりあえずイージングなしの頭だしは可能でした。

//AS:フレームアクション
_mc.addEventListener(MouseEvent.CLICK , xClick);

// 呼びたいJSの関数
var callJasFunction:String = "function backToTop() {window.scrollTo(0, 0);}";

// JavaScriptの実行
function xClick (e):void {
	var tf = new TextField();
	addChild(tf);
	tf.text = "リロードしてないよ";
	ExternalInterface.call(callJasFunction)
}

※2009/5/12追記

以下の書き方で再帰処理も可能でした。
document.insertScriptなんてものを使えばよいのだね。
JSよくわかんね。

_mc.addEventListener(MouseEvent.CLICK , xClick);

// 呼びたいJSの関数名
var callJasFunction:String = "document.insertScript = function(){ backToTop = function() {var x1 = x2 = x3 = 0;var y1 = y2 = y3 = 0;if (document.documentElement) {x1 = document.documentElement.scrollLeft || 0;y1 = document.documentElement.scrollTop || 0;}if (document.body) {x2 = document.body.scrollLeft || 0;y2 = document.body.scrollTop || 0;}x3 = window.scrollX || 0;y3 = window.scrollY || 0;var x = Math.max(x1, Math.max(x2, x3));var y = Math.max(y1, Math.max(y2, y3));window.scrollTo(Math.floor(x / 2), Math.floor(y / 2));if (x > 0 || y > 0) {window.setTimeout('backToTop()', 25);}}}"; 
var method = " backToTop";
//上記関数を読み込み(この段階では、関数backToTopは実行されないみたい)
ExternalInterface.call(callJasFunction)
// JavaScriptの実行
function xClick (e):void {
//ここで初めて実行されるみたい。
ExternalInterface.call("backToTop")
}

[JS]cookieについて

設定の仕方はこんな感じ。

document.cookie = "expires=○○○;△△△=□□□";

○○○が有効期限
これを設定しないと、ブラウザを閉じた時点で削除される。
△△△と□□□は任意の値を設定可能