Slashdot Mirror

← Back to Stories (view on slashdot.org)

AJAX Inline Dictionary like WallStreetJournal.com

Posted by ryuzaki0 on from the how-to-do-it dept.

chevoldavis writes "Highlight any text on this site then right click. A tooltip containing the definition of the selected word should show up. This tutorial will show you how to accomplish this, step by step. You can modify it to call any function or webservice. This is similar to the WallStreetJournal.com except they show search results in their tooltip window and they leave the functionality of the context menu while I have chosen to supress it. "

52 comments

  1. stop that! by acvh · · Score: 5, Insightful

    I want my right mouse button to do what it always does, not what YOU want it to do.

    1. Re:stop that! by red_dragon · · Score: 2, Informative

      So you're still using Internet Explorer, then?

      I've just tried it with Firefox, which can optionally prevent JavaScript code from disabling context menus, and the usual right-click menu appeared with the AJAX-generated tooltip beneath it.

      --
      In Soviet Russia, Jesus asks: "What Would You Do?"
    2. Re:stop that! by jrumney · · Score: 1

      With the default settings, it does suppress the Firefox context menu, though a second right click does bring it up.

      But if you're using Firefox, there are a number of extensions that give you this functionality across all websites without messing with your context menu, so this hack is just annoying.

    3. Re:stop that! by Tx · · Score: 3, Insightful

      And you don't find that annoying? You want to use your contect menu e.g. to copy some text, and then you have to use an additional click to close the pop-up that had appeared behind it, obscuring the article. GPP is right, that's annoying. That's not to say that non-annoying uses couldn't be found for this technique though.

      --
      Oh no... it's the future.
    4. Re:stop that! by quokkapox · · Score: 1

      So turn off JavaScript or use a different User Agent.

      The web should be what the content producers and designers want you to see. In the coming DRM age, you're not allowed to skip around in your favorite book or read it backwards. You can't repeat parts of songs or movies anymore either.

      <!-- TODO: Replace previous drivel with insightful comment later -->

      --
      it's a blue bright blue Saturday hey hey
    5. Re:stop that! by tomhudson · · Score: 3, Insightful

      Its also annoying because it redraws the cursor every mouse move ... too much flickering for my taste.

    6. Re:stop that! by acvh · · Score: 1

      Posted that using Safari actually (and yes, I use my right mouse button in OS X). Disabling, or even modifying, a critical operation like a rightclick context menu, is just stupid. What's next, AJAX code to use my spacebar as a backspace key?

    7. Re:stop that! by Phexro · · Score: 1

      Yeah. I prefer the implementation on eNotes. You can highlight any word, and press Shift-D to get a definition. Shift-T shows the thesaurus entry, and Shift-S brings up a mini-search.

      Much less intrusive than repurposing the right mouse button.

    8. Re:stop that! by misleb · · Score: 1

      Or you can just find/make a browser extension that does it for ANY site the way you want.

      -matthew

      --
      "THERE IS NO JUSTICE, THERE IS ONLY ME." -Death
    9. Re:stop that! by generic-man · · Score: 1

      If you use Safari this whole article is moot: just mouse over any word and hit CTRL+CMD+D to bring up a dictionary panel for the word. (Requires Mac OS X 10.4)

      --
      For more information, click here.
    10. Re:stop that! by LifesABeach · · Score: 1

      I found the lack of the UI control and handling on the web page disapointing. "dotnetnuke" is a solution to a problem that no longer matters.

  2. an ajax article.. by kwoff · · Score: 3, Insightful

    Is this on slashdot because digg is down ?

  3. 2 things by giorgiofr · · Score: 4, Funny

    1. I can right-click or double-click any word on any page on the webs and I get a nice "Dictionary" item in my context menu. That's because I use a sensible browser, so I don't depend on your service.
    2. My right-click menu is *sacred*. Really, I kill kittens on its altar every morning. Thou shalt not dare to touch it. For he will not slay thee in thy turn, etc etc. Seriously, don't mess with people's interface. Luckily my fancy browser denies such requests as yours.
    Did I mention I use a cool browser?

    --
    Global warming is a cube.
    1. Re:2 things by Tx · · Score: 1

      Well my fancy browser prevents him from suppressing my sacred context menu, but it doesn't stop him opening his pop-up behind it (unless you turn javascript off entirely), which is almost as annoying.

      Face it, there's no cure for asshole web designers short of the firing squad. Well, that or a greasemonkey script or two ;).

      --
      Oh no... it's the future.
  4. This is great by Ohreally_factor · · Score: 4, Funny

    This is great, if you define all words as "The remote server returned an error: (500) Internal Server Error."

    --
    It's not offtopic, dumbass. It's orthogonal.
    1. Re:This is great by alphafoo · · Score: 2, Funny

      I right-clicked on the word "Slashdotted" and thought, yep, that's about right.

      Even a stopped clock gives the right time twice a day.

  5. I'm bored, so I checked.... by magores · · Score: 1

    WSJ doesn't do "at", "to", or "the"

    Submitter site didn't do "to", "the", or "XSLT".

    Am I missing the concept of "any word"?

    1. Re:I'm bored, so I checked.... by magores · · Score: 3, Informative

      Sorry for replying to myself, but I forgot to mention, that I DO like this idea.

      It's kinda like what they do at http://newsinchinese.com/ And, sorta like the firefox extension from http://www.asdotrans.com/.

      I could see myself using a modified version of this.

      --
      The negative tone of my parent post was unintentional

    2. Re:I'm bored, so I checked.... by chevoldavis · · Score: 1

      Thanks, that is what I was trying to accomplish. I know it is annoying, and maybe a dictionary wasn't such a good idea but I did it to see how the wallstreetjournal.com did it. I wanted to share it with people so they coould modify it and do what they liked with it.

  6. What's the point in looking up definitions? by tehgimpness · · Score: 0

    For my browsing needs I'm sure you can hard code in the javascript: 'tits', 'ass' and 'My Little Pony: Escape to Cloud Castle' (Hey don't judge, it's called 'niche').

    --


    ZOMGWTFPWNtKKTHNXBIBI!!!ONE!111!!!
  7. Agreed by MattWhitworth · · Score: 1

    Seems like the next version of the Oxford Dictionary will have that phrase repeated 10 000 times if this site's anything to go by ;)

  8. browser compatibility by peesharp · · Score: 2, Informative

    It does not work with Opera (9).

    1. Re:browser compatibility by spectral · · Score: 2, Informative

      I don't think that it's because Opera is better or nicer (though I'm sure I could disable it if it did work), I think it's because, for some reason, people are STILL doing browser detection like idiots. Not that I mind, I can't stand the idea of this (leave right click alone!)

      The problem?
      // -- Browser Detection --
      var ie = document.all&&document.getElementById
      var ff = document.getElementById&&!document.all // If the browser is compatible on right-click call the function to get the highlighted text
      if (ie||ff)
      {
      document.oncontextmenu = getselection;
      }


      opera supports "document.all" AND "getElementById". (hell, firefox does too, it just refuses to let you check for document.all so as to NOT break stupidities like this.)

    2. Re:browser compatibility by MagicM · · Score: 1

      Menu: Tools -> Preferences
      Advanced Tab
      Content
      JavaScript Options...
      "Allow script to receive right clicks" (unchecked by default)

    3. Re:browser compatibility by MagicM · · Score: 1

      (Not that enabling the option makes it work or anything.)

    4. Re:browser compatibility by Anonymous Coward · · Score: 0

      And you don't need it: double-clicking a word already gives you a menu with a link to its definition.

  9. Just like the website... by __aaclcg7560 · · Score: 3, Funny

    So like the Wall Street Jounal website, this inline dictionary has some free word definitions but you need a subscription to see the rest? Not a very useful dictionary...

    1. Re:Just like the website... by stymyx · · Score: 1

      You should try the Answers.com Firefox extension or Windows plugin (for IE users). They let you alt+click on any word, or right-click to get a definition from the context menu, even without selecting the word.

      Disclaimer: I work for Answers.com.

      Regards,
      -- Avi

  10. addressing ajax 508 concerns by Anonymous Coward · · Score: 0

    There is no reference for accessibility or making it 508 compliant? Does anyone know where to look for making ajax usable for this type of complience?

  11. Great, but Wrong by 99BottlesOfBeerInMyF · · Score: 5, Insightful

    I'm sure a lot of us find this kind of crap annoying. A website developer just not have enough information to determine what my most common tasks are and thus properly define a right-click menu for me. I don't want them to have that information. My right-click menu already has a dictionary in it, as well as a handful of other functions. Now this site pops up a second context menu on the page that takes much, much longer to load and has fewer of the functions I want.

    To me this says, "screw you" to users of decent browsers in favor of working around IE + Windows failure to provide a good way to integrate this functionality in the proper location.

  12. what about word translation ? by arkaino · · Score: 4, Interesting

    More useful would be to right click and get a menu with different languages for translating the word I'm highlighting.

    1. Re:what about word translation ? by chevoldavis · · Score: 1

      That would be useful, and possible. I have seen many webservices out there that will so the translation, I didn't think of that, seems it would be more usefull.

  13. IE not working by Anonymous Coward · · Score: 0

    Wow, those are some harsh replies to an innocent posting. Tho actually, in my IE 6 browser, your right-click simply doesn't work. I get the normal right-click menu.

    1. Re:IE not working by chevoldavis · · Score: 1

      I agree, those are some harsh postings, I guess people feel pretty strong about their right-click menu. I tested it in ie 6.0.2900 and it works fine...

  14. great idea! by dysfunct · · Score: 0

    Ajax n : a mythical Greek hero; a warrior who fought against Troy in the Iliad

    Now you'd just have to tell your visitors why according to your dictionary a Greek hero can help me looking up words...

    --
    :/- spoon(_).
  15. gTranslate by misleb · · Score: 1

    https://addons.mozilla.org/firefox/918/

    --
    "THERE IS NO JUSTICE, THERE IS ONLY ME." -Death
    1. Re:gTranslate by arkaino · · Score: 1

      That extension is great, but if you can do it browser independent as with AJAX, it might be better for users I think.

    2. Re:gTranslate by 99BottlesOfBeerInMyF · · Score: 1

      That extension is great, but if you can do it browser independent as with AJAX, it might be better for users I think.

      I strongly disagree. This type of functionality is bounded more by the user than the application. As such, the proper place for it is as a plug-in to the OS. For example, a lot of people would never want to translate anything ever. They can just not enable a translation plug-in. Others will want to translate a lot, and if they do so in their browser, they may well need to in their PDF reader, IRC/Chat client, e-mail, and word processor.

      Rather than adding all these features to all these applications, why not integrate them as services a user can install and enable either globally or for some sites or applications. Otherwise, you'll end up with different sites translating things differently, with some working better and some more poorly. With a OS plug-in, you can install the best one (or more) for you. Further, there is a whole range of these functions, most of which are only useful for a specific segment of users. Maybe I never visit foreign sites and don't want translation taking up space in my menu, but I am a huge encryption enthusiast and want to be able to rapidly apply encryption to random text, in various applications. Or maybe I can't stand reading due to my poor vision and just want my computer to speak given text aloud all the time. Maybe want to rapidly strip line endings to reformat messed up text. By providing this type of functionality as OS level plug-ins, it lets each user install and enable just the features they want, not those the Website operator thinks they want. After all, users generally know better than developers what tasks they are doing.

    3. Re:gTranslate by misleb · · Score: 1

      Why should every site have to implement a translation/dictionary tool? With a browser extension I can tranlate anything on any site. And it works exactly as I want. There is no complaining about how a particular site decides to implement translation or dictionary lookups. I've even gone so far as to convert a German novel (eBook) to HTML just so I can use gTranslate to help me along. The browser extension is WAY better than anything AJAX on a specific site could deliver.

      AJAX may be good for web site developers who want to implement translations. But for users, a browser extension is better.

      -matthew

      --
      "THERE IS NO JUSTICE, THERE IS ONLY ME." -Death
  16. Yep... by Eric+Pierce · · Score: 1

    prettyprettypretty coolcoolcool!

  17. Open your mind by brunes69 · · Score: 1

    Just because you're accessing it in a web browser does not make it a 'web site'.

    If I am using a web-based AJAX email client like OWA or RoundCube mail I not only *expect* the right click menu to behave like a native client ( With options like copy message, move message, flag, delete, etc), I *demand* it. The same is true of other browser-based applications that run on Intranets - these types of rich applications are not "web sites" and should not have to behave as such,they should be as rich as possible.

    As someone who works on one of these intranet based rich web apps, I can say the fact the KHTML still does not have support for the right click menu (when all other major browsers have had it for years) is a major pain to me. It pretty much excludes KHTML/Konqueror from ever running our application.

    1. Re:Open your mind by 99BottlesOfBeerInMyF · · Score: 2, Interesting

      Just because you're accessing it in a web browser does not make it a 'web site'.

      Umm, yes, it does. It is a page of markup and the very first line they send to my Web browser contains the Web standard they are employing.

      If I am using a web-based AJAX email client like OWA or RoundCube mail I not only *expect* the right click menu to behave like a native client ( With options like copy message, move message, flag, delete, etc), I *demand* it.

      Not me. If I'm using a Web browser, I demand it treat everything like the content it is. I don't want my controls of my software to be hijacked, or for it attempt to do so. I can already customize my right-click menu, by application and by Web site if I so desire. If a Web site wants to recommend additional functions for that site, that is fine, but things like a dictionary lookup are in no way something only my Web browser needs to access. I use the same dictionary in dozens of programs and I don't want to switch to their, half-assed, poorly configured one, just for their site. I also don't want to suddenly lose the other functionality of my contextual menu, like viewing the page's source, or blocking a particular ad server. No thanks.

      It pretty much excludes KHTML/Konqueror from ever running our application.

      Then you need to hire a competent UI designer. A contextual menu should never, and I mean never, ever contain functionality that cannot be accessed from another part of the program. A significant number of users don't know how to right click or will not think to try it to find some functionality. It is effectively hiding that function. Some users don't even have a right click button on their mouse and many users use some sort of alternative interface. Whether they are blind, have a palsy, are paralyzed, are working on a touch pad or stylus, or are using some other interface you've never dreamed of, the right-click menu is inconvenient or unavailable to a lot of users. If a user needs it to run your application you just violated a very basic UI design rule that is in pretty much any book you can pick up on the subject. Right-click menus should only be used as a shortcut for functionality that is also present elsewhere.

      Seriously, fire your UI guy and get a competent one.

  18. Dict Greasemonkey script by nitro322 · · Score: 3, Informative

    Any Firefox/Greasemonkey users out there that are interested in this may also want to check out the Dict script: http://userscripts.org/scripts/show/1467

    It adds a similar, but much less intrusive capability. Simply double-click on any word to highlight it, and the definition is shown in a small window. Once you're done, just click the X (or use my own slgihtly-modified version and click anywhere on the page) to close it.

    Of course, this has both it's pros and cons as compared to the original idea discussed in the story. Since it's a client-side solution, this isn't something that will be available to your visitors. However, the good news is that it doesn't hijack your browser's context menu, which, as mnay other people have commented, is something I personally despise.

  19. Why do that by aftk2 · · Score: 1

    When I can click "Ctrl-Apple-D" while hovering over a word?

    Oh crap - I swore I'd never become one of those "Look what my OS can do!!11!" Apple fans. Oh well. Take this is as a tip or hint, then, rather than a snark (as it was originally intended).

    --
    concrete5: a cms made for marketing, but strong enough for geeks.
  20. Re:awesome by LifesABeach · · Score: 1

    Would you like to know how? :0)

  21. What's 'right click'?! by fbg111 · · Score: 1

    I'm a Mac user, you insensitive clods!

    --
    Flying is easy, just throw yourself at the ground and miss. -Douglas Adams
  22. Wrong wrong wrong by brunes69 · · Score: 1

    Not me. If I'm using a Web browser, I demand it treat everything like the content it is. I don't want my controls of my software to be hijacked, or for it attempt to do so. I can already customize my right-click menu, by application and by Web site if I so desire.

    You != eveyone. Most people don't "customize their right click menus", and most people expect the context menu in an application to provide contextual information - if you aren't surfing the web the majority of items in a browser's context menu are anything but contextual.

    For example - right click on an email address on a web page, I get crap like "Back", "View Page Source", "Bookmark Page" - nothing at all relating to the email address. Even if I highlight the text and right click (a no-no from a UI standpoint - extra unnecessary steps) - I stil get nothing relating to the application I am accessing. This is all because the web browser knows nothing about the application it is running, it is up to the developer to instruct it as to what is relevant contextual information for the application.

    Then you need to hire a competent UI designer. A contextual menu should never, and I mean never, ever contain functionality that cannot be accessed from another part of the program.

    I think you need to fire yourself and get a real job at a real company - the right click menus of course are not the only route to functionality in the application. But in the real world, any piece of functionality that does not work 100% across all browsers means that the application is unsupportable on that browser, because it can't pass through the QA cycle.

    If the app can't pass through the QA cycle in a browser it "doesn't work" in the browser, period. Therefor our application does not work in Konq

    1. Re:Wrong wrong wrong by 99BottlesOfBeerInMyF · · Score: 1

      You != eveyone. Most people don't "customize their right click menus", and most people expect the context menu in an application to provide contextual information...

      But you're talking about running an application within another application. Since you can't possibly know which application your "Web app" is running in, or what tasks they are trying to accomplish and since a right-click menu should always be a secondary access control, I think it is perfectly reasonable to assume that the intermediary layer might have controls it wants to impose that are more useful and pervasive than a secondary access to something you already provide access to.

      if you aren't surfing the web the majority of items in a browser's context menu are anything but contextual.

      Hmm, lets see, language translations, dictionary/thesaurus lookups, view source, back and forward, useful scripts... all seem to apply to Web apps as much as anything else. Anyone running Firefox or a number of other browsers and even OS's will have similar functions. Thus, you're catering to Windows+IE, which is where that functionality is lacking.

      I stil get nothing relating to the application I am accessing.

      Because you are not counting the browser as an application, which you are running whether you like to acknowledge it or not.

      the web browser knows nothing about the application it is running, it is up to the developer to instruct it as to what is relevant contextual information for the application.

      You're assuming that you, as a developer, know more about what I want to do than I do and that you should be able to override my choices by forcing your own either in addition (breaking mine) or as a replacement. Seeing as you don't know what I'm doing, while I do, I reject your argument.

      I think you need to fire yourself and get a real job at a real company - the right click menus of course are not the only route to functionality in the application.

      You wrote, "...It [lack of support for a right-click menu] pretty much excludes KHTML/Konqueror from ever running our application." And then you claim it is not the only route to that functionality? You are contradicting yourself.

      But in the real world, any piece of functionality that does not work 100% across all browsers means that the application is unsupportable on that browser, because it can't pass through the QA cycle.

      So you're saying your QA process is so rigid and can't handle a simple conditional and somehow that is my fault? Between your shoddy UI policies and your incompetent QA, maybe you should tell me just what product you're working on so I can be sure to avoid it. Apparently you've never heard of another Web standard called "gracefully dealing with differing feature sets."

    2. Re:Wrong wrong wrong by brunes69 · · Score: 1

      Again - web this web that. Not everything that runs in a browser runs on the web. Lots of things are internally hosted and having strict requirements on supported platforms and required feature sets is not only OK, but desired. For all you know the application may not be on a web server but running in an internal embedded HTML renderer.

      Rich applications delivering rich functionality need rich APIs, period. And the contextual menu is one of those rich APIs.

      There is absolutely no reason on God's green earth a web application should be constrained in what it can and can not do with it's GUI simply because it is hosted ina browser. There is no valid security concern or usability concern with why a custom application should not have a custom context menu when the user expects it to. A browser-based application should be able to do everything with it's GUI any native application can do.

      The browser is just another development platform, period. Wherever possible it should not have hard and fast rules that govern what is OK and what is not in terms of it's interface to the user.

    3. Re:Wrong wrong wrong by 99BottlesOfBeerInMyF · · Score: 1

      There is absolutely no reason on God's green earth a web application should be constrained in what it can and can not do with it's GUI simply because it is hosted ina browser.

      Allow me to translate: Lalalalalala... I'm not listening. I refuse to hear that applications running in a Web browser are in any way different and I refuse to acknowledge the existence of said browsers when creating software.

      Should a Web app then be able to run in fullscreen mode. Should it be able to start fullscreen mode when it is run, just like other programs can? Should the user be unable to navigate away from the page in which it is hosted? Sorry, the browser is an integral part of the experience. Denying that does not aid your usability. Denying that the intermediate program that hosts your program exists is the same as building an application you know will be running in an emulator, but refusing to acknowledge that when you design it.

      The browser is just another development platform, period. Wherever possible it should not have hard and fast rules that govern what is OK and what is not in terms of it's interface to the user.

      Yeah, but java developers take into account the platform and JVM. Web application developers need to take into account browsers. Pretending a usability issue dozens of people just pointed out as annoying does not exist is just stupid.