Snippet-Editor.com » JavaScript

import.cssならぬ、import.js

tomohiro_kasuga — Thu, 23 Sep 2010 05:59:19 +0000

function importJS() {
    if (! new Array().push) return false;
    var scripts = new Array(
         'YOUR-PATH/YOUR-SCRIPT1.js'
        ,'YOUR-PATH/YOUR-SCRIPT2.js'
        ,'YOUR-PATH/YOUR-SCRIPT3.js'
    );
    for (var i=0; i<\/script>');
    }
}
importJS();

上の内容をimport.jsの名前で保存し、HTML側には下の一行を追記します。

WordPressではあまりメリットがありませんが、静的生成を必要とするCMSを使っている場合、JSの追加／削除が瞬時に反映されるようになります。

iPhoneサイトに行きたいか、まずユーザーに尋ねる

tomohiro_kasuga — Thu, 16 Sep 2010 20:29:46 +0000

function iPhoneAlert() {
	if((navigator.userAgent.match(/iPhone/i))||(navigator.userAgent.match(/iPod/i))){
		var question = confirm(”Would you like to view the iPhone-optimized version of our site?”)
		if (question){
			window.location = “http://lite.iphonemicrosites.com/home.html”;
		}else{
			window.location = “http://iphonemicrosites.com/mainsite.html”;
		}
	}
}

iPhone Micrositesより、この発想はなかったJavaScriptが紹介されていました。

iPhoneに最適化したサイトを作った場合、とりあえずiPhoneユーザーを強制的にそちらへ移動させて、通常版のPCサイトを希望するユーザーには別のアクションを起こしてもらう、というのが一般的な手法ですが、このスクリプトはまず先に尋ねてしまうというもの。

通常のサイトではいきなりアラートが飛び出るなんて考えられないことですが、iPhoneの場合はおなじみのPush Notificationに見えるので違和感がほとんどありません。

HTML側にはbodyにonloadを追加します。

テストページはこちら

iPhoneまたはiPod touchからアクセスする必要があります。

実際に使用する場合は、トップページだけにしておいた方がいいでしょう。

ページ内の印刷ボタンが押された時だけprint.cssを適応する

tomohiro_kasuga — Tue, 31 Aug 2010 09:51:03 +0000

$(document).ready(function(){
	$(".printer").click(function(){
		$("body").addClass("print");
		window.print();
		var timeout = setTimeout(function(){
			$("body").removeClass("print");
		}, 1000);
		return false;
	});
});

Webページを印刷するとき、画面に表示されているそのままを印刷したいと思うか、印刷用に整形された状態を欲しいと思うかは、ユーザーによってまちまちです。

上のjQueryプラグインを使うことで、ブラウザのメニューバーから「印刷」を選んだ時と、ページ上の印刷ボタンから印刷を実行した時で、別々の出力結果を得ることが出来るようになります。つまり、前者は見たままに、後者は整形されて印刷されます^[1]。

この記事の解説内容は、画面表示と印刷時のスタイルが元々分かれていないサイトを前提としてあります。

準備

まず、print.cssを用意します。

@media print {
body.print div.header-search,
body.print div.nav,
body.print div.aside { display: none; }

body.print div.header,
body.print div.contents,
body.print div.article,
body.print div.footer { clear: both; width: auto; height: auto; float: none; background: none; border: none; padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; position: static; }

body.print { font-size: 9pt; background: none; }
body.print div.body { width: 500px; margin: 0 auto; }
}

print.cssの内容はサイトごとに大きく異なるので、上のをそのまま流用することはできませんが、要するに、

印刷しないパートをdisplay: none;で消す
印刷するパートから不要なfloatなどを解除
白い紙に印刷されることを踏まえて文字や背景などを調整

しておきます。ここまでは普通のprint.cssのやり方です。ここからさらに、

print.cssの内容全体を@media print { }でくくる
print.cssの各行の先頭にbody.printを追加する

この2点を加えることで、ここで記述した内容は画面表示には一切影響を与えなくなり、且つ、body classに"print"が付いていない場合はスタイルが適応されることもなくなります。

ここからが本番

さて、冒頭のスクリプトに戻って、何が行われるのか確認してみたいと思います。

$(document).ready(function(){
	$(".printer").click(function(){             // 印刷ボタンが押されたら
		$("body").addClass("print");            // body classに"print"を追加
		window.print();                         // 印刷を実行
		var timeout = setTimeout(function(){
			$("body").removeClass("print");     // body classから"print"を削除
		}, 1000);
		return false;                           // 終了
	});
});

つまり、「印刷ボタン」を押した直後だけprint.cssが有効となり、次にメニューバーから「印刷」を選んだとしても、その時は通常の見栄えで印刷されることになります。

印刷ボタンのテスト

JavaScriptがオフになっている時に役立つJavaScript

tomohiro_kasuga — Tue, 24 Aug 2010 02:45:48 +0000

$(document).ready(function(){
	$("body").removeClass("noscript");
});

このjQueryプラグインを使うと、例えばJavaScriptがオフになっている時だけプルダウンメニューをCSSで動作させたり、AJAX部分のレイアウトの乱れをCSSで隠したりすることができます。

具体的には、bodyタグにclass="noscript"を記述しておくと、JavaScriptがオフの時だけbody.noscriptで始まるスタイルが適応できるようになります。




	
	noScript Detector
	
	
	


	
		Mouse Hover
			
				Item 1
				Item 2
				Item 3

デモページはこちら