Link to home
Start Free TrialLog in
Avatar of kperelman
kperelman

asked on

reference image height

I wanted to zoom in on an image on a mouseover using javascript by changing the image height and width.

I have a asp site master with a contentplaceholder on my default page which contains Image1.

I know this can be done but I am not sure of the best way to do this being new at javascript?
Avatar of Big Monty
Big Monty
Flag of United States of America image

var theHeight = document.getElementById('Image1').height;
Avatar of kperelman
kperelman

ASKER

If I use document.getElementById('Image1').height="100" and if the image is on my master page iI can get it to work fine.

If I move image1 to the default page content placeholder the javascript does not work.  

So my question is how do I pass the image1 control from the default page content placeholder to the master page where the javascript is located?
whats the ID of Image1 after you move it to the default page (you can see it when you view source)?
The name of my contentholder

MainContent_Image1
check out #5 on this page: http://www.dotnetcurry.com/ShowArticle.aspx?ID=273

so maybe this'll work:
document.getElementById('<%= Page.Master.FindControl("MainContent_Image1").FindControl("Image1").ClientID %>').height="100"
Two things,

First the code caused this error: NullReferenceException was unhandled by user code
Second, I want to pass the reference to the master page so I do not have to hard code maincontent_image1 and image1
Why don't you create a function which accepts an imagename as a parameter:
<html>
<head>
<script type="text/javascript">
function changeSize(target)
{
document.getElementById(target).width= document.getElementById(target).width * 2;
document.getElementById(target).height=document.getElementById(target).height * 2;


}
</script>
</head>
<body>

<div id="maincontent">
<img id="image1" src="compman.gif" width="107" height="98" />
<br /><br />
<input type="button" onclick="changeSize('image1')" value="Change size of image" />
</div>
</body>
</html>

Open in new window

Amick:

This is exactly what I was looking to do.  And if the image is on the master page this works fine.

But I believe due to referencing it does not work if the image1 is in the contentplaceholder.  I do not know what the onclick="" value should be?
You might want to look at the code from the client side as that is where javascript runs, the name is probably not what you're expecting.

This discussion may be helpful to you: http://www.velocityreviews.com/forums/t312007-contentplaceholder-and-javascript.html

and to some extent this may help too:http://www.vbforums.com/showthread.php?t=541499
Amick:

Thanks that helped and it almost works ..

Two things,

In my simple snippet, the get_elementbyid('maincontent_image2') worked.  When I moved it to my site it added ctl00_ before 'maincontent_image2' (when I view it under the source).  Where is the ctl00 coming from since I did not name any control ctl00?

Second, if I use height= and width= in my asp:image tag the javascript does not work.  If I remove it, the script works fine. I need to set the size when the page first renders.  Do you know why I cannot use the height and width in the tag?

On the first issue, ASP is providing the ct00 tag,

On the second, you might try something like this. My syntax may be off because I don't have ASP on this box but  check this link for details on syntax and usage.

<script type="text/javascript">
function ResizeElementInControlContentPage(contentHolder,controlName) {
var target = document.getElementById('<%= Page.Master.FindControl(contentHolder).FindControl(controlName).ClientID %>');
 
    target.height = "100px";                

}
 /script>

Open in new window

Why am I getting a compiler error on te  document.getE... line?

I simplified the code to try to resolve the error but was not able to do so.

Compiler Error Message: BC30451: 'mc' is not declared. It may be inaccessible due to its protection level.

Source Error:
 
      function zoomin() {
           var mc = "MainContent";
           var c_id = "Image2";
           document.getElementById('<%= Page.Master.FindControl(mc).FindControl(c_id).ClientID %>').height = "400";
       }
Not sure I understand the article.

It seems the complier does not like the variables being used in the <% %>.

So is this just a syntax issue?  Can you get the script I pasted above to compile clean?
I don't have asp on this box, so I can't compile, but it appears that we need to go back to literals because the ASP code isn't seeing the JavaScript variables.

Try it this way:
      function zoomin() {
           document.getElementById('<%= Page.Master.FindControl(MainContent).FindControl(Image2).ClientID %>').height = "400";
       } 

Open in new window





BTW, I see that MS has taken down their sample code related to FindControl due to script exploits.
No this does not compiler clean either.  It does not like the references to maincontent or image2
@The_Big_Daddy - do you have any additional suggestions for kperelman?  Without setting up an ASP test environment, I think I'm not going to be more help.

@kperelman, An alternative would be to go with an entirely different approach.

A JavaScript / jQuery solution is discussed on this page. Several of the reader contributions on the issue seem valuable as well.

This article discusses ASP.NET Ajax shortcut functions.

I like the AJAX article.  I think I can get what I need.

Based on this I have a syntax javascript question.  If I have a function

function zoomin() {
            var div = $get('<%= image2.ClientID %>')
            div.height = "400";}

and the image tag:

   <asp:Image ID="Image2" runat="server"  onmouseover="zoomin();" />

How do I change this to get this to work: onmouseover="smi('<%= Image2.ClientID %>');"

I tried this but it does not work:
function zoomin(ctl_id) {
            var div = $get(ctl_id)
            div.height = "400";}

but get the message: Microsoft JScript runtime error: 'null' is null or not an object at the div line?
It seems as if you aren't getting a return from $get.
If you run this, do you see anything intelligent at alert(div)?

function zoomin(ctl_id) {
            var div = $get(ctl_id)
            alert(div);
            div.height = "400";
            }

Open in new window


Were you able to successfully run the examples from the article?
The alert says div = null

Also to recap, my image is in a contentplaceholder (but the javascript is within the contentplaceholder) on my default page for my master page.

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server"/>
    <script language="javascript" type="text/javascript">
        function zoomin(ctl_id) {
            var div = $get(ctl_id)
            alert(div);
            div.height = "400";
        }
    </script>
    <asp:Image ID="Image2" runat="server"  onmouseover="zoomin('<%= Image2.ClientID %>');" />
</asp:Content>
ASKER CERTIFIED SOLUTION
Avatar of Amick
Amick
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thanks for trying.  

I will repost in the asp zone.