March 26, 2012

insert image at span position

Question by clankill3r

I have 2 rows, the first has all the text and the second will hold the footnotes and additional images.

In the text row i want to show a small image to alert the reader that there is a footnote.
I want to do this with jquery, i try to get the original position but it doesn’t work.
I think because i try to get the position of the class instant of the span.
But i don’t know how to get it of the span (with the class b_footnote!).

$('#container #book #column1 .b_footnote').each(function(){
    console.log($(this)); // goes good
    console.log($(this).position.left); // undefined
});

here’s some example html

<p>
en Benkei nog rust vonden. In een vertrek was Yoshitsune met zijn vrouw en jeugdig kind. De Dood stond in het vertrek gereed, en het was beter, dat de Dood zou komen op bevel van Yoshitsune, dan op bevel van den vijand buiten de deur. Zijn kind werd door een bediende gedood, en terwijl hij het hoofd van zijn geliefde vrouw onder den linkerarm nam, stootte hij zijn zwaard diep in haar nek. Na dit te hebben volbracht, pleegde Yoshitsune zelfmoord (hara-kiri).<span class="b_footnote">De buik opensnijden.</span> Benkei echter wachtte den vijand op. Hij stond met zijn groote beenen wijd uitgespreid, zijn rug tegen een rots gedrukt. Toen de dageraad aanbrak, stond hij nog altijd met uitgespreide beenen, terwijl zijn dapper lichaam door duizend pijlen was doorboord. Benkei was dood, maar vallen kon de krachtige held niet. De zon verrees over een man, die een ware held was, en die steeds getrouw was gebleven aan de eenmaal door hem uitgesproken woorden: “Waar mijn meester heengaat, hetzij ter overwinning, of in den dood, ik zal hem volgen.”</p>

I get it to the second row like this:
I don’t know if that will cause problems with showing the hint image on the original spot in the text.

.b_footnote {
    background: yellow;
    position: absolute;
    left: 540px;
    z-index: 99;
}

other solutions are welcome as well.

Answer by Starx

To get the CSS position as you defined, you should use

$(this).css('position');

To insert image after the span position, you can use jQuery’s .after()[docs]

$("span").after('<img src="link/to/image.jpg" />'); //Select the span and insert the image

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!