元記事から３年弱経過しています。以下は最新ですが、IE の中ではいまだ IE8 が強いのが解ります。 以下は 2014/5 と 2014/6 の記事です。 双日システムズ、IE6互換ブラウザ「thinforie」がIE8にも対応 中京銀行、IE6互換ブラウザとThinAppを利用しWindows XPからの移行を実現 世の中の現実は、さすがに IE6 からは脱却はできそうな気がしますが、IE8 からの脱却はまだまだ先なのは間違い無いと思います。 2014/06
以下 2011/02 の記事
主に技術情報なので、一般のサイトとはそれぞれのブラウザの重みが違います。ただ、IE9 は 現実的には Windows7 用となるので、あまり伸びて来ないと思います。それで無くても IE6 と IE7 がこれだけ占有しているわけですし。 結局、アプリケーション作る立場からすると、また一つブラウザが増えただけの事で、IE6、IE7 の対応はしなくていいと思いますが、IE9 による動作確認は今後大きな課題となるような気がします。
デベロッパーツールのコンソールだけで動く Command Line API というものがあります。 ※ table コマンドは、console.table メソッドとしても利用できるので、ページ内からも実行できます ※ ここで使用する処理は、Firebug では動作しました。 (注意) ページに同名のメソッドがあると、そちらが優先されます。jQuery があると、$ は使用できないので注意して下さい。( 逆にその場合は jQuery を使えばいいのですが ) $0 - $4 は、Elemnts タブで選択したオブジェクトを履歴として記憶しています。( $0 が最新 ) $_ は、直前の処理結果の内容が記憶されています。
このコマンドは、オブジェクトのプロパティの一覧を縦の左端に置いて、列の内容は全てのプロバティにある全てのプロパティになるので、名前が同じプロバティは同じ列に表示されますが、無い部分は未定義として表示されるため、表示前に適当な構造にしておく必要があります。 ▼ 単にオブジェクトのコレクションだと収拾がつかないそこで、以下のようにコマンドラインで実行すると、意図した一覧を取得する事ができます。
var a = {};var b = $$("img"); for( i=0; i< b.length; i++ ){ a[i] = {}; a[i]["src"] = b[i].src; };table(a)
このコマンドをフリーの画像素材を提供している『足成』で実行してみました。この結果をブラウザでドラッグして選択してコピーして Excel にテーブル形式で貼り付ける事ができます。
※ 列は、必要に応じて増やす事が可能です。
一行で記述しなくても、普通に以下のように記述して貼り付けて実行する事もできます。
var a = {};
var b = $$("img");
for( i=0; i< b.length; i++ ){
a[i] = {};
a[i]["src"] = b[i].src;
a[i]["幅"] = b[i].width;
}
table(a)
$$ は、document.querySelectorAll() と同じであり、jQuery にも無いので使用しています。for の 一般的なループを使用しているのは、for in だとプロパティの一覧になる為、length 等のコレクションそのもののプロパティも対象になるので使用していません。 jQuery が使えるのであれば、以下のようにも記述できます
var a = {};
$("img").each( function(idx){
a[idx] = {};
a[idx]["src"] = this.src;
a[idx]["幅"] = this.width;
});
table(a);
コンソール側では無く、デバッグの為にページのスクリプトとして記述する場合は以下のようになります。 (画像の場合は全て読み込まれていない場合は正しいサイズは取得できていない場合があります)
var a = {};
var b = document.querySelectorAll("img");
for( i=0; i< b.length; i++ ){
a[i] = {};
a[i]["src"] = b[i].src;
a[i]["幅"] = b[i].width;
a[i]["高さ"] = b[i].height;
}
console.table(a)
WEB ページ全体を暗い DIV で覆って操作できないようにして、その上に DIV を乗せてコンテンツを表示します。確実に DIV でページを覆うために、サイズは２倍にしていますが、iPhone 等のスマホで向きを変える場合など、イベント対応しない場合に有効です。 ※ 暗転後のコンテンツの位置は、暗転を行うコントロールを基準に表示するようにしています。 IE 用の処理の中で、jQuery を使っていない部分がありますが、元々 DOM でテスト済みなのを jQuery でテストする意味もあまりなかった(古いIE用なので)のでそのままにしています。
<script>
if ( !window.jQuery ) {
if ( typeof window[window.location.hostname+'.loadjQuery'] === 'undefined' ) {
if ( window.addEventListener ) {
window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js';
}
else {
window[window.location.hostname+'.loadjQuery'] = '//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js';
}
}
document.write("<"+"script src=\"" + window[window.location.hostname+'.loadjQuery'] + "\"></"+"script>");
}
</script>
<script>
// *********************************************************
// 暗転時に操作するウインドウの作成
// *********************************************************
$(function(){
$("#win_base")
.hide()
.css({
position: "absolute",
color: "#000000",
backgroundColor: "#E0E0E0",
borderStyle: "solid",
borderColor: "#303030",
borderWidth: "1px",
width: "0px",
height: "0px",
borderRadius: "6px",
zIndex: 0x7fffffff
});
$("#win_base input")
.attr("type", "image")
.prop("src", "http://winofsql.jp/image/mcancel.png")
.css("float", "right")
.click(function(){
$(this.parentNode).hide();
$(window["dark_modal"]).remove();
});
});
// *********************************************************
// 暗転時に操作するウインドウを target 基準の指定位置に表示
// *********************************************************
function setDark(target,x,y,w,h) {
setDarkModal();
var numY = target.offsetTop;
var numX = target.offsetLeft;
var obj = target;
while( obj = obj.offsetParent ) {
numY += obj.offsetTop;
numX += obj.offsetLeft;
if ( obj.tagName.toUpperCase() == 'BODY' ) {
break;
}
}
$("#win_base").css( "top", (numY+y) + "px" );
$("#win_base").css( "left", (numX+x) + "px" );
$("#win_base").css( "width", w + "px" );
$("#win_base").css( "height", h + "px" );
$("#win_base").show();
}
// *********************************************************
// 暗転用の DIV を作成
// *********************************************************
function setDarkModal(){
var dark_modal = document.createElement('div');
$(dark_modal)
.attr('id','dark_modal')
.css( {
position: "absolute",
width: Math.max(document.documentElement.scrollWidth,document.body.scrollWidth)*2+'px',
height: Math.max(document.documentElement.scrollHeight,document.body.scrollHeight)*2+'px',
left: "0px",
top: "0px"
});
var userAgent = window.navigator.userAgent.toLowerCase();
if (userAgent.indexOf("msie") > -1) {
$(dark_modal).hide();
var appVersion = window.navigator.appVersion.toLowerCase();
if (appVersion.indexOf("msie 10.0") > -1) {
$(dark_modal).css({
backgroundColor: "#000000",
opacity: 0.5
});
}
else {
dark_modal.style.backgroundColor = '#000000';
dark_modal.style.filter='alpha(opacity=50)';
}
}
else {
$(dark_modal).css({
backgroundColor: "#000000",
opacity: 0.5
});
}
$("body").append(dark_modal);
if (userAgent.indexOf("msie") > -1) {
dark_modal.style.display = '';
}
window["dark_modal"] = dark_modal;
}
</script>
<input type="button" value="暗転ボタン" onclick='setDark(this,100,0,200,50);'>
<div id="win_base" style='display:none'><input>
<div id=win_box style='padding:2px;'>ここにコンテンツ</div>
</div>
関連する記事 JavaScript : zIndex の最大値と思われる 0x7FFFFFFF を各ブラウザでテストしました JavaScript : クリックした要素の位置を計算して、近くにウインドウを開く JavaScript : ブラウザの表示を半透明で暗くする方法( scrollHeight で高さ決定 )
すべての画像をチェックして visibility が hidden のものでサイズが50より小さい場合( 画像がない場合なので適当な数値です )にのみ別の画像に入れ替えます。最初に hidden にしておくのは、ロード時に画像が無いと見栄えが悪いからです。visibility を使うのは、見えないけれどもサイズが確保されるからです jQueryバージョン
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<img src="http://winofsql.jp/image/ok.png" style='visibility:hidden'>
<img src="http://winofsql.jp/image/_ok.png" style='visibility:hidden'>
<script type="text/javascript">
$(function(){
$("IMG").each(function(){
if ( $(this).css("visibility") == "hidden" ) {
if ( $(this).prop("width") < 50 ) {
$(this).prop("src","http://winofsql.jp/image/winofsql.png");
}
$(this).css("visibility", "visible");
}
});
});
</script>
ノーマルバージョン
<img src="http://winofsql.jp/image/ok.png" style='visibility:hidden'>
<img src="http://winofsql.jp/image/_ok.png" style='visibility:hidden'>
<script type="text/javascript">
function noimage () {
var cnt = document.getElementsByTagName("IMG").length;
var i,target;
for( i = 0; i < cnt; i++ ) {
target = document.getElementsByTagName("IMG")[i];
if ( target.style.visibility == 'hidden' ) {
if ( target.width < 50 ) {
target.src = "http://winofsql.jp/image/winofsql.png";
}
target.style.visibility = "visible";
}
}
}
if (window.attachEvent){
window.attachEvent('onload', noimage);
}
else {
window.addEventListener('load', noimage, false);
}
</script>
input 要素のみ決定しておいて、参照する為に id 属性だけセットしたものを、jQuery でボタンとして使う為のコードテンプレートです。
チェックボックスとラジオボタンが、label 要素を要求するようなので、.after() しているところ以外は全て通常の追加設定になっているはずです。
※ .buttonset() は、ボタンの形状をグルーブ化するだけで、ラジオボタンとしての機能は、name 属性でグループ化されます。
※ 最初のボタン以外には、jQuery UI が必要です
実際問題、チェックボックスとラジオボタンの性能には疑問が残ります。クリックに正しく反応しない場合があるようなのでお勧めできません(ラベルのテキスト部分で起こるようです)
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/themes/base/jquery-ui.css">
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.1/jquery-ui.min.js"></script>
<script type="text/javascript">
// ***********************************************
// 画面初期化後のイベント( jQuery )
// ***********************************************
$(function() {
$("#buttonContent1")
.attr("type", "button")
.val("ボタン1")
.css({
"font-size": "20px",
"padding": "10px 40px 10px 40px",
"background-color": "orange",
"font-weight": "bold",
"border-radius": "10px"
})
.click(function(){
alert("ボタン1がクリックされました");
});
$("#buttonContent2")
.attr("type", "button")
.button()
.val("ボタン2")
.css({
"font-size": "20px",
"font-weight": "bold",
"border-radius": "10px"
})
.click(function(){
alert("ボタン2がクリックされました");
});
$("#buttonContent3")
.attr("type", "checkbox")
.after("<label for='buttonContent3'>")
.button({ label: "トグルボタン" })
.click(function(){
alert( $(this).prop("checked") );
});
$("#radio1")
.attr({ type: "radio", name: "my_radio" })
.after("<label for='radio1'>")
.button({ label: "選択1" })
$("#radio2")
.attr({ type: "radio", name: "my_radio" })
.after("<label for='radio2'>")
.button({ label: "選択2" })
$("#radio3")
.attr({ type: "radio", name: "my_radio" })
.after("<label for='radio3'>")
.button({ label: "選択3" })
$("#radio").buttonset();
});
</script>
<input id="buttonContent1">
<input id="buttonContent2">
<input id="buttonContent3">
<br><br>
<div id="radio">
<input id="radio1">
<input id="radio2">
<input id="radio3">
</div>
もともと、文章になじむように設計されているので、図形等のオブジェクトを使うより簡単に強調できるのですが、テーブルに限らず Word では フォントを14にしたとたんフォントの上下の行間が大きくなるので、段落の設定から『１ページの行数を指定時に文字を行グリッド線に合わせる』のチェックを外します。 外すと、フォントのサイズによってはあまりにも上下の余裕がなくなるので、段落前と段落後の行数を手入力で小さく設定しています。
Seesaa の 記事がたまに全く表示されない場合があります。その場合は、設定＞ 詳細設定＞ ブログ設定 で 最新の情報に更新の『実行ボタン』で記事やアーカイブが最新にビルドされます。 Seesaa のページで、アーカイブとタグページは要注意です。タグページはコンテンツが全く無い状態になりますし、アーカイブページも歯抜けページはコンテンツが存在しないのにページが表示されてしまいます。 また、カテゴリページもそういう意味では完全ではありません。『カテゴリID-番号』というフォーマットで表示されるページですが、実際存在するより大きな番号でも表示されてしまいます。 ※ インデックスページのみ、実際の記事数を超えたページを指定しても最後のページが表示されるようです 対処としては、このようなヘルプ的な情報を固定でページの最後に表示するようにするといいでしょう。具体的には、メインの記事コンテンツの下に『自由形式』を追加し、アーカイブとカテゴリページでのみ表示するように設定し、コンテンツを用意するといいと思います。※ エキスパートモードで表示しています アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
<% if:page_name eq 'archive' -%> アーカイブページでのみ表示される内容 <% /if %> <% if:page_name eq 'category' -%> カテゴリページでのみ表示される内容 <% /if %> <% if:page_name eq 'tag' -%> タグページでのみ表示される内容 <% /if %>この記述は、以下の場所で使用します
|
|
