Solved

webpart mouseover/ tooltip

Posted on 2010-11-11
8
1,811 Views
Last Modified: 2012-05-10
Hi,

I have a dataviewer webpart which shows data from splist. One of the columns in the dataviewer webpart has an image in it and when you put your mouse tip on it, it should open a div as a pop up and show the list items in an html table.
I could use flash or silverlight to make ithe mouse tool tip/mouse over pop up look fancier.

Could you please provide any step-by-step procedure to do it?

Thanks,
Rohit.
0
Comment
Question by:RohitRepu
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
8 Comments
 
LVL 43

Expert Comment

by:zephyr_hex (Megan)
ID: 34122015
0
 

Author Comment

by:RohitRepu
ID: 34122210
Hi Zephyr,
sort of yes, except that i have text to display not images when hovered over.

thanks.
0
 
LVL 31

Accepted Solution

by:
Marco Gasi earned 400 total points
ID: 34133930
Hi, RohitRepu. You could use this to get this effect. First create a div for html table:

CSS
#htmlTable{
  //put your style attributes here
}

In html file write this:

HTML
<div id="htmlTable" style="display:none;">
  put here your code
</div>

This div will be invisible. To your links which has to have hover effect give a class name such 'class='mylink' in order to allow a reference for jQuery.

Now we have to customize javascript code (see snippet below).

I've not tested I use prototype and scriptaculous)ù not jQuery) but I think it could work.

Let me know.
Cheers
function tablePreview(){
	    $("mylink").hover(function(e){
	        var obj = $("htmlTable");
	        var offset = $(this).offset();
	        var winHeight = $(window).height();
	        var winWidth = $(window).width();
	        var scrollLeft = $(window).scrollLeft();
	        var scrollTop = $(window).scrollTop();
	        var objHeight = obj.outerHeight();
	        var objWidth = obj.width()+15;
	        if(((winWidth+scrollLeft)-offset.left)<objWidth){
	            offset.left=((winWidth+scrollLeft)-objWidth);
	        }
	        var maxHeight = (winHeight+scrollTop)-offset.top;
	        if(objHeight>maxHeight){
	            if(offset.top-scrollTop>objHeight){
	                offset.top=offset.top-objHeight-20;
	            }
	            height = (objHeight<winHeight)?objHeight:winHeight;
	        }
	        obj.css({"position":"absolute","top":(offset.top+20)+"px","left":offset.left+20})
	        .fadeIn("fast");
	    },
	    function(){
	        $("htmlTable").remove();
	    });
	};

	// Call the script on page load
	$(document).ready(function(){
	    imagePreview();
	});

Open in new window

0
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 
LVL 31

Assisted Solution

by:Marco Gasi
Marco Gasi earned 400 total points
ID: 34134168
I'm sorry, I forgot to specify that I have used code shown in link posted by zephyr_hex. So you have to use jQuery. I post complete code to insert in the head of your page for javascript.

Cheers
<script type="text/javascript" src="../../Javascript/jquery-1.4.2.min.js"></script>
<script type="text/javascript">

function tablePreview(){
	    $("mylink").hover(function(e){
	        var obj = $("htmlTable");
	        var offset = $(this).offset();
	        var winHeight = $(window).height();
	        var winWidth = $(window).width();
	        var scrollLeft = $(window).scrollLeft();
	        var scrollTop = $(window).scrollTop();
	        var objHeight = obj.outerHeight();
	        var objWidth = obj.width()+15;
	        if(((winWidth+scrollLeft)-offset.left)<objWidth){
	            offset.left=((winWidth+scrollLeft)-objWidth);
	        }
	        var maxHeight = (winHeight+scrollTop)-offset.top;
	        if(objHeight>maxHeight){
	            if(offset.top-scrollTop>objHeight){
	                offset.top=offset.top-objHeight-20;
	            }
	            height = (objHeight<winHeight)?objHeight:winHeight;
	        }
	        obj.css({"position":"absolute","top":(offset.top+20)+"px","left":offset.left+20})
	        .fadeIn("fast");
	    },
	    function(){
	        $("htmlTable").remove();
	    });
	};

	// Call the script on page load
	$(document).ready(function(){
	    imagePreview();
	});
</script>

Open in new window

0
 
LVL 28

Assisted Solution

by:sybe
sybe earned 100 total points
ID: 34134308
pure css is the nicest solution: http://psacake.com/web/jl.asp

If you insist on javascript, don't use jquery, it only complicates things.
0
 

Author Closing Comment

by:RohitRepu
ID: 34242770
thanks
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Background Information Recently I have fixed file server permission issues for one of my client. The client has 1800 users and one Windows Server 2008 R2 domain joined file server with 12 TB of data, 250+ shared folders and the folder structure i…
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question