We Keep Coding

How to determine element coordinates in scrollable div?

I have a div element with vertical scrolling. It has span elements with text in it. How can I get the coordinates of these span elements. But I don't want it relative to the scroll position.
For example, in the div, lets say its 400px width, 1000px in height (but the view height is 500px), and its scrolled half way vertically. Then in the center of the view, I see a text, and if I click on it, I want the coordinate like (200, 250)
How can I get coordinates that are absolute to the div container?

Use element.getBoundingClientRect? (Subtract the container's top if you want it relative to the container.)
function client() {
alert(document.getElementById('child').getBoundingClientRect().top);
}
function local() {
var container = document.getElementById('container');
var containerRect = container.getBoundingClientRect();
var child = document.getElementById('child');
var childRect = child.getBoundingClientRect();
localTop = childRect.top - containerRect.top;
alert(localTop);
}
#container {
height: 100px;
overflow:scroll;
border:1px solid red;
margin-top:100px;
}
#child {
background: yellow;
}
<div id="container">
<div>Test</div>
<div>Test</div><div>Test</div><div>Test</div><div>Test</div>
<div id="child">Item of interest</div>
<div>Test</div><div>Test</div><div>Test</div><div>Test</div>
</div>
<button onclick="client()">Global top</button>
<button onclick="local()">Local top</button>

Let's say the scrollable div has an id of 'myDiv' and one element inside the div has an id of 'element1'. To find its true 'top' value in javascript try this:
alert($('myDiv').css('top') + $('element1').css('top'));

Automatic scrolling to keep child element in the center

I have a parent div called lyricpadding, and inside I have a lot of <h4>'s with a unique ID. Anyways, what I need to do us, by using preferably Jquery or Javascript or CSS, is to keep the <h4> marked with the class of highlighted in the middle of the parent container, but I don't want it to stretch over the whole thing, I just want the text to be centered by an automatic scroll until it gets to the bottom. So the div with the class highlighted will always be visible, preferably in the center.

Here is a jQuery example. It uses position absolute and then adjusts according to the scroll position and window size. See this fiddle.
HTML:
<div class='lyricpadding'>
<h4 class='highlighted'>Highlighted</h4>
<h4>Other</h4>
<h4>Other</h4>
<h4>Other</h4>
<h4>Other</h4>
</div>
CSS:
.lyricpadding
{
height:1000px;
width:100%;
background-color:lightblue;
}
.highlighted
{
display:inline-block;
position:absolute;
}
jQuery:
function positionMiddle()
{
var $highlighted = $('.highlighted');
$highlighted.css({
left: ($(window).width() - $highlighted.outerWidth())/2,
top: $(window).scrollTop() + ($(window).height() - $highlighted.outerHeight())/2
});
}
$(window).resize(function(){
positionMiddle();
});
$(window).scroll(function(){
positionMiddle();
});
// To initially run the function:
positionMiddle();

Place element inside other element using absolute. Elements are siblings

I am trying to place an element, "inner", flush against the upper right hand corner of another div, "outer", using absolute positioning. The "inner" element is not a child of "outer". I therefore need to look up the positioning of "outer" using js and use that.
However, it's not coming out quite right:
EDIT: it's not possible for me to reset the margin/padding/relative of the body div. There are other elements inside body.
http://jsfiddle.net/BZBSF/1/
#wrapper{background:red;
width:100px;
height:100px;}
#inner{
position:absolute;
background:green;
width:50px;
height:100px;
margin:0;padding:0;
}
#body{position:relative;}
<div id = "body">
<div id = "wrapper"></div>
<div id = "inner"></div>
</div>
var rect = document.getElementById("wrapper").getBoundingClientRect();
$("#inner").css({ 'top': String($(window).scrollTop()+rect.top)+"px" });
width_inner = $("#inner").width();
$("#inner").css({ 'left': String($(window).scrollLeft()+rect.right-width_inner)+"px" });

Set margin and padding on the body element.
body{
margin: 0;
padding: 0;
}
FIDDLE
Or if there is no specific reason for body: relative; remove that.
FIDDLE
The second one is recommended.

Is this what you want?
var rect = $('#wrapper');
$("#inner").css({ 'top': rect.position().top+"px" });
$("#inner").css({ 'left': (rect.position().left + rect.width() - $('#inner').width())+"px" });
http://jsfiddle.net/araSp/2/
And if you need to worry about padding/borders, you can use:
.innerWidth()
.outerWidth()

Just do a quick reset on the top:
* {
margin:0;
padding:0;
}
Fiddle
Note: This is a quick reset. You might want to use other reset stylesheets out there.

You should remove the position relative at the body tag.
$(document).ready(function() {
$('#inner').css({
'position': 'absolute',
'top': $('#wrapper').offset().top,
'left': $('#wrapper').offset().left + $('#wrapper').width() - $('#inner').width()
});
});
DEMO:
http://jsfiddle.net/4uSeV/

Show hidden div above a just clicked div

I have 3 divs. When I click one of them, the div will disappear and a greeting div will appear. Got this all working, please see my fiddle:
http://jsfiddle.net/mauricederegt/pknpb/1/
At the moment this greetings div appears at a fixed position. How to make it so that it will appear above the div that was just clicked?
Is this even possible at all?
Hope someone can help me out
Thank you for your time
(ps also why are the divs forced down when clicked?)

The 3 divs drop down because .greetings has relative positioning. If you make it absolute and get the offset of the clicked element, you can position it exactly above that element and without it changing the layout of the other divs:
var offset = $(this).hide(500).offset();
var score = 'Hello';
$('.greet').text(score);
$('.greet')
.show()
.css({
top: offset.top - $('.greet').height(),
left: offset.length,
opacity: 1,
})
.stop()
.delay(200)
.animate({top: 20, opacity: 0},1000);
See fiddle

I would recommend putting each 'Hint' in a container with it's message:
<div class="hint-container">
<div class="hint"> HINT! </div>
<div class="greet"> Greetings </div>
</div>
the give the container a fixed size and relative position:
.hint-container {
position: relative;
width: 100px;
height: 20px;
}
The you can give an absolute position to the containers, make them occupy all the container and hide one of them:
.hint-container > div {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.hint-container .greet {
display: none;
}
From here you can go on as you where doing ^.^
I hope it's clear.

Sorry, I am not versed enough to give the code in jquery for this. But, I believe you would have to send in the click event to the method handling the div with class greet. And then with position absolute set the left and top of the class greet div to the top and left stored in the event.

You can get the element's position relative to it's container using the .position(), or it's offset relative to the document using .offset().
in this case, it might look something like this:
$('.ht').click(function hint() {
var x = $(this).offset().left;//get offset relative to document
$(this).hide(500);
score = 'Hello';
$('.greet').text(score);
$('.greet')
.hide()
.css({
bottom: 20,
left: x, //add x variable here
opacity: 1,
})
.show()
.stop()
.delay(200)
.animate({'bottom':75, opacity: 0},1000);
});
however you'd probably want to make the .greet class position:absolute, and you might have to do something with the height.

Positioning jquery ui dialog box

How to position jquery ui dialog box with respect to a div element inside the body?

Perhaps this might get you the idea how to do it:
HTML:
<div id="one" class="divs"></div>
<div id="two" class="divs"></div>
CSS:
.divs {
float: left;
height: 48px;
width: 80px;
border: 1px solid #55f;
}
JS:
$(document).ready(function(){
var $div = $('#two');
var left = $div.offset().left;
var top= $div.offset().top;
$('<p>Some dialog</p>').dialog({position: [left + 20, top + 20]});
});
Here is the link to demo.
jQuery offset() returns element postion relative to document, while position() returns relative to offset parent.

Use jQuery position function or jQuery UI one
$('#dialog').position({of: $('#your_div')});

http://api.jquery.com/offset/ shows how to get coordinates of a div element. but direct usage might not be enough as this depends on layout structure (floats, margins, etc).