タグ

JavaScriptとJavascriptに関するtotonのブックマーク (766)

  • Flash上にプルダウンメニューを重ねる: Good Sleep|Webデザイナーの日々のスキマ

    swf上にHTML要素をレイヤー表示する際の解決策 少し前に「JavaScriptでプルダウンメニュー(DropDownMenu.js)」という記事をこのブログで紹介してみたトコロ、結構なアクセスがあったので、気をよくしての第2弾です。 この前かかわった仕事で、JavaScriptのプルダウンメニューの下にFlashコンテンツを表示したいというページがあった。いろいろと試してみるとFirefoxなどでは、Flash上で画面が書き変わってしまうと、最上位面に表示されてしまい、その時にプルダウンメニューが表示されているとFlashの下に隠れてしまうコトが分かった。 何とかならないかと思っていたのだが、解決作が見つからず、そのページはFlashを使わない事にしてもらった。…しかし、開発の人間としては何か解決策がないだろうかと、その仕事が終わった後もいろいろを眺めていた。 するとやっぱりあるんで

    Flash上にプルダウンメニューを重ねる: Good Sleep|Webデザイナーの日々のスキマ
    toton
    toton 2008/10/03
    z-index wmode=transparent
  • JavaScript addEventListener() - とみぞーノート

    仕様書を読んでもわかりにくい、addEventListener()の第3引数useCaptureの意味についてのメモ。 addEventListener()はIEでは未実装なので関係なし。 以下はFireFoxで確認。 useCaptureの意味 通常登録したイベントハンドラ(*1)はイベント伝搬のバブリングフェーズで呼ばれる。このため、DOM Treeの下の方のエレメントからイベントハンドラが順番に呼ばれる。 useCaptureをtrueにしてイベントハンドラを登録すると、キャプチャフェーズでイベントハンドラが呼ばれるようになる。このため、その他のイベントハンドラに先だって呼び出されるようになる。 (*1) 以下のものが含まれる。 DOMエレメントのプロパティに設定したイベントハンドラ(element.onmousedown = handler) HTMLタグに埋め込んだイベントハンド

    toton
    toton 2008/10/03
    addEventListenerのuseCapture イベントの伝搬、バブリングフェーズ、キャプチャフェーズ、サンプル
  • JavaScriptでクッキーを超簡単に使うライブラリ「Cookie Manager」:phpspot開発日誌

    PHPから使えるprototype.jsとscript.aculo.usのラッパークラス「Projax」 次の記事 ≫:WEBマスター/WEB開発者、御用達のサイトリンク集 Cookie Manager | Javascript Code | All Things Webby Initialisation of a CookieManager object: JavaScriptでクッキーを超簡単に使うライブラリ「Cookie Manager」。 JavaScriptでクッキーを扱うのって、いちいちクッキーをパースして面倒だ、と思っていた人は多いのではないでしょうか? CookieManager.jsを使えば、phpcookieを使うときみたいに簡単にcookieが使えます。 prototype.jsをベースとしていて、サンプルのコードは次のような感じになります。 サンプルはクッキーを使

    toton
    toton 2008/10/03
    cookie
  • はじめてのiGoogleガジェット開発#1

    どうも、「公開APIを利用したサンプルサイトを作っていくよ」管理人のZAPAです。 今日は、マッシュアップツールを作るための第一歩として、「iGoogleガジェット」の開発方法を解説します。 「Googleからのプレゼントが届いたよー!!!」に登場した、iGoogleガジェット。 「ガジェット大好き!」って人も、「これからの時代はガジェットだ!」って人も、「ガジェットって何だろう?」って人も、これからの時代は自分でガジェットを作れるとカッコイイと思うよ!!iGoogleガジェットに興味を持っても、開発情報を調べるのはなかなか大変です。 公式サイトに重要な情報はたくさん載っていますが、コンパクトにiGoogleガジェット開発方法を理解できるページがありませんでした。 公式ドキュメントをマジメに読むと30分以上かかり、やる気がそがれてしまいますので、ここに「iGoogleガジェット開発方法」を

    はじめてのiGoogleガジェット開発#1
  • [JS]背景やテキストの色を少しずつ変更するスクリプト -fader.js

    leigeberのエントリーから、背景やテキストやボーダーの色を、指定色から指定色に少しずつ変更するスクリプトの紹介です。 JavaScript Color Fading Script デモページ デモには、下記の4つがあります。 ホバーすると、背景の色をフェード。 クリックすると、背景の色をフェード。 ホバーすると、テキストの色をフェード。 ホバーすると、ボーダーの色をフェード。 fader.jsの動作環境は、IE6/IE7, Firefox, Opera and Safariとなっており、jQueryやPrototypeなどの他のスクリプトに依存せずに動作する軽量(約2KB)のスクリプトです。 実装も簡単で、「fader.js」を外部スクリプトとして配置し、下記のように指定します。 <textarea name="code" class="html" cols="60" rows="5

  • jQuery

    What is jQuery? jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

  • Handling Keyboard Shortcuts in JavaScript

    Despite the many JavaScript libraries that are available today, I cannot find one that makes it easy to add keyboard shortcuts(or accelerators) to your javascript app. This is because keyboard shortcuts where only used in JavaScript games - no serious web application used keyboard shortcuts to navigate around its interface. But Google apps like Google Reader and Gmail changed that. So, I have crea

    toton
    toton 2008/09/30
    キーボードショートカット実装用JavaScriptライブラリ
  • document.lazy_writer

    特定のscript中に含まれるdocument.writeを上書きして、遅延描画にすることができます。 document.writeを使う広告配信スクリプトや、ブログパーツなどの挙動を置き換えることが出来ます。 外部サーバーから読み込むスクリプトをページ最後部に記述することでページレンダリングを妨げなくなります。 このページはこんな感じになってます。 var adsense_url = 'http://pagead2.googlesyndication.com/pagead/show_ads.js'; document.lazy_writer(adsense_url, function(str){ var id = "adsense_" + this.script_count; document.getElementById(id).innerHTML = str; }, {delay :

    toton
    toton 2008/09/30
    特定のscript中に含まれるdocument.writeを上書きして、遅延描画にすることができます。
  • 戻るボタンとonloadイベント - Pixel Pedals of Tomakomai

    ブラウザの戻るボタン(history.back)で戻った時にonloadイベントが走るかどうかは、ブラウザによって違うようです。 まず、IEですが、戻るボタンのときもonloadイベントが走ります。よって、なんにも心配要らないです。 次に、Firefoxではbfcacheと言う機能があり、以下の事情になってます。 ユーザがキャッシュされたページにナビゲートしたとき、インラインスクリプトと onload ハンドラは実行されません。 (中略) ユーザがそのページから去るナビゲートをするときに実行されるようにしたい動作があるものの、この新しいキャッシュ機能を生かしたく、さらにそれゆえに unload ハンドラを使用したくないという場合は、新しい pagehide イベントを使用します。 Using Firefox 1.5 caching と言うことで、Firefoxのことを考えるのなら、onpa

    戻るボタンとonloadイベント - Pixel Pedals of Tomakomai
    toton
    toton 2008/09/30
    unloadイベントを消してsafariでもonloadを有効に
  • フィールド間を自動でタブ移動してくれる入力補助JSライブラリ「Autotab」:phpspot開発日誌

    Autotab: jQuery auto-tabbing and filter plugin | Matthew Miller フィールド間を自動でタブ移動してくれる入力補助JSライブラリ「Autotab」。 電話番号入力欄や、郵便番号入力欄で、フィールドが複数に分かれている場合、桁数が決まっているのであれば、次のフィールドに自動で移ってくれた方が使い勝手はよくなります。 Tabで移動することは出来ますが、その処理を知らない場合はマウスで移動する人なんかもいそうですし、打つキー数も多くなります。 そこで、オンラインバンキングなどではよくある、規定の桁を入力した後は次のフィールドに自動で移ってくれるJSライブラリがjQueryベースで開発され、公開されています。 実装は簡単で、まず必要なJSを読み込みます。 <script type="text/javascript" src="jquery

  • [JS]注目させたい箇所にユーザーの視線を集めるスクリプト -Seek Attention

    Seek Attentionは、画面をグレーアウトさせ、注目させたい箇所にハイライトやアニメーション効果を利用して、ユーザーの視線を集めるスクリプトです。 Seek Attention 注目させたい箇所がブラウザの表示領域外の時は、表示領域内に自動でスクロールされます。 オプションでは、グレーアウト箇所の指定(全体・一部)・色・不透明度・フェードのタイミングが調整可能で、ハイライト箇所のアニメーションの有無・領域のpaddingなども設定することができます。 Seek AttentionはjQueryのプラグインのため、動作にはjquery.jsが必要です。

    toton
    toton 2008/09/30
    Seek Attentionは、画面をグレーアウトさせ、注目させたい箇所にハイライトやアニメーション効果を利用して、ユーザーの視線を集めるスクリプト
  • Flip! A jQuery plugin

    Flip is a jQuery plugin to apply flip animation to any element.0.4.1 Fixed some regression in Chrome and Safari 0.4 Fixed some bugs with transparent color. Now Flip! works on non-white backgrounds! 0.3 Added the content setting: now you can define the next content of your Flip!box. 0.2 Fixed jQuery chainability and buggy innerText rendering (Thanks xNephilimx for your tips!) 0.1 Kick off

    toton
    toton 2008/09/30
    フリップ、回転、3D
  • 特集:jquery.jsを読み解く|gihyo.jp … 技術評論社

    運営元のロゴ Copyright © 2007-2025 All Rights Reserved by Gijutsu-Hyoron Co., Ltd. ページ内容の全部あるいは一部を無断で利用することを禁止します⁠。個別にライセンスが設定されている記事等はそのライセンスに従います。

    特集:jquery.jsを読み解く|gihyo.jp … 技術評論社
    toton
    toton 2008/09/29
    コードリーディング
  • script.aculo.usを読み解く 記事一覧 | gihyo.jp

    第6回effects.js(後編)基礎エフェクトの組み合わせからなる15種類の複合エフェクト 源馬照明 2008-04-11

    script.aculo.usを読み解く 記事一覧 | gihyo.jp
    toton
    toton 2008/09/29
    コードリーディング
  • xml2json.cgi - ドメインを超えてXMLを読みこむ [tech.nitoyon.com]

    Ajax の弱点は別ドメインのページを取得できないこと。そんな制限を取っ払って、別ドメインの XML を取得できる CGI を作ってみました。 使い方 XMLファイルの例: <?xml version="1.0" encoding="UTF-8" standalone="yes"?> <items> <item> <jcity>千代田区</jcity> <jlocal>千代田</jlocal> <jpref>東京都</jpref> <pref_cd>13</pref_cd> <zip_cd>1000001</zip_cd> </item> </items>

    xml2json.cgi - ドメインを超えてXMLを読みこむ [tech.nitoyon.com]
  • XML を JSON に変換するサービス - ベータ版を公開 :: Drk7jp

    JavaScript 2.0 支援ツール「XML 2 JSON service」って何? XML を JSON に変換するサービスです。この技術を用いることで、 クロスドメイン制限を超えて JSON 形式で XML 形式のデータを利用することが可能となります。 JSON は XML と比較して JavaScript 上で非常に扱いやすいため、コツを掴めば簡単に自分のサイトで利用できます。 既に幾つかのサイトで実装されていますが、不特定多数の方にサービス提供するために負荷対策を施し、XML 2 JSON service ベータサービスを公開することにしました。 最近良く聞く Ajax とは何が違うの? 最近、流行りまくっている Web 2.0 と呼ばれるものの基礎技術の1つとして Ajax があげられます。Ajax は大変便利な技術なのですが、セキュリティの観点から自ドメインへのアクセスしか

    toton
    toton 2008/09/29
    RESTで得られたXMLをJSONに変換するproxy
  • WSHでDOM (Shibuya.js in Kyoto) - てっく煮ブログ

    Shibuya.js in Kyoto にて「WSHでDOM」というタイトルで発表しました。開発に一週間、プレゼン作りに一週間かけた渾身のネタです。プレゼン作りにあたっては、2ページ目のイメージ写真を撮るために祇園祭に出かけたのが楽しかったです。資料に使ったフォントは「アニトM-教漢(無料版)」です。素敵なフォントが比較的自由なライセンスで公開されていて大変ありがたいですね。無料版なので、一部漢字が使えずに文章の変更を余儀なくされましたが、おかげで小学生にも読める分かりやすい資料になりました。ソースコード:http://coderepos.org/share/browser/lang/cplusplus/dom4winui/trunk/srcプレゼン 全画面で見る:http://tech.nitoyon.com/misc/shibuya-js-kyoto/Slide.swfソース:http

    toton
    toton 2008/09/27
    Windows操作がjQueryでできるdom4winui.js
  • http://wedata.net/

    toton
    toton 2008/09/27
    『wedataはSITEINFOなど、誰でも書換えられるデータを保存して利用するためのシステムです。 AutoPagarizeのSITEINFOやそれ系のデータを保存する場所として使えればいいなあと思ってつくりました。』
  • Big Sky :: Windows Scripting HostからjQueryを使う

    ちょっと訳あって、WScriptからjQueryを呼び出す必要があり(嘘です)作ってみました。 これを使うと $.each([1,2,3], function(index, item) { print("foo" + item); }); $.ajax({ type: "GET", url: "http://www.google.co.jp/", async: false, success: function(data) { print(data); } }); こんなソースが実行出来ます。 $.eachなんかは目茶目茶便利なので、使わない手はありません。とりあえず、$.ajaxでgoogle.co.jpのソースが取得出来るくらいは動きます。 以下全体ソース。 // vim:fdm=marker fdl=0 fdc=0 fdo+=jump,search: // vim:fdt=substi

    Big Sky :: Windows Scripting HostからjQueryを使う
    toton
    toton 2008/09/26
    "WScriptからjQueryを呼び出す"
  • Javascriptでブラウザのアクセス履歴を抜く - y-kawazの日記

    JavaScriptを使ってイントラネット内を外から攻撃する方法:Geekなぺーじ を見て、なるほどと思ったので試してみた。 原理としては「あるURLにアクセスしたことがあるかどうかは、そのURLへのリンクの文字色でチェック出来る」というものだ。 というわけで早速デモページを作ってみた。詳細はソース参照。 デモページ ブラウザによってAタグの文字色のデフォルトが異なるのでCSSで固定化しておくのもポイントかも。 チェックする対象のURLはピンポイントでチェックしてやらなければいけないので、ブラウザの履歴をごそっと抜くようなことは出来ない。 チェックするURLを充実させてやれば何かと活用(悪用)が可能な気がする。 ブラウザ履歴チェックをされない為にはJavascriptを無効にするしかないと思われる。

    Javascriptでブラウザのアクセス履歴を抜く - y-kawazの日記