We Keep Coding

I want to scroll zoom in and out of an image, but also have pins on that image stay positioned correctly. jQuery

So I want to make a scroll zoom feature on a map I have created. The map contains an image and a number of divs positioned on top of the map marking out positions (pins).
I have found a number of jQuery tools which allows me to scroll zoom on an image. And I could probably try and use the mouse position and scroll amount to edit the coordinates of my divs as well. Is this the best way of going about this, or does anyone know any jQuery tools that will allow me to scroll zoom in and out of divs?
Here are some tools I found for scrolling on images.
image zoomer
Wheel zoom

You could try using leaflet.js. It is a lightweight javascript library meant to be used for maps, but it also work for images. This tutorial could help you start, and you might want to check this post.
Here is a very basic example of what it could look like.

Using DHTMLX Scheduler, prevent tooltips from disappearing when hovering out of the event to the tooltip

I have been using the excellent DHTMLX Scheduler for a few days to get on with it, and I found solutions and workarounds for almost every specific things I wanted to achieve.
However, in this particular case, I am using the extension that allows tooltip customisation when hovering on an event (see doc here) which is working fine.
My problem here is the tooltip disappears when hovering out of the event, which is not wrong. The thing is I want to add clickable content in the tooltip, but since it disappears this simple task is rendered impossible.
I've searched through the docs, various forums and even here, but I haven't found any help regarding that matter.
Long story short, how can I prevent tooltips from disappearing when hovering above the tooltip itself (if at all possible)?
Thank you anyway.

The tooltip dissapears (after some delay) when the mouse hovers on an empty space. I.e. if user could move a pointer from an event into the tooltip without pointing to the elements outside both tooltip and event - tooltip won't dissapear.
Try setting some configurations, so tooltip will appear closer to the pointer and user will be able to move cursor into it:
scheduler.tooltip.config.delta_x = 5;
scheduler.tooltip.config.delta_y = -5;

jquery ui draggable accordion stick to mouse in Chrome

I am working on a jquery ui website and have a draggable accordion div that experiences an odd behavior with the mouse sticking only to the scroll bars.
$("#item_accordion").draggable();
This behavior seems to only occur in Google Chrome which is stranger yet. I can eventually get the mouse to let go of the accordion by doing a right-click and moving the mouse quickly. I was curious if anyone have experience, and hopefully solutions, with this isse.
Thanks so much,
Derek

I've had the same issue. Unfortunately I don't know what's causing it since I didn't want to dig too much into JQuery but I was able to work around it by specifying a "handle" for my draggable object. The "handle" is the only place where a drag can be initiated and since my "handle" didn't contain a scrollbar I no longer had this issue.
$('#overlays_dialog').draggable({handle: '.dialog-header'});
overlays_dialog is a div containing a child div with a class of '.dialog-header'.

Make a div that has literally no background and triggers events below it

I'm trying to come up with a hack for HighCharts. I tried to render a SVG rectangle thats draggable with jQuery UI on top of HighChart but the problem is that Firefox, Chrome, and IE are all a little off when dragging it.
So, my last attempt is to make a div on top of the chart with another div inside that is used as the draggable element I was trying to create with SVG. This is far more reliable in all the browsers and easier to style, but the problem is that now I can't directly interact with the chart anymore. I tried background:transparent and background:none but still nothing.
Any ideas or hacks?

Try to set the opacity 0 and see if it works.

Is there any HTML CSS or JavaScript click through property?

For example on a drag and drop scenario.. I would love to be able to use the onmouseover of the thing we are dragging to, but unfortunately, the design calls for a ghost (copy of what is being dragged) which will surround the area of the mouse pointer. So the cursor is moused over the ghost the whole time.

Are you able to use jQuery? If so, I would look into jQuery UI to handle both your drag and drop events. Since you can make a ghost copy of what you are dragging without disrupting where you drop it.
Visual feedback for drag allowing you to show a fake ghost copy.
- http://jqueryui.com/demos/draggable/#visual-feedback
Visual feedback for when you hover over the droppable area.
- http://jqueryui.com/demos/droppable/#visual-feedback

For Firefox 3.6+, Chrome and Safari, you can use pointer-events: none;
jsfiddle.net Example
Original Post from pixelastic.com
When one HTML element is over another one (like when positioning an
element using position:absolute), you usually can't click through the
top element to access the bottom element.
That's used as a common
technique to prevent the right click on images by some sites (like
Flickr). They just add an empty transparent div over their images to
prevent the lambda user from right clicking and saving the image.
Sometimes, when integrating complex designs, you need those additional
layers, but you also want the user to be able to click through them,
as if they weren't there.
Just use the pointer-events:none css
property to allow click events to go through the element.
This is only
supported by Firefox 3.6+, Chrome and Safari for now.