<< Prev Page Next Page >>

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


ページ内リンクでスクロールする表現試案

ページ内リンクで「パッ」と切り替わった時何が起きたかわからない、という話はたしかにあるよね。

で、こちら様は「点滅させてみよう」というのを作っておられます。

「スクロール」 っていう動作以外で、画面が移動したことを視覚的にわからせる方法として、ページ内リンクをクリック (タップ) したときに、画面を一瞬点滅させたら、なんか切り替わったなって思わせられないかなと思って
ページ内リンクはスムーズスクロールしなくても一瞬点滅すればいいんじゃないかという実験 | WWW WATCH

僕も僕も作ってみるよ!僕はページ内で遷移したことがわかったほうがいいからスムーズスクロール派なんだけど、スムーズスクロールだと凄く長いページのときにどうしてもズルズルズルズルーっと長くスクロールするのがかっこ悪い。

というわけで、とても長い距離をスクロールするときは途中を飛ばしてみた。



ソースコード


スポンサーサイト

jquery.countdownつくった

JavaScriptで画面上に数字を表示してカウントダウンするやつが見つからなかったのでぱぱーっとつくりました。
特筆すべき点は…まあ、ないです。
使うほうのコードはこんな感じ。

$.countdown({ count: 5, message: 'シャットダウンしてよろしいですか?', completed: function() { alert('BooBoo.'); }, canceled: function() { alert('キャンセルされました'); } });

デモ

Githubはこちら

[GitHub] jquery.countdown


GMailのToDoリストの高さを変えるブックマークレット

GMailのToDoリスト便利ですよね。
でも大きい画面で見ると、ちょっと高さが足りなくてもったいない感じです。

そこでこのブックマークレット。
TallToDo
↑このリンクをブックマーク

中身はこんだけです。


javascript:(function(){
var i=document.getElementById('tasksiframe');
i.parentElement.style.height='732px';
i.contentDocument.getElementsByClassName('Ed')[0].style.height='700px';
})();


Have fun!


タグの閉じ忘れツールをバージョンアップ

HTML内タグの閉じ忘れをチェックするツール[ブックマークレット] - とっくりばーをサーバー引っ越しがてらバージョンアップですよ。scriptタグとHTMLコメントを無視できるようになりました。なったはず。

各種ブラウザで動作チェックをしてて、Chromeが超速くてびっくりした。体感でChrome>>Firefox>IE9って感じ。

Now computingを表示するひまもなく結果が表示されちゃうってすごい。

で、でも、Firefoxのほうが痒いところに手が届いて便利なんだからっ(震え声)


jQueryイディオム:テーブルの行クリックでチェックボックスにチェック入れる

行ごとクリッカブルにするというのをもう少し改善?してみました。全然知らない人にツッコミいれてすみません。はてブで新着に出てたのでつい。

jQueryでテーブルの行ごとクリックして チェックボックスにチェック出来るよう にするTipsです。ユーザーがデータを 見ながらフォームを送信する際に、分か りやすくしてあげよう、という目的です。 行ごとクリッカブルにする、みたいな感じ。 jQueryでテーブルの行ごとクリックしてチェックボックスにチェックを入れられるようにする - かちびと. net
Chrome Google提供の高速ブラウザ。エクステンション豊富。 ★★★★★
Firefox 人気の火狐。アドオンが魅力的過ぎ ★★★★★
Safari Mac標準。iPhoneの登場でシェアは伸びるのか? ★★★★☆
Opera 目立たないけど実は高性能。もうちょい人気出てもいい ★★★★☆

改善点は以下です。

  • 「find()」メソッドと「:checkbox」セレクタ便利
  • 「hover(over,out)」メソッド便利
  • チェックボックスをクリックしてもちゃんと選択できるよ
  • どうせなので選択状態を行全体の色で表現

こういうスクリプトと

$(function() {
  $('.data tr').hover(function() {
    $(this).addClass('hover_tr');
  }, function() {
    $(this).removeClass('hover_tr');
  }).click(function(evt) {
    var $t = $(this);
    var chk = $t.find(':checkbox')[0];
    if (evt.target != chk) {
      chk.checked = !chk.checked;
    }
    if (chk.checked) {
      $t.addClass('checked_tr');
    } else {
      $t.removeClass('checked_tr');
    }
  });
});

こういうスタイルシートで実現しています。

.main_txt .data {
  border-collapse: collapse;
}
.main_txt .data td {
  border:1px solid black;
  padding: 4px 10px;
}
.main_txt .data .hover_tr td {
  background-color: #f0f0f0;
  color: #333;
}
.main_txt .data .checked_tr td {
  background-color: #0033aa;
  color: white;
  border:1px solid white;
}

いじょ!


HTMLのお行儀チェック

タグ対応チェックブックマークレットの姉妹品です。 HTMLのお行儀(を半端に)チェックします。

ちゃんとやりたい向きはanother htmllintとかでやるといいんだと思います。

このブックマークレットでは、以下の問題だけを発見します。

  • checkboxやradioに対してlabel要素がない
  • inpu type="text"に対してmaxlengthがない
  • styleではなく属性で幅、高さ指定をしている
  • styleではなく属性で背景が設定されている
  • fontタグ
テスト用

大丈夫じゃないradio
here is!
ここは大丈夫
fontタグで表現している ←altがない
このリンクをブックマーク


計量カップ換算器

単位換算
対象物
重量 g
容積換算  小さじ(5cc) 杯   大さじ(15cc) 杯   カップ(200cc) 

対象物、重量、換算する器を選択すると杯数を計算します。


tenjin.web/5に行ってきた

tenjin.web/5に参加してきた。ええ、久しぶりの参加です。

今回のお題はJavaScriptでRIAなMVCパターンということで、簡単なJavaScriptプログラムも作りながらーのいろいろ脱線しながらーの、楽しかった。

brazilの人のお手本をざっと見つつ、試しにお手本を使わずイチから全部作ってみたらModel部分が結局同じような感じになっちゃったりして、それはそれで教育的な何かを示唆しているような

さて、今日作ったやつを晒しますよ。帰ってきてからもう少し手を入れて、フワッヒュイッと動くようにだけしました。jQueryって便利やね。

JavaScriptでのMVCパターンのお勉強なので、ページ遷移とか通信とか無し。あくまでもメモリ上のModelに対する変更をトリガーとしてViewを更新する、というお話。うん、こういうのあらためて作ると最初にかける一手間はやはり大事なんだよねって再確認。ちゃんとMVCのカタチを意識して作ると楽が出来る。

細かいことを言い出すときりがないというか、たとえば、Modelを変更したときにViewに更新を促すために、ModelのほうにViewのメソッドを呼ぶコードを書いていいのか、とか、JSONで得られたデータをViewにくっつけるべきなのか、とか、教科書的に正しくやろうとすればこのコードだといろんなアラがある。

で、教科書的な正しさ(適切さ)と、実装の手間をできるだけ減らすってことと、作るアプリケーションをどの程度育てていく必要があるかの見極めのバランスで、適当なところで手を打たないとこんな仕事はやってられないのだよね。

もし、ModelとViewがもう、複雑なのがたくさんあるようなことになっちゃうようだったら、Observerパターンみたいなのを実装したほうがいい(=トータルで楽)だろうし、今回作ったコレぐらいだったら、いいじゃんModelの中でViewを呼んじゃえば。と、僕は思う。

あと、C#みたいに、言語仕様の中でイベントハンドリングを面倒見てくれてる場合はサクッと乗っかれば良いんだと思う。


» Read More...

jqueryイディオム:ページ内の全てのリンクを一時的に無効にする

ブログのプレビュー画面をすごくお手軽に作る場合とか、実物のページをそのまま表示させつつ、リンクだけを全て無効にする、みたいなことでいい場合に使います。

$('a[href]').click(function(e){e.preventDefault()}).attr('href','#');

はい一行。それでは実際に試してみましょう。



あとは、ボタンを無効にしたりとかにも使えます。
$('input:button,button').attr('disabled', true);


n進そろばん

n進数の学習にすこーしだけ役立つそろばんを作ったよ。



上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。