Previous Page
Next Page

Previewing Links with Ajax

There's a handy and great-looking visual effect that many sites are using now, where, when you hover the mouse pointer over a link, the first few lines of the page that is the link's destination appear in a floating window under the cursor (Figure 15.5). This turns out to be a fairly easy-to-create Ajax application. You'll find the HTML in Script 15.8, the CSS in Script 15.9, and the JavaScript in Script 15.10.

Figure 15.5. When you hover over a link, this script reads the HTML file on the server and gives you an overlay containing a preview of the first few lines of the file.

[View full size image]


Script 15.8. This HTML builds the page for the preview example.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN">
<html>
<head>
     <title>My Fourth Ajax Script</title>
     <link rel="stylesheet" rev="stylesheet" href="script04.css" />
     <script src="script04.js" type="text/javascript" language="Javascript">
     </script>
</head>
<body>
<h2>A Gentle Introduction to JavaScript</h2>
<ul>
     <li><a href="jsintro/2000-08.html">August column</a></li>
     <li><a href="jsintro/2000-09.html"> September column</a></li>
     <li><a href="jsintro/2000-10.html"> October column</a></li>
     <li><a href="jsintro/2000-11.html"> November column</a></li>
</ul>
<div id="previewWin"> </div>
</body>
</html>

Script 15.9. This CSS styles the preview pop-up.

#previewWin {
     background-color: #FF9;
     width: 400px;
     height: 100px;
     font: .8em arial, helvetica, sans-serif;
     padding: 5px;
     position: absolute;
     visibility: hidden;
     top: 10px;
     left: 10px;
     border: 1px #CC0 solid;
     clip: auto;
     overflow: hidden;
}

#previewWin h1, #previewWin h2 {
     font-size: 1.0em;
}

Script 15.10. The JavaScript that allows the server request and the appearance of the pop-up.

[View full width]
window.onload = initAll;
var xhr = false;
var xPos, yPos;

function initAll() {
     var allLinks = document. getElementsByTagName("a");

     for (var i=0; i< allLinks.length; i++) {
        allLinks[i].onmouseover = showPreview;
     }
}

function showPreview(evt) {
     getPreview(evt);
     return false;
}
function hidePreview() {
     document.getElementById("previewWin"). style.visibility = "hidden";
}
function getPreview(evt) {
     if (evt) {
        var url = evt.target;
     }
     else {
        evt = window.event;
        var url = evt.srcElement;
     }
     xPos = evt.clientX;
     yPos = evt.clientY;

     if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
     }
     else {
        if (window.ActiveXObject) {
           try {
              xhr = new ActiveXObject ("Microsoft.XMLHTTP");
           }
           catch (e) { }
        }
     }

     if (xhr) {
        xhr.onreadystatechange = showContents;
        xhr.open("GET", url, true);
        xhr.send(null);
     }
     else {
        alert("Sorry, but I couldn't create an XMLHttpRequest");
     }
}

function showContents() {
     var prevWin = document.getElementById ("previewWin");

     if (xhr.readyState == 4) {
        prevWin.innerHTML = (xhr.status == 200) ? xhr.responseText : "There was a problem 
with the request " + xhr.status;
        prevWin.style.top = parseInt(yPos)+2 + "px";
        prevWin.style.left = parseInt(xPos)+2 + "px";
        prevWin.style.visibility = "visible";
        prevWin.onmouseout = hidePreview;
     }
}

To use Ajax to preview links:

1. 
var allLinks = document. getElementsByTagName("a");
for (var i=0; i< allLinks.length; i++) {
  allLinks[i].onmouseover = showPreview;
}



Here's our initAll() function, which simply plows through all the links on the page and adds an onmouseover event handler to each. This event handler will (as you'll see, below) read the destination page and display a preview for the (possible) visitor.

2. 
function showPreview(evt) {
  getPreview(evt);
  return false;
}



The showPreview() event handler function passes the event triggering the function call to getPreview(). That's where the real work will be done.

3. 
function hidePreview() {
  document.getElementById ("previewWin").style.visibility = "hidden";
}



If we have a showPreview() function, we need a hidePreview(), right? Here's ours, and all it does is set the preview window back to its hidden level of visibility.

4. 
if (evt) {
  var url = evt.target;
}
else {
  evt = window.event;
  var url = evt.srcElement;
}
xPos = evt.clientX;
yPos = evt.clientY;



Here in getPreview(), the first thing we need to do is figure out what file we want to read, and that's done by looking at the properties of the event. Depending on which browser your visitor is using, the URL is in either evt.target or window.event.srcElement. Once we've got that, we can grab the x and y positions of the mouse for later use.

5. 
var prevWin = document. getElementById("previewWin");

if (xhr.readyState == 4) {



Having used Ajax to read the file, we're now down in the showContents() function. We store the previewWin element for later use in prevWin, and when xHR.readyState is 4, it's time to show off.

6. 
[View full width]
prevWin.innerHTML = (xhr.status == 200)? xhr.responseText : "There was a problem with the
 request " + xhr.status;
prevWin.style.top = parseInt(yPos)+ 2 + "px";
prevWin.style.left = parseInt(xPos)+2 + "px";
prevWin.style.visibility = "visible"; prevWin.onmouseout = hidePreview;



If everything's fine, then xHR.status is 200 and the data we want to put into prevWin.innerHTML is in xhr.responseText. If not, we put the error message there instead.

Once that's done, it's simply a matter of figuring out where to place the preview window, and that's where those x and y mouse coordinates come in handy. It's a pop-up, so we put it just below and to the right (2 pixels over and 2 down) of the cursor position that triggered this call.

Lastly, we set prevWin to be visible, and we let JavaScript know that prevWin should be hidden when the cursor moves off the preview.

Tips

  • The data being read is in HTML format. Putting xhr.responseText into innerHTML tells the browser that when the preview window displays, it should interpret the HTML as, well, HTML. If you wanted something else to display (say, for instance, that you wanted to see the actual source of the page), you could modify what's in innerHTML before displaying the preview.

  • Ajax requires that the file being read reside on the same serverbut it doesn't require that it be in the same directory. If the page you're reading in is in a different directory, and the page contains relative links, then those links will not work. If your pages refer to a particular CSS file, or images, or JavaScript, you won't be able to preview those particular parts of the file. The same solution applies here as well: modify prevWin.innerHTML before displaying it.



Previous Page
Next Page