0

I've got the following construct

Text                            Details
Show Details

Text
Show Details ...

When i press now Show Details I want the details appear on the same height as the pressed link. (Imagine 100 Text/Links.)

I've put together a small JSfiddle where the absolute positioning of the element is possible, but somehow I can't get it to work dynamically based on the scrollposition. http://jsfiddle.net/uRN64/201/

I have tried the following javascript functions to set the position:

var div = document.getElementById('update');
//div.style.top = window.pageYOffset;
//div.style.top = document.body.parentElement.scrollTop;
//div.style.top = document.body.scrollTop;
div.style.top = '100px';
Vulcano
  • 415
  • 10
  • 25

5 Answers5

3

Use the e.target element and the offsetTop property.

It's easy as that:

function toCurrentPosition(event) {
    var div = document.getElementById('update');
    div.style.top = event.target.offsetTop + "px";
}

jsFiddle Demo

P.S - Notice I'm using onclick event instead of href.

Itay
  • 16,601
  • 2
  • 51
  • 72
  • Thanks for your answer, I like your solution. Basically the solution for me was that i was missing the + "px" in my tests... I hate css... – Vulcano Aug 26 '13 at 11:07
1

You want to get the position of the clicked element and move the details div down there.

See: Get position of element by javascript

The code you've commented out has a very different meaning (and if you were to imagine scrollTop as function-like, you can see that it's being invoked on document.body, not the element which you have clicked). I figured I should also note that window,pageYOffset is an alias for window.scrollY, which you will probably find much more documentation for.

Community
  • 1
  • 1
Warty
  • 7,237
  • 1
  • 31
  • 49
  • I imagine ScrollTop more as a getter/setter as it is said here: https://developer.mozilla.org/en-US/docs/Web/API/element.scrollTop ;-) – Vulcano Aug 26 '13 at 11:10
  • I was going to use that terminology, but emphasizing the getter-like functionality of scrollTop answered the question. – Warty Aug 26 '13 at 11:18
0

If you are using jQuery as in your fiddle, here's a simple solution DEMO

JS

$(document).ready(function(){
    $('a').click(function(e){
        e.preventDefault();
        var top = $(this).offset().top;
        $('#update').css({ 'top': top + 'px' });
    });
});

HTML

<div id="holder">
    Long text <br />
    <a href="#">Show Details</a> <br />   
    Long text <br />
    <a href="#">Show Details</a> <br />   
    Long text <br />
    <a href="#">Show Details</a> <br />   
    Long text <br />
    <a href="#">Show Details</a> <br />   
    Long text <br />
    <a href="#">Show Details</a> <br />   
    Long text <br />
    <a href="#">Show Details</a> <br />   
    Long text <br />
    <a href="#">Show Details</a> <br />   
    Long text <br />
    <a href="#">Show Details</a> <br />   
    Long text <br />
    <a href="#">Show Details</a> <br />   
    Long text <br />
    <a href="#">Show Details</a> <br />   
    Long text <br />
    <a href="#">Show Details</a> <br />   
    Long text <br />
    <a href="#">Show Details</a> <br />   
    Long text <br />
    <a href="#">Show Details</a> <br />   
    Long text <br />
    <a href="#">Show Details</a> <br />   
    <div id="update">Itemlist1</div>
</div>

CSS

#holder {
    position: relative;
}
#update {
    position: absolute;
    left: 100px;
    top: 0px;
}
slash197
  • 9,028
  • 6
  • 41
  • 70
0

I just put up a simple JSBin here

Basically what we are doing is first finding out who made the call, then calculate its top position and later set the top position of the div to be moved.

HTML:

<div style="display: inline;
  position: relative;
  float: left;">
    Long text <br />
      <a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a>  <br />   
    Long text <br />
      <a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a>  <br />   
    Long text <br />
      <a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a>  <br />   
    Long text <br />
      <a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a>  <br />   
    Long text <br />
      <a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a>  <br />   
    Long text <br />
      <a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a>  <br />   
    Long text <br />
      <a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a>  <br />   
    Long text <br />
      <a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a>  <br />   
    Long text <br />
      <a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a>  <br />   
    Long text <br />
      <a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a>  <br />   
    Long text <br />
      <a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a>  <br />   
    Long text <br />
      <a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a>  <br />   
    Long text <br />
      <a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a>  <br />   
    Long text <br />
      <a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a>  <br />   
    Long text <br />
      <a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a>  <br />   
    Long text <br />
      <a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a>  <br />   
    Long text <br />
      <a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a>  <br />   
    Long text <br />
      <a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a>  <br />   
    Long text <br />
      <a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a>  <br />   
    Long text <br />
      <a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a>  <br />   
    Long text <br />
      <a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a>  <br />   
    Long text <br />
      <a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a>  <br />   
    Long text <br />
      <a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a>  <br />   
    Long text <br />
      <a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a>  <br />   
    Long text <br />
      <a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a>  <br />   
    Long text <br />
      <a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a>  <br />   
    Long text <br />
      <a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a>  <br />   
    Long text <br />
      <a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a>  <br />   
    Long text <br />
      <a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a>  <br />   
    Long text <br />
      <a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a>  <br />   
    Long text <br />
      <a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a>  <br />   
    Long text <br />
      <a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a>  <br />   
    Long text <br />
      <a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a>  <br />   
    Long text <br />
      <a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a>  <br />   
    Long text <br />
      <a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a>  <br />   
    Long text <br />
      <a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a>  <br />   
    Long text <br />
      <a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a>  <br />   
    Long text <br />
      <a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a>  <br />   
    Long text <br />
      <a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a>  <br />   
    Long text <br />
      <a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a>  <br />   
    Long text <br />
      <a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a>  <br />   
    Long text <br />
      <a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a>  <br />   
    Long text <br />
      <a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a>  <br />   
    Long text <br />
      <a name="a2" href="#" onclick="toCurrentPosition(this)">Show Details</a>  <br />   


</div>

<div style="display: inline; position : relative;
  float: left;" id="update">
 Itemlist1
 </div>

JS:

function toCurrentPosition(ele) {
    var div = document.getElementById('update');
    console.log(ele.offsetTop);
    div.style.top = ele.offsetTop+'px';
}
Sunny R Gupta
  • 5,026
  • 1
  • 31
  • 40
0

As Itay says you can use the target information. Also it would be cleaner if you bind the event via jQuery instead of writting on each link on your HTML:

http://jsfiddle.net/uRN64/210/

HTML:

<div class="my-show-details-list">
    Long text <br />
      <a name="a2">Show Details</a>  <br />  
    Long text <br />
      <a name="a2">Show Details</a>  <br />  
    Long text <br />
      <a name="a2">Show Details</a>  <br />  
    Long text <br />
      <a name="a2">Show Details</a>  <br />  
    Long text <br />
</div>

JS:

$(function() {
   //Here you select all the a tags inside the div and you apply them the same event:
    $(".my-show-details-list>a").click(function() {
        var div = document.getElementById('update');
        div.style.top = event.target.offsetTop + "px";
    });
});
Wood
  • 1,766
  • 1
  • 12
  • 10
  • Thanks for your reply and I know. In my project the OnClick queries the server with AJAX and the OnSuccess method updates the div. I just wanted a small example which proves my point in not working. :) – Vulcano Aug 26 '13 at 11:16