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?
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?
var theHeight = document.getElementById('I mage1').he ight;
http://www.w3schools.com/jsref/prop_img_height.asp shows a more complete example
ASKER
If I use document.getElementById('I mage1').he ight="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?
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)?
ASKER
The name of my contentholder
MainContent_Image1
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("M ainContent _Image1"). FindContro l("Image1" ).ClientID %>').height="100"
so maybe this'll work:
document.getElementById('<
ASKER
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
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>
ASKER
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?
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
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
ASKER
Amick:
Thanks that helped and it almost works ..
Two things,
In my simple snippet, the get_elementbyid('mainconte nt_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?
Thanks that helped and it almost works ..
Two things,
In my simple snippet, the get_elementbyid('mainconte
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.
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>
ASKER
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 ).FindCont rol(c_id). ClientID %>').height = "400";
}
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('<
}
This may help: http://forums.asp.net/p/936107/1109319.aspx
ASKER
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?
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:
BTW, I see that MS has taken down their sample code related to FindControl due to script exploits.
Try it this way:
function zoomin() {
document.getElementById('<%= Page.Master.FindControl(MainContent).FindControl(Image2).ClientID %>').height = "400";
}
BTW, I see that MS has taken down their sample code related to FindControl due to script exploits.
ASKER
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.
@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.
ASKER
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?
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)?
Were you able to successfully run the examples from the article?
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";
}
Were you able to successfully run the examples from the article?
ASKER
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="Main Content">
<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>
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="Main
<asp:ToolkitScriptManager ID="ToolkitScriptManager1"
<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
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Thanks for trying.
I will repost in the asp zone.
I will repost in the asp zone.