Forums
View unanswered posts | View active topics It is currently Tue Oct 21, 2014 3:36 pm



Reply to topic  [ 4 posts ] 
 jQuery 1.4.2 hover popup + PIE for shawdow box & border 
Author Message

Joined: Mon Oct 04, 2010 3:13 pm
Posts: 3
Post jQuery 1.4.2 hover popup + PIE for shawdow box & border
Hello

Firstly, thank you for making this available.
I am working on a new asp.net 4 project in vs2010, I am using a jQuery function to handle displaying a hover when the mouse moves over some names in a gridview (linkbuttons/anchors when rendered).

The jQuery works perfectly.
I decided then to decorate the hover with rounded corners and a transparent shadow, easy enough in every browser but IE. Researching this brought me here and your fantastic offering.

I have 1 weird behavior, when I mouse over a name for the first time, the text of the hover is in the correct location, but the background is at the top of the page. This only happens when I utilize PIE.

Here is the code:
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
// awesome code snipet from http://blog.chapagain.com.np/jquery-a-simple-tooltip/
var tip = $("#tip");

$("a.tooltip").hover(function (e) {

// assign the <a> title to tip
tip.html($(this).attr("title"));

// empty <a> title
$(this).attr("title", "");

// set the position of tooltip and then display it
tip.css("top", (e.pageY + 5) + "px")
.css("left", (e.pageX + 5) + "px")
.css('display','block');

}, function () {

// hide tooltip
$("#tip").css('display', 'none');

// set the <a> title with tootip content
$(this).attr("title", tip.html());
});
});
</script>
<style type="text/css" >
#tip {
position: absolute;
border: 2px solid black;
background: #D9D7CB;
padding: 4px;
display: none;
-moz-box-shadow: 5px 5px 0px rgba(92, 92, 92, .5);
-webkit-box-shadow: 5px 5px 0px rgba(92, 92, 92, .5);
box-shadow: 5px 5px 0px rgba(92, 92, 92, .5);
border-radius: 5px;
behavior: url(/PIE.htc);
}
.hoverStyle
{
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
font-family:Arial;
font-size:8pt;
color:black;
}
</style>

server side code fills the titles used for the formatted hover

'build some HTML to place in a hover popup with some basic demo/visit info
Dim HoverText As String
HoverText = "<table cellspacing='0' cellpadding='0' class='hoverStyle'>"
HoverText += "<tr><td style='font-weight:bold'>DOB:</td><td>" & e.Row.Cells(5).Text & "</td></tr>"
HoverText += "<tr><td style='font-weight:bold'>AGE:</td><td>" & e.Row.Cells(6).Text & "</td></tr>"
HoverText += "<tr><td style='font-weight:bold'>RACE:</td><td>" & e.Row.Cells(11).Text & "</td></tr>"
HoverText += "<tr><td style='font-weight:bold'>GENDER:</td><td>" & e.Row.Cells(10).Text & "</td></tr>"
HoverText += "<tr><td style='font-weight:bold'>PRIMARY:</td><td>" & e.Row.Cells(7).Text & "</td></tr>"
HoverText += "<tr><td style='font-weight:bold'>REFERRING:</td><td>" & e.Row.Cells(8).Text & "</td></tr>"
HoverText += "</table>"

If e.Row.Cells(1).Controls.Count > 0 Then
Dim btn As LinkButton
btn = e.Row.Cells(1).Controls(0)
btn.ToolTip = HoverText
btn.Attributes.Add("class", "tooltip") ' set the class for the linkbutton (rendered as an anchor) to use JQuery to handle the tooltip display
btn = Nothing
End If

only the first time I moouse over is when it renders in the top left.
If I don't use PIE (and have an ugly arse hover) .. it always displays properly even the first time.

I would LOVE to use this, if possible.

Thank you very much, let me know if you need anything more of me.
Jon


Attachments:
Mon Oct 04, 2010 3:53 pm
Profile

Joined: Tue Nov 09, 2010 10:09 pm
Posts: 1
Post Re: jQuery 1.4.2 hover popup + PIE for shawdow box & border
I've had the same experience mixing jQuery and PIE when toggling between showing and hiding a div. It only seems to do it in IE8 for me.


Tue Nov 09, 2010 10:11 pm
Profile

Joined: Mon Oct 04, 2010 3:13 pm
Posts: 3
Post Re: jQuery 1.4.2 hover popup + PIE for shawdow box & border
Yep, as PIE is only used for IE to enable it to display this (other browsers are already CSS3 compatible)


Thu Nov 11, 2010 7:32 am
Profile

Joined: Mon Oct 04, 2010 3:13 pm
Posts: 3
Post Re: jQuery 1.4.2 hover popup + PIE for shawdow box & border
@svb

I tried this today and it works for me, its a work around and not a fix.
For the div that I wish to display later, I show and hide it in the body onload event. So the first time pie is called the div isn't displayed long enough to be seen. Then the next time it is used, the background displays properly for me.

I added this to the body tag:
onload="try {document.getElementById('your hidden div here').style.display='block';document.getElementById(''your hidden div here').style.display='none';} catch (e){}"

replace 'your hidden div here', with what you want to display later.
there is no flashing or any discernible blip on the screen.

Hope that helps
Jon


Fri Nov 12, 2010 4:00 pm
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 4 posts ] 

Who is online

Users browsing this forum: Bing [Bot], Exabot [Bot], Google [Bot], Yahoo [Bot] and 3 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by STSoftware for PTF.