Question

I have created a fiddle here:

http://jsfiddle.net/ozzy/paPRg/1/

Basically, I want to allow users to hover over a link, panel appears and they can click a link on that panel, which gets added to the input field.

Furthermore, I really need to make the LINKS dynamic.

Wonder if anyone knows :

1. onclick the link url is placed unto the text field.
2. if they click OWN LINK , it closes panel and focuses in the input field.
3. how to make this dynamic, so if we wanted 2 or more of these on one page.. how would I make the script dynamic so it didnt mean a whole lot of repetitive javascript.

currently the link id is id=”demo-basic”

Any help appreciated.

Answer 1

You could add a handler like this to your function (see http://jsfiddle.net/7QTXU/). This is heavily dependent on the structure of your document to find the appropriate form field to fill in, but if you want multiple ones with only a single handler, I think you’ll have to depend on the DOM structure to locate them. If you could simplify the relationship, that would help, for example, if the form filed were to immediately follow the preview, you could use next rather than having to traverse up to a parent node, then find the element. There may be a method on hovercard to close it using its API, but hide seems to work and not interfere with the operation of the plugin. Also, the check depends on the value of the href to see which one should close the hovercard. It would be better if it had a class that could be used rather than have to match on the href.

$('.hc-details a').live('click', function() {
    var $this = $(this);
    if (!$this.attr('href').match(/^javascript/)) {
        $this.closest('p')
             .nextAll('form:first')
             .find('input:text')
             .val($this.attr('href'));
    }
    $this.closest('.hc-details').hide();
    return false;
});