Retrieve the meaning of a word using ajax and javascript

Client Side Coding > Javascript & Ajax

(1/1)

amrita:
Hi all,

I want to make an application in which i have to retrieve the meaning of a word while mouse hovering the word.
I have to use php,ajax and javascript for this application.Please anyone give me a suggestion. I have no idea. I am a beginner in php,ajax and javascript.

Thanks
Amrita

Sarthak Patel:
Hi Amrita,

How would you want to display the result obtained? In a tooltip box or display the result inside a div below the word on which you hover the mouse.

You can accomplish this by calling API of any dictionary website. Below is a simple code that uses www.the freedictionary.com's javascript to display a pop-up when a user double clicks any word.

--- PHP Code: ---<html>
<head>
<title>Live Dictionary</title>
<script src="http://www.thefreedictionary.com/dict.js"></script>
</head>
<body ondblclick="dictionary()">
Hi all,

I want to make an application in which i have to retrieve the meaning of a word while mouse hovering the word.
I have to use php,ajax and javascript for this application.Please anyone give me a suggestion. I have no idea. I am a beginner in php,ajax and javascript.

Thanks
Amrita
</body>
</html>

--- End code ---

Feel free to contact me on sarthakpatel88@gmail.com in case you need urgent help.

amrita:
Thanku for ur response.....

Actually i want to retrieve the meaning of a word from a table stored in MySQL database with word and definition columns. When the user mouse hovers a word that is in the table,its meaning should pop up. I have to do it with ajax,javascript and php.

amrita:
This is my code:----

function getDefinition(currWord)
   {
      var nDefinition = "";
      for (i=0; i<wordList.length; i++)
      {
       if (wordList == currWord)
         {
             nDefinition = definitionList;
         }
      }
      return nDefinition;
   }

   function showDefinition(defineWord)
   {
      var toolTip = getDefinition(defineWord);
      var tipTxt = toolTip.split("|");
      tipContainer.style.display = '';
      for (i=0; i<tipTxt.length; i++)
      {
          tipContainer.appendChild(document.createTextNode(tipTxt))
          tipContainer.appendChild(document.createElement('br'))
      }
   }

    function getMidWindow()
   {
      if (document.documentElement && document.documentElement.scrollLeft || document.documentElement && document.documentElement.scrollTop)
      {
          midWindow = document.documentElement.clientWidth/2;
      }
      else
      {
          midWindow = document.body.clientWidth/2;
      }
   }

   function initContext()
   {
      var rawText = document.getElementById('subjectMatter');
      var workText = rawText.innerHTML;
      workText = workText.replace(/(\<p\>)/gi,"$1 ");
      for (i=0; i<wordList.length; i++)
      {
          var currWord = new RegExp("([\\s\\r\\n]+"+wordList+"[\\s,;.:?!]+)",'gi')
          workText = workText.replace(currWord,"<span class='word'>$1<\/span>");
      }
      rawText.innerHTML = workText;
   }

   function initTip()
   {
      tipContainer = document.getElementById('nFloat')
      tipContainer.style.display = 'none';
      if (!IE){document.captureEvents(Event.mousemove)}
      document.onmousemove=stayHome;
      getMidWindow();
   }

   function init()
   {
      initContext();
      var nBody = document.getElementsByTagName('body')[0];
      var tipBox = document.createElement('div');
      tipBox.className = "definition";
      tipBox.id = "nFloat";
      nBody.appendChild(tipBox);
      initTip();
      var nWords = document.getElementById('subjectMatter').getElementsByTagName('span');
      for (i=0; i<nWords.length; i++)
      {
          nWords.onmouseover = function()
            {
             showDefinition(this.firstChild.data.toLowerCase().replace(/^\s+|\s+$/,"").replace(/[^a-zA-Z-\s]/g,"").replace(/^\s+|\s+$/,""));
            }
          nWords.onmouseout = function()
            {
             hideDefinition();
            }
      }
   }

   function parseGlossary()
   {
      var nList = GlossaryResponse.getElementsByTagName('word');
      var nDef = GlossaryResponse.getElementsByTagName('definition');
      for (i=0; i<nList.length; i++)
      {
          wordList = nList.firstChild.data;
          definitionList = nDef.firstChild.data;
      }
      init();
   }

   function createGlossary()
   {
      var GlossaryRequest = window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : new XMLHttpRequest();
      GlossaryRequest.onreadystatechange = function()
         {
           if (GlossaryRequest.readyState == 4)
            {
               if (GlossaryRequest.status == 200)
               {
                  GlossaryResponse = GlossaryRequest.responseXML;
                  parseGlossary();
               }
               else    {
                 alert('Error Glossarymine.xml File '+ GlossaryRequest.statusText);
               }
            }
         }
      var forceGET = "?n="+ parseInt(Math.random()*999999999);
      GlossaryRequest.open("GET", "Glossarymine.xml"+forceGET, true);
      GlossaryRequest.send(null);
   }

   onload=createGlossary;
   onresize=getMidWindow;
</script>
it works fine with xml file.But instead of xml i want to use mysql db.in that i have word and definition columns.When hovered over a word its definition should come from the database(word also comes form the database) . how can this code be modified instead of xml file.I tried a lot.Please someone help........

Navigation

[0] Message Index

Go to full version