ラベル JavaScript の投稿を表示しています。 すべての投稿を表示
ラベル JavaScript の投稿を表示しています。 すべての投稿を表示

2011年6月5日日曜日

Dojoでリモートのライブラリとローカルの自作コードを両立させる方法

Dojoでネット上にあるライブラリと，自前サーバにある自作コードを両立させて使う方法をメモしておきます．

まずは，状況設定です．「http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js」に置かれているものをライブラリとして使うことにします．一方，次の図の「war/js/rfj」ディレクトリに置かれている「ScrollBar.js」を自作コードとして使うことにします．


この状況下で「ScrollBar.js」ファイルで定義されている「ScrollBar」クラスを「war/scroll_bar_test.html」ファイル内で使うためには，次のようなコードを記します．

<script
  type="text/javascript"
  src="http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js"
  djconfig="parseOnLoad: true,
    baseUrl: './', modulePaths: {'rfj': 'js/rfj'}">
</script>
<script type="text/javascript">
dojo.require("rfj.ScrollBar");

dojo.addOnLoad(function() {
  var scrollBar = new rfj.ScrollBar();
);
</script>

ポイントは，最初のscript要素にあるdjconfig属性の値にあります．ローカルのコードが置かれている場所を「baseUrl: './', modulePaths: {'rfj': 'js/rfj'}」という記述で指定します．

baseUrlには，自作コードへのパスを記す際の起点となるディレクトリをこの記述が記されたHTMLファイルから見た相対パスで記します．今回は，「war/scroll_bar_test.html」ファイルがあるのと同じディレクトリを起点とするので，「./」を指定しています．

modulePathsには，Dojoでいうところのモジュールを置いてあるディレクトリのパスを記します．このパスは，baseUrlで指定したディレクトリからの相対パスとなります．「ScrollBar」クラスが定義されている「ScrollBar.js」ファイルは「war/js/rfj」ディレクトリにあるので，そのディレクトリを「war/scroll_bar_test.html」ファイルのあるディレクトリからの相対パスで記すと，「./js/rfj」となります．
投稿者 時刻: 0 件のコメント:
ラベル: ,

2011年6月4日土曜日

FirefoxにてDIV要素を連続でドラッグ＆ドロップできない問題

FirefoxにてDIV要素を連続でドラッグ＆ドロップできない問題に遭遇しました．一応解決したので，メモしておきます．

DIV要素を水平にドラッグ＆ドロップできるようにしたつもりでしたが，一旦ドロップして再度ドラッグしようとすると，そうならずに半透明になった要素がマウスポインタの動きに合わせて追随してくるという問題にFirefoxで遭遇しました．つまり，次の図のような感じです．


結局，下記のようにCSSを変更すると期待通りの動作をするようになりました．

.scroll_bar-handle {
  position: absolute;
  height: 16px;
  top: 0px;
  background-color: red;
  -moz-user-select: none; /* これを追加 */
}

Firefoxでは，要素に対して操作が行われると，それが選択対象となるようです．続けて選択対象の要素に対して操作を加えようとすると，その分身が表示されます．そして，本体に加えられた操作がその分身に対して適用されるようになるみたいです．その設定を無効にするのが，CSSに新たに加えた1行となります．他のブラウザ（といってもChromeだけですが）では，当初から期待通りに動作していたので，この問題（その仕様を知らなかった僕に問題があるのですが）はFirefoxに固有のもののようです．
投稿者 時刻: 0 件のコメント:
ラベル: , ,

2010年8月27日金曜日

ブラウザのフォントサイズをJavaScriptで取得する方法

ブラウザのフォントサイズをJavaScriptで取得する方法をメモしておきます．

まずは，空白1文字を内容とするspan要素を表示するページに仕込んでおきます．
そして，その要素のid属性に適当な名称を，style属性に「visibility: hidden;」を設定します．
あとは，スクリプト内で，その要素のoffsetHeightの値を取得すれば，ブラウザのフォントサイズを取得できます．
具体的なコードは以下のとおりです．

<html>
<head>
<script type="text/javascript">
<!--
console.log(document.getElementById("font").offsetHeight);
//-->
</script>
</head>
<body>
<span id="font" style="visibility: hidden;">&nbsp;</span>
</body>
</html>

[1] JavaScriptでブラウザのフォントサイズを検出する方法
投稿者 時刻: 0 件のコメント:
ラベル: ,

2010年3月1日月曜日

ブラウザの外枠とWebページの表示枠のサイズを取得する方法

ブラウザの外枠とWebページの表示枠のサイズを取得する方法をメモしておきます．

ブラウザの外枠とWebページの表示枠のサイズは，Windowオブジェクトの次のプロパティが持っています．

window.outerWidth ブラウザの外枠の幅
window.outerHeight ブラウザの外枠の高さ
window.innerWidth Webページの表示枠の幅
window.innerHeight Webページの表示枠の高さ

ただし，IEは別のところに持っているそうです．
投稿者 時刻: 0 件のコメント:
ラベル:

2010年1月29日金曜日

固定サイズの要素の中にアスペクト比を保って画像を表示する方法

固定サイズの要素の中にアスペクト比を保って画像を表示する方法をメモしておきます．

var frameElement = document.createElement("div");
frameElement.style.width = XXX + "px";
frameElement.style.height = YYY + "px";
var imageElement = document.createElement("img");
frameElement.appendChild(imageElement);
dojo.connect(imageElement, "onload", function() {
var aspectRatio = this.width / this.height;
if(aspectRatio > frameElement.style.width / frameElement.style.height) {
this.style.width = frameElement.style.width;
}
else {
this.style.height = frameElement.style.height;
}
});
投稿者 時刻: 0 件のコメント:
ラベル:

2009年9月17日木曜日

dojox.gfx の createImage で画像が表示されない

dojox.gfx の createImage を使って画像を表示できないという問題の解決方法をメモしておきます．

surface = dojox.gfx.createSurface(parentNode, 400, 300);
image = surface.createImage({x: 0, y: 0, width: 400, height: 300, src: "image.jpg"});
image.rawNode.removeAttribute("fill");

[1]のページを手掛かりに読み進めてみると，上記の関数によって作られる SVG の要素に値が none の fill 属性が設定されていることが原因のようです．この問題はすでに解決済みのようですが，正式版（バージョン1.3.2）にはまだ反映されていないようです．

そういうわけで，とりあえず，上のコードの3行目を追加してみました．これで原因となっている属性を消せるので，画像が表示されるようになります．

[1] Surface createImage fails on Firefox 3.5
投稿者 時刻: 0 件のコメント:
ラベル: ,

2009年9月12日土曜日

Dojoで独自モジュールのクラスを作成する方法

Dojoで独自モジュールのクラスを作成する方法をメモしておきます．なお，以下の内容は，Dojoライブラリに含まれるdojo.jsを${APPHOME}/js/dojo/dojoに配置した状況で，${APPHOME}/jsにmizomemoモジュールのHogeHogeクラスを定義し，そのインスタンスを${APPHOME}/hogehoge.html内で生成する場合の説明です．

1. ${APPHOME}/js/mizomemo/HogeHoge.js の内容を次のようにする．

dojo.provide("mizomemo.HogeHoge");

dojo.declare("mizomemo.HogeHoge", null, {
  // フィールドやメソッドを定義する
});

2. ${APPHOME}/hogehoge.html の内容を次のようにする．

<script type="text/javascript" src="js/dojo/dojo/dojo.js" djConfig="parseOnLoad: true, modulePaths: {'mizomemo': '../../mizomemo'}"></script>
<script type="text/javascript">
<!--
dojo.require("dojo.parser");
dojo.require("mizomemo.HogeHoge");

dojo.addOnLoad(function() {
  var hogehoge = new mizomemo.HogeHoge();
});
// -->
</script>

[1] Dojoのモジュールシステム
投稿者 時刻: 0 件のコメント:
ラベル: ,

2009年5月29日金曜日

dijit.Tooltipを動的に作成する方法

dijit.Tooltipを動的に作成する方法をメモしておきます．

var nodeId = "";
tooltipElement.innerHTML = "test";
var tooltip = new dijit.Tooltip({connectId: [nodeId]}, tooltipElement);
tooltip.startup();

nodeIdは，ツールチップの対象となるノードのIDです．このノードをポイントすると，ツールチップが表示されます．
tooltipElemenは，ツールチップ本体です．
connectIdには，ツールチップの対象となるノードのIDを収めた配列を指定しないとうまく表示されません．

connectIdの指定方法には，まんまとはまってしまったのですが，ページ[1]のとおりにするとうまく解決しました．感謝です．

[1] [solved] dijit.Tooltip doesn't work in 1.0 ???
投稿者 時刻: 0 件のコメント:
ラベル:

2009年5月10日日曜日

JavaScriptにおいてCSSのプロパティの設定ができない問題

CSSのプロパティに数値が設定できないという問題に遭遇しました．

var element = document.createElement("div");
element.style.width = 100;
element.style.height = 100;

その問題とは，上記のように要素の幅と高さに数値を設定しようとしてもできないというものです．

半日つぶした結果，それらの数値に単位をつけていないことが原因（FireFoxの問題みたい）だということがわかりました．

そういうわけで，上記のコードを下記のように修正すると，思った通りの結果になります．

var element = document.createElement("div");
element.style.width = 100 + "px";
element.style.height = 100 + "px";

[1] FireFoxの標準モードでは、エレメントのstyle.width,heightに数値での設定が出来ない, http://d.hatena.ne.jp/onozaty/20060729/p2
投稿者 時刻: 0 件のコメント:
ラベル:

2009年5月8日金曜日

JavaScriptで実数を整数に変換する方法

JavaScriptで実数を整数に変換する方法をメモしておきます．

var integer = Math.ceil(realNumber); // 切り上げ
var integer = Math.floor(realNumber); // 切り捨て
投稿者 時刻: 0 件のコメント:
ラベル:

2009年4月9日木曜日

JavaScriptで数値を文字列に変換する方法

JavaScriptで数値を文字列に変換する方法をメモしておきます．

var string = new String(1);
投稿者 時刻: 0 件のコメント:
ラベル:

2009年3月8日日曜日

JavaScriptからWordPressへコメントを投稿する方法

JavaScript から WordPress へコメントを投稿する方法をメモしておきます．
  • XML-RPC には，JavaScript のライブラリである Mimic を使用
  • コメントの投稿には，WordPress独自のAPIである wp.newComment を使用
  • wp.newComment のパラメータは，ブログID，ユーザ名，パスワード，エントリID，コメントに関する情報(配列ではなく，オブジェクト)

コードで記すと以下のようになります．

var comment = new Object();
comment.content = "コメント";
var request = new XmlRpcRequest(url, 'wp.newComment');
request.addParam("ブログID");
request.addParam("ユーザ名");
request.addParam("パスワード");
request.addParam("エントリID");
request.addParam(comment);
var response = request.send();

[1] Mimic
http://mimic-xmlrpc.sourceforge.net/
[2] wp.newComment
http://codex.wordpress.org/XML-RPC_wp#wp.newComment
投稿者 時刻: 0 件のコメント:
ラベル: , ,

2008年12月26日金曜日

DojoでHTML要素をドラッグアンドドロップする方法

Dojoを使ってHTML要素をドラッグアンドドロップする方法をメモしておきます．

<script type="text/javascript">
dojo.require("dojo.dnd.Moveable");
dojo.addOnLoad(function() {
  var movable = new dojo.dnd.Moveable(dojo.byId("movable"));
});
</script>
  :
<div id="movable">...</div>
  :

[1] dojoライブラリでドラッグ＆ドロップ！, http://kanamehackday.blog17.fc2.com/blog-entry-120.html
投稿者 時刻: 0 件のコメント:
ラベル: ,

2008年11月8日土曜日

JavaScriptで選択範囲にある文字列を取得する方法

JavaScriptで選択範囲にある文字列を取得する方法をメモしておきます．
ブラウザによって方法が違うみたいですね．
Internet Explorer
document.selection.createRange().text;
Mozilla Firefox
document.getSelection();
window.getSelection();
Safari
window.getSelection();
Opera
document.getSelection();
JavaScript における選択範囲文字列取得の動向
http://wannabe.sweet-smile.org/ent/eid105.htm
投稿者 時刻: 0 件のコメント:
ラベル:

2008年5月21日水曜日

JavaScriptでスライドショー

JavaScriptでスライドショーを作成するライブラリを探しています．
今のところ見つけているライブラリは以下の3つです．

1.Slideshow
2.FrogJS
3.JonDesign's Smooth SlideShow

今回必要なのは，ぱちぱちと瞬時に切り替わるものなので，3のライブラリを使おうかなとおもっています．
投稿者 時刻: 0 件のコメント:
ラベル:
登録: 投稿 (Atom)