This is a migrated thread and some comments may be shown as answers.

jQuery/image issues within tooltip

2 Answers 69 Views
ToolTip
This is a migrated thread and some comments may be shown as answers.
Mark H
Top achievements
Rank 1
Mark H asked on 22 May 2009, 04:57 PM
I have a user control that I am using to display thumbnails and within the control it defines a tooltip for each item with a larger version of the image and some text about it. All this is packaged (current;y) within a listview and working nicely.

I wanted to add a javascript dropshadow to the larger image (the one in the tooltip) but cannot get this to work. The shadow library I am using is very simple and uses jQuery.Within the shadow function it tries to get the image.outerWidth and outerHeight but these are always coming through as 0 (hence no shadow displays).

If I use the eact same code in the main part of the user control for the thumbnail image the image is shown correctly with the drop shadow. Any idea why this wouldn't work in the tooltip?

The code is as follows:

  
        <script> 
            $(document).ready(function() { 
                $('#<%= imgWork.ClientID %>').shadow(); 
            }); 
        </script> 
 


FWIW I am also loading my own jquery.js in the Master Page - omitting this (I thought that the rad controls used jquery?) gives me script parsing errors.

Any ideas appreciated!

Mark







2 Answers, 1 is accepted

Sort by
0
Accepted
Svetlina Anati
Telerik team
answered on 25 May 2009, 12:38 PM
Hello Mark,

I built up a test demo based on your explanations but I could not get an error. However, the shadow was not correctly rendered exactly because of incorrect width and height returned. In order to get the desired result you should ensure that the image is completely loaded (which is not the same as ensuring the DOM is ready) and that is why I suggest to use one of the following approaches:

  1. Add an onload attribute to the image and put the shadow there.
  2. Set the shadow the first time the OnClientShow event is fired with a little timeout (you should find which is most proper for your exact case).

For your convenience I prepared a very simple page which demonstrates the second approach - please use this as a start point for your implementation and extend and complicate the logic further in order to meet your needs.

As to your question about jQuery and RadControls, the jQuery.js is actually an embedded resource but you should call $telerik.$ instead of $ because we decided that in this manner we will prevent breaking projects which already use jQuery. However, only the jQuery.js is embedded in Telerik.Web.UI.dll and that is why in your case (due to also using the jquery.shadow.js you should import the js files manually) .


Regards,
Svetlina
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.
0
Mark H
Top achievements
Rank 1
answered on 26 May 2009, 05:23 PM
Thanks - the end solution is even simpler then:

For anyone wanting to do the same, I just put the following in the Page_Load of the user control:

           
imgWork.Attributes.Add("onload","$('#" + imgWork.ClientID + "').shadow();"); 
 

that did the trick

Mark






Tags
ToolTip
Asked by
Mark H
Top achievements
Rank 1
Answers by
Svetlina Anati
Telerik team
Mark H
Top achievements
Rank 1
Share this question
or