2010-12-01 11 views
0

asp.netページで100%の高さ/幅の画像を含むdivのサイズを変更するためにjqueryを使用しようとしています。私は単純なhtmlページとしてうまくいくいくつかのコードを持っています。ここでは、次のとおりです。jquery .css、.height、asp.netの.widthを簡単に使用する

<html> 
<head> 
<title>Image Resize Example</title> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $("#SizeSelect").change(function() { 
     var newDim = $(this).val(); 
     $("div.pillContainer").height(newDim); 
     $("div.pillContainer").width(newDim); 
    }); 
}); 
</script> 
<style type="text/css">  
    div.pillContainer { 
    width: 70px; 
     height: 70px; 
     display: block; 
     margin: 20px; 
    } 
    div.pillContainer img { 
     width: 100%; 
     height: 100%; 
    } 
</style> 
</head> 
<body> 

<div class="pillContainer"><img src="http://www.marvinandshea.com/Images/thumbs/friends_thumbs/friends%20(24).JPG" /></div> 

<b>Size:</b> <select id="SizeSelect" name="SizeSelect" > 
<option value="50 px">Small</option> 
<option value="70 px">Medium</option> 
<option value="90 px">Large</option> 
</select> 
</body> 
</html> 

何らかの理由で、できるだけ早く私はにrunat =サーバーのフォームタグの間に.aspxのページでは、この正確なコードを入れて、再サイジングは働いて終了します。具体的には、ここに私の壊れたaspxページがあります:それは働いて、どのようにそれを修正しないようだ、なぜ

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="MyMediHealth.Interface.WebForm1" %> 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head> 
<title>Image Resize Example</title> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $("#SizeSelect").change(function() { 
     var newDim = $(this).val(); 
     $("div.pillContainer").height(newDim); 
     $("div.pillContainer").width(newDim); 
    }); 
}); 
</script> 
<style type="text/css"> 
    div.pillContainer { 
    width: 70px; 
     height: 70px; 
     display: block; 
     margin: 20px; 
    } 
    div.pillContainer img { 
     width: 100%; 
     height: 100%; 
    } 
</style> 
</head> 

<body> 
<form id="form1" runat="server"> 

<div class="pillContainer"><img src="http://www.marvinandshea.com/Images/thumbs/friends_thumbs/friends%20(24).JPG" /></div> 

<b>Size:</b> <select id="SizeSelect" name="SizeSelect" > 
    <option value="50 px">Small</option> 
    <option value="70 px">Medium</option> 
    <option value="90 px">Large</option> 
</select> 

</form> 
</body> 

誰もが知っていますか?

+1

同じ「」を静的HTMLページに入れても、それでも機能しますか? –

+0

jqueryがロードされているかどうかを確認するには、Firebugをチェックインしますか?壊れているということは、ページが壊れているか、jqueryが機能していないことを意味します。 – kobe

+0

もう1つの違いは.. asp.netページです。doctypeはありますが、通常のhtmlではdoctypeはありません – kobe

答えて

0

もっと良い質問は、なぜどちらのバージョンでも動作していることです。 :)

jQueryの高さ関数に "50 px"(または何でも)を送ります。オプションを変更して番号を送信してみてください。

<option value="50">Small</option> 
<option value="70">Medium</option> 
<option value="90">Large</option> 

これを変更すると、ASP.netで私のために修正されました。 (あなたの言ったように、前にはうまくいきませんでした)

私はあなたのHTML版しかテストしていません。

編集:記録のために、他のバージョンをJSFiddleでも動作させることはできません。 ASP.netに移植する前に変更したと思いますが、あなたがそれを壊したとは思いませんでしたか?

+0

私のためにこれを見てくれてありがとう。 http://api.jquery.com/height/で高さのjqueryドキュメントを読むと、「.height(value)を呼び出すときに、値は文字列(数値と単位)または数値のいずれかになります。 jQueryはピクセル単位を前提としています。だから、私はユニットの存在または不足が問題ではないと思う。しかし、フレデリック・ハミディのドゥ・ドゥ・ドゥー・ドーム型のソリューションが機能します。 – Marvin

+0

複数のブラウザをお試しください。それを取り除くことは私にとっては効果がありませんでした。 – clifgriffin

0

あなたの.aspxコードブロックに終了タグがありませんが、私にとってはうまく働いています。

+0

どのブラウザを試しましたか?私は彼の例がどんなブラウザでも修正されていないのを見たことがありません。 – clifgriffin

+0

Nevermind ... IEはスペースを受け入れるようです。 – clifgriffin

+0

互換モードを使用しない限り、IE 9はスペースを受け入れません。 – Guffa

0

値とその単位の間にはスペースがありません。スペースを削除し、それが動作します:

<select id="SizeSelect" name="SizeSelect" > 
    <option value="50px">Small</option> 
    <option value="70px">Medium</option> 
    <option value="90px">Large</option> 
</select> 

clifgriffinが示唆するように、あなたは、スペースやユニットの両方を削除する場合にも動作します。値が数字の場合はwidthheightのメソッドはpxを追加します。

doctypeなしのページでこれを使用すると、quirksモードでレンダリングされ、ルールはより緩やかになります。値とユニットの間のスペースはまだ許可されていませんが、一部のブラウザは値を使用してユニットpxを想定し、スペースの後ろのものは無視します。

+0

これを見ていただきありがとうございます。私にとって、doctype宣言がまだある限り、何も動作しません。しかし、私がdoctypeを削除した場合、これらのバリエーション(ユニットの有無にかかわらず)がうまく動作しているようです。 – Marvin

+0

@Marvin:上記のコードをページディレクティブ以外にコピーし、値のスペースを削除して別のブラウザで試しました。 Firefox 3.6.12、IE 9(標準と互換モード)、Opera 10.63、Safari 4.0.5で動作します。 – Guffa

関連する問題