Question

I’m working on my blog and do not know how i can make a javascript which highlights some parts of my text and give further information. like:

I’m working on my PC

and if i click on pc there is a window and more informatin in a Jquery UI Dialog.

I tried it by myself, but i had to create a div for every information i wanted.
then i was able to open a box with

$(foo).dialog('open')

that is to much div i think. Could you provide me with an easy solution?

Answer 1

It is hard to say what you really need. for the next time you should provide more code… But i’ll give it a try: I do not know how you provide the highlight of your text, but i think this demo could help you.

HTML:

<p> Text blabla
<span data-title="Title 1" data-text="Text 1" class="a2u">Highlight 1</span>
more blabla
<span data-title="Title 2" data-text="Text 2" class="a2u">Highlight 2</span>
more blabla
<span data-title="Title 3" data-text="Text 3" class="a2u">Highlight 3</span>
more blabla
</p>

Javascript:

$().ready(function() {
    $("#alert2ui").dialog({
        autoOpen: false
    });
    $(".a2u").click(function() {
        $("#alert2ui").dialog("option", "title", $(this).attr("data-title"));
        $("#alert2ui").html($(this).attr("data-text"));
        $("#alert2ui").dialog('open');
    });
});​

you highlight your text by a given css class and with html5 data-* attributes you can set detailed information.