I am trying to find out the coordinates of a div with an id of #23 when a button is clicked, the button is called arrowR. Problem is it keeps returning the coordinates of where the mouse is on the button. Is there any way to get the coordinates of the div within the page when the button is clicked? The script which I am using is below:
$('#arrowR').click(function(e)
{
var offset_l = $(this).offset().left - $('#23').scrollLeft();
var left = Math.round( (e.clientX - offset_l) );
if (left != 62) {
alert("Left: " + left );
} else {
alert("works");
}
});
You are getting the offset of the button, you want the offset of the div:
FIDDLE
$('#arrowR').click(function (e) {
var coords = $('#23').offset(); // <-- This.
$('#coords-left').val(coords.left);
$('#coords-top').val(coords.top);
});
I've positioned an element absolutely at the coordinates so you can see in the fiddle that it matches.
Taken from How do I find the absolute position of an element using jQuery?
var position = $(element).offset();
Related
I've created a button for Read More/Read Less functionality but when I'm clicking on the show less it jumps to the bottom. Could you please tell me how to fix this?...it should go to the same position...I'm using oxygen builder (code for this [ https://codepen.io/nick7961/pen/qByYMXZ?editors=0010
])
One way of doing this is to grab the current scroll y value and divide it by the body height to get the scroll position as a percentage. You'll have to do this in the event listener, before changes are made. In my function, setScroll, you can get the new body height and multiply it by the percentage you grabbed earlier, to keep the scroll in the same relative position.
button.addEventListener('click', () => {
const defaultValue = {
element: arrowIcon,
currentIcon: 'fa-chevron-down',
newIcon: 'fa-chevron-up',
};
//show content
if (initial.showAllContent){
showButton(buttonShowLess);
showButton(buttonShowMore, false);
content.classList.remove('gradientContent', 'maxContentHeight');
}else{
let relativeScroll = window.scrollY / document.body.clientHeight;
showButton(buttonShowLess, false);
showButton(buttonShowMore);
defaultValue.currentIcon = 'fa-chevron-up';
defaultValue.newIcon = 'fa-chevron-down';
content.classList.add('gradientContent', 'maxContentHeight');
setScroll(relativeScroll);
}
changeIcon(defaultValue);
initial.showAllContent = !initial.showAllContent;
});
function setScroll(relativeScroll) {
let scrollValue = document.body.clientHeight * relativeScroll;
window.scroll(0, scrollValue);
}
If you wanted to bounce the user back to the top, you could simply use:
window.scroll(0, 0);
I have a widget container where if I go to the right side, a dragger selector appears (mouseover).
I need to that dragger follow the mouse position in axis Y inside the widget container limits.
I have tried a lot of things but I'm not able to get the right position for the dragger.
rh.addEventListener('mouseover', (event) => {
const draggerElement = event.target.parentNode.querySelector('.widget-dragger')
if (draggerElement.style.opacity !== 1) {
draggerElement.style.top = `${event.pageY - (event.target.offsetHeight / 2)}px`
draggerElement.style.opacity = 1
}
})
jsfiddle: https://jsfiddle.net/rt0s8p7h/1/
Captures:
This is the rh element:
It has 100% height of the widget container.
Dragger has absolute position inside the widget container.
Widget Container has relative position, so the dragger is limited inside the container.
Solution here: https://jsfiddle.net/rt0s8p7h/3/
rh.addEventListener('mouseover', (event) => {
const draggerElement = event.target.parentNode.querySelector(".widget-dragger")
if (draggerElement.style.opacity !== 1) {
const rhRect = event.target.getBoundingClientRect()
draggerElement.style.top = `${event.clientY - rhRect.top - draggerElement.offsetHeight/2}px`
draggerElement.style.opacity = 1
}
})
Also works for mousemove to follow the mouse cursor.
I am trying to make my autocomplete menu open above the input box if there is not enough space below the input box to display the menu. The code works fine except for on the initial render.
This means that it always displays at the bottom when:
1. Start searching
2. Click in the field and fire the search for the existing text in field
I have it output the position.my and position.at contents and they both are correct for "above" placement but it still displays below the input box.
I have the function called resize that is binded to window scroll and resize also. The moment you scroll the page, the menu gets positioned correctly. My suspect is that it is positioning before fully rendering.
Code
_renderMenu function hook
// Autocomplete _renderMenu function
$(autocomplete_object)._renderMenu = function( ul, item ) {
var that = this;
jQuery.each( items, function( index, item ) {
that._renderItemData( ul, item );
});
// Make sure the menu is now shown to calculate heights and etc (menu is now rendered, position rendering next)
jQuery(ul).show();
autocomplete.resize(ul, options);
autocomplete.create_dropdown_handlers(ul, options);
}
Resize Function
// Resize function
function resize( ul, options ) {
var height;
// If the height of the results is smaller than the space available, set the height to the results height
var ul_height = 0;
jQuery(ul).find('li').each(function(i, element){
ul_height += jQuery(element).height();
});
// Make the height the full height available below the input box but above the window cut off
// Move the dropdown above the input box if there is not enough room below the input box
var $parent = jQuery("#" + options.name);
var padding = 25; // arbitrary number to prevent dropdown from hitting the window border in either direction
var bottom_distance = autocomplete.getViewportHeight() - ($parent.offset().top + $parent.height()) - padding;
var bottom_limit = 200;
var ul_position = {
my: "left top",
at : "left bottom",
of: $parent,
collision: 'none'
};
height = bottom_distance;
if (bottom_distance < bottom_limit) {
var top_distance = $parent.offset().top - padding;
height = top_distance;
// ----- It is getting here fine! -----
ul_position.my = "left bottom";
ul_position.at = "left top";
}
// We have room to show the entire dropdown results without a scrollbar
if (ul_height < height) {
height = 'auto';
}
// Position below or above parent depending on space
jQuery(ul).position(ul_position);
jQuery(ul).css({height: height == 'auto' ? height : height + 'px'});
}
TLDR:
Jquery position is set to show above input field, but it still shows below?
I ended up having to update the autocomplete object's position value as well as the ul position. I believe the issue was that the initial render would inherit the autocomplete's position variable (Which defaults to showing below the input box).
Here is the new line:
// In the resize function after jQuery(ul).position(ul_position);
$parent.autocomplete("option", "position", ul_position); // Now the rendering is correct!
Resize function addition
function resize (ul, options) {
...
calculate the height and position requirements
...
jQuery(ul).position(ul_position);
$parent.autocomplete("option", "position", ul_position); // <-- Addition to honor position for rendering
}
function jsiBoxAdjustTop()
{
var top
if ( jsiBox.preloadImg.height <= 699){
top = 216;
}
else{
top = 17;
}
jsiBox.boxNode.style.top = (top) + 'px';
}
I'm using that function to adjust a div's top position depending on the image that is in it's height. It's on a light box sort of script so every time I click the next button, a new image which could either be taller or smaller appears. It's working alright and it adjusts its position when the image is taller but my problem is it just jumps to that position. I'm really new to javascript so can anyone help me out to make this as if it's travelling/animating to it's position? I tried using setTimeOut but I think I was doing it wrong. I'd really love to know what I'm doing wrong.
Here's the full script if that helps. Link
you can use jQuery or YUI to do animate, such as
jQuery(jsiBox.boxNode).animate({'top': top}, 3000);
or you can write some simple code with setTimeout just for this case;
following code assume the begin top is 0.
var boxStyle = jsiBox.boxNode.style;
function animateTop(to) {
boxStyle.top = parseInt(boxStyle.top, 10) + 1 + 'px';
if (parseInt(boxStyle.top, 10) != to) {
setTimeout(function() {
animate(to);
}, 50);
}
}
animateTop(top);
I have a table & when I click a cell, it displays a DIV(to the right of the mouse) with absolute positioning.
I want the DIV to display using minus co-ords(positioning), so it never display outside the table('#holiday-planner-table') .
Here's the concept I'm thinking of:
if($('#DayInfo'). is outside of $('#holiday-planner-table')) {
display $('#DayInfo') with minus co-ordinates
} else
{
$(".WeekDay").click( function(event) {
$("#DayInfo").css( {position:"absolute", top:event.pageY, left: event.pageX} );
});
}
It's not a complete solution but you can use $("selector").offset().left or top and $("selector").width() or height to construct two rectangles, check if one is not inside the other and act accordingly.
the logic here is to check if the new div coordinates put the div position + size outside the table position + size. if it will, you set the div coordinates back the size of the div. you can do left and top independently.
this should get you pretty close:
$(".WeekDay").click(function (e) {
var x = e.pageX;
var y = e.pageY;
var $div = $('#DayInfo');
var $table = $('#holiday-planner-table');
if (x + $div.width() > $table.offset().left + $table.width()) {
x -= $div.width();
}
if (y + $div.height() > $table.offset().top + $table.height()) {
y -= $div.height();
}
$div.css({ position: "absolute", top: y, left: x });
});
I'm thinking of something among the lines of:
if (mousex > (tablew-divw)) divx = mousex-divw
else divx=mousex
same thing goes for Y.
Of course, that could mess stuff up if the table actually becomes smaller than the div.
I could be wrong, but are you wanting to create some sort of tooltip functionality? If so, have a look at http://flowplayer.org/tools/tooltip/index.html