カテゴリー: javascript

minmax.jsの使い方

max-widthやmin-widthを使えるようにするためのjs
minmax.jsの使い方。

まずはこちらからダウンロード。
http://www.doxdesk.com/software/js/minmax.html

『minmax.js』はIE8で見た場合エラーになってしまう。
ダウンロードしたファイルを修正する必要がある。
以下のページを参考にする。
http://www.plusmb.jp/2010/03/22/5303.html

//36行目を書き換える。これを
if (em.style.setExpression) {
    em.style.setExpression('width', 'minmax_checkFont()');
    document.body.insertBefore(em, document.body.firstChild);
}

//こちらに書き換える
if (em.style.setExpression) {
   try {
       em.style.setExpression('width', 'minmax_checkFont()');
       document.body.insertBefore(em, document.body.firstChild);
    }
    catch(err){} 
}

スマホでアンカーリンクを有効にするには

スマートフォンでは、リンク先へのアンカーリンクが無効になることが多い。
普通のアンカーリンクも然り。
挙動を見る限り、メニューバーの表示を見えないように、読み込み後にスライドする機能が悪さをしているようだ。
試しに、アンカーリンクをスライドするjavascriptを使ってみた結果、アンカーリンクが有効になった！
iOS6とAndroid2.2で確認。
使わせていただいたスクリプトはこちら。

[JS]簡単に設置できるページ内をスムーズにスクロールできるスクリプト -Page Scroller ver.3
http://coliss.com/articles/build-websites/operation/javascript/296.html

あと、画像のサイズも指定できるならした方がいいみたい。（画像でheight算出させてる時は面倒だけど）

iphone5 アンカーリンクに気をつけろ！
http://sp.vitalify.jp/archives/?p=1082

ＩＥのみに表示変更させるための分岐

IEに対応させるための条件分岐。
こちらを参考に。
http://w3g.jp/blog/tools/js_browser_sniffing
http://twihelp.me/qRdUu
http://www.nk0206.com/life/2009/04/jquery-1.html

(書き直すかも)

		$(function(){
			var _ua = (function(){
				return {
				ltIE6:typeof window.addEventListener == "undefined" && typeof document.documentElement.style.maxHeight == "undefined",
				ltIE7:typeof window.addEventListener == "undefined" && typeof document.querySelectorAll == "undefined",
				ltIE8:typeof window.addEventListener == "undefined" && typeof document.getElementsByClassName == "undefined",
				IE:document.uniqueID,
				Firefox:window.sidebar,
				Opera:window.opera,
				Webkit:!document.uniqueID && !window.opera && !window.sidebar && window.localStorage && typeof window.orientation == "undefined",
				Mobile:typeof window.orientation != "undefined"
				}
			})();
			if(_ua.ltIE6 || _ua.ltIE7 || _ua.ltIE8 || _ua.IE && !_ua.ltIE8){
				$("#divSample").addClass("divSampleIe");
				return false;
			}else{
				return false;
			}
		});

（画像）アップローダー。画面遷移ナシのもの。

画像ローディング画面つき画像アップローダーが作りたくて調べたのでメモ。

Ajax的に画像などのファイルをアップロードする方法
http://havelog.ayumusato.com/develop/javascript/e171-ajax-file-upload.html

シンプルにAjaxファイルアップロードできるjQueryプラグイン
http://d.hatena.ne.jp/lagos_on/20091107/1257610779

Ajax + jQueryで超簡単にファイルをアップロードするためのメモ
http://blog.mudaimemo.com/2009/05/ajaxfileuploadajaxjquery.html

jQueryプラグインまとめ
http://phpspot.org/blog/archives/2010/11/ajaxjquery10.html

使ってみた
http://webdeveloperplus.com/jquery/ajax-multiple-file-upload-form-using-jquery/

パソコンサイトからスマホサイトへの導線２

コチラのページを参考に、Windws Phoneとかにも対応してみました。

http://www.movabletype.jp/blog/mtddc2011_special_04.html

<script type="text/javascript">
	(function(){
		var ua = navigator.userAgent;
		if (localStorage 
			 && !localStorage.getItem("sp_flag") 
			 && (ua.indexOf('iPhone') > 0 || ua.indexOf('iPod') > 0 || ua.indexOf('iPad') > 0 || ua.indexOf('Windows Phone') > 0 || ua.indexOf('Symbian') > 0 || ua.indexOf('BlackBerry') > 0 || ua.indexOf('Android') > 0 )) {
			if(confirm('スマートフォン用サイトを開きますか？')) {
				location.href = 'http:/t1200.jp/sp/';
			}else{
				localStorage.setItem("sp_flag",true);
			}
		}
	})();
</script>

パソコンサイトからスマホサイトへの導線１

こんなふうにしてました。

ヘッダー

<script type="text/javascript">
    if (navigator.userAgent.indexOf('iPhone')>0 ||
        navigator.userAgent.indexOf('iPod')>0 ||
        navigator.userAgent.indexOf('iPad')>0 ||
        navigator.userAgent.indexOf('Windows Phone')>0 ||
        navigator.userAgent.indexOf('Symbian')>0 ||
        navigator.userAgent.indexOf('BlackBerry')>0 ||
        navigator.userAgent.indexOf('Android')>0) {
        document.write('<style type="text/css">#spNavi{display:block;}</style>');
    }else {

    }
</script>

ボディの頭に

	<a id="spNavi" href="./sp/">
		スマートフォン版は<br>こちらをタップ
	</a>

フッターを下部にくっつけたい

footerFixed.js
http://blog.webcreativepark.net/2007/11/16-012253.html

フッターより上に、「floatしてない」実体のある要素が無いと、フッターのtopのマージン分の空白がbody上部に出るという不都合アリます。テキストでもなんでもいいんだけど。
普通に組んでれば意識されることはないだろうけど、要調査だな。