eventMouseover details are showing at different positions

Guardianx

New Member
I am trying to implement arshaw fullcalendar plugin. I have a FullCalendar implemented in a separate html page and then loaded it on another html page or php page. If i run FullCalendar html alone its displaying exactly how i need. Positions for eventClick, dayClick or working fine. But After loading the full calendar html page in a div tag which is in another page, Appearance of the calendar is fine, but events popups, dayClick popups are getting disturbed. Code for fullcalendar jquery: \[code\]eventMouseover: function(calEvent, jsEvent) { var myFormattedDate = $.fullCalendar.formatDate(calEvent.start, "ddd, dd MMMM yyyy"); $(this).click(function(e) { dateObject.id=calEvent.id; document.getElementById('des').innerHTML=calEvent.description; document.getElementById('tim').innerHTML=myFormattedDate; $('#link1').hide(); $('#link2').hide(); $('#link3').show(); $('#link4').show(); document.getElementById('link3').innerHTML="Delete"; document.getElementById('link4').innerHTML="Edit event >>"; $('.tooltipevetn').fadeIn('500'); $('.tooltipevetn').fadeTo('10', 1.9); $('.tooltipevetn').css('top', e.pageY); $('.tooltipevetn').css('left', e.pageX); }); }, \[/code\].tooltipevetn div code:\[code\]<div id="tevent" class="tooltipevetn" style="width:300px;height:150px;background:#FFFFFF;padding: 10px;position:absolute;z-index:10001;border:1px solid #CCCCCC; display: none;"> <div style="float: right;"><a href="http://stackoverflow.com/questions/13758679/#"><span class="ui-icon ui-icon-closethick"></span></a></div> <h3 id="des"></h3> <p id="tim" style="padding-bottom: 15px;"></p> <br/><br/> <hr/> <a href="http://stackoverflow.com/questions/13758679/#" id="link1" style="font: 14px bold" ></a><a href="http://stackoverflow.com/questions/13758679/#" style="float: right;" id="link2"></a> <a href="http://stackoverflow.com/questions/13758679/#" id="link3" style="font: 14px bold"></a><a href="http://stackoverflow.com/questions/13758679/#" style="float: right;" id="link4"></a></div>\[/code\]css code for the div where calendar is loaded: \[code\].toggled_content{ background-color: #fff; position: absolute; z-index: 1000; overflow:auto; }\[/code\]I am not so much perfect in designing and programming, so please any sort of tips are much appreciated. Thanks in advance
 
Back
Top