good afternoon
Back with another Javascript question.
I need to implement some kind of a map pinpoint system, a la google maps, where I can have a place holder image which on hover or onclick will display a callout pop up with various bits of information.
I have been trying to use the jQuery Callout Plugin, but I am having some issues with the pop up placement
1) my main container uses margin:auto;, and the popup is horizontally displaced by whatever amount the left margin ends up being.
2) the popop is vertically displaced by the amount of space taken by the header and nav divs preceding the div in which the popup occurs.
The images are placed the way I want them, it is only the popups that are offset.
I can at least make sense of the margin displacement issue, but I am baffled by the header/nav displacement.
I haven't a clue how to go about fixing either issue.
So, my question(s):
Can anyone tell me how to fix the problems using this plugin??
or...
Does anyone make use of something similar that they could point me to that is not overly bloated and complex?
I am trying to search for other existing scripts out there, but not coming up with much. I need something relatively pre-fab at this point, and something that doesn't involve loading another API or framework ideally (I make extensive use of jQuery throughout this project).
For reference, the way I need this to work in the big picture is:
- a list of data is pulled from a database
+ for each row, I need to place an image on a map at a particular pixel coordinate, determined by a particular piece of data within that row
+ each image needs to be able to generate a popup, and within each popup I need to list relevant data
I am under a fair amount of pressure to get this done quickly, and would very greatly appreciate any tips!