Which Javascript library?

[eluser]Michael Wales[/eluser]

WolfgangA: I don’t mean autocomplete. It’s not going to work on text being typed, it’s plain html where some words has a little popup (context) menu with alternatives to the word in question. As such it could be any popup menu combined with ajax (the highlighted word will be updated) and I have found a couple of them on dynamicdrive.com. But I would very much prefer not to mix different libraries, that is why I am searching for such a feature in, say, jQuery.

It sounds to be you just need to do something like this:

1. In the HTML surround your special words with <span class="lookup"></span>
2. Use JQuery to modify the appearance of all span tags with that class.
3. Use JQuery to add a listener for right-clicks on those words
4. Use JQuery to create a floating div next to the click-location. This would then make an AJAX request to a controller which would determine what words to list as alternatives.
5. Use JQuery to listen for clicks on the alternative words within this div, upon click - hide that div, and replace the innerHTML of the originally clicked span with the innerHTML of the clicked anchor tag.
6. Profit.

[eluser]marlar[/eluser]
Although I had hoped to find something readymade, your idea seems to be viable, at least when I get to know jQuery a bit more!

This could be a fine little learning-by-doing project :-)

[eluser]esra[/eluser]
[quote author="marlar" date="1197584757"]Thanks, jQuery does indeed look very good.

WolfgangA: I don't mean autocomplete. It's not going to work on text being typed, it's plain html where some words has a little popup (context) menu with alternatives to the word in question. As such it could be any popup menu combined with ajax (the highlighted word will be updated) and I have found a couple of them on dynamicdrive.com. But I would very much prefer not to mix different libraries, that is why I am searching for such a feature in, say, jQuery.[/quote]

The Javascript libraries are loaded from your template, thus you could use separate templates for your frontend and backend. For example, I load EXT JS in my Admin template because I need support for drag and drop trees and a scalable grid solution. I use Jquery in my frontend template because it is faster and I find myself using less AJAX there. EXT JS does support context menus where you can right click on an area to display a menu. I'm not sure, but I believe that I have seen a blog post or two about doing the same with Jquery and other AJAX libraries. I would imagine that it is possible to display a menu when the mouse pointer hovers over a link or image. A menu could be populated using content from a database, a EXT JS datastore, XML file, or another form of serialized data.

JQuery uses a plugin approach that allows you to extend it with the code as needed. EXT JS uses a different approach allowing you to load the full library or to generate a custom version with a selection of the code you need. In both cases, the more code you load, the more you see performance degrade on the initial load and vice versa.

[eluser]WolfgangA[/eluser]
[quote author="marlar" date="1197584757"]Thanks, jQuery does indeed look very good.

WolfgangA: I don't mean autocomplete. It's not going to work on text being typed, it's plain html where some words has a little popup (context) menu with alternatives to the word in question. As such it could be any popup menu combined with ajax (the highlighted word will be updated) and I have found a couple of them on dynamicdrive.com. But I would very much prefer not to mix different libraries, that is why I am searching for such a feature in, say, jQuery.[/quote]

If it is really just a popup that should show up while hovering over plain html text, than you might want to have a look at the Ext.QuickTips class, when considering EXT.

From the Ext 2.0 Docs:

Provides attractive and customizable tooltips for any element. The QuickTips singleton is used to configure and manage tooltips globally for multiple elements in a generic manner. To create individual tooltips with maximum customizability, you should consider either Ext.Tip or Ext.ToolTip.

Here is an example showing how some of these config options could be used:

Code:

// Init the singleton.  Any tag-based quick tips will start working.
Ext.QuickTips.init();

// Apply a set of config properties to the singleton
Ext.apply(Ext.QuickTips.getQuickTip(), {
    maxWidth: 200,
    minWidth: 100,
    showDelay: 50,
    trackMouse: true
});

// Manually register a quick tip for a specific element
q.register({
    target: 'my-div',
    title: 'My Tooltip',
    text: 'This tooltip was added in code',
    width: 100,
    dismissDelay: 20
});

Here is an example of configuring an HTML element to display a tooltip from markup:

Code:

// Add a quick tip to an HTML button
<input type="button" value="OK" ext:qtitle="OK Button" ext:qwidth="100"
     ext:qtip="This is a quick tip from markup!"></input>

If you need more flexibility, you can use Ext.Tip or Ext.ToolTip instead.
(Note: QuickTip is subclassed from ToolTip)

[eluser]marlar[/eluser]
[quote author="WolfgangA" date="1197649768"][quote author="marlar" date="1197584757"]If it is really just a popup that should show up while hovering over plain html text, than you might want to have a look at the Ext.QuickTips class, when considering EXT.[/quote]

Well, it's more than a tooltip since each item in the popup should be clickable and do something. So a menu is a more correct term.

But if the text of the tooltip can contain html, it could simply be a <ul> with some anchors or similar.

[eluser]Nick Husher[/eluser]
[quote author="Michael Wales" date="1197604081"]
3. Use JQuery to add a listener for right-clicks on those words...
[/quote]

You probably don't want a unique listener on every one of the words; as you add new event listeners, you're adding execution overhead to the page and increasing your JS memory footprint since each listener's lexical scope is stored independently. It's not bad practice for a handful of listeners, but once you get up to a dozen or more, you're going to see pageload slowdown on some slower computers.

The best solution is to add a listener on the parent box of all these popup menus and do a little magic to figure out which one has been pressed. You only need one event listener in that case.

[eluser]marlar[/eluser]
[quote author="Nick Husher" date="1197664987"]
The best solution is to add a listener on the parent box of all these popup menus and do a little magic to figure out which one has been pressed. You only need one event listener in that case.[/quote]

Yes, that sounds reasonable. There could be very many of these "interactive words" on a page, so that would create too much overhead.

Thanks!

[eluser]marlar[/eluser]
[quote author="Michael Wales" date="1197604081"]
It sounds to be you just need to do something like this:

1. In the HTML surround your special words with <span class="lookup"></span>
2. Use JQuery to modify the appearance of all span tags with that class.
3. Use JQuery to add a listener for right-clicks on those words
4. Use JQuery to create a floating div next to the click-location. This would then make an AJAX request to a controller which would determine what words to list as alternatives.
5. Use JQuery to listen for clicks on the alternative words within this div, upon click - hide that div, and replace the innerHTML of the originally clicked span with the innerHTML of the clicked anchor tag.
6. Profit.[/quote]

I have managed to do something like that using jQuery. While I am quite experienced with javascript, I am new to jQuery, so it has taken quite long time to get into it. But even if I could have done it much faster using plain vanilla JS, I wanted to learn jQuery!

This works so far. Note that for simplicity, it's just a tooltip here. I will insert the html for the menu later on (it's just a few lines with anchors).

Code:

var tooltipTimeout = null;
$(document).ready(function(){
    tooltip = $("#tooltip");
    $("span.tooltip").hover(
        function(event) {
            id = $(event.target)
            var pos = id.offset();
            clearTimeout(tooltipTimeout);
            $("#tooltip").show().css('left', pos.left+id.width()).css('top', pos.top).html(id.attr('title')).append("<br/><a href='http://www.dr.dk'>DR</a>");
        },
        function () {
            tooltipTimeout =  setTimeout('tooltip.hide()', 1000)
            tooltip.hover( function() { clearTimeout(tooltipTimeout) }, function() { tooltipTimeout = setTimeout('tooltip.hide()', 500) } )
        });
});

[eluser]Nick Husher[/eluser]
Note: On this line:

Code:

id = $(event.target)

You're declaring id as a global variable. Do you want to do this?

Even though jQuery is the hotness of the day, I think you could do something very similar with the YUI Menu control. Example

Applying a different set of configuration properties along with the right event handlers would get you the effect you're looking for.

[eluser]marlar[/eluser]
Hi,

The global declaration is a typo. It was meant to be var id = xxx

The reason for using jQuery is that I want to learn it. As I wrote, I could have done it much faster using plain Javascript (not a library) and that would have less overhead than using jQuery or another library. But I need pretty advanced stuff on the site, so I would need some form of library anyway, that's why I chose to do it with jQuery.

YUI would be another option of course, but I think it's better not to involve more libraries than necessary.

Martin