Pop-ups on links

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.

link_popups_javascript

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”;

}

}

}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: