Develop Reference

ScrollTo on click not scrolling to the correct list item

I have an SVG map and a list where if you click on a plot number on the map it highlights on the list.
As there are quite a few items, when you click on a plot number on the map its supposed to scroll the list on the right to the correct item.
However as you start clicking around on all different numbers you can see the scroll breaks and it no longer scrolls to the correct number.
Codepen here.
JS Code below:
$('.plot__list__item').click(function () {
$(this).toggleClass('selected');
$(this).siblings('li').removeClass('selected');
$('#' + $(this).data('map')).toggleClass('selected');
$('#' + $(this).data('map')).siblings('g').removeClass('selected');
});
$('.plot__map__item').click(function () {
$(this).toggleClass('selected');
$(this).siblings('g').removeClass('selected');
$('#' + $(this).data('list')).toggleClass('selected');
$('#' + $(this).data('list')).siblings('li').removeClass('selected');
});
$('.plot__map__item').click(function () {
let id = $(this).data('list');
let scrollPos = $('#' + id).position().top;
$('.plot__list').animate({
scrollTop: scrollPos
}, 400);
});

The scroll position of the list will keep changing when you scroll it. Which is why you're getting irregular scrollpos. For example, when you initially click the 1 plot, the scrollpos will be 0. But when you scroll the list a bit it changes to a negative number and it will keep changing when you're scrolling the list.
To fix this, Calculate the top of your list and add the list's position to it. Change your click's animate function to:
scrollTop: $('.plot__list').scrollTop() + $('#' + id).position().top
Check codepen here.

You should take in consideration your last scroll position. Try this code:
var currentPosition = 0;
$('.plot__map__item').click(function () {
let id = $(this).data('list');
let scrollPos = $('#' + id).position().top + currentPosition;
currentPosition = scrollPos;
$('.plot__list').animate({
scrollTop: scrollPos
}, 400);
});
However, this solution will not work if you do scrolling without clicking on numbers. In that case you will need to recalculate your current position on scroll event.

Find div closest to the bottom of the page

I am working on a project and I have an array of elements that are displayed one under each other.
When I press an arrow, I want to find the div closest to the bottom and scroll up to the top of that div.
This is what I have when I click the arrow:
$(".my-elements").each(function(i){
var divTopPosition = $(this).offset().top;
var scrollTop = $(window).scrollTop();
var difference = -Math.abs(scrollTop - divTopPosition);
if(/* this is the div closest to the bottom */)
{
$("body").animate({scrollTop: difference}, 2000);
return false;
}
});

if you know parent, you can use this selector:
$( "<parent>:last-child" )

Jquery positioning with position()

I want to make something like this:
So when I click on text "Hi, ..." it toggle(); dropdown menu and positions that menu like on image.
But when I resize browser I get something like this:
Here is jsfiddle

Put your code :
var x = $(".icons").position();
document.getElementById("user_menu").style.left = x.left + "px";
Inside $(".icons").click(function(){
It will recalculate the position each time you click to open the dropdown.
Edit :
You can also bind the position to the window.onresize event :
$(".icons").click(function(){
$("#user_menu").toggle();
calculatePosition();
});
$(window).resize(calculatePosition);
function calculatePosition() {
var x = $(".icons").position();
document.getElementById("user_menu").style.left = x.left + "px";
}
Thanks to the code above, your element will be repositionned when you resize the window (avoid the offset when the dropdown is opened)

in gamequery I am trying to move a selected object with mousetracker by clicking on the object, and dragging it

I know I can use mousedown selection for it, but I am wanting the clicked on sprite to follow my mouse, there is a mousetracker function of sorts mentioned in the api; but unfortunately there are no examples of this other than stating that it allows mouse detection.
//add mousedown events for yarnballs.
$(".gQ_sprite").mousedown(function() {
clickedDivId = $(this).attr('id');
if(clickedDivId.charAt(8) == "-")
{
currentClickedDivId = clickedDivId
$(document).mousemove(function(e){
spriteXPosition = e.pageX
spriteYPosition = e.pageY
});
}
});
I have the location of the mouse selected, just not sure how to get the selected sprite to follow it.
any help would be greatly appreciated.

What Mati said is correct: $.gQ.mouseTracker allows you to access the mouse's state outside of an event handler. The example he gives is correct but it can't be used to move a gQ object (sprite, tile-map or group) around because you'r not allowed to use the .css() function for those. Doing so will break collision detection.
If what you want is to move a gQ object you should do this instead :
$('#' + currentClickedDivId).xy($.gQ.mouseTracker.x, $.gQ.mouseTracker.y);
But since this should be done in a periodical callback, the smoothness of the dragging will depend on the refresh rate.
If you want to use event handlers instead you could modify you code to look like this (without using the mouseTracker):
var clickedDiv;
var clickedDivOffset = {x:0, y:0};
$(".gQ_sprite").mousedown(function(e) {
clickedDiv = $(this);
clickedDivOffset = {
x: e.pageX - clickedDiv.x() - $().playground().offset().left,
y: e.pageY - clickedDiv.y() - $().playground().offset().top
};
});
$(".gQ_sprite").mouseup(function() {
clickedDiv = false;
});
$().playground().mousemove(function(e) {
if(clickedDiv){
clickedDiv.xy(
e.pageX - clickedDivOffset.x,
e.pageY - clickedDivOffset.y,
);
}
});
This will implement a drag-n-drop effect. If you want the clicked element to stick to the mouse you will have to slightly adapt the code but the basics will remain the same.

According to the documentation:
If the mouse tracker is enabled you can check the state of the mouse at anytime by looking into the object $.gQ.mouseTracker where x and y contain the position of the mouse and 1, 2 and 3 a boolean value where true means that the first, second or thrid button is pressed.
Observe the output of:
$("#playground").playground({ refreshRate: 60, mouseTracker: true });
$.playground().startGame();
$.playground().registerCallback(function(){
console.log( $.gQ.mouseTracker );
}, 1000);
To make those divs actually follow the cursor, you have to use .css()
$('#' + currentClickedDivId).css({
top: $.gQ.mouseTracker.y + 'px',
left: $.gQ.mouseTracker.x + 'px'
});

Get clicked element by a trigger

Is there any way how to get element selector which was clicked by trigger? I'm trying to avoid specification of certain element in trigger method like $("#certain_element").trigger(e); I want to call a trigger on some position in the page defined by pageX and pageY params and then get an element which was clicked.
var e = new jQuery.Event("click");
e.pageX = 80;
e.pageY = 40;
$('*').trigger(e);
$('*').click(function() {
alert('This element was clicked:'+$(this).get(0).tagName);
});
This script isn't working correctly.

Based on the comments from Andrew and Anurag:
$(document.elementFromPoint(80, 40))
.trigger('click')
.css('background-color', 'blue');

You are triggering it BEFORE binding the click.
var e = new jQuery.Event("click");
e.pageX = 80;
e.pageY = 40;
// binds
$('*').click(function() {
alert('This element was clicked:'+$(this).get(0).tagName);
});
// then triggers
$('*').trigger(e);
Eventhough, if I were you, I'd use another selector, which would not trigger the event for window, document and another unecessary tags.
$(documnet.body).find('*').click(...);
$(document.body).find('*').trigger(e);