How to insert an element in DIV at position X Y - javascript

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.

Related

Moving element to specific css coordinates (top and left) not working using javascript

I am trying to move a HTML element (a puzzle piece) back to its original position on the screen after a dragEnd event, if the element is not inside a specified target zone.
I using a javascript object to represent the puzzle piece. The object contains the starting x and y for the element as well as a reference to the element itself (along with some other information). The code is below.
function dragEnd(e) {
if(selectedPiece.ele.id === "correctPiece" && selectedPiece.distanceVector < 30){
window.alert("Game End");
}
else{
console.log("returning piece: ", selectedPiece.ele.id);
console.log("to point ", selectedPiece.startX, selectedPiece.startY);
selectedPiece.ele.style.position = "absolute";
selectedPiece.ele.style.left = selectedPiece.startX;
selectedPiece.ele.style.top = selectedPiece.startY;
}
active = false;
}
Still when I drop the piece it stays wherever it was dropped.
When I look at the console it shows the element id and identifies the correct startX and startY properties. I have also tried appending "px" to the startX and startY with no luck.
Any help appreciated thanks :)
I have tried hard coding the values and the pieces ends up moving but not to the x,y position that has been coded
Then, try this:
selectedPiece.ele.style.left = selectedPiece.startX + "px";
selectedPiece.ele.style.top = selectedPiece.startY + "px";
but not to the x,y position that has been coded
Secondly, make sure you understand how CSS absolute works. From MDN's article:
The absolutely positioned element is positioned relative to its nearest positioned ancestor (i.e., the nearest ancestor that is not static).
Try making dragged element's immediate parent's position relative.

Change background on hover of a draggable div

I have a small draggable division (black) and many nodes with different IDs beside it
I need a hovering effect when I drag the black element on the nodes. What I am doing in allowDrop function is:
var dragObj;
function drag(ev){
dragObj = ev;
}
function allowDrop(ev){
ev.preventDefault();
var Dragged = dragObj;
var Hovered = ev;
var leftIndent = Dragged.layerX;
var hoveredID = Hovered.target.id.toString().split('_');
var nodesOnLeft = Math.floor(leftIndent/12);
var startingNode = hoveredID[0]-nodesOnLeft;
for (i=1;i<=Math.floor(draggableElementLength/12);i++){
var toApplyCssID = startingNode.toString() + '_1';
var toApplyCss = document.getElementById(toApplyCssID);
$('#'+toApplyCssID).css('background-color','lightgreen');
}
}
basically I am using the layerX property to find out the distance between my mouse pointer and draggable division's border and adjusting that to calculate number of nodes where I have to apply new CSS and applying that by finding the ID of node.
This is working but its making the process very slow as it involves many calculations and its not the hover effect as its not going away when I am removing the draggable division.
Is there any other way to achieve this or do I need to make code changes in existing code.
thanks
Without the HTML and the rest of the script, I can only point you in the direction you should be taking in this kind of scenario:
Don't constantly repeat calculations (that do not change) in a loop, store them outside the function:
Use document.getElementById(toApplyCssID) for each node and store the
elements in an array
Get the distance from the mouse position to the required edge or
edges of the div (leftIndent) on initial drag/mousedown and store
that in a variable
Store Math.floor(draggableElementLength/12) in another variable (you
haven't shown where this originates, but it doesn't seem to change in
the function...)
Apply the CSS to the relavent elements (from the array of elements)
using the other stored values to select them
Remove the CSS on those that had it applied earlier
This may not be the ultimate solution, but these are some of the things you can look at to speed up what you (may) have currently.

How can I position a div relative to a list item?

I have an unordered list of pictures, and when I hover over one I want the two pictures to the left to fade out, and a div to appear in their place with text. I've gotten this working, except for positioning the div - I've tried this:
div.position({my: 'left top', at: 'left top', of: other_list_item});
but that just returns an Object ( the new location ) of {left: 0, top: 0}.
I've also tried putting the div in another li element, but it's still a no-go. Here's the div HTML:
<div style="width: 255px; height: 110px; position: absolute;" id="name_popup"><p>Jon Jensen</p><p>Chief Technical Officer</p><p>London, England</p></div>
EDIT I'm working on a JSFiddle example, but there's kind of a lot to put in, so idk when it'll be ready. Anyways, I forgot to mention this bit of fun:
when I call .position() by itself on the element that I'm trying to anchor to, it returns the correct offsets, but when I try to use position() on the other element to match their positions, nothing happens.
I did not quite understand the question, but from my reasoning I get that you are trying to position new divs in place of the faded out images, so here is some code that could fit your situation
$('div').click(function(){
//get the positions of the divs to be faded out
var prev_position = $(this).prev('div').position();
var next_position = $(this).next('div').position();
//create and position new divs
$(this).insertBefore('<div style="position:absolute;top:' +prev_position.top+ 'px;left:' +prev_position.left+ 'px;">Replacing DIV</div>');
$(this).insertAfter('<div style="position:absolute;top:' +next_position.top+ 'px;left:' +next_position.left+ 'px;">Replacing DIV</div>');
//hide the divs
$(this).prev('div').fadeOut();
$(this).next('div').fadeOut();
});
Sometimes, if your parent element has a position set, then the .position() will get the position relative to the parent element, and depending in your needs this might throw off your design. So instead you could get the coordinates of the previous and next divs relative to the WINDOW and you could get those like these:
function getPosition($el){
//get the offset coordinates of the recently clicked link
var offset = $el.offset();
var top = offset.top;
var left = offset.left;
//get position of this link relative to the window
var rel_top = top - $(window).scrollTop();
var rel_left = left - $(window).scrollLeft();
}

Coordinates of HTML elements

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);

How do I get the coordinates of a div?

I have used jQuery UI library to drag divs within a web page. While dragging, the div changes it's position and modifies CSS postion,top and left properties.
My questions are:
1) Is their a way in javascript to get the values of CSS properties and save on a variable(so that I can submit it to XML)? Those CSS properties are created on real time when dragging the divs.
2) Can I at least read the new coordinates of the div on the webpage?
My goal is to record those values so that when users logs in next time, their modified version of the web page is preserved.
To read the co-ordinates relative to the viewport, use offset():
var offset = $('#someitem').offset();
console.log('top: '+offset.top+'; left: '+offset.left);
To read the co-ordinates relative to the nearest positioned ancestor, use position():
var pos = $('#someitem').position();
console.log('top: '+pos.top+'; left: '+pos.left);
To get CSS properties, just use the css() function:
console.log($('someitem').css('top'));
you can easily get the offset of an element using jQuery.
var offset = $("#some-element").offset();
// Alert the values
alert("top: " + offset.top+ "left: " + offset.left);

Categories