?
Solved

reference image height

Posted on 2011-05-09
23
Medium Priority
?
346 Views
Last Modified: 2012-06-27
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?
0
Comment
Question by:kperelman
  • 11
  • 9
  • 3
23 Comments
 
LVL 34

Expert Comment

by:Big Monty
ID: 35721471
var theHeight = document.getElementById('Image1').height;
0
 
LVL 12

Expert Comment

by:Amick
ID: 35721544
0
 

Author Comment

by:kperelman
ID: 35721956
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?
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 34

Expert Comment

by:Big Monty
ID: 35722060
whats the ID of Image1 after you move it to the default page (you can see it when you view source)?
0
 

Author Comment

by:kperelman
ID: 35722175
The name of my contentholder

MainContent_Image1
0
 
LVL 34

Expert Comment

by:Big Monty
ID: 35722277
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"
0
 

Author Comment

by:kperelman
ID: 35723268
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
0
 
LVL 12

Expert Comment

by:Amick
ID: 35723954
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

0
 

Author Comment

by:kperelman
ID: 35724193
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?
0
 
LVL 12

Expert Comment

by:Amick
ID: 35724566
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
0
 

Author Comment

by:kperelman
ID: 35724903
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?

0
 
LVL 12

Expert Comment

by:Amick
ID: 35728083
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

0
 

Author Comment

by:kperelman
ID: 35733732
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";
       }
0
 
LVL 12

Expert Comment

by:Amick
ID: 35734227
0
 

Author Comment

by:kperelman
ID: 35753890
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?
0
 
LVL 12

Expert Comment

by:Amick
ID: 35754277
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.
0
 

Author Comment

by:kperelman
ID: 35755266
No this does not compiler clean either.  It does not like the references to maincontent or image2
0
 
LVL 12

Expert Comment

by:Amick
ID: 35756226
@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.

0
 

Author Comment

by:kperelman
ID: 35756733
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?
0
 
LVL 12

Expert Comment

by:Amick
ID: 35756850
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?
0
 

Author Comment

by:kperelman
ID: 35760025
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>
0
 
LVL 12

Accepted Solution

by:
Amick earned 2000 total points
ID: 35760196
The div=null indicates that you aren't receiving a handle from get(ctl_id).

The question was posted in the javascript section, and although  BigDaddy and I provided an appropriate javascript response in the first two postings, this is really an ASP question.

Clearly this can be done, but I don't have the resources loaded on my machine to explore the ASP issues.  I would suggest that you summarize the things that have been tried in this thread with sufficient detail that you don't have to cover the same ground again, close this question, and ask it again in the ASP zone. The alternative would be to request the moderators add this thread to the ASP zone.

I'm sorry I couldn't help.
0
 

Author Closing Comment

by:kperelman
ID: 35760607
Thanks for trying.  

I will repost in the asp zone.
0

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

749 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question