LinuxQuestions.org
Download your favorite Linux distribution at LQ ISO.
Home Forums Tutorials Articles Register
Go Back   LinuxQuestions.org > Forums > Non-*NIX Forums > Programming
User Name
Password
Programming This forum is for all programming questions.
The question does not have to be directly related to Linux and any language is fair game.

Notices


Reply
  Search this Thread
Old 01-05-2011, 03:55 PM   #1
filterfann
Member
 
Registered: Dec 2005
Posts: 61

Rep: Reputation: 15
JQuery/CSS Question


Hi Everyone,
I have a CSS issue (I think). I'm attempting to implement a tooltip when you hover over a date from the fullcalendar JQuery plugin and it should display a tooltip. I have everything working except the fact that the positioning of the tooltip isn't showing up at the clientY access specified (at the cursor). Here is the code.

<section id="content">
<script type='text/javascript'>

$(document).ready(function() {

$('#calendar').fullCalendar({

eventMouseover: function(calEvent,jsEvent) {
var event = $(".fc-event-title").text();
$("body").append(calEvent.tooltip);
//this is the part in question
$("#popupDate")
.css("top",(jsEvent.clientY - xOffset) + "px")
.css("left",(jsEvent.clientX + yOffset) + "px")
.fadeIn("fast");
///////////////
},
eventMouseout: function() {
$("#popupDate").remove();
},
header: {
left: 'prev,next today',
center: 'title',
draggable: false,
right: 'month,agendaWeek,agendaDay'
},
editable: false,

events: [
<? $numItems = count($events);
$c=1;?>
<? foreach($events as $key=>$event): ?>
{

id: <?=$event['id']; ?>,
title: '<?=$event['title']; ?>',
start: '<?=$event['startmonth']; ?>/<?=$event['startday']; ?>/20<?=$event['startyear']; ?>',
description: '<?=$event['brief']; ?>',
tooltip: "<div id='popupDate' class='popup_msg'><b><?=$event['title']; ?></b><br /><p id='tooltip'>0<?=$event['startmonth']; ?>/0<?=$event['startday']; ?>/<?=$event['startyear']; ?> at <?=$event['starttimehour']; ?>:0<?=$event['starttimeminute']; ?> <?=$event['starttimeampm']; ?> - 0<?=$event['endtimehour']; ?>:0<?=$event['endtimeminute']; ?> <?=$event['endtimeampm']; ?><br /><?=$event['brief']; ?></p></div>"

}
<? if($c != $numItems){echo ","; }?>
<? $c++; ?>
<? endforeach; ?>]});
});
</script>
<div id="calendar"></div>
</section>

On hover, the tooltip shows up on the far left underneath the calendar instead of by the cursor. Does anybody have any clue as to what could be causing the dynamic css to not work properly? I have nothing inside my stylesheet called #popupDate. This is generated on the fly. Could it be possible that something inside my stylesheet is overwriting this? I'll post it if I need to but it's quite a bit of code.

Thanks!
 
  


Reply



Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off



Similar Threads
Thread Thread Starter Forum Replies Last Post
LXer: Android & iPhone browser wars: Using HTML5, CSS, and jQuery LXer Syndicated Linux News 0 01-05-2010 01:40 PM
css question rblampain Programming 6 03-03-2007 12:08 AM
CSS Question iammisc Programming 2 12-19-2005 12:44 PM
CSS question PensJunkie Linux - General 2 07-22-2005 05:07 AM
css question tekmorph Programming 10 09-04-2004 09:21 PM

LinuxQuestions.org > Forums > Non-*NIX Forums > Programming

All times are GMT -5. The time now is 04:11 PM.

Main Menu
Advertisement
My LQ
Write for LQ
LinuxQuestions.org is looking for people interested in writing Editorials, Articles, Reviews, and more. If you'd like to contribute content, let us know.
Main Menu
Syndicate
RSS1  Latest Threads
RSS1  LQ News
Twitter: @linuxquestions
Open Source Consulting | Domain Registration