javascript でテーブルの特定行の表示を切り替える処理を書いている時にハマりそうになったのでメモする。 FireFox、Safari、Chromeなどでは、CSS で tr要素 に display:block; を指定すると表示が崩れてしまうが、javascript でも当然同じことが言える。 javascript で要素の表示/非表示を切り替える際は、display プロパティを none から block（またはその逆）にして制御するケースが多いが、tr要素 を操作する場合に同じことをすると、上記理由からテーブルの表示が崩れてしまう。 tr要素 の表示を切り替える場合は、以下例のように table-row を使用するか、display プロパティを空にする。 element.style.display = 'none'; // 非表示 element.style.display
Internet Explorerでは、ボタンをクリックするたびに、2行目の表示／非表示が切り替わります。 しかし、Firefox等では表が乱れ、2行目の左端のセルに、2行目の内容がすべて詰められて表示されます。 また、Firefoxでは、2行目を再表示するたびに表が長くなっていくという現象も起こります。 ちなみに、表示／非表示の切り替えは、以下のようなJavaScriptで行っています。 function toggle_row_a(id) { var obj = document.getElementById(id); obj.style.display = (obj.style.display == 'none') ? 'block' : 'none'; return false; } 2.問題の原因 この現象は、Internet Explorerの不具合（または実装が不十分）ではない
thinkのScrapBook: JavaScriptでExcelデータをtable要素に変換
(X)HTMLのtable要素は多量のデータを整理してくれる優れものですが、(X)HTMLソースからは直感的に全体像が見て取れず、それ故、編集が面倒、という理由から今まで敬遠していました。 この欠点を解消するため、Excelの表データをtable要素に変換するJavaScriptを書いてみました。 CSVをtable要素に変換 使い方 Excelファイルを開き、table要素に変換したい部分を範囲選択してコピー (マウスでぐぐ～っと選択すればOK) 変換スクリプトのフォーム上に貼り付け [変換] ボタンをクリック！ table要素に変換されたHTMLソースが出力される 内部動作 (アルゴリズム) Excelからクリップボードにコピーされたデータは「タブ文字区切りのCSVフォーマット」となっており、これを array[行][列] で構成される多次元配列に変換します。 (各セルにあるデータはタ
もばいる全盛感のある世間的には今更，FLASH なんてどうでもいいし，swfobject.js 自体 2009年から更新されてないから，こんな古いものをと言われかねないような話ではあるものの，日本語での言及をあまり見てないし，つい先日もさる通信キャリアがトップページでやらかしてて多分知られてないんだろうなと思ったので書こうと思った次第． swfobject.js とは何か この記事の対象読者にとっては説明するまでもない話とはおもうけど一応前置きとして説明しておくと，swfobject.js は FLASH を web ページに埋め込むための JavaScript のライブラリ．クロスブラウザ対応してたり，面倒な HTML-tag のお作法を覚えなくても良くなったりとでデファクトスタンダードな感じのモノ．2007年とちょい古いがリクルートMTL の SWFObject v2.0 ドキュメント
CSSやJavaScriptを使って、IE6, IE7, IE8, IE9 とIEの異なるバージョンごとにスタイルシートを適用する方法のまとめを紹介します。 Use Different Styles For Different Internet Explorer Versions [ad#ad-2] 下記は各ポイントを意訳したものです。 CSS: 条件付きコメント(class) CSS: 条件付きコメント(外部スタイルシート) CSS: CSS Hack JavaScript JavaScript: jQuery おまけ CSS: 条件付きコメント 条件付きコメントを使用して、ドキュメントの一番上の要素(html)にIE6/7/8用のclassを付与します。 HTML <!--[if IE 6]> <html class="ie6"> <![endif]--
window.open()でURLにクエリストリングを付加した状態で ウィンドウが立ち上がるのがセキュリティ上よろしくない ということで現場SEの方が悩んでたので一緒に悩んだ。 ネットで調べてて、結構この手の問題を悩んでた人が多いみたい。 解決策も多かったけど、シンプルに感じた方法は以下である。 情報元 <html> <script language="javascript"> function test() { window.open("", "ATMARK") ; window.document.inform.action = "http://www.atmarkit.co.jp/bbs/phpBB/viewtopic.php" ; window.document.inform.target = "ATMARK" ; window.document.inform.method = "P
概要 iframe の高さを、iframe の内容に応じて自動で調節するための JavaScript です。 サーバーとシステムの都合でどうしても iframe を使わざるを得ないケースなどの使用に向いています。 動作確認用の demo この JavaScript を利用すれば、iframe で参照したページが、親ページの一部であるかのように、シームレスな表示にすることができます。 ページ読み込み時に自動で高さを調節します。その後は 0.75 秒毎に高さを自動調節するので、文字サイズを変更するなどしても、それに合わせて再度iframeの高さを調節します。 使い方 まずは、iframe 要素を使用するページ(親ページ)の設定を行います。 iframe 要素に任意の id 属性を設定します。 e.g. <iframe src="demo-frame.html" id="sample1"></i
この記事は賞味期限切れです。（更新から1年が経過しています） 「Modernizr」や「html5.js」等、 モダンな環境の為の便利なスクリプトは多々ありますが、 「headjs」はそんな彼らの仕事を一気に引き受けてくれる働き者のスクリプトです。 使い方 Head JS :: The only script in your HEAD 謳い文句はhead要素に読み込む唯一のスクリプト ダウンロードして読み込むだけ。おしまい。 <script type="text/javascript" src="head.js"></script> その多彩な機能 環境の判別 CSS3のプロパティの対応状況、画面のサイズ、ブラウザなどの情報を Modernizrと同じ手法でHTML要素のクラスに出力してくれます。 こんな感じに… <html lang="ja" id="test-page" class="
本書の内容は Internet Explorer でサポートされていた古い機能で廃止済です。現在の CSSトランジションについては 「とほほのCSSトランジション入門」を参照してください。(2025.1.19) トランジションとは ページ間トランジション スクリプトによるトランジション トランジション使用上の注意 参考情報 トランジションとは トランジションはページ移動などにビジュアルな効果を与える機能です。IE4.0 でサポートされました。このページも IE4.0 以上で表示するといろいろな効果でページ表示されます。再表示では実行されないので、[戻る] ボタンで戻って再度リンクをクリックしてください。 ページ間トランジション ページ移動のトランジションを指定するには、<head>～</head> の間に下記のいずれかの <meta> タグを記述します。 <meta http-equiv=
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
