タグ

JavaScript Tipsに関するedo_m18のブックマーク (15)

  • IT戦記 - 一行で IE の JavaScript を高速化する方法

    以下の一行をすべての JavaScript の前に読み込む /*@cc_on _d=document;eval('var document=_d')@*/ この一行を読み込むことによって IE での document へのアクセスが 5 倍速くなります。 たとえば 以下のように、読み込む前と読み込んだ後を比較してみます。 // Before var date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date - date); // 643 /*@cc_on _d=document;eval('var document=_d')@*/ // After date = new Date; for (var i = 0; i < 100000; i++) document; alert(new Date -

    IT戦記 - 一行で IE の JavaScript を高速化する方法
    edo_m18
    edo_m18 2009/11/02
    Ajaxばりばり、みたいなサイトじゃないとあんまし意味ないのかな? でも覚えておこう。
  • 根岸村便り

    根岸村便り

    edo_m18
    edo_m18 2009/10/07
    そうそう、これ結構めんどくさかった。特に、セレクトボックスで移動をするようなサイトで、かつ選択決定時
  • javascript - でも全角半角変換 : 404 Blog Not Found

    2009年06月06日15:30 カテゴリLightweight Languages javascript - でも全角半角変換 ぐぐっても、変換コードがありそうでなかったのでついでに。 404 Blog Not Found:perl - で全角半角変換をモダンに行う Demo 全角 半角 実装 見ての通り、けれんみのないやり方をしています。 (function(){ var zenkaku = ['。', '、', '「', '」', '・', 'ー', 'ァ', 'ア', 'ィ', 'イ', 'ゥ', 'ウ', 'ェ', 'エ', 'ォ', 'オ', 'カ', 'ガ', 'キ', 'ギ', 'ク', 'グ', 'ケ', 'ゲ', 'コ', 'ゴ', 'サ', 'ザ', 'シ', 'ジ', 'ス', 'ズ', 'セ', 'ゼ', 'ソ', 'ゾ', 'タ', 'ダ', 'チ', 'ヂ',

    javascript - でも全角半角変換 : 404 Blog Not Found
  • jQueryを使う際の25個Tips | hayasaka修行ブログ~裏目人生脱却計画~

    mprove your jQuery - 25 excellent tips jQueryを利用する際の25のTipsを見つけたので紹介します。 ちょっと長いですが、かなりいいです。 google jsapiを利用しましょう <script src="http://www.google.com/jsapi"></script> <script type="text/javascript"> // Load jQuery google.load("jquery", "1.2.6"); google.setOnLoadCallback(function() { // Your code goes here. }); </script> これを利用すると読み込み時間が高速になります。 チートシートを利用しましょう わからなくなったら、チートシートを利用し、さくっと。 チートシートはこちらがい

  • jQueryとCSSで驚きのページめくり効果を作るサンプル:phpspot開発日誌

    Simple Page Peel Effect with jQuery & CSS jQueryとCSSで驚きのページめくり効果を作るサンプル。 利用者に対して驚きを与えるだけでなく、スペースも有効に使える便利なサンプルが公開されていました。 綺麗なアニメーションをするも、Flashは使っておらず、jQueryとCSSで表現されているところが凄くてそのテクニックにも注目。 以下のようなUIがあります。 右上のめくったところにカーソルを合わせるとペローンとページがめくられ、少ないスペースだったのに情報が表示されます。 該当のコードですが、以下のように、jQueryのanimateによって実現されています。 $("#pageflip").hover(function() { //On hover... $("#pageflip img , .msg_block").stop() .animat

    edo_m18
    edo_m18 2009/05/13
    ちょっとした演出に。
  • http://okyuu.com/ja/tips/6282

  • JavaScript でくるくる CAPTCHA を実装してみる - IT戦記

    あっきーパパが Google の新しい CATCHA の論文を紹介してたので グルグル回すグーグルの新CAPTCHA特許 | 秋元@サイボウズラボ・プログラマー・ブログ 脊髄反射で作ってみた (UI の部分だけですが;;;) http://amachang.sakura.ne.jp/misc/kurukuru/(IE では動きません) jQuery UI と canvas を使ってます。初めて使いましたが、いいですね、 jQuery UI。 (追記)せっかくなのでソースコードの解説 // 初期値の設定 // prev_value は最後に設定された値の保持用 last_value のほうが良かったかも var start_value = Math.PI, prev_value = start_value; // 回転用イメージオブジェクト var img = new Image; // i

    JavaScript でくるくる CAPTCHA を実装してみる - IT戦記
    edo_m18
    edo_m18 2009/04/21
    Canvasを使ったテクニック。Canvasって使うときくるんかな・・。
  • IE8 で実装された Selectors API とは何か? - IT戦記

    はじめに IE8 には Selectors API という新しい仕様が実装されました。 ということで、今後 DOM 操作 API の主流になるであろう Selectors API についてまとめておきます。 Selectors API が使えるブラウザ 2008 年 3 月 6 日現在の一覧 WebKit Build Archives | WebKit (開発版の Safari) Windows | Official Site for Microsoft Windows 10 Home & Pro OS, laptops, PCs, tablets & more (IE8 の Beta 版) Selectors API とは Selectors API とは W3C で定義された仕様です。詳細に関してはこちらをどうぞ 簡単に説明すると getElementsByTagName や getE

    IE8 で実装された Selectors API とは何か? - IT戦記
  • Enjoy×Study - ブラウザのスクロールバーで隠れている領域を含むサイズを取得する方法。

    昨日のエントリに引き続き、今度はスクロールバーで隠れている領域を含むサイズを取得するためのプロパティをまとめてみました。 Enjoy×Study - ブラウザの表示領域のサイズを取得する方法。 調査したのは、下記のプロパティです。 window.innerWidth window.innerHeight document.body.scrollWidth document.body.scrollHeight document.body.offsetWidth document.body.offsetHeight document.body.clientWidth document.body.clientHeight document.documentElement.scrollWidth document.documentElement.scrollHeight document.docu

    Enjoy×Study - ブラウザのスクロールバーで隠れている領域を含むサイズを取得する方法。
    edo_m18
    edo_m18 2009/01/05
    ブラウザ全体の領域や、表示領域の取得など。
  • Javascriptでイベントハンドラのコールバック関数に引数を渡す - yummy-yummy

    javascriptでゴリゴリコードを書いていると、最近のライブラリではコールバック関数を渡すのがけっこう日常茶飯事なようで、コールバック関数を渡すのはいいが、その関数に引数を渡してあげたい!!ってことがよくあるのですよ。 今までなんとか引数は諦めてしのいでたけど、どうも納得がいかないんで調べてみた。 例えばとあるボタンのイベントハンドラで、クリックした際にhogeというfunctionが実行されるようにしたいってな場合は、こんな感じで書きます。 var hoge = function(evt) { alert("hogehoge" + evt); } btn3 = document.getElementById("btn3"); btn3.addEventListener("click", hoge, true); しかしこの「addEventListener」に引数を渡したくて、こんな

    Javascriptでイベントハンドラのコールバック関数に引数を渡す - yummy-yummy
    edo_m18
    edo_m18 2008/12/26
    これこれ! 前からやりたかったんだよなー。 これで色々解決できそうだ。
  • Programming Magic is under construction

    Thank you for being patient. We are doing some work on the site and will be back shortly.

    Programming Magic is under construction
    edo_m18
    edo_m18 2008/12/26
    ドラッグの移動などで、テキストが選択されてしまうのを防ぐ。
  • Windowの下までスクロールされたことを検出する - リトルプログラマーの日記

    AutoPagerizeのようなことを実現するために、Windowの下までスクロールされたことを検出するJavaScriptを調べてみた。 意外と苦労したのでメモ。 ソース // 垂直スクロール量を取得する var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; // 表示領域の高さを取得する var clientHeight = document.body.clientHeight; // スクロールバーで隠れた領域を含むコンテンツ領域の高さを取得する var scrollHeight = document.body.scrollHeight; // コンテンツ領域の底までの残り領域 var remain = scrollHeight - clientHeight - scrollTop

    Windowの下までスクロールされたことを検出する - リトルプログラマーの日記
    edo_m18
    edo_m18 2008/12/19
    Javascriptでコンテンツの高さ(隠れた部分含む)の取得方法について。 リンク先に表示領域などの取得の方法もあり
  • ページ移動の前に確認をする、onbeforeunloadサンプル:phpspot開発日誌

    ページ遷移前に確認をする、onbeforeunload - 実用 windowのonbeforeunloadハンドラで、Event#returnValueに値を入れると、ページ遷移直前にユーザーに確認ダイアログを表示することができる(んだって)。ネタとしては古いかもしれませんが、ページ移動時にダイアログで確認する際のonbeforeloadイベントの使い方。 ページ移動時の確認ダイアログをどうやるんだったか、うろ覚えで、ちょっと調べるのに手間取ったのでメモ。 次のように書いておけば、ページ移動時に確認ダイアログを表示して移動するかどうかを確認できます。 window.onbeforeunload = function(event){ event = event || window.event; event.returnValue = ' ページ移動時の確認文言 '; } Firefox2と

    edo_m18
    edo_m18 2008/04/28
    ページ移動時の処理。
  • JavaScriptの関数オブジェクトを完璧に理解する:phpspot開発日誌

    JavaScriptの関数オブジェクトを完璧に理解する - builder by ZDNet Japan JavaScript関数の実体は、Functionクラスのオブジェクトです。今回はFunctionクラスの機能を網羅的に解説します。 JavaScriptの関数オブジェクトを完璧に理解する、という builder by ZDNet JP の記事。 Function の機能が網羅されていて、JavaScriptをプログラムに使うという人でも知らないような内容が載っていて勉強になります。 Functionクラスのcall/applyについてと使い方 関数のlengthプロパティで引数の数確認 関数のいろいろな定義の方法 引数としてつかえるargumentsオブジェクト JavaScriptはなかなか奥が深いですね。 関連ページ JavaScriptist - JavaScript入門 Ja

    edo_m18
    edo_m18 2008/04/16
    関数など、Javascriptについて深く考察していて、知らない、でも知ってたら得しそうなサイト。「あとで」
  • JavaScriptでIEかどうかをたったの1行で判別する方法:phpspot開発日誌

    Dean Edwards: Sniff! My current frog exaggerator of choice JavaScriptでIEかどうかをたったの1行で判別する方法。 なんと、次の1行だけで、isMSIE 変数に、IEで見れば true 、そうでなければ false を代入することが出来ます。 var isMSIE = /*@cc_on!@*/false; 次のサンプルコードで確認しました。 <html> <script language="javascript"> var isMSIE = /*@cc_on!@*/false; if (isMSIE) { alert('IE!'); } else { alert('not IE!'); } </script> <body> </body> </html> IEであれば IE! を alert し、そうでなければ not I

    edo_m18
    edo_m18 2008/04/03
    Javascriptでブラウザ判別をする際に重宝しそう。
  • 1