Javascript Delay Timer

[perezf]

Hello everyone,

 

I found a javascript online that allows me to do a 'fake pop up' onto the screen. Here's my code for it:

 

Javascript

---------------------

<script type="text/javascript">

/******************************************
* Popup Box- By Jim Silver @ [email protected]
* Visit http://www.dynamicdrive.com/ for full source code
* This notice must stay intact for use
******************************************/

var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all

//drag drop function for NS 4////
/////////////////////////////////

var dragswitch=0
var nsx
var nsy
var nstemp

function drag_dropns(name){
if (!ns4)
return
temp=eval(name)
temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
temp.onmousedown=gons
temp.onmousemove=dragns
temp.onmouseup=stopns
}

function gons(e){
temp.captureEvents(Event.MOUSEMOVE)
nsx=e.x
nsy=e.y
}
function dragns(e){
if (dragswitch==1){
temp.moveBy(e.x-nsx,e.y-nsy)
return false
}
}

function stopns(){
temp.releaseEvents(Event.MOUSEMOVE)
}

//drag drop function for ie4+ and NS6////
/////////////////////////////////


function drag_drop(e){
if (ie4&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx
crossobj.style.top=tempy+event.clientY-offsety
return false
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx+"px"
crossobj.style.top=tempy+e.clientY-offsety+"px"
return false
}
}

function initializedrag(e){
crossobj=ns6? document.getElementById("showimage") : document.all.showimage
var firedobj=ns6? e.target : event.srcElement
var topelement=ns6? "html" : document.compatMode && document.compatMode!="BackCompat"? "documentElement" : "body"
while (firedobj.tagName!=topelement.toUpperCase() && firedobj.id!="dragbar"){
firedobj=ns6? firedobj.parentNode : firedobj.parentElement
}

if (firedobj.id=="dragbar"){
offsetx=ie4? event.clientX : e.clientX
offsety=ie4? event.clientY : e.clientY

tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)

dragapproved=true
document.onmousemove=drag_drop
}
}
document.onmouseup=new Function("dragapproved=false")

////drag drop functions end here//////

function hidebox(){
crossobj=ns6? document.getElementById("showimage") : document.all.showimage
if (ie4||ns6)
crossobj.style.visibility="hidden"
else if (ns4)
document.showimage.visibility="hide"
}

</script>

 

HTML Code

------------

			<div id="showimage" style="position:absolute;width:481px; height:345px; left:250px;top:250px">

<table border="0"  bgcolor="#000080" cellspacing="0">
  <tr>
    <td width="100%">
    <table border="0" width="100%" cellspacing="0" cellpadding="0">
      <tr>
        <td id="dragbar" style="cursor:hand; cursor:pointer" width="100%" onMousedown="initializedrag(event)" background="images/chat-window-top.gif" width="481" height="25">
        <ilayer width="100%" onSelectStart="return false"><layer width="100%" onMouseover="dragswitch=1;if (ns4) drag_dropns(showimage)" onMouseout="dragswitch=0"></layer></ilayer>

<a href="#" onClick="hidebox();return false" style="float:right; margin-right:3px; margin-top:3px; line-height:25px;">
<img src="images/chat-window-x.gif" width="23px"  height="22px" border=0></a>
</td>
      </tr>
      <tr>
        <td width="100%" colspan="2">

<a onclick = " window.open('http://server.iad.liveperson.net/hc/44860061/?cmd=file&file=visitorWantsToChat&site=44860061&byhref'+self.location,'mywin','left=250,top=250,width=481,height=350,toolbar=0,resizable=0'); hidebox();"  href=""><img src="images/chat-window.gif" width="481" height="291" border=0><br><img src="images/pop-up-chat-bottom.gif" width="481" height="56"></a>


	</td>
      </tr>
    </table>
    </td>
  </tr>
</table>
</div>

 

Basically, the screen appears, and if you click on the screen, it should disappear and then another window should appear in its place. I have it working fine, I just can't get it to hide itself.

 

Also, I need to do a timer on it. This pop up needs to appear 5 seconds after the home page is loaded. I'm not quite sure how that is done.

 

This whole thing is like a 'fake chat screen' that appears, and when you click on it, it loads the actual chat room window.

 

 

Thank you!

[phpQuestioner]

try this:

 

<script type="text/javascript">

/******************************************
* Popup Box- By Jim Silver @ [email protected]
* Visit http://www.dynamicdrive.com/ for full source code
* This notice must stay intact for use
******************************************/

var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all

//drag drop function for NS 4////
/////////////////////////////////

var dragswitch=0
var nsx
var nsy
var nstemp

function drag_dropns(name){
if (!ns4)
return
temp=eval(name)
temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
temp.onmousedown=gons
temp.onmousemove=dragns
temp.onmouseup=stopns
}

function gons(e){
temp.captureEvents(Event.MOUSEMOVE)
nsx=e.x
nsy=e.y
}
function dragns(e){
if (dragswitch==1){
temp.moveBy(e.x-nsx,e.y-nsy)
return false
}
}

function stopns(){
temp.releaseEvents(Event.MOUSEMOVE)
}

//drag drop function for ie4+ and NS6////
/////////////////////////////////


function drag_drop(e){
if (ie4&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx
crossobj.style.top=tempy+event.clientY-offsety
return false
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx+"px"
crossobj.style.top=tempy+e.clientY-offsety+"px"
return false
}
}

function initializedrag(e){
crossobj=ns6? document.getElementById("showimage") : document.all.showimage
var firedobj=ns6? e.target : event.srcElement
var topelement=ns6? "html" : document.compatMode && document.compatMode!="BackCompat"? "documentElement" : "body"
while (firedobj.tagName!=topelement.toUpperCase() && firedobj.id!="dragbar"){
firedobj=ns6? firedobj.parentNode : firedobj.parentElement
}

if (firedobj.id=="dragbar"){
offsetx=ie4? event.clientX : e.clientX
offsety=ie4? event.clientY : e.clientY

tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)

dragapproved=true
document.onmousemove=drag_drop
}
}
document.onmouseup=new Function("dragapproved=false")

////drag drop functions end here//////

function hidebox(){
crossobj=ns6? document.getElementById("showimage") : document.all.showimage
if (ie4||ns6)
crossobj.style.visibility="hidden"
else if (ns4)
document.showimage.visibility="hide"
}

// Pop-Up Effect

window.onload=function()
{
setTimeout("document.getElementById('showimage').style.display='block'", 5000);
}
</script>

		<div id="showimage" style="position:absolute;width:481px; height:345px; left:250px;top:250px;display:none">

<table border="0"  bgcolor="#000080" cellspacing="0">
  <tr>
    <td width="100%">
    <table border="0" width="100%" cellspacing="0" cellpadding="0">
      <tr>
        <td id="dragbar" style="cursor:hand; cursor:pointer" width="100%" onMousedown="initializedrag(event)" background="images/chat-window-top.gif" width="481" height="25">
        <ilayer width="100%" onSelectStart="return false"><layer width="100%" onMouseover="dragswitch=1;if (ns4) drag_dropns(showimage)" onMouseout="dragswitch=0"></layer></ilayer>

<a href="#" onClick="hidebox();return false" style="float:right; margin-right:3px; margin-top:3px; line-height:25px;">
<img src="images/chat-window-x.gif" width="23px"  height="22px" border=0></a>
</td>
      </tr>
      <tr>
        <td width="100%" colspan="2">

<a onclick = " window.open('http://server.iad.liveperson.net/hc/44860061/?cmd=file&file=visitorWantsToChat&site=44860061&byhref'+self.location,'mywin','left=250,top=250,width=481,height=350,toolbar=0,resizable=0'); hidebox();"  href=""><img src="images/chat-window.gif" width="481" height="291" border=0><br><img src="images/pop-up-chat-bottom.gif" width="481" height="56"></a>


	</td>
      </tr>
    </table>
    </td>
  </tr>
</table>
</div>

[perezf]

That worked perfect. That is exactly what I needed.

Only thing is, it doesn't hide the first box in firefox. It loads it fine, but when I exit the actual chat window, the original image is still there. Is this a bug in firefox?

 

Again, thank you!