title: Jquery and coldfusion
body: <p>I have a page which needs to output results, i am using jquery with json to return and display the results but the results are not showing up in the relevant div which will appear when the user hovers over the relevant image. Here is the script below:</p>
  
  <pre><code>&lt;style&gt;
  #normaldiv {}
  .normaldiv {width:200px; height:200px; float:left; margin-left:15px; margin-bottom:15px; background-color:#CCC; position:relative;}
  .hoverdiv {width:250px; height:350px; -moz-box-shadow: 0 0 10px #000; -webkit-box-shadow: 0 0 10px #000; box-shadow: 0 0 10px #000; top:-10px; z-index:10000; position:absolute; background-color:#FFF;/**/ margin-left:-25px;}
  &lt;/style&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
                  $(document).ready(function(){
  
  
                  var mydata  = eval({"COLUMNS":["SONG_ID","SONG_TITLE","SONG_DESC","SONG_ACTIVE","SONG_DATE","LINK"],"DATA":[21, "This Track - Original Mix (3:00)", "&lt;p&gt;&lt;strong&gt;Artist: &lt;\/strong&gt;Me&lt;br \/&gt; &lt;strong&gt;Label:&amp;nbsp;&lt;\/strong&gt;My Own &lt;br \/&gt; &lt;strong&gt;Genre: &lt;\/strong&gt;Country (&lt;span class=\"trackTags\"&gt;Chilled&lt;\/span&gt;)&lt;strong&gt;&lt;\/strong&gt;&lt;br \/&gt; &lt;strong&gt;Release Date: &lt;\/strong&gt;2012-05-28&lt;\/p&gt;", 1, "May, 28 2012 00:00:00", "http:\/\/www.byme.com\/track\/this-track-original\/4356789", 161, 21]]})
                  var output = document.getElementById('normaldiv');
              var colMap = new Object();
  
         //first - find my columnsco
          for(var i = 0; i &lt; mydata.COLUMNS.length; i++) {
          colMap[mydata.COLUMNS[i]] = i;        
          }
  
          for(var i = 0; i &lt; mydata.DATA.length; i++) {
          var str = " Title: " + mydata.DATA[i][colMap["SONG_TITLE"]] + "- Release Date: " + mydata.DATA[i][colMap["SONG_DATE"]] +  "Link: " + mydata.DATA[i][colMap["LINK"]] + "&lt;br /&gt;" + mydata.DATA[i][colMap["SONG_DESC"]] + "&lt;br /&gt;"+ "&lt;br /&gt;";
              var title = mydata.DATA[i][colMap["SONG_TITLE"]] ;
              var reldate = mydata.DATA[i][colMap["SONG_DATE"]];
              var buynow = mydata.DATA[i][colMap["LINK"]];
              var reldesc = mydata.DATA[i][colMap["SONG_DESC"]];
              var relcov =  mydata.DATA[i][colMap["PHOTO_ID"]];
              output.innerHTML += "&lt;div class=normaldiv&gt;" + "&lt;img src=images/rel/"+  mydata.DATA[i][colMap["PHOTO_ID"]]+".jpg width=200 height=200/&gt;" +"&lt;/div&gt;";
              var content = document.createTextNode(title);
  
          }   
  
  
              $(".normaldiv").hover(
          function () {
          $(this).append($('&lt;div class=hoverdiv&gt;&lt;/div&gt;'));
             }, 
          function () {
          $(this).find("div:last").remove();
                    }
                  );
                  });
  
  
  &lt;/script&gt;
  
  &lt;div id="normaldiv"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Can someone tell me if the script is correct?
  I have added a mocked up json data result.</p>
  
  <p>I am getting the images to load in normaldiv but i would like the content to appear in the hover div when people hover over the image.</p>
  
  <p>Thanks</p>