Setting the DIV height to match the location of the anchor inside the specified DIV

Question

The main problem : http://jsfiddle.net/pipip/P46Xg/
I have a div container with several paragraphs of text,
and inside one of these paragraphs the next anchor is <a name="stop" />
The container is overflow:hidden

Is it possible if javascript / jQuery sets the height of the container so that the bottom of the container stops exactly or below the anchor?

Added depth and background : http://jsfiddle.net/pipip/yj9dB/
This will be used for the modified jQuery slider. If someone using the CMS can type [readmore] anywhere in the "Content" field, which will be replaced by the above anchor via PHP. That way, they could easily control where the Read More fragment appears in the container. In a related example, I hardcode the height to 75px , although I want the height to depend on the location of the anchor name="stop" in the text.

Thanks. If this is a terrible way, I'm all ears!

Answer 1

With jQuery you can do it like this:

 $('#container').height( $('a[name=stop]').position()['top'] ); 

and CSS:

 #container { position: relative; } 

We need this because .position() gives us the position relative to the parent of the element's offset , and we can do the #container offset of the parent anchor tag by setting its position to relative .

JSFiddle: http://jsfiddle.net/divad12/RYPm7/1/

Also, for HTML5, you may need to set the id binding attribute instead of name : HTML anchors with name or identifier?

Answer 2

However, the best way is to get the link to download the full article via Ajax.