[JS]タブと連動するNext/Previousボタンを設置するスクリプトタブにNext/Previousボタンを設置し、操作を補助するスクリプトをCSS TRICKSから紹介します。 jQuery UI Tabs with Next/Previous demo タブの数が多くなると、タブだけのナビゲーションではマウスをちょっとずつ動かす動作が不便なため、定位置でクリックできるように設計した、とのことです。 スクリプトの実装には、jQueryとjQuery UIが必要となっています。
画像を使わずに角丸を描画する『Liquid Canvas』 – creamu
「ruzee.com」で、HTMLのcanvas要素の中に描画できるJavaScriptライブラリ「Liquid Canvas」が公開されています。 ↑のような背景が作れてしまう、とのことですね。 デモは以下から見られます。 » Demo » basic example ブラウザはFx, IE6, Safari, Chromeでテスト済みとのことですね（ざっくりしていますが）。 ソースがダウンロードできるので、ぜひ見てみてはいかがでしょうか？ » Liquid Canvas ジョリーみたさに「トゥームレイダー 2」を見た。なかなかおもろかったね。でも最近の方がキレがある感じかな。 やること満載で混乱しています。今のサーバが海外からアクセスできない＞＜ので海外に行く前に移行しないといけなくてサーバはあそこにしようかな、とそれでメールサーバーはGoogleAppsを使おうと思ってるけどmxレコ
[JS]jQueryのプラグイン33+1選 -2009年3月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 jquery.scrollable ホイール・クリック・キーボード操作にも対応した、パネルをスクロールする高性能なスクリプト。 Fi
簡単！PHPとjQueryでドラックすればリサイズクリップ出来るスクリプト
なかなか凄いぞ！ jQueryとPHPのモジュールで簡単に動いてしまった。 画像をアップロードして、カットしたいところをドラッグ。 その部分が指定したサイズになってクリップされるという代物。 因みに今回アップロードで使用した画像は美人時計さんのもので、1分おきに美人が現れる時計式ウェブサイトです。これも同時にお勧め。 仕様 必要なものは、PHP4もしくはPHP5。 そしてPHP GD ライブラリがサーバーにインストールされている必要がある。 逆に言えばこれだけクリアしていればものすごく手軽に設置できるという魅力あるスクリプトです。 仕様としては、アップローダーが付いており、そこに画像をアップすると、編集モードになる。 そこで、写真の好きなところをドラックして囲い込みをすればそこが画像としてリサイズできるのです。 ダウンロードは以下 ページ下部にある以下のリンクから。 ダウンロードした後は
[JS]既存のテーブルにソート、ハイライト、分割機能などを追加できるスクリプト
既存のテーブルにソート、ハイライト表示、データ分割、ページネーション機能を追加できる、高性能な超軽量（2.5KB）スクリプトをLeigeberから紹介します。 TinyTable JavaScript Table Sorter demo このスクリプトは、以前紹介した「設置も簡単なテーブルのデータをソートする超軽量のスクリプト」のバージョンアップ版で、主な機能は下記の通りです。 既存のテーブルに簡単に設置が可能。 2.5KBの超軽量スクリプト（他のスクリプトへの依存無し）。 列を交互に自動ハイライト。 選択した行のハイライト。 データの表示件数をコントロール。 分割したデータのページネーションを設置。
現ページのリンクの非アクティブ化にもう面倒なif分岐処理は不要 「CurrentPage.js」を公開:phpspot開発日誌
現ページのリンクの非アクティブ化にもう面倒なif分岐処理は不要 「CurrentPage.js」を公開 2009年03月09日- 現ページのリンクの非アクティブ化にもう面倒なif分岐処理は不要 「CurrentPage.js」を公開しました。 「 トップページ | リンク | 掲示板 」といったナビゲーションメニューがあると思いますが、アクティブな場合に、太字にして<a>を消すっていう処理をphpなどで書いている場合があると思いますが、非常にコードが見づらくなって、メニューが増えるたびに面倒な分岐処理を追記しなければなりませんでした。 （面倒な分岐の例） <?php if ($current_url == "link.php") { ?> <strong>リンク集</strong> <?php } else { ?> <a href="link.php">リンク集</a> <?php }
JavaScriptでびゅんびゅんスライド！ページ切換法 (1/5)
HTMLだけで作ったシンプルなサイトもいいですが、時にはもっと派手なサイトを作りたい、ということ場合もあるでしょう。これまでもこの連載ではさまざまな“小技”を紹介してきましたが、ページ全体を大きく描き換えるには、以前ならFlashが不可欠でした。ところが最近では、JavaScriptとHTMLの組み合わせでも、かなりの表現できるようになり、実際にそうしたWebサイトも増えてきています。 今回はそんなサイトの1つ、「Baltijos prodiuserių grupė」にページ全体の切り換えテクニックを学びたいと思います。 今回のお手本サイト： 『Baltijos prodiuserių grupė』 リトアニアでイベントの企画・制作を手がける企業のコーポレートサイト。会社概要、業務内容、事例紹介の3つのコンテンツと問い合わせフォームからなるシンプルな構成。フルーツや花など、植物の写真と楽器
導入が手軽なGoogleみたいなパスワード強度チェッカーJavaScript
Googleで採用されているパスワードの強度確認チェッカーみたいなものを作ろうぜ！という流れで、『作ってみた』という人が現れた。 パスワードを入力するごとにJavaScriptによってフォームを監視し、ゲージでお知らせしている。 ちょっとした小技として使えそうですね。 ダウンロードは以下からできます ページ下部の方。 設置方法はとても簡単 自分のところにとりあえず設置してみましたがとても簡単です。 http://e0166.com/jq/sample20/ <form id="myform"> <script type="text/javascript" src="pwd_strength.js"></script> <input type="password" id="mypassword" name="mypassword" onkeyup="runPassword(this.valu
日付を、「昨日」とか「何時間前」などに変更できるJavaScript「Pretty Date」:phpspot開発日誌
日付を、「昨日」とか「何時間前」などに変更できるJavaScript「Pretty Date」 2009年03月06日- John Resig - JavaScript Pretty Date 日付を、「昨日」とか「何時間前」などに変更できるJavaScript「Pretty Date」 2008-01-28T20:24:17Z を 2 hours ago に簡単に変換できるみたい。 jQueryと一緒に使えば、$('a').prettyDate() のように簡単に時間を変換できます。 サーバ側で変換するよりも良い点は、setInterval(function(){ $("a").prettyDate(); }, 5000); のようにしてタイマーを作って、リアルタイムに何時間前といった計算ができること。 ページ遷移なしに、この部分が書き換わる＆負荷をクライアント任せに出来るっていうことで
JavaScriptとjQueryでデスクトップアプリに負けない操作性のWebアプリケーションを作る
はじめに 近ごろのブラウザは、パフォーマンスの面でも開発ツールや互換性の面でも大きく向上しています。大部分のWebサイトは依然としてページパラダイムに固執し、自らのコンテンツを新聞や書籍と同じような感じで表現していますが、今日のブラウザは伝統的なデスクトップアプリケーションに引けを取らない高度に対話的なアプリケーションをサポートすることができます。 これまでのアプリケーション開発の歴史では、複雑な対話や高度に視覚的な対話を実現しようとする開発者は、ユーザーのPC上に置かれるデスクトップアプリケーションとして実装するか、Flashのようなブラウザプラグインの上に構築されるアプリケーションとして実装するかの選択を強いられました。今日のJavaScriptは、こうした高度なアプリケーションもサポートできるほど進歩を遂げています。パワフルなJavaScriptライブラリが提供する抽象層は、ブラウザ
Mozilla Re-Mix: Greasemonkeyスクリプトのアップデートを通知してくれるGreasemonkeyスクリプト「Script AutoUpdater」
Firefoxにインストールされているアドオンは、アドオン自体に更新があれば、自動でも手動でも確認が可能で、すぐさま最新版のインストールを行うことができるようになっています。 対して、Greasemonkeyスクリプトの場合、自動アップデートなどは行われず、最新版が気になる場合は自分で配布サイトに行き、上書きインストールなどを行わなくてはなりません。 スクリプトには、非常に単純な機能を持ったものから、かなり高機能なものまでいろいろありますが、これらもアドオンと同じように、日々最新版に置き換えられています。 新機能を使えるようにするためはもちろん、不具合を解消するためにも、きちんとアップデートしておきたいものですね。 このGreasemonkeyスクリプトの更新状況を通知し、すぐさまアップデートを行うことができるGreasemonkeyスクリプトが「Script AutoUpdater」です
[JS]一つの機能に特化したシンプルなJavaScriptのライブラリ集
jQuery, Prototype, MooToolsのように多機能ではなく、一つの機能に特化したシンプルなJavaScirptのライブラリをSmashing Magazineからいくつか紹介します。
jQuery Sparklines
Mouse speed Loading.. Inline 10,8,9,3,5,8,5 line graphs 8,4,0,0,0,0,1,4,4,10,10,10,10,0,0,0,4,6,5,9,10 Bar charts 10,8,9,3,5,8,5 negative values: -3,1,2,0,3,-1 stacked: 0:2,2:4,4:2,4:1 Composite inline 8,4,0,0,0,0,1,4,4,10,10,10,10,0,0,0,4,6,5,9,10 Inline with normal range 8,4,0,0,0,0,1,4,4,10,10,10,10,0,0,0,4,6,5,9,10 Composite bar 4,6,7,7,4,3,2,1,4 Discrete 4,6,7,7,4,3,2,1,4,4,5,6,7,6,6,2,4,5 Di
Firebugで作るGreasemonkeyスクリプト〜入門と実践(From Kanasan.JS) | Blog.37to.net
最終更新日 Wed, 29 Apr 2009 01:29:41 +0900 最後のコメント Sun, 25 Jan 2015 19:08:17 +0900 最後のトラックバック Wed, 11 Mar 2009 15:49:00 +0900 ブックマーク 遅くなりましたが、先日に開催された、Kanasan.JS Greasemonkey チュートリアル読書会のレポートです。 せっかくなので、読書会の内容を元にGreasemonkeyスクリプト作成の「入門」「実践」「Tips」の3本立てでまとめてみたいと思います。 今回の開催はKanasan.JSの主催をkanasanから引き継いで、初めての開催ということもあり、とても緊張しました。 途中までは無難に進んでいたのですが、後半は段取り不足が出てきた感じでした。参加者の方々にはご迷惑をお掛けしました。 Greasemonkey チュートリアル読
Online JavaScript beautifier
End script and style with newline? Support e4x/jsx syntax Use comma-first list style? Detect packers and obfuscators? (unsafe) Preserve inline braces/code blocks? Keep array indentation? Break lines on chained methods? Space before conditional: "if(x)" / "if (x)" Unescape printable chars encoded as \xNN or \uNNNN? Use JSLint-happy formatting tweaks? Indent <head> and <body> sections? Keep indentat
ウェブサイトの制作・検証に役立つブックマークレット集
レイアウト用のグリッドをオーバーレイで表示します。 URLを変更すれば画像の変更可。 Bookmarklet Layout Grid Overlay MRI
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
[JS]パネルをiGoogleのように移動できるスクリプト -Easy Widgets
[JS]一覧表示のレイアウトを切り替えるスクリプト -Easy Display Switch
caraldo.net - it転職 リソースおよび情報
HTMLフォーム上で使えるフリーのスペルチェッカー集:phpspot開発日誌