I am going to create a selection 'lasso' that the user can use to select portions of a table. I figured that positioning a div over the region is far easier than trying to manipulate the cell borders.
If you don't understand what I mean, open up a spread sheet and drag over a region. I want the div to align perfectly with the cell borders.
I have a very good idea of how to do this, but how would I get the (x,y) coordinates (screen position) of a table cell (td)?
Use .offset() along with .height() and .width() if necessary.
var td = $(someTDReference);
var pos = td.offset();
pos.bottom = pos.top + td.height();
pos.right = pos.left + td.width();
// pos now contains top, left, bottom, and right in pixels
Edit: Not .position(), use .offset(). Updated above.
Edit: Changed pos.width() to td.width()
Hey you should be able to do it like this (jsFiddle): http://jsfiddle.net/jackrugile/YKHkX/
$('td').hover(function(){
var xPos = Math.floor($(this).offset().left);
var yPos = Math.floor($(this).offset().top);
});
The Math.floor gets rid of the crazy decimals and makes it easier to work with in my opinion. Hope that helps!
you can use pageX and pageY to trackdown the mouse cursor x , y
$("#your_div").mouseover(function(e))
{
x = e.pageX;
y = e.pageY;
}
you can set the div border to highlight the div on mouseover simply by
$("#your_div").css("border","1px solid black");
this will kinda show current div selectable effect...
that if if the div is
position:fixed and then you can read its left and top property
hope that helps you
For those who doesn't want to use jquery:
var coordinates = td.getBoundingClientRect();
console.log(coordinates.left, coordinates.top, coordinates.right, coordinates.bottom);
Related
Using jQuery, how do you scroll a div by N more pixels?
So far I tried
$("div.foo").scrollTop(75); //scroll down by 75 pixels
From the jQuery docs for scrollTop:
Description: Get the current vertical position of the scroll bar for
the first element in the set of matched elements or set the vertical
position of the scroll bar for every matched element.
The version of the function you are calling sets the vertical position of the scroll bar from the top of the element, not from the current position. So in order to scroll down from the current position you first have to retrieve your current position. There are a few ways to do that, but you could do something like:
var $foo = $("div.foo");
$foo.scrollTop($foo.scrollTop() + 75); // scroll 75px down from current
If you are looking for Vanilla JavaScript solution like I was, here it is.
const selectedElement = document.querySelector('div.foo');
selectedElement.scrollTop = 75;
querySelector documentation,
scrollTop documentation
the following code may help and you may see this link .
and you can pixel value from window atrributes.Thank you.
var d = $('#div1');
d.scrollTop(d.prop("scrollHeight"));
I am looking to create a JQuery page with a hover over effect. when it hovers over the top left quadrant of the page, a div must be filled with text, and different text for the other three quadrants over the page.
I am new to JQuery, but I do have a programming background of some sort so I do know how to navigate through the language. I am going to use the css properties to change the text in the div's as they will be different divs, displayed in the same spot (so I will alter their visibility/display) or should I rather go with JQuery's .hide() and .show() methods?
My main question, is how do I set up the page so that JQuery picks up when the mouse is in the top left quadrant, top right quadrant, bottom left quadrant or bottom right quadrant of the screen?
Thanks in advance, any advice would be greatly appreciated.
You can bind on mousemove event and compare cursor position with window width and height. Something like this http://jsfiddle.net/tarabyte/DUJQ4
<div id="topleft" class="message">Top Left</div>
<div id="topright" class="message">Top Right</div>
<div id="bottomleft" class="message">Bottom Left</div>
<div id="bottomright" class="message">Bottom Right</div>
$(function(){
var current; //will save current quadrant here
$(document).mousemove(function(ev){
var left = ev.pageX, top = ev.pageY, //cursor coordinats
win = $(window),
width = win.width(), height = win.height(), horizontal, vertical, id;
horizontal = (left < width/2) ? "left": "right";
vertical = (top < height/2) ? "top": "bottom";
id = vertical + horizontal;
if(id == current) { //not changed
return;
}
current = id;
$(".message").hide(); //hide all messages
$("#" + id).show(); //show only one with corrent id.
});
})
If you don't have a restriction about wich browser will run your website, I suggest that you use css instead jquery
see this example
UPDATE
BUT, if you want to do this with jquery you need to use the $('.mainMenu').hover(function hoverIn(), function hoverOut()). Then inside each function parameter you need to change the style properties to change the display value to none(hiden) or block(visible)
See this example
I'm trying to implement an effect where an image (it can be of varying sizes) zooms on hover with a border appears around it. The non-zoomed image is limited to a maximum size of 250px and the zoomed to 550px.
I do this by applying a class to the div on mouseenter and remove it on mouseleave. This works well enough, but the problem is that I want to detect if the div goes partly off-screen. To do this I need the offset of the transformed div:
$(document).ready(function () {
$('.image-container').on('mouseenter', function () {
var y = $(this).offset().top,
x = $(this).offset().left;
console.log('old', x, y);
$(this).addClass('image-hover');
y = $(this).offset().top;
x = $(this).offset().left;
console.log('new', x, y);
});
$('.image-container').on('mouseleave', function () {
$(this).removeClass('image-hover');
});
});
If you look at the jsfiddle below, I get the old offsets after adding the class.
http://jsfiddle.net/6JZCW/14/
So, how to get the updated offsets? Is there a better way of doing what I want to achieve?
you are trying to get offset of your $('.image-container'), but its padding never change, you change only the padding of '.image-block' so when you console.log do this
$('.image-block').offset().top;
$('.image-block').offset().top;
I am trying to create a webpage where users can insert a pin (like google map) in
between the text using context menu.
My problem is that i do not know how to insert the pin at the exact position.
Using the DOM I can arrive only to the nearest DIV (by using this) but a DIV contains a
lot of text and the PIN has to be positioned next to the text.
I can obtain the position of the mouse click using pageX and pageY but
dont know how to insert an element at that position. I tried in JQuery:
insertAfter, prepend, append but not getting the desired result.
Any idea how to solve this problem.
regards,
choesang tenzin
$("#Content").rightClick( function(e) {
$("<div class='pin'/>").insertAfter(this);
});
$("#Content").rightClick( function(e) {
var myTop = ...;
var myRight= ...;
$("<div class='pin' style='position:absolute; top: ' + myTop +'px; right: ' + myRight + 'px;/>").insertAfter(this);
});
sorry, i don't remember how to get x and y from the e parameter. Also, you will need to convert x,y of mouse click to x,y relative to #content element.
Thanks alot for all your ideas. I have come up with another way to do it.
I am using the "RANGE" to insert directly into the clicked zone (div) and not after or before it and adding z-indexes. The positive points with this is:
It is really into the text and not as a layer
texts flow around the pin (text makes space for the pin)
$("div").click( function(e) {
//the following works only for FF at the moment
var range = window.getSelection().getRangeAt(0);
var pin = document.createElement('img');
pin.setAttribute('src','pin_org.png');
pin.setAttribute('class','pin');
range.insertNode(pin);
});
$("img.pin").live( 'mouseover', function () {
alert("hovered!!");
Set the style position:relaitve; on the containing div, so that it becomes a layer. That way it works as origin for the absolutely positioned elements inside it.
I'm adjusting the height of the box with no problems, now I would like to adjust the height of the box grabbing the top handle and adjust height but upwards. What would be a good way of doing this? thanks
(current downwards code)
var mY = event.clientY;
var originalHeight = parseInt(document.getElementById('somediv').style.height);
if(click == 1){ // down
var sY = event.clientY;
var finalHeight = originalHeight +sY-mY;
document.getElementById('somediv').style.height=finalHeight + 'px';
}else{ // up
resize upwards instead of downwards....
}
An element's position is defined by its top-left corner - you'll have to move it up at the same time as you extend it from the bottom.
Resizing a DIV "up" is not as easy as resizing it "down". The reason is that when you specify a HEIGHT, the DIV will expand "down" as its normal flow. The top left corner of the DIV will remain static.
Allowing the DIV to be resized "UP" will give you a lot of issues. In order to do this, you will need to set the HEIGHT, then the POSITION of the DIV to currentHeight - previousHeight. You will notice it will jitter a lot when doing this.
Also, anything above your DIV will need to be displayed accordingly.
You should look into jQuery and the jQuery Dimensions plugin.