高さを指定できないfotterを、画面下に固定する方法

Question

###目的
画面読み込み時と、'input[name=check]'のクリック時に、#fotterを画面下に固定したいです。

#fotte高さをCSSで指定して、という方法でなくjavascriptでやってみたいと思います。

###試したコード
次のjavascriptを試しました。

読み込み時には下にいくものの、'input[name=check]'をクリックしても下にいってくれません。

'input[name=check]'をクリックすると画面から要素が消え、#fotteがその分上に浮いてしまいます。そのときに次のjavascriptが作動してくれればいいのですが、なぜか浮いたままになってしまうのです。（しかし浮いたままのときにF12を押すとちゃっかり画面下にいきます。）

(function($){
	function funcFooter(){

	var footerId = "footer";
	//メイン
	function footerFixed(){
		//ドキュメントの高さ
		var dh = document.getElementsByTagName("body")[0].clientHeight;
		//フッターのtopからの位置
		document.getElementById(footerId).style.top = "0px";
		var ft = document.getElementById(footerId).offsetTop;
		//フッターの高さ
		var fh = document.getElementById(footerId).offsetHeight;
		//ウィンドウの高さ
		if (window.innerHeight){
			var wh = window.innerHeight;
		}else if(document.documentElement && document.documentElement.clientHeight != 0){
			var wh = document.documentElement.clientHeight;
		}
		if(ft+fh<wh){
			document.getElementById(footerId).style.position = "relative";
			document.getElementById(footerId).style.top = (wh-fh-ft-1)+"px";
		}
	}
	
	//文字サイズ
	function checkFontSize(func){
	
		//判定要素の追加	
		var e = document.createElement("div");
		var s = document.createTextNode("S");
		e.appendChild(s);
		e.style.visibility="hidden"
		e.style.position="absolute"
		e.style.top="0"
		document.body.appendChild(e);
		var defHeight = e.offsetHeight;
		
		//判定関数
		function checkBoxSize(){
			if(defHeight != e.offsetHeight){
				func();
				defHeight= e.offsetHeight;
			}
		}
		setInterval(checkBoxSize,1000)
	}
	
	//イベントリスナー
	function addEvent(elm,listener,fn){
		try{
			elm.addEventListener(listener,fn,false);
		}catch(e){
			elm.attachEvent("on"+listener,fn);
		}
	}

	addEvent(window,"load",footerFixed);
	addEvent(window,"load",function(){
		checkFontSize(footerFixed);
	});
	addEvent(window,"resize",footerFixed);
	

	}
	
	$(function(){
		funcFooter();
		$('input[name=check]').change(funcFooter);
	});
	
})(jQuery);

Comments

[退会済みユーザー]

フォッタてなんだろ

[退会済みユーザー]

失礼しました。フォッタというのはイングランドの伝統料理のことです。

Answer 1

修正したほうがよい箇所はまだありますが、
クリックの問題の原因として
$(function () ...
addEvent(window,"load",function () ....

の意味は同じです。
更に、$(function　の中に $(function を続けたりと、
クリックした時点でfuncFooterまるごと実行したためざっくり破綻してます。
修正点はありますが、まずはここの修正として
「オンロードはシンプルに」

<script>
var footerId = "footer";

function footerFixed(){
    //ドキュメントの高さ
    var dh = document.getElementsByTagName("body")[0].clientHeight;
    //フッターのtopからの位置
    document.getElementById(footerId).style.top = "0px";
    var ft = document.getElementById(footerId).offsetTop;
    //フッターの高さ
    var fh = document.getElementById(footerId).offsetHeight;
    //ウィンドウの高さ
    if (window.innerHeight){
        var wh = window.innerHeight;
    }else if(document.documentElement && document.documentElement.clientHeight != 0){
        var wh = document.documentElement.clientHeight;
    }
    if(ft+fh<wh){
        document.getElementById(footerId).style.position = "relative";
        document.getElementById(footerId).style.top = (wh-fh-ft-1)+"px";
    }
}

//文字サイズ
function checkFontSize(func){

    //判定要素の追加    
    var e = document.createElement("div");
    var s = document.createTextNode("S");
    e.appendChild(s);
    e.style.visibility="hidden"
    e.style.position="absolute"
    e.style.top="0"
    document.body.appendChild(e);
    var defHeight = e.offsetHeight;

    //判定関数
    function checkBoxSize(){
        if(defHeight != e.offsetHeight){
            func();
            defHeight= e.offsetHeight;
        }
    }
    setInterval(checkBoxSize,1000)
}

//イベントリスナー
function addEvent(elm,listener,fn){
    try{
        elm.addEventListener(listener,fn,false);
    }catch(e){
        elm.attachEvent("on"+listener,fn);
    }
}

$(function(){
  //footerFixed();
  checkFontSize(footerFixed);
  addEvent(window,"resize",footerFixed);
  $('input[name=check]').click(footerFixed);
});

</script>

とするだけで動作はします

Comments

[退会済みユーザー]

ありがとうございます。おかげさまでできました。

[vapordog]

ちなみに。。。cssは使わないとのことですが、topをこてこて計算するよりbottom:0px;で終わりということにはお気づきですかね。。。