Hi,
I am having an application emp calendar where calendar page 1 and popup page 2.
and i have written jquery as
whenever user on-mouse-over the emp name, popup page 2 appears.
Here i am having the problem when after mouse over no buttons are working(< Previous,Next >...etc), to make it work i need to refresh the page.
Please help me what changes needs to be done in my jquery to make all buttons work once mouse( mouse over) removed from emp name
Please check below mentioned example application for more reference.
http://apex.oracle.com/pls/apex/f?p=33780:1:106987599190291
and jquery user for popup page
<script type="text/javascript" src="#WORKSPACE_IMAGES#jquery.js"></script>
<script type="text/javascript">
$(function()
{
var hideDelay = 500;
var currentID;
var hideTimer = null;
var container = $('<div id="personPopupContainer">'
+ '<table width="500" border="0" cellspacing="0" cellpadding="0" align="center" class="personPopupPopup">'
+ '<tr>'
+ ' <td class="corner topLeft"></td>'
+ ' <td class="top"></td>'
+ ' <td class="corner topRight"></td>'
+ '</tr>'
+ '<tr>'
+ ' <td class="left"> </td>'
+ ' <td><div id="personPopupContent"></div></td>'
+ ' <td class="right"> </td>'
+ '</tr>'
+ '</table>'
+ '</div>');
$('body').append(container);
$('.personPopupTrigger').live('mouseover', function() {
var settings = $(this).attr('rel').split(',');
var linkid= settings[0];
var linkpage= settings[1];
var linkitem= settings[2];
if (currentID == '')
return;
if (hideTimer)
clearTimeout(hideTimer);
var pos = $(this).offset();
var width = $(this).width();
container.css({
left: (pos.left + width) + 'px',
top: pos.top - 5 + 'px'
});
$('#personPopupContent').html(' ');
$.ajax({
type: 'GET',
url: 'f?p=&APP_ID.:'+linkpage+':&APP_SESSION.::::'+linkitem+':'+linkid,
dataType: 'html',
success: function(result)
{
$('#personPopupContent').html(result);
}
});
container.css('display', 'block');
});
$('.personPopupTrigger').live('mouseout', function()
{
if (hideTimer)
clearTimeout(hideTimer);
hideTimer = setTimeout(function()
{
container.css('display', 'none');
}, hideDelay);
});
$('#personPopupContainer').mouseover(function()
{
if (hideTimer)
clearTimeout(hideTimer);
});
$('#personPopupContainer').mouseout(function()
{
if (hideTimer)
clearTimeout(hideTimer);
hideTimer = setTimeout(function()
{
container.css('display', 'none');
},hideDelay);
});
});
</script>
<style type="text/css">
#personPopupContainer {
position:absolute;
top:0;
right:0;
display:none;
z-index: 20000;
margin-top: 0px;
margin-left: -10px;
}
.personPopupPopup {
}
#personPopupContent {
background-color: #FFF;
min-width: 175px;
min-height: 50px;
}
.personPopupPopup .personPopupImage {
margin: 5px;
margin-right: 15px;
}
.personPopupPopup .corner {
width: 19px;
height: 15px;
}
.personPopupPopup .topLeft {
background: url(#APP_IMAGES#balloon_topLeft_blue.png) no-repeat;
}
.personPopupPopup .bottomLeft {
background: url(#APP_IMAGES#balloon_bottomLeft_blue.png) no-repeat;
}
.personPopupPopup .left {
background: url(#APP_IMAGES#balloon_left_blue.png) repeat-y;
}
.personPopupPopup .right {
background: url(#APP_IMAGES#balloon_right_blue.png) repeat-y;
}
.personPopupPopup .topRight {
background: url(#APP_IMAGES#balloon_topRight_blue.png) no-repeat;
}
.personPopupPopup .bottomRight {
background: url(#APP_IMAGES#balloon_bottomRight_blue.png) no-repeat;
}
.personPopupPopup .top {
background: url(#APP_IMAGES#balloon_top_blue.png) repeat-x;
}
.personPopupPopup .bottom {
background: url(#APP_IMAGES#balloon_bottom_blue.png) repeat-x;
text-align: center;
}
}
</style>
Please help to overcome this issue.
Thanks and regards,
Ibrahim Sayyed.