2012-02-22 10 views
0

私はこのコードを使用するために 'content' divの高さを変更する必要があります。MJQ - orientationchange divの高さを決して変化させない

$(window).bind('orientationchange', function() { 
    var screenWidth = $(window).width(); 
    if(screenWidth >= 768){ 
     var the_height = ($(window).height() - $(this).find('[data-role="header"]').height() - $(this).find('[data-role="footer"]').height()); 
     $(this).height($(window).height()).find('[data-role="content"]').height(the_height); 
    } 
}); 

特に私はこれをipadとタブレットに使用しています。

答えて

0

orientationchangeイベントが適切に結合されている場合、バインドの内側に警告メッセージを置くことによって確認...仕事のようです...私はクリックイベント(http://jsfiddle.net/reddyprasad321/zj9LV/)によって高さを変更するために、小さな例を行っている

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> 
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> 
<div data-role="page" id="page"> 
    <div data-role="content" id="contentDiv"> 
    This is Content Div .... 
    </div> 
    </div> 
</div> 

とJS:

$('#contentDiv').click(function(){ 
    $('#contentDiv').height($('#contentDiv').height()+20); 
}); 

とCSSの違いを見るために:

#contentDiv{ 
    height:20px; 
border-width: 5px; 
border-spacing: 10px; 
border-spacing: 10px; 
border-image: initial; 
border-color: red; 
line-height: 34px; 
border-left: solid 1px #95C864; 
border-right: solid 1px #74AE3B; 
border-left: solid 1px rgba(255, 255, 255, 0.3); 
border-right: solid 1px rgba(0, 0, 0, 0.1); 
background:green; 
} 

も高さ http://api.jquery.com/height/

+0

を設定するために、ここでチェックそれもorientationchangeイベントで動作しますか? – 3gwebtrain

+0

@ 3gwebtrain:方向変更イベントがcorrenctlyでバインドされている場合は、divの高さを変更することは大きな問題ではないと思います(orientationchange関数内の各コード行をアラートまたはログでデバッグしてください。高さが正しく見つかっているかどうか) –

関連する問題