tableの行と列を固定してスクロール！！Super Tables | バシャログ。
6月に入り、欧州サッカーの移籍情報が気になってしょうがないishidaです。 WEB制作に携わっていると、表組みだらけのWEBサイトの担当に 長い人生に一度や二度はなる（?）と思います。 tableによる表組みは、行や列が増えすぎるとコンテンツからはみ出したりして 見栄えが悪くなりますよね。 そんな迷える子羊たちを助けてくれるjavascriptライブラリ Super Tables を今回ご紹介いたします。 まずは以下のサンプルをご覧くださいませ。 Super Tables サンプルデモ サンプルのような感じで、ヘッダー部分を固定したり、列を固定できます。 Super Tables 設置方法 配布ページよりデータをダウンロードし、利用したいhtmlのhead要素などでファイルを読み込みます。 <link rel="stylesheet" href="superTables.css" typ
JQueryでフィールドにデータを渡したい場合 - OKWAVE
もしかしたら input の value という属性を忘れてますか？ inputのフィールドの値はvalueという属性に格納されます。 例) <input type="text" size="15" maxlength="" name="field1" id="about2" value="初期値を与えるならこう"> よって、キーとして属性名 value を渡します。 $("#about2").attr("value","書き換えました。") JQueryを勉強、ということなので、HTMLやJavascriptの基本はマスターしているものと思ってましたが、 もしまだならHTMLやJavascriptの基本から学ばないと、jqueryを使うのはちょっと厳しいですよ。
ニコニコ動画をHTML5で見るbookmarklet - saiten@blog
性懲りも無くニコニコネタです。 iPadでも結局Flashが搭載されなかったこともあって、最近Flashの代替手段としてHTML5がやけに押されているので、ものは試しでニコニコ動画のFlashプレイヤーをHTML5で構成したプレイヤーに置き換えるbookmarkletを作ってみました。iPhone/iPadのvideoタグの動作がマシになってれば、iPhone/iPad上でも動くかもってな期待込みで。 使い方は、下記のbookmarkletをニコニコ動画の再生ページ(http;//www.nicovideo.jp/watch/*)上で実行するだけです。実行すると標準のFlash製プレイヤーを、HTML5+javascriptで構成したプレイヤーに置き換えます。 javascript:(function(){var e=document.createElement("script");e.s
Opera News
Desktop Opera One updates with new webpage Translator and improved Split Screen July 3rd, 2025 We're introducing a new built-in webpage translator to Opera One following your requests. We're also adding improvements to Split Screen. Mindfulness, Opera Air Opera Air’s redesigned Boosts now smoother, more intuitive June 4th, 2025 Hey all, Today we have another update for Opera Air, our browser built
FirefoxとOperaでword-break:break-allを実現する「wordBreak.js」
FirefoxとOperaでword-break:break-allを実現する「wordBreak.js」 IEやsafari、Google Chromeではword-breakプロパティが実装されていますが、FirefoxやOperaではword-breakプロパティは実装されていません。 そこで、FirefoxとOperaでword-break:break-allを実現するJavaScriptライブラリ「wordBreak.js」を作成しました。 使い方 ダウンロードした「wordBreak.js」をhead要素などで読み込んでください。 <script type="text/javascript" src="./wordBreak.js"></script> word-break:break-allを利用したいtable要素のclass名に「wordBreak」というclass名を追
フォーム要素にうっすらデフォルト値を入れてヒント表示できる「jQuery Form Tips」:phpspot開発日誌
PHPからTwitterを簡単に操作できるPEARパッケージ「Services_Twitter」がアッ... 次の記事 ≫：PHP関数の挙動をちょっと調べたいときに助かる「PHP Functions Online」 jQuery Form Tips Plugin フォーム要素にうっすらデフォルト値を入れてヒント表示できる「jQuery Form Tips」 フォームにデフォルト値を入れておくことで利用者が何をいれていいのか、というのが直感的にわかり、かつスペースもとらないのでよく使われる手法ですが、実装も超簡単にやりたいですね。 jQuery Form Tips を使えば、フォーム要素の title 属性に値を入れておくだけでヒントを自動表示できます。 <p> <label for="i1">Field1</label><br /> <input type="text" name="i1"
Gmailチームが明かすHTMLアプリケーション起動の高速化テクニック TechTalkManiacs
などという煽り気味なタイトルをついつけてしまいたくなる記事がGoogleCodeBlogに掲載されていました。 最初のほうはごく普通にJavaScriptを使ったRIAアプリケーションはどうしても起動が遅くなるため、それをどう減らすか、というテーマにそって書かれています。 方法として挙げられているのは、最初にすべてを読み込まず、モジュール単位で分割して遅延ローディングすること。ただし、それだけだと回線速度が遅く不安定なモバイル環境では問題が生じるためHTML5のキャッシュ機能を利用するといいとのこと。 遅延ローディングのためのさまざまな手法の得失や、例えばユーザーデータを読み込むときには動的ロードしない、というようにユーザーの操作を妨害しないよう留意することなどについても述べられていてそれだけでもノウハウとして十分に有意義なのですが、決め手として最後に出てくる方法がすごいです。 その方法と
JavaScript/時間/時計を表示する（1） - TAG index
<html> <head> <title>TAG index Webサイト</title> <script type="text/javascript"> <!-- function disp(){ var now = new Date(); // （不要な行を削除する） var watch1 = now.toLocaleString(); // ローカル時 var watch2 = now.toGMTString(); // グリニッジ標準時 var watch3 = now.toUTCString(); // 世界標準時 // テキストフィールドにデータを渡す処理（不要な行を削除する） document.form1.field1.value = watch1; // ローカル時 document.form1.field2.value = watch2; // グリニッジ標準時 docu
loadイベント：ページの読み込みが完了したとき
load イベントは HTML ページに含まれる画像やスタイルシートなどすべてのリソースの読み込みが完了した時点で発生するイベントです。 onload プロパティに対してイベントハンドラを設定したり、 addEventListener メソッドの引数として load を指定してイベントリスナーを登録できます。ここでは JavaScript を使って load イベントが発生した場合の処理を記述する方法について解説します。
JavaScriptやCSSの更新時にキャッシュから読ませない
おそらく架空のストーリ プログラマ「プログラムを更新しました」 テスター「いきなりエラーがでますよ！動作確認したんですか！」 プログラマ「え、私のところでは動くけど…、キャッシュクリアしました？」 テスター「キャッシュをクリアしたらエラーがでなくなりました」 テスター「でも、ユーザ全員にキャッシュをクリアさせるの？」 今日、JavaScriptやCSSの更新時にキャッシュから読ませない方法を知りました。 先人達は偉大すぎます。 <link href="common.css" rel="stylesheet" type="text/css"> この記述だとサーバ側の「common.css」を更新しても、 クライアント側のキャッシュの「common.css」が使用されて、 サーバ側の変更が反映されない可能性があります。 これをcssやjsにクエリー文字列を付加することで、 「common.cs
Destroydrop » Javascripts » Tree
dTree is a free JavaScript tree menu. There are a lot of tree generating scripts just like this one, and many of them are great. So why use dTree? dTree is very simple to set up and use. You don't have to worry about adding pages to the tree in a specific order, which makes it ideal for generating a tree from a database. The first version of the tree is still available here. Unlimited number of le
もうこれで十分。HTML上でテーブルを表示するなら·Sigma Grid MOONGIFT
業務システムを構築する際に、一覧表を表示するという処理は多い。そしてそのデータを並べ替えたり、チェックボックスを入れたりしたいというニーズも多く発生する。場合によってはカラムを並べ替えたり、一括更新したいなんて言われることもある。 ソートも並べ替えもページネーションも全部こみこみ それを一つ一つ実装していては非常に工数がかかってしまう。そこで使いたいのがこのSigma Gridだ。 Sigma Gridはテーブルの表示とソート、データ編集などを可能にする超豪華ライブラリだ。LGPLライセンスの下に公開されているオープンソース・ソフトウェアだ。 Sigma Gridはデータの表示に際してJSONでデータを渡す必要がある。そのため既存のシステムにそのまま組み込むのは難しいかもしれない。だがその変更してもあまりあるメリットを享受できるに違いない。 画像表示とクリックアクションの例 まずカラムごと
Safari4 と IE8 で実装された DOM Storage とは何か - IT戦記
はじめに 皆様 JavaScript のスピード競争が激化し、 ECMAScript 3.1 の仕様の策定が進むなど、激動の JavaScript 時代をいかがお過ごしでしょうか。 さて今日は、今、ちまたで大ブレイクの兆しを見せている DOM Storage という仕様を紹介したいと思います。 DOM Storage とは何か まず、 DOM Storage とはどんなものなのでしょうか。 とても簡単に言ってしまえば、とてもたくさんのデータが保存できてサーバーに自動で送られない Cookie みたいなものです。 さらに、 Cookie とは違って JavaScript からとても扱い易く作られています。 では、この DOMStorage の具体的なソースコードを見てみましょう。 <!DOCTYPE html> <html> <head><title>DOMStorage の使い方</tit
【ハウツー】ゼロからはじめるAdobe AIR - TodoMemoを作ってみよう (1) Adobe AIRの概要.1 | パソコン | マイコミジャーナル
本稿では、Adobe AIRを使って簡単なアプリケーションを作るまで過程を紹介します。注目の技術、Adobe AIRで何ができるのか、どうやって開発するのかを解説していきます。 Adobe AIRとは? 今後、最も期待している技術は何かと5つあげていくと、その中に必ず入るのが、「Adobe AIR」です。Adobe AIRは、アドビシステムズが開発したデスクトップアプリケーションの実行環境です。 AIRが面白いのは、これまで使ってきたWebアプリケーションの技術、HTML/JavaScriptやFlash/Flexを利用して、デスクトップアプリケーションを作ることができる点にあります。もし、これまでに、HTMLやFlashで何か作ったものがあれば、それを、簡単な作業で、デスクトップアプリケーションとして公開することができるのです。ちょっと手を加えるだけで、Webで動くアプリケーションと、デ
新JavaScript入門 17 Radio
Radioオブジェクトは機能的にはリストボックス とあまり変わらないのですが、項目数が少ないとき見映えがよく、 ３つぐらいのときに多く使われるようです。 Radioオブジェクトの定義 Radioオブジェクトは HTML文書の中で典型的に次のように定義します。 <INPUT TYPE="radio" NAME="string" VALUE="string" [CHECKED]>string 下のように、 NAMEが同じRadioオブジェクトを並べると、 グループ化されてあるラジオボタンをチェックすると 今までチェックされていたラジオボタンはチェックが外れます。 ビーチバレー 遠泳 射的 ビーチバレー 遠泳 射的 CHECKEDオプション Internet Explorer 3.0 では無効のようです。 CHECKEDオプションをつけておくと、 最初からそのラジオボタンはチェックされ
リンクホバーを超カッコよくアニメーションするJavaScriptライブラリ「Scrollovers」:phpspot開発日誌
リンクホバーを超カッコよくアニメーションするJavaScriptライブラリ「Scrollovers」 2007年08月07日- Scrollovers - A New Way of Linking Scrollovers are a way to quickly and easily add flair to your web pages, giving your users an experience they weren't expectin g. リンクホバーを超カッコよくアニメーションするJavaScriptライブラリ「Scrollovers」。 例えば、次のアンカーにカーソルを合わせて みてください。 [YOUR TEXT HERE] Scrollovers を使えば、こんなリンクの貼り方が出来ます。 普通のリンクより 分かりやすいだけでなく、訪問者に驚きを与えることが出来ますね
あの565バイトテトリスが、ついに500バイトを切った！
各所で話題になった「わずか565バイトテトリスのプログラミング解説」。 あの565バイトテトリスの作者がわかったとともに、さらにプログラム行数の圧縮が進められていました！ 詳細は、 482バイトテトリス - Cozy Ozy に載っています。 （リンク先は482バイトとなっていますが、手元で改行コードを2バイトで確認してみたところ493バイトでした→追記：Ozyさんからコメントを頂きました。「改行位置を工夫すれば、セミコロンが省略できるので489バイトにできますよ」だそうです） 565バイトテトリスを作ったのは、nanagyouさんという方で、Short Coding本にも名を刻んでいる超絶スーパーコーダーらしいです。 そして初期の565バイトテトリス完成から5年半以上経ち、新しく500バイトを切ったテトリスのソースコードはこちら。 <body id=D onKeyDown=K=event
Dreamweaverの代わりになるフリーソフト「Aptana」 - GIGAZINE
JavaScriptの開発環境、要するにJavaScript用IDEという位置づけなのですが、HTML、CSSの構造をアウトラインで示してくれたり、文法の間違いを指摘してくれたり、やっていることはほとんどDreamweaverの持っている機能と同じです。 特に面白いのはJavaScriptやCSSなどがInternetExplorerとFirefoxに対応しているかどうかが一発で分かる点。JavaScriptのエラーについても細かい部分まで指摘してくれます。つまり、実行しなくてもエラーがドコにあるのか分かる「静的解析」が可能というわけ。 Windows、Macintosh、Linux版があり、Eclipseプラグインとして動作するバージョンもあります。 スクリーンショットや実際に動かして機能を解説しているムービー、ダウンロードは以下から。 Aptana: The Web IDE http:
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
HOT BOX
JavaScript/ウィンドウ/ウィンドウを閉じるボタン - TAG index