Showing posts with label html. Show all posts
Showing posts with label html. Show all posts

Wednesday, March 28, 2012

Dynamic HTML ToolTip that loads OnHover/OnMouseOver

right now i have a web app that has a repeater (rather large) with a literal for one of the columns. this literal is a number based on the amount of entries and on load has javascript added to it that displays row specific information built from a database when you hover over it. the problem is that every time the page loads, every tooltip is loaded. i want to only go to the DB and get this info when they hover over that literal. so onmouseover of this literal would trigger an event that builds the tooltip and displays it as before.

i've searched this forum (which by the way isn't efficient) along with some good old Google hunting with no luck. can anyone point me in the right direction? oh yeah, i also would prefer not to use some random 3rd party tool. =)

This is fairly easy. Follow this tutorial:http://ajax.asp.net/docs/tutorials/ConsumingWebServicesWithAJAXTutorial.aspx except that in the 'OnComplete' javascript function that fires when the web service returns, have it fill whatever container you're currently using to display the tooltip (mostly this ends up being the title attribute of one element or another).


I'll check it out and see how it goes. Thanks for the reply =)

dynamic html production to call ajax post via javascript

I am maintaining a page that creates html (not server controls) elements dynamically and when one changes I need to call the ajax postback. Is that possible? The page that is created can't know ahead of time that it will need to post through ajax....

So long as you add a client-side Event handler to your html control when you create it, yes, you can wire it up to make asynchronous requests:http://www.mikesdotnetting.com/Article.aspx?ArticleID=40. Note, the methodology outlined in the article doesn't make an ASP.NET Ajax request or postback. It differs in that it only makes a call to the server-side method you want to invoke. This can be better than using ASP.NET Ajax, in that you aren't recreating all the controls on the page.

Monday, March 26, 2012

DropShadowExtender in a table

Hello,

Does anyone know why the DropShadowExtender doesn't show correctly when the panel control that it calls is under an html table?

The main problem is with the shadow.

Thanks

A simple sample page demonstrating the problem would probably be helpful here.


Some say an image is worth more than 1000 words

As you can see the top an bottom borders look funny.

That is using the same example as the one that the toolkit has, and only inserting the panel into a table, very simple, like this

<table>
<tr>
<td>
<asp:Panel ID="Panel1" runat="server" CssClass="dropShadowPanel" Width="500px">
<div style='padding: 10px'>
<p>
First Name:
<asp:TextBox ID="TextBox1" runat="server" Style='position: absolute; left: 100px;
width: 150px"></asp:TextBox>
</p>
<p>
Last Name:
<asp:TextBox ID="TextBox2" Style='position: absolute; left: 100px; width: 150px'
runat="server"></asp:TextBox>
</p>
<hr />
</div>
</asp:Panel>
</td>
</tr>
</table>

Thanks


I think it may have something to do with one of the other styles/attributes of your page. The below page containing your TABLE above and the necessary framework to get a drop shadow looks fine to me in IE6:

<%@. Page Language="C#" %><%@. Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <div> <atlas:ScriptManager ID="SM" runat="server"> </atlas:ScriptManager> <table> <tr> <td> <asp:Panel ID="Panel1" runat="server" CssClass="dropShadowPanel" Width="500px" Style="background-color: Lime"> <div style='padding: 10px'> <p> First Name: <asp:TextBox ID="TextBox1" runat="server" Style="position: absolute; left: 100px; width: 150px"></asp:TextBox> </p> <p> Last Name: <asp:TextBox ID="TextBox2" Style='position: absolute; left: 100px; width: 150px' runat="server"></asp:TextBox> </p> <hr /> </div> </asp:Panel> </td> </tr> </table> <atlasToolkit:DropShadowExtender ID="DSE" runat="server"> <atlasToolkit:DropShadowProperties TargetControlID="Panel1" Rounded="true" /> </atlasToolkit:DropShadowExtender> </div> </form></body></html>

Hi David,

Thank you for your answer.

I checked out the code for any differences, since it looked pretty much the same as mine. It had a few differences, and I removed some code until I found out what was causing it.
The problem is the Opacity property in DropShadowProperties, if you set that to any value < 1 then you will see the bug.


Weird. My sample looks fine for me in IE6 SP1 even with Opacity="0.5".