タイルの背景に合わせてdivの高さを設定する

divの高さを常に20のステップで表示するように制御する必要があります。高さ20ピクセルの繰り返しdivバックグラウンドがあり、divを常に正しい方法で終了します。タイルの背景に合わせてdivの高さを設定する

しかし私が試してみるとうまくいきません。私はjqueryの初心者で、おそらく簡単な間違いを犯しました。

次のテスト用HTMLコードでは、divの高さが常に100ピクセル単位で表示されると予想していますが、動作しません。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://`enter code here`www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Test jquery</title> 
<script type="text/javascript" src="jquery.js"></script> 
<script language=”javascript”> 
$(document).ready(function(){ 

    $('#testCol').height(function(i, h) { return Math.ceil(h/100) * 100; }); 

}); 
</script> 

<style type="text/css"> 
    #testCol { 
     width: 150px; 
     background-color:#FFCC00; 
    } 
</style> 
</head> 

<body> 

    <div id="testCol">df ds d sfdhs fdsf ds fhsdu ds iuhsdi fsdf dhsf sdiuh isdf iusd fiushd fiuds i uhsdiu isudf iusd fiusdh fiusd fih wtwpr wer rew</div> 

</body> 
</html>

出典

2011-09-21 Digger

scriptタグからlanguage = "javascript"を削除します。それはスクリプトを実行しているブラウザをpreveningしています。あなたは、このディレクティブは必要ありませんが、あなたはそれを使用したい場合は、それは次のようになります。

<script type="text/javascript">

出典

2011-09-21 12:37:03 njr101

+1。それでおしまい。それなしでうまく動作します。フィドルを見てください：http://jsfiddle.net/jasongennaro/RCLam/ –

+1。はい！ありがとう、njreed.myopenid.com。 – Digger

ようこそ。受け入れを感謝する。 – njr101

これは、次のようないくつかのきちんとした数学は、ちょうどあなたがに丸めるしたい番号にroundTo変数を設定します。あなたもそう追加したり、必要に応じて減算することを忘れないでくださいパディングの問題に直面する可能性がありhttp://jsfiddle.net/i_like_robots/uBcHh/

：

var height = parseInt($jQueryObj.height(), 10), 
    roundTo = 20; 

if (height && (height % roundTo !== 0)) 
{ 
    height = roundTo * Math.round(height/roundTo); 
}

は、私がここにアクションでこのfiddleofデモのセットアップを持っています。安全のためheightではなくminHeightに設定する必要があります。本当に必要なら、私は本当にあなた自身に、あるいはこの機能を求めてくれた人に尋ねるでしょう。 20ピクセルのステップでのdivの高さを設定するには

出典

2011-09-21 13:24:38

、私は次のように値を変更：

<script type="text/javascript"> 
$(document).ready(function(){ 

    $('#testCol').height(function(i, h) { return Math.ceil(h/20) * 20; }); 

}); 
</script>

出典

2011-09-22 09:09:09 Digger

タイルの背景に合わせてdivの高さを設定する

答えて

関連する問題