In this tutorial you’ll find how to make pop-ups on links (or on other html elements) using Javascript and Ajax.
In the picture below you see link pop-up wich gives some information about third link on mousehover.
In html page there is ‘ul’ tag with links inside and one ‘div’ tag – previewWindow wich is not visible at the first time.
<body>
<h2>Link pop-ups. AJAX – Javascript</h2>
<ul>
<li><a href=”jsintro/2000-08.html”>First article</a></li>
<li><a href=”jsintro/2000-09.html”>Second article</a></li>
<li><a href=”jsintro/2000-10.html”>Third article</a></li>
<li><a href=”jsintro/2000-11.html”>Fourth article</a></li>
</ul>
<div> </div>
Css for div element is like this:
#previewWindow {
background-color: #eee;
width: 150px;
height: 200px;
font: .6em arial, helvetica, sans-serif;
padding: 5px;
position: absolute;
visibility: hidden;
border: 1px #ccc solid;
overflow: hidden;
}
On window onload initAll() function triggers and gets all links from html document. Also we have xhr variable for XMLHttpRequest and
xPos, yPos for pop-up’s x adn y position.
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;
}
}
When someone hovers on that links showPreview() function will be triggered. It has one parameter evt wich is passed from link. evt.target contains links source atribute, for some browsers it doesn’t and we are asigning manually evt.srcElement. xPos and yPos contains mouse’s X and Y position. After this XMLHttpRequest comes into play.
function showPreview(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”);
}
return false;
}
showContents() function checks if Ajax request was succesfull i.e if readyState==4 and status==200. Ajax request’s response come as a
text and it is stored in outMsg variable then it is used to fill div’s innerHTML.
function showContents() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
var outMsg = xhr.responseText;
}
else {
var outMsg = “There was a problem with the request ” + xhr.status;
}
var prevWin = document.getElementById(“previewWindow”);
prevWin.innerHTML = outMsg;
prevWin.style.top = parseInt(yPos)+2 + “px”;
prevWin.style.left = parseInt(xPos)+2 + “px”;
prevWin.style.visibility = “visible”;
prevWin.onmouseout = function() {
document.getElementById(“previewWindow”).style.visibility = “hidden”;
}
}
}
Filed under: AJAX, javascript Tagged: | AJAX, javascript, link pop-ups
