Why doesn't this code work?

  • Thread starter Thread starter active
  • Start date Start date
A

active

My old post are getting messy so I thought I'd start a new one.
I get no error messages and using a breakpoint I see that
Image1.Attributes.Add executes.

But the image is still distorted.

Is there no features to help debugging code in Main.Master?

Any suggestions as to how to proceed would be appreciated.



in Main.master.vb
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
Handles Me.Load

Image1.Attributes.Add("onclick", "resizeImg('" + Image1.ClientID + "')")

End Sub





in Main.Master

%@ Master Language="VB" CodeFile="Main.master.vb" Inherits="Default_master"
Debug="true"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

....

<head id="Head1" runat="server">

<title></title>



<script language="JavaScript" type="text/JavaScript">

<%--

function resizeImg(o) {



var o = document.getElementById(o);

var p=o.parentElement;

if ((o.clientWidth/o.clientHeight)>(p.clientWidth/p.clientHeight))

{o.style.width='100%';o.style.height=''}

else

{o.style.width='';o.style.height='100%'}

}

--%>

</script>

</head>

<body style="background-color: rgb(25,25,112)">

....

<asp:TableCell runat="server" ID="TableCellR4C1" Height="300"
BorderStyle="Groove">





<asp:Image ID="Image1" runat="server" AlternateText="Alternate Image"
Height="100%"

ImageAlign="Middle" ImageUrl="~/Images/churchdefault.jpg"

Width="100%" /> <%--OnLoad="resizeImg"--%>


</asp:TableCell>
 
because you only change one dim of the image. if too high, you make it
shorter but leave the width as original size. same with width.

you need to pass the original image size to javascript, and let it calc
new sizes proportionality.


-- bruce (sqlwork.com)
 
I had the felling that the javascript was not changing anything so I changed
resizeImg to just:
o.style.width= 400;

o.style.height=400;

and removed the Width="100%" and the Height="100%" from the Image1
definition

The result is the same as if I use 300 instead of 400.

(The image is not square)



bruce barker said:
because you only change one dim of the image. if too high, you make it
shorter but leave the width as original size. same with width.

you need to pass the original image size to javascript, and let it calc
new sizes proportionality.
Click to expand...


Guess I don't know how to do this!


Thanks
 
I should have included:

With or without the following it works the same

var o = document.getElementById(o);
 
Fix some things and now it works to to extent that the script is run.

If I set scale to .5 it displays as expected.

With that commented out as shown I get no image display.

Also, it seems to me that I should be using the client sizes of p in case
there is a border, but I don't know how to specify client size.


thanks for any help

function resizeImg(o)

{

var o = document.getElementById(o);


var p=o.parentElement;

var scalex=p.Width/o.Width

var scaley=p.Height/o.Height

var scale

if (scalex > scaley)

scale=scaley;

else

scale=scalex;

//scale=0.5

o.width = scale * o.width ;

o.height =scale * o.height;

}
 
I did use the routine since I was so far along with mine but from it I learn
a lot from
img.style.height = height.toString() + 'px';

Don't know how long it would have taken me to learn to add .toString() +
'px'


Thanks a lot

BTW shouldn't the following have a ToString

img.style.left = parseInt((maxWidth - width) / 2) + 'px';
img.style.top = parseInt((maxHeight - height) / 2) + 'px';
 
I did get this working.
Not the least of my problems was that I'm use to VB adjusting my case to
make it correct.
And telling me if I try to save an integer into a string or a float into an
integer.
Debugging script is a bear, at least for me. The IDE does appear to help at
all.

thanks for all who helped in this thread an the other. I really appreciate
it.
 
then why the ToString on:
= height.toString() + 'px';
is height something other then number?


Thanks
 
Back
Top