カテゴリー: jQuery

画面の縦の高さが足りない時
フッターを画面の最下部にくっつけるというアプローチもいい。
だが今日は背景色をいろいろ追加するデザインをいただいていて、
bodyとフッターの背景色を別色に設定していた。
なので、フッターの高さを画面ピッタリにして調整するというアプローチをしてみた。

windowsの
IE8 IE11 chrome33 safari5
で検証済み

$(function(){
	footerHeight = function (){
		var footerWrap = $('div#footerWrap');
		//フッターの高さをリセット
		footerWrap.css({height:'auto'});
		//フッターのトップからの距離
		var ft = footerWrap.offset();
		//フッターの高さ
		var fh = footerWrap.height();
		//ウィンドウの高さ（スクロールバー領域を含む）
		//var wh = window.innerHeight;
		//ウィンドウの高さ（スクロールバー領域を含まない）		
		var dh = document.documentElement.clientHeight;
		if(ft.top+fh<dh){
			/* ウインドウの高さから、フッターのトップからの距離分と、フッターのボーダーの分引いた値がフッターの高さです */
			var fh = dh - ft.top - 2 + "px";
			footerWrap.css({height:fh});
		}
	};
	
	window.onload = function(){
		footerHeight();
	}
	
	$(window).resize(function() {
		footerHeight();
	});
});

MITライセンスのfooterFixed.js
http://blog.webcreativepark.net/2007/11/16-012253.html
すご～く便利なのだけど、メインエリアの背景が切れてしまうので、改造してみた。
要jQuery
JavaScriptだけで改造できるとかっこいいんだろうな……。

HTML（だいたい。）footerがfooterWrapに直してないのはちょっと恥ずかしいかなと思いつつ、そのまま公開。
気になるようなら個人的に直すといいんだろうな。

<div id="#headerWrap">
</div>
<div id="#mainWrap">
</div>
<div id="footer">
</div>

footerFixed.jsの改造部分。
30行目付近から。

		if(ft+fh<wh){
//追記部分開始
			var mainH = wh - fh - $('#headerWrap').height();
//追記終了
//記述変更
//			document.getElementById(footerId).style.position = "relative";
//			document.getElementById(footerId).style.top = (wh-fh-ft-1)+"px";
			document.getElementById(footerId).style.top = (wh-fh-ft)+"px";
//追記部分開始
			$('#mainWrap').css({height:mainH});
//追記終了
		}

タブ切り替え的なUIを作った。
バグるコードとバグらないコードをメモしておく。

バグるコード。
chrome33で、
素早くタブ切り替えをするとバグる。
フラグで切り替えたりしてても時々バグる。
処理中に別の処理が並行して走るからバグってしまうみたい。
比較的処理がゆっくりなIE8とかだとバグらない。
具体的にどこでエラーを起こしてるのかはよくわからなかった。

$(function(){
	//画像の先読み
	jQuery.preloadImages = function(){
		for(var i = 0; i<arguments.length; i++){
			jQuery('<img>').attr('src', arguments[i]);
		}
	};
	$.preloadImages('/img/btn01_on.png','/img/btn02_on.png','/img/btn03_on.png','/img/btn04_on.png','/img/btn05_on.png','/img/btn01_selected.png','/img/btn02_selected.png','/img/btn03_selected.png','/img/btn04_selected.png','/img/btn05_selected.png','/img/tab02.jpg','/img/tab03.jpg','/img/tab04.jpg','/img/tab05.jpg');
	
	
	$(window).load(function(){
		var onName = '_on';
		var offName = '_off';
		var selectedName = '_selected';	
		var imgBefore = '/img/btn_';
		var imgAfteron = '_on.png';
		var imgAfteroff = '_off.png';
		var imgAfterselected = '_selected.png';
		
		//サムネイルクリック時の挙動
		
		var changeflag = true;
		
		function changeImg() {
			$('#packageWrap li img').each(function(){
				var	thisattr = $(this).attr('src').replace(selectedName, offName).replace(onName, offName);
				$(this).attr('src',thisattr);
			});
		};
		
		$('#packageWrap li img').on({
			'click':function(){
				if(changeflag = true){
					changeflag = false;
					$('#packageWrap li img').removeClass('selected');
					$(this).addClass('selected');
					changeImg();
					$('#detailBox>div').hide();
					openDiv = '#' + $(this).attr('src').replace(imgBefore, '').replace(imgAfteroff, '').replace(imgAfteron, '').replace(imgAfterselected, '');
					$(openDiv).show();
					this.setAttribute('src', this.getAttribute('src').replace(offName, selectedName).replace(onName, selectedName));
					changeflag = true;
				}else{
					return false;
				};
			},
			'mouseenter':function(){
				if($(this).attr('class') == 'selected'){
					return false;
				}else{
					this.setAttribute('src', this.getAttribute('src').replace(offName, onName));
				}
			},
			'mouseleave':function(){
				if($(this).attr('class') == 'selected'){
					return false;
				}else{
					this.setAttribute('src', this.getAttribute("src").replace(onName, offName));				
				}
			}
		});
	});
});

バグらないコード。
ひとつひとつif文で分岐しているからバグらない。
手抜きしないで丁寧に分岐させてあげるのが大事みたい。

$(function(){
	//画像の先読み
	jQuery.preloadImages = function(){
		for(var i = 0; i<arguments.length; i++){
			jQuery('<img>').attr('src', arguments[i]);
		}
	};
	$.preloadImages('/img/btn01_on.png','/img/btn02_on.png','/img/btn03_on.png','/img/btn04_on.png','/img/btn05_on.png','/img/btn01_selected.png','/img/btn02_selected.png','/img/btn03_selected.png','/img/btn04_selected.png','/img/btn05_selected.png','/img/tab02.jpg','/img/tab03.jpg','/img/tab04.jpg','/img/tab05.jpg');
	
	
	$(window).load(function(){
		pageTab();
	});
	
	function pageTab() {
		var imgBefore = '/img/btn_';
		var imgAfteron = '_on.png';
		var imgAfteroff = '_off.png';
		var imgAfterselected = '_selected.png';
		
		//クリックの処理
		$('#packageWrap li img').click(function(){
			$('#packageWrap li img').each(function(){
			if(String($(this).attr('src')).match(/_selected\.(.*)$/)){
				$(this).attr('src',$(this).attr('src').replace('_selected','_off'));
			}
			});

			if(String($(this).attr('src')).match(/_off\.(.*)$/)){
				$(this).attr('src',$(this).attr('src').replace('_off','_selected'));
			}else
	
			if(String($(this).attr('src')).match(/_on\.(.*)$/)){
				$(this).attr('src',$(this).attr('src').replace('_on','_selected'));
			}
			
			$('#detailBox>div').hide();
			openDiv = '#' + $(this).attr('src').replace(imgBefore, '').replace(imgAfteroff, '').replace(imgAfteron, '').replace(imgAfterselected, '');
			$(openDiv).show();
		});
	
	
		//ボタンのロールオーバー
		$('#packageWrap li img').hover(function(){
			$(this).attr('src',$(this).attr('src').replace('_off','_on'));
		},function(){
			$(this).attr('src',$(this).attr('src').replace('_on','_off'));
		});
	};
});