You start by posting the question you just posted. The next step would be to post the source code of the page that is giving you problems so that we can help you.
DisturbedBuddha:
The next step would be to post the source code of the page that is giving you problems so that we can help you.
OK, got a simplified version all on one page. Looks good in FF (except that you'll be missing a pointer image). Mouse over the table. Don't know what the insert code icon in this forum edit bar is for; it doesn't seem to work.
<%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<script runat="server">
[System.Web.Services.WebMethod()]
public static string GetProdDesc( string prodName )
{
/// convert to if/else later
Hashtable descriptions = new Hashtable( 3 );
descriptions.Add( "Product 1", "Product 1 is a lovely product." );
descriptions.Add( "Product 2", "Product 2 is a lovely product." );
descriptions.Add( "Product 3", "Product 3 is a lovely product. Product 3 is a lovely product. Product 3 is a lovely product." );
return descriptions[prodName].ToString();
}
</script
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Why no worky?</title>
<style type="text/css">
body
{
font-family: Tahoma, Helvetica, Arial;
margin: 1em;
background-color: #718EB6;
}
table
{
text-align:center;
}
#prodDescription
{
/* When I tried to apply this directly to the span (asp label), it just wouldn't work */
padding:.5em;
}
#point
{
position:absolute;
/*background-color:Transparent;*/
display:none;
}
</style>
<script type="text/javascript" >
var prdDivId = '<%= ProductDetail.ClientID %>';
var prdSpanId = '<%= lblProductDetail.ClientID %>';
function shwPrdInf(sender)
{
GetProdDesc(sender.innerHTML);
// popProd is the PopupuControlExtender's Behaviour ID whereas we have to use the hack above for regular server controls (within master pages)
$find('popProd').showPopup(); // can use $find - ajax control
var prdDiv = $get(prdDivId);
if (prdDiv != undefined)
{
senderTop = sender.offsetTop + sender.offsetParent.offsetTop;
senderMid = senderTop + (sender.offsetHeight / 2);
senderRt = sender.offsetLeft + sender.offsetParent.offsetLeft + sender.offsetWidth;
var px = 'px';
var pointer = $get('point');
pointer.style.display = 'block';
pointer.style.top = senderMid - 10 + px;
pointer.style.left = senderRt + px;
prdDiv.style.top = pointer.style.top;
prdDiv.style.left = senderRt + 37 + px;
}
}
function hdPrdInf()
{
$find('popProd').hidePopup();
$get('point').style.display = 'none';
}
function GetProdDesc(prodName)
{
// Result of server function is passed to these callbacks.
function srvPass(result)
{
$get(prdSpanId).innerHTML = result;
}
function srvFail(err)
{
$get(prdSpanId).innerHTML = "unable to retrieve product description";
}
PageMethods.GetProdDesc(prodName, srvPass, srvFail);
}
</script>
</head
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate
<!-- If you reverse the order these two controls are declared, it won't work. Target control is the panel -->
<cc1:DropShadowExtender ID="DropShadowExtender1" runat="server" TargetControlID="ProductDetail" Opacity=".25" Rounded="true" TrackPosition="true" />
<!-- target control is the table. Thing to popup is the panel -->
<cc1:PopupControlExtender ID="PopProductText" runat="server" TargetControlID="Products" PopupControlID="ProductDetail" Position="Right" BehaviorID="popProd" />
<img id="point" src="http://pics.10026.com/?src=images/pointer.gif" class="point" />
<asp:Panel runat="server" ID="ProductDetail" BackColor="#13aa97" Font-Size="Small" Width="275px" >
<div id="prodDescription">
<asp:Label ID="lblProductDetail" runat="server" Text="Product Description" />
</div>
</asp:Panel
<!-- The default behaviour is to popup on click (which it will still do) -->
<div>
<asp:Table ID="Products" runat="server" Height="87px" Width="229px" GridLines="Both" BorderColor="Black">
<asp:TableRow ID="TableRow1" runat="server">
<asp:TableCell ID="TableCell1" runat="server" onMouseOver="shwPrdInf(this);" onMouseOut="hdPrdInf();">Product 1</asp:TableCell>
<asp:TableCell ID="TableCell2" runat="server">$50</asp:TableCell>
</asp:TableRow>
<asp:TableRow ID="TableRow2" runat="server">
<asp:TableCell ID="TableCell3" runat="server" onMouseOver="shwPrdInf(this);" onMouseOut="hdPrdInf();">Product 2</asp:TableCell>
<asp:TableCell ID="TableCell4" runat="server">$25</asp:TableCell>
</asp:TableRow>
<asp:TableRow ID="TableRow3" runat="server">
<asp:TableCell ID="TableCell5" runat="server" onMouseOver="shwPrdInf(this);" onMouseOut="hdPrdInf();">Product 3</asp:TableCell>
<asp:TableCell ID="TableCell6" runat="server">$15</asp:TableCell>
</asp:TableRow>
</asp:Table>
</div
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html
What exactly are you seeing? I ran your example and it seems to be working just fine. (Internet Explorer 7) Check to make sure that IE's security settings are letting you run javascript. Also, if you are running IE6, it has issues with transparency.
What exactly are you seeing?
Using IE7. What I get depends on the doctype, but with that snippet I get the div that is the target panel of the PopupControlExtender appearing fixed above the table. It has rounded corners, but the drop shadow appears nowhere. I know javascript is working because on mouse over the table, I see the PageMethod calls updating the text in said div.
That is exactly what I see too when my Security settings are set too high for the zone I'm working in. Found at:
Tools > Internet Options > Security Tab > Security level for this zone > Internet
That is exactly what I see too when my Security settings are set too high for the zone I'm working in.
My settings for for the Internet zone are set to the default (Medium-high). Would I need to lower them to medium (can't test - locked down)?
Actually, I misstated earlier. You are probably testing this locally (http:localhost). For that, you'd have to look at the Security settings for Local Intranet, not Internet. My copy of your code works on all but the highest setting ("High").
You are probably testing this locally (http:localhost). For that, you'd have to look at the Security settings for Local Intranet, not Internet. My copy of your code works on all but the highest setting ("High").
I'm locked in at medium - default. I don't see anything disabled in the list that would seem to preclude scripting (and of course, it's working generally).
No comments:
Post a Comment