simple use of jquery .css, .height, .width breaking in asp.net_问答_开发者

I am trying to use jquery to resize a div containing a 100% height/width image in an asp.net page. I have some code that works fine as a simple html page. Here it is:

<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="开发者_StackOverflowtext/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>

For some reason, as soon as I put this exact code in an .aspx page in between form tags runat=server, the re-sizing quits working. To be specific, here's my broken aspx page:

<%@ 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>

Anybody know why it's not working and how to fix it?

A better question is: why is it working at all in either version. :)

You are sending "50 px" (or whatever) to jQuery's height function. Try just sending a number instead by changing your options to:

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

Changing this fixed it for me in ASP.net. (it didn't work before, like you said)

I haven't tested your HTML only version to see why it works.

EDIT: For the record, I can't get your other version to work in JSFiddle either. I think you changed it before you ported it to ASP.net and didn't realize you broke it?

Worked fine for me, though you are missing the closing tag in your .aspx code block.

There is no space between a value and it's unit. Remove the spaces, and it works:

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

It will also work if you remove both the space and the unit, as clifgriffin suggests. The width and height methods will add px if the value is only digits.

When you use this in a page without a doctype, it's rendered in quirks mode and the rules are more relaxed. The space between the value and the unit is still not allowed, but some browsers will use the value and assume the unit px, and ignore what's after the space.