Challenging question: Popup using Javascript and not using JQuery

**u0107** · 12-09-2012 02:48 AM

hello all,

This is my first posting in quite some time.

I was looking at http://simplythebest.net/scripts/DHT...script_43.html - specifically the option (g) for something I want to accomplish but cannot:

1) I have a page on my website on which I have a table. In the table in the first column I have a hyperlink which should create popup windows as follows:

a A popup window which appears on a mouseover - essentially the content of another page whose URL is known.

b On clicking, the content of this popup window is changed to show content of a different page again whose URL is known.

2) If the first column is in the first row, then the mouseover URL, say x is displayed in the popup window.
3) When clicked, the onclick URL in first row, say y is displayed in the popup window.
4) If the first column is in the second row, then the mouseover URL, say a is displayed in the popup window.
5) When clicked the onclick URL in the second row, say b is displayed in the popup window.
6) Finally, in mouseover mode, if the mouse pointer moves off the hyperlink, the popped up window should close.

What I am challenged by is:

1) Mouseover URL is different from the onclick URL.
2) Overcoming popup blockers.

Thank you in advance.

Uttam

**vwphillips** · 12-09-2012 09:48 AM

content of another page

are you thinking IFRAME or AJAX

**u0107** · 12-09-2012 09:44 PM

Iframe has to be left out since that un-optimize the website from SEO standpoint.

I was looking more from a PHP / Javascript standpoint and with layers.. please see the example in the link - especially (g).

Thank you for looking at my query.

Uttam

**vwphillips** · 12-10-2012 05:18 AM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
<style type="text/css">
/*<![CDATA[*/
.pop {
  position:absolute;z-Index:101;left:200px;top:-200px;width:200px;background-Color:#FFCC66;padding:5px;
}

/*]]>*/
</style>

</head>

<body>
<a href="#" onmouseover="zxcAJAXPopUp.PopUp(this,'pop1','mouse.txt');" onclick="zxcAJAXPopUp.PopUp(this,'pop1','click.txt'); return false;" >Some Text</a>

<div id="pop1" class="pop" >
</div>


<script type="text/javascript">
/*<![CDATA[*/

var zxcAJAXPopUp={

 init:function(){
  this.obj=false;
  this.pop=false;
  this.file=false;
  this.addevt(document,'mousemove','move');
 },


 PopUp:function(obj,id,file){
  var pop=document.getElementById(id)
  if (obj&&pop&&file&&this.file!=file){
   this.file!=file;
   this.obj=obj;
   this.ajax(pop,file);
  }
 },

 move:function(e){
  var mse=this.mse(e),obj=this.obj,pop=this.pop;
  if (pop){
   p=this.pos(obj);
   pop.style.left=mse[0]+5+'px';
   pop.style.top=(mse[0]>p[0]&&mse[0]<p[0]+obj.offsetWidth&&mse[1]>p[1]&&mse[1]<p[1]+obj.offsetHeight?mse[1]+5:-3000)+'px';
  }
 },

 pos:function(obj){
  var rtn=[0,0];
  while(obj){
   rtn[0]+=obj.offsetLeft;
   rtn[1]+=obj.offsetTop;
   obj=obj.offsetParent;
  }
  return rtn;
 },


 addevt:function(o,t,f,p){
  var oop=this;
  if (o.addEventListener){
   o.addEventListener(t,function(e){ return oop[f](e,p);}, false);
  }
  else if (o.attachEvent){
   o.attachEvent('on'+t,function(e){ return oop[f](e,p); });
  }
 },

 mse:function(e){
  if (window.event){
   var docs=[document.body.scrollLeft,document.body.scrollTop];
   if (!document.body.scrollTop){
    docs=[document.documentElement.scrollLeft,document.documentElement.scrollTop];
   }
   return [e.clientX+docs[0],e.clientY+docs[1]];
  }
  return [e.pageX,e.pageY];
 },

 ajax:function(obj,url){
  var oop=this,request=false;
  if (window.ActiveXObject){
   try {
    request=new ActiveXObject("Msxml2.XMLHTTP");
   }
   catch (e){
    try {
     request=new ActiveXObject("Microsoft.XMLHTTP");
    }
    catch (e){
    }
   }
  }
  else if (window.XMLHttpRequest){
   request=new XMLHttpRequest();
  }
  else {
   return false;
  }
  request.onreadystatechange=function(){ oop.ajaxpopulate(obj,request); }
  request.open('GET',url+'?'+new Date().getTime(),true);
  try {
   request.send(null);
  }
  catch (e){
  }
 },

 ajaxpopulate:function(obj,request){
  if (request.readyState==4&&(request.status==200||window.location.href.indexOf("http")==-1)){
   var txt=request.responseText;
   if (obj&&txt){
    obj.innerHTML=txt;
    this.pop=obj;
   }
  }
 }

}

zxcAJAXPopUp.init()


/*]]>*/
</script>
</body>

</html>

mouseover.txt

Code:

mouseover content

click.txt

Code:

click content

**u0107** · 12-10-2012 09:44 PM

I managed to solve this problem myself - this is how:

1) You need to download a second plugin called overlib_positioncap.js - check here http://overlib.boughner.us/plugins/p..._commands.html

2) Then using the SRC attribute, you can display the content of a webpage.

Important point to remember - some websites have locks on them whereby they have code which detects whether the page is opened in a native manner or in a frame. If there is such a lock on the page you are trying to display, then you will need to research a workaround if it exists. (The page I want to display is on my own website so I do not have such limitations to take care of... if at all, I need to incorporate such locks on my page as well - but that is a different forum / topic!)

Thank you for your patience.

Uttam

Thread: Challenging question: Popup using Javascript and not using JQuery

Thread Tools

Display

Challenging question: Popup using Javascript and not using JQuery

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions