simple use of jquery .css, .height, .width breaking in asp.net -
i trying use jquery resize div containing 100% height/width image in asp.net page. have code works fine simple html page. here 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="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> for reason, put exact code in .aspx page in between form tags runat=server, re-sizing quits working. specific, here's 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 , how fix it?
a better question is: why working @ in either version. :)
you sending "50 px" (or whatever) jquery's height function. try sending number instead changing options to:
<option value="50">small</option> <option value="70">medium</option> <option value="90">large</option> changing fixed me in asp.net. (it didn't work before, said)
i haven't tested html version see why works.
edit: record, can't other version work in jsfiddle either. think changed before ported asp.net , didn't realize broke it?
Comments
Post a Comment