Develop Reference

Set focus on element using jQuery coordinates/offset values

jQuery.fn.getCoord = function(){
var elem = $(this);
var x = elem.offset().left;
var y = elem.offset().top;
console.log('x: ' + x + ' y: ' + y);
return {
x,
y
};
};
The above function can be used to extend jQuery, it returns an object with the x and y coordinate of a given element, left and top value respectively.
Is there a way to set focus to an element based on these x, and y coordinates.
E.g
//Get button coordinates
let coords = $("#gridButton3").getCoord();
//Get height of current element in focus
let itemHeight = $("#gridButton").scrollHeight;
//Delta value representing some space in between elements
const delta = 30;
//coords.x = 200
//coords.y = 50
//itemHeight = 200
Given the above values in a n x n grid, lets say I want to set focus to a grid button just below gridButton3.
I would do the following :
let {focusX , focusY } = coords;
//Only changing y coordinate because we are navigating down, x coordinates doesn't change
focusY = focusY + itemHeight + delta;
//Here is the part I need some insight on
//scroll to new y location
$('html, body').animate({
scrollTop: focusY
}, 500)
//Now focus on element at coordinates (focusX,focusY)
I know how to set focus via element id or by some selector, I need to figure how to do it based on element at a given x,y .

To get an element from a point in the DOM you can use document.elementFromPoint()

Finding Image Height variable for multiple images in Jquery

I'm currently working on this script for "tooltips" on a website. I'm finding that the code I currently have will get the image height for my first tooltip image on the page ('pop1') but it ignores the rest (they come out as null).
What's the most effective way to get all the tooltip image heights, and use them every time the user scrolls over the tooltip image?
Another issue, if anyone is able to figure this one out - is that on my FULL webpage (many more divs, rows, columns, etc.) the script begins to break because clientX and clientY are being affected by the various divs and page elements.
I'd like to be able to set clientX and clientY to the exact (x, y) coordinates that the user's mouse is at, relative to the entire webpage, not relative to the page's child elements.
Thanks
Here's my JSFiddle: http://jsfiddle.net/tgs7px4f/18/
JS Code:
$('a.popper').hover(function (e) {
var target = '#' + ($(this).attr('data-popbox'));
$(target).show();
}, function () {
var target = '#' + ($(this).attr('data-popbox'));
if (!($("a.popper").hasClass("show"))) {
$(target).hide();
}
});
$('a.popper').mousemove(function (e) {
var target = '#' + ($(this).attr('data-popbox'));
// images vary in height!
// images are all 366px wide.
var imageWidth = 366;
var imageHeight = $(".popimg").height();
//alert('Image Height: ' + imageHeight);
//Offset tooltip:
//10px to the right of cursor
var imageX = e.clientX + 20;
//imageHeight up from cursor
var imageY = e.clientY - imageHeight - 20;
// Find bounds of current window, and if...
// Tooltip goes off right side:
if ((imageX + imageWidth) > $(window).width()) {
//Move tooltip left so it meets edge:
imageX = $(window).width() - imageWidth;
}
// Tooltip goes off top
if (imageY < 0) {
//Move tooltip down so it meets top:
imageY = 0;
}
$(target).css('top', imageY).css('left', imageX);
});

What's the most effective way to get all the tooltip image heights, and use them every time the user scrolls over the tooltip image?
First of all, I suppose you mean whenever a user does a mouseover on one of the elements? However, this seems to work and it cashes the height of the image directly on the element and uses it the next time a mouseover occurs:
$('a.popper').mousemove(function (e) {
var target = '#' + ($(this).attr('data-popbox'));
// images vary in height!
// images are all 366px wide.
var imageWidth = 366;
$target = $(target);
if (!$target.attr("height")) {
var img = $target.closest(".popbox").children("img");
var imageHeight = img.height();
$target.attr("height", imageHeight);
console.log("height attribute set");
} else {
var imageHeight = +($target.attr("height")) + 0;
console.log("cached height used");
}
console.log('Image Height: ', imageHeight);
//Offset tooltip:
//10px to the right of cursor
var imageX = e.clientX + 20;
//imageHeight up from cursor
var imageY = e.clientY - imageHeight - 20;
// Find bounds of current window, and if...
// Tooltip goes off right side:
if ((imageX + imageWidth) > $(window).width()) {
//Move tooltip left so it meets edge:
imageX = $(window).width() - imageWidth;
}
// Tooltip goes off top
if (imageY < 0) {
//Move tooltip down so it meets top:
imageY = 0;
}
$(target).css('top', imageY).css('left', imageX);
});
Obviously, you should remove all the console.log statements which are for testing purposes only.
jsFiddle
Regarding your second question, it's hard to say anything concrete without another jsFiddle or additional code.

Change sprites scroll speed

I'm creating a parallax website but I'm using the code of some nice tutorial that I found.
This tutorial came with some JS to change the scroll speed of some sprites using the tag "data-" but even though I already have the sprites with a different scrolling speed compared to the background, I can't modify this speed to my own preference.
This is the JavaScript code:
$(document).ready(function(){
// Cache the Window object
$window = $(window);
// Cache the Y offset and the speed of each sprite
$('[data-type]').each(function() {
$(this).data('offsetY', parseInt($(this).attr('data-offsetY')));
$(this).data('Xposition', $(this).attr('data-Xposition'));
$(this).data('speed', $(this).attr('data-speed'));
});
// For each element that has a data-type attribute
$('section[data-type="background"]').each(function(){
// Store some variables based on where we are
var $self = $(this),
offsetCoords = $self.offset(),
topOffset = offsetCoords.top;
// When the window is scrolled...
$(window).scroll(function() {
// If this section is in view
if ( ($window.scrollTop() + $window.height()) > (topOffset) &&
( (topOffset + $self.height()) > $window.scrollTop() ) ) {
// Scroll the background at var speed
// the yPos is a negative value because we're scrolling it UP!
var yPos = -($window.scrollTop() / $self.data('speed'));
// If this element has a Y offset then add it on
if ($self.data('offsetY')) {
yPos += $self.data('offsetY');
}
// Put together our final background position
var coords = '50% '+ yPos + 'px';
// Move the background
$self.css({ backgroundPosition: coords });
// Check for other sprites in this section
$('[data-type="sprite"]', $self).each(function() {
// Cache the sprite
var $sprite = $(this);
// Use the same calculation to work out how far to scroll the sprite
var yPos = -($window.scrollTop() / $sprite.data('speed'));
var coords = $sprite.data('Xposition') + ' ' + (yPos + $sprite.data('offsetY')) + 'px';
$sprite.css({ backgroundPosition: coords });
}); // sprites
// Check for any Videos that need scrolling
$('[data-type="video"]', $self).each(function() {
// Cache the video
var $video = $(this);
// There's some repetition going on here, so
// feel free to tidy this section up.
var yPos = -($window.scrollTop() / $video.data('speed'));
var coords = (yPos + $video.data('offsetY')) + 'px';
$video.css({ top: coords });
}); // video
}; // in view
}); // window scroll
}); // each data-type
}); // document ready
and this is the HTML markup of a single sprite:
<div class="stars" data-type="sprite" data-speed="10">
<img class="star1" src="img/cenas/1.PNG">
</div>
I tried changing the data-speed value but there aren't any changes. What can I do to have different sprites with different scroll speed?

Basic Parallax - Background jerking up

I have a simple code for moving the background images, but the image is jerking up once the section is in view. the idea is for the background-pos to move only when the section is in view.
Any ideas?
$window = $(window);
$('.portfolioSection').each(function(){
var $bgobj = $(this); // assigning the object
var speed = 8;
$(window).scroll(function() {
if($(window).scrollTop() + 150 >= $bgobj.offset().top){
// Scroll the background at var speed
// the yPos is a negative value because we're scrolling it UP!
var yPos = -($window.scrollTop() / speed);
// Put together our final background position
var coords = '0 '+ yPos + 'px'
// Move the background
$bgobj.css({ backgroundPosition: coords });
}
}); // window scroll Ends
});

Solved it- I didn't account for the section position - Line 9
var yPos = -(($window.scrollTop()-$bgobj.offset().top) / speed);

Create symbol on click at click location

I have an edge animate document where I would like to create/trigger a symbol whenever the user touches anywhere on the stage. I want the center of the symbol to be where their pointer was located on the stage at the time of the click.
I know how to determine the click x,y coordinates using Javascript, but how do I place a symbol in that location?

I did it this way:
//Create symbol on stage.
//The number 1 indicates the position in the list
//of the symbol instances on the stage,
//like the one you see in the right panel called "Elements".
//Use it to set the z-index (position elements in front or in background).
var myNewSymbol = sym.createChildSymbol("myNewSymbol", "Stage", 1);
var x = e.pageX;
var y = e.pageY;
// I wanted position to be in percentage
var bodyHeight = $(window).height();
var bodyWidth = $(window).width();
var xPercent = 100 * x / bodyWidth;
var yPercent = 100 * y / bodyHeight;
//Set the position
myNewSymbol.getSymbolElement().css("position", "absolute");
myNewSymbol.getSymbolElement().css("left", xPercent + "%");
myNewSymbol.getSymbolElement().css("top", yPercent + "%");