タグ

JavaScriptとusabilityに関するpopup-desktopのブックマーク (6)

  • スムーススクロールは音声ブラウザで確認すること。 - Trans

    スムーススクロールを実装する際は音声ブラウザでの読み上げを確認しておいたほうがよいようです。 jQueryなどのスムーススクロール たまに見かけるjQueryのモジュールでページ最下部からページの最上部にスムーズにスクロールさせるためのページ内リンクがあります。スクリプトもいろいろと紹介されているので、使っているサイトも多くあります。 ただ、そのうちのいくつかのモジュールでは音声ブラウザでうまく動作しないものがあります。 どういうことかというと、普通のページ内リンクはリンクの文字列(例えば、「ページの最上部へ」)を女性の声などで読み上げているときに、Enterをクリックするとid属性やname属性でマークアップされた任意の場所に飛び、音声ブラウザは自動的にそこから読み上げを再開します。 ただし、スムーススクロールで紐付けられたページ内リンクでEnterをクリックすると音声ブラウザがid属性

    スムーススクロールは音声ブラウザで確認すること。 - Trans
  • [JS]Lightboxのいい点・悪い点

    37 signalsで、Lightboxの是非というか議論がありました。 Been lightboxed lately? 個人的には、スクリプト自体は好きですが、設置するのはどちらかというと否定的です。 もちろん、写真のギャラリーなどにはかっこいいと思います。 とはいえ、当サイトでも画像拡大系のスクリプト(Highslide JS)を使用しています。 例:Highslideの実装ページ 使用している理由は、サイトのレイアウトに依存せず大きい画像(関連画像)が掲載できるためです。 また、背景一面がブラックにならずに、コンテクストが失われにくいためです。 以下に、上記サイトで議論されているそれぞれのいい点・悪い点を列挙してみました。 今度、クライアントに設置の依頼を受けた際にでも、再考しようと思います。 ポップアップウインドウよりいい。 ギャラリーなどには適している。 別ウインドウや別ページに

  • 「Ajaxアプリでもナビゲーションバーで戻りたい!」を叶える、dsHistory登場 | エンタープライズ | マイコミジャーナル

    Ajaxを活用して開発されたWebアプリケーションは、サーバとの通信をWebブラウザのページ読み込み処理とは異なる方法で(非同期で)行うため、基的にWebブラウザのナビゲーションバーでは制御できない。つまり、Ajax機能を活用して再描画された内容は「戻る」ボタンでは戻れないということだ。 これは便利でもあり不便もである。特定の操作においては戻るボタンで戻れた方が扱いやすいこともある。Ajaxアプリケーションにおいてこうした戻るボタンとの関連付けを行うためのライブラリや実装方法はいくつかあるが、ここではAndrew Mattie氏によって公開されたdsHistoryを紹介しておきたい。 Andrew Mattie氏は15日(米国時間)、自身のブログにおいて「Presenting dsHistory: Another Way to Revisit the Past」と題したブログを公開。YU

  • トラックバックがしやすくなる小技 | S i M P L E * S i M P L E

    実装されている方もいらっしゃるかと思いますが・・・の小技。 トラックバックを打つときにはトラックバックURLをコピペして貼り付けることが必要ですが(Auto-Discoveryもありますが)、その際にコピーしやすいように細工しておきましょう。 このブログでもトラックバックURLをクリックするとそれが全選択されるようにしてあります。 ↑ マウスクリックで一発選択。あとはコピーするだけ。 ちょっとしたことですが簡単なJavascriptを仕込むだけですのでよろしければどうぞ。 <input type="text" size="70" id="tb_url" value="http://www.simplexsimple.com/cgi-bin/mt/mt-tb.cgi/3" onClick="document.getElementById('tb_url').select();" /> 追記:

    トラックバックがしやすくなる小技 | S i M P L E * S i M P L E
  • JavaScript / CSS 編 - ラジオボタンの選択項目によりテキストボックスを無効にする - futomi's CGI Cafe

    セレクトメニューやラジオボタンで選択させ、ある項目を選択した場合には、次の項目を無効(入力・選択不可)にしたいことはあるでしょう。次の例を試してみてください。 有効  無効  当初、ラジオボタンはどちらも選択されておりませんね。この状態では、テキストボックスは入力可能です。次に「無効」をチェックすると、隣のテキストボックスはグレーになり入力できなくなりますね。そして、「有効」にチェックを入れると、テキストボックスは白色に変わり入力できるようになります。これは、JavaScriptCSS を組み合わせて実現します。それでは、実現方法をご紹介しますね。 まずは、上のフォームの HTML を見てください。次のようになっています。 <body onload="radioChange()"> ・ ・ ・ <form name="form1"> <input type="radio" nam

  • ノークリックリンク | 秋元@サイボウズラボ・プログラマー・ブログ

    ノーク・リック・リンク? ノー・クリックリン・ク? ちがう、ノー no クリック click リンク link だ。 このページ No Click Links に行って、最初のリンクにマウスカーソルを置いてみてほしい。Javascript が on になっていれば、通常のブラウジングとちょっと違った動きが起こるはずだ。 この効果は、リンク先ページで公開されている Javascript を、動作を変えたいリンクタグより後ろの方で読み込むだけで追加される。 この Javascript のやっているのは、自身のロード時、ページ内の全部の <a> タグに、「1秒マウスを置いたらリンクをフェードしてリンク先へジャンプ」という処理を追加すること。これで、リンク上にマウスを置くことでジャンプするようになる。 じつは、同様のクリックしないユーザインタフェースを Flash で追求したものは前からある。do

  • 1