Hello
I'm experiencing a few difficulties with the RoundedCornersExtender.
I was trying to show/hide a panel extended by the RoundedCornersExtender.
In the html part, i set the style of the panel this way : style="visibility:hidden;"
Then, with javascript, i do : document.getElementById("myPanel").style.visibility = "visible";
But my panel then does not appear as he should. He contents nothing....
Here's a few code :
the HTML part :<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager><asp:Panel ID="myPanel" runat="server" BackColor="#FFFF80" Height="50px" Width="125px" HorizontalAlign="center" style="visibility:hidden;"> Some Text here...</asp:Panel><ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server" TargetControlID="myPanel" Radius="10" BorderColor="black" Corners="All"></ajaxToolkit:RoundedCornersExtender><div onclick="doThing();">click me</div>
and the javascript part :
<script type="text/javascript"> function doThing() { document.getElementById('myPanel').style.visibility='visible'; } </script>Can someone help me to find a way to show/hide a panel with roundedCorners?
Thanks for your help
John
PS : Sorry for my poor english skills
Hi John,
The reason is that the 'myPanel' element isn't the one defined on your page anymore.
Once the element is extended by a RoundedConerExtender, the element itself will lose its ID. The RCExtender will then create a div element wrap the original element, and assign the ID of the original element to the new one.
So, you'll get this:
<div id='myPanel' > // this div is created by the RCExtender
<div style=....></div> // some other div representing the roundedcorner
<div style='visibility : hidden' >some text here</div> // your original element, note that it doesn't hold the ID anymore and its style is inherited from original settings in source
<div style=....></div> // some other div representing the roundedcorner
</div> //end of wrapper
As you can see, your script didn't change the visibility of the actual element. Thus it still can't be seen.
To workaround it, you may hide it via javascript when the page is loaded rather than set its visibility explicitly in source. For instance:
<%@. Page Language="C#" %
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<script runat="server"
</script
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:Panel ID="myPanel" runat="server" BackColor="#FFFF80" Height="50px" Width="125px" HorizontalAlign="center">
Some Text here.... Note that style property isn't set
</asp:Panel>
<ajaxToolkit:RoundedCornersExtender ID="RoundedCornersExtender1" runat="server" TargetControlID="myPanel" Radius="10" BorderColor="black" Corners="All">
</ajaxToolkit:RoundedCornersExtender>
<div onclick="doThing();">click me</div
<script type="text/javascript">
function doThing()
{
document.getElementById('myPanel').style.visibility='visible';
}
function pageLoad()
{ // this method is called when the page is loaded
document.getElementById('myPanel').style.visibility='hidden'; // this line hides the wrapper
}
</script>
</div>
</form>
</body>
</html>
Hope this helps.
Thanks a lot!
I didn't figure out that the new div without id was inheriting it's style from the previous one. I thought that only the new div that holds the id would...
Your solution works great for my problem.
Once again, thank you!
John
0 件のコメント:
コメントを投稿