Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 327
  • Last Modified:

Messenger Style pop-up on website

when one of your contacts logs on in msn messenger, it informs you by showing a pop-up box on the bottom-right hand corner of ur scrn, for 5 seconds and then goes away.

anyone know how to create this?

I want to put it onto my website, with an ad inside the box. I use MS ASP 3.0
0
mackbest
Asked:
mackbest
  • 3
  • 3
  • 2
  • +1
1 Solution
 
rabi9634Commented:
You want to have a popup on your own website that comes up for a few seconds, then automatically closes itself?

check out http://www.designerwiz.com/JavaScripts/close_browser_automatically.htm

The script allows you to close a window after a set time interval.  Hope it helps.
0
 
jaysolomonCommented:
You will need to use DIV tags with absolute position and use style="display: none;" to hide it.

You will need to use Javascript and either setInterval or setTimeout to have a timer which would at (n) it would show and at (x) it would hide.

But for 20 points noone is going to do it for you.
0
 
mackbestAuthor Commented:
i've inceased the no.of points on offer.

as soon as someone loads my homepage i want a box which is replica to the msn messenger 6.0 box in size and style to appear for 10secs and then disappear like the msn box does, like closing downwards.

a ready made script would be awesome!
0
Eye-catchers on the conference table

Challenge: The i-unit group was not satisfied with the audio quality during remote meetings. They were looking for a portable solution with excellent audio quality for use in their conference room but also at their client’s offices.

 
jaysolomonCommented:
I am sorry to say, that i do not have the time to do this for you. And 50 points is really not enough IMHO. I can provide you with some basics if you want
0
 
mackbestAuthor Commented:
points wise...look again!
any help would be appreciated!
0
 
hemanthsharmaCommented:


                 YOUR EXACT CODE IS HERE !!!!!!!!


<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_timelinePlay(tmLnName, myID) { //v1.2
  //Copyright 1997, 2000 Macromedia, Inc. All rights reserved.
  var i,j,tmLn,props,keyFrm,sprite,numKeyFr,firstKeyFr,propNum,theObj,firstTime=false;
  if (document.MM_Time == null) MM_initTimelines(); //if *very* 1st time
  tmLn = document.MM_Time[tmLnName];
  if (myID == null) { myID = ++tmLn.ID; firstTime=true;}//if new call, incr ID
  if (myID == tmLn.ID) { //if Im newest
    setTimeout('MM_timelinePlay("'+tmLnName+'",'+myID+')',tmLn.delay);
    fNew = ++tmLn.curFrame;
    for (i=0; i<tmLn.length; i++) {
      sprite = tmLn[i];
      if (sprite.charAt(0) == 's') {
        if (sprite.obj) {
          numKeyFr = sprite.keyFrames.length; firstKeyFr = sprite.keyFrames[0];
          if (fNew >= firstKeyFr && fNew <= sprite.keyFrames[numKeyFr-1]) {//in range
            keyFrm=1;
            for (j=0; j<sprite.values.length; j++) {
              props = sprite.values[j];
              if (numKeyFr != props.length) {
                if (props.prop2 == null) sprite.obj[props.prop] = props[fNew-firstKeyFr];
                else        sprite.obj[props.prop2][props.prop] = props[fNew-firstKeyFr];
              } else {
                while (keyFrm<numKeyFr && fNew>=sprite.keyFrames[keyFrm]) keyFrm++;
                if (firstTime || fNew==sprite.keyFrames[keyFrm-1]) {
                  if (props.prop2 == null) sprite.obj[props.prop] = props[keyFrm-1];
                  else        sprite.obj[props.prop2][props.prop] = props[keyFrm-1];
        } } } } }
      } else if (sprite.charAt(0)=='b' && fNew == sprite.frame) eval(sprite.value);
      if (fNew > tmLn.lastFrame) tmLn.ID = 0;
  } }
}

function MM_initTimelines() { //v4.0
    //MM_initTimelines() Copyright 1997 Macromedia, Inc. All rights reserved.
    var ns = navigator.appName == "Netscape";
    var ns4 = (ns && parseInt(navigator.appVersion) == 4);
    var ns5 = (ns && parseInt(navigator.appVersion) > 4);
    document.MM_Time = new Array(1);
    document.MM_Time[0] = new Array(1);
    document.MM_Time["Timeline1"] = document.MM_Time[0];
    document.MM_Time[0].MM_Name = "Timeline1";
    document.MM_Time[0].fps = 15;
    document.MM_Time[0][0] = new String("sprite");
    document.MM_Time[0][0].slot = 1;
    if (ns4)
        document.MM_Time[0][0].obj = document["Layer1"];
    else if (ns5)
        document.MM_Time[0][0].obj = document.getElementById("Layer1");
    else
        document.MM_Time[0][0].obj = document.all ? document.all["Layer1"] : null;
    document.MM_Time[0][0].keyFrames = new Array(1, 20, 60, 80);
    document.MM_Time[0][0].values = new Array(3);
    if (ns5)
        document.MM_Time[0][0].values[0] = new Array("440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px");
    else
        document.MM_Time[0][0].values[0] = new Array(440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440);
    document.MM_Time[0][0].values[0].prop = "left";
    if (ns5)
        document.MM_Time[0][0].values[1] = new Array("-150px", "-141px", "-131px", "-122px", "-112px", "-103px", "-94px", "-84px", "-75px", "-66px", "-57px", "-49px", "-41px", "-34px", "-28px", "-21px", "-16px", "-10px", "-5px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "-5px", "-9px", "-15px", "-20px", "-26px", "-32px", "-39px", "-46px", "-53px", "-61px", "-70px", "-79px", "-88px", "-96px", "-105px", "-114px", "-123px", "-132px", "-141px", "-150px");
    else
        document.MM_Time[0][0].values[1] = new Array(-150,-141,-131,-122,-112,-103,-94,-84,-75,-66,-57,-49,-41,-34,-28,-21,-16,-10,-5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,-5,-9,-15,-20,-26,-32,-39,-46,-53,-61,-70,-79,-88,-96,-105,-114,-123,-132,-141,-150);
    document.MM_Time[0][0].values[1].prop = "top";
    if (!ns4) {
        document.MM_Time[0][0].values[0].prop2 = "style";
        document.MM_Time[0][0].values[1].prop2 = "style";
    }
    document.MM_Time[0][0].values[2] = new Array("visible","visible","visible","visible");
    document.MM_Time[0][0].values[2].prop = "visibility";
    if (!ns4)
        document.MM_Time[0][0].values[2].prop2 = "style";
    document.MM_Time[0].lastFrame = 80;
    for (i=0; i<document.MM_Time.length; i++) {
        document.MM_Time[i].ID = null;
        document.MM_Time[i].curFrame = 0;
        document.MM_Time[i].delay = 1000/document.MM_Time[i].fps;
    }
}
//-->
</script>
</head>

<body>

<div id="Layer1" style="position:absolute; left:440px; top:-150px; width:218px; height:106px; z-index:1; visibility: visible;">
  <table width="100%" border="0" cellspacing="0" cellpadding="3">
    <tr>
      <td bgcolor="#C0D2DA"><p>&nbsp;</p>
        <p align="center"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Message
          has been</font></p>
        <p align="center"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">popped-up
          !!</font></p>
        <p>&nbsp;</p></td>
    </tr>
  </table>
</div>
<p><a href="#" onClick="MM_timelinePlay('Timeline1')">Click Here</a></p>
</body>
</html>
0
 
hemanthsharmaCommented:


                 YOUR EXACT CODE IS HERE !!!!!!!!

SAVE IT AS A HTML FILE AND RUN THROUGH ANY BROWSER...


<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);

function MM_timelinePlay(tmLnName, myID) { //v1.2
  //Copyright 1997, 2000 Macromedia, Inc. All rights reserved.
  var i,j,tmLn,props,keyFrm,sprite,numKeyFr,firstKeyFr,propNum,theObj,firstTime=false;
  if (document.MM_Time == null) MM_initTimelines(); //if *very* 1st time
  tmLn = document.MM_Time[tmLnName];
  if (myID == null) { myID = ++tmLn.ID; firstTime=true;}//if new call, incr ID
  if (myID == tmLn.ID) { //if Im newest
    setTimeout('MM_timelinePlay("'+tmLnName+'",'+myID+')',tmLn.delay);
    fNew = ++tmLn.curFrame;
    for (i=0; i<tmLn.length; i++) {
      sprite = tmLn[i];
      if (sprite.charAt(0) == 's') {
        if (sprite.obj) {
          numKeyFr = sprite.keyFrames.length; firstKeyFr = sprite.keyFrames[0];
          if (fNew >= firstKeyFr && fNew <= sprite.keyFrames[numKeyFr-1]) {//in range
            keyFrm=1;
            for (j=0; j<sprite.values.length; j++) {
              props = sprite.values[j];
              if (numKeyFr != props.length) {
                if (props.prop2 == null) sprite.obj[props.prop] = props[fNew-firstKeyFr];
                else        sprite.obj[props.prop2][props.prop] = props[fNew-firstKeyFr];
              } else {
                while (keyFrm<numKeyFr && fNew>=sprite.keyFrames[keyFrm]) keyFrm++;
                if (firstTime || fNew==sprite.keyFrames[keyFrm-1]) {
                  if (props.prop2 == null) sprite.obj[props.prop] = props[keyFrm-1];
                  else        sprite.obj[props.prop2][props.prop] = props[keyFrm-1];
        } } } } }
      } else if (sprite.charAt(0)=='b' && fNew == sprite.frame) eval(sprite.value);
      if (fNew > tmLn.lastFrame) tmLn.ID = 0;
  } }
}

function MM_initTimelines() { //v4.0
    //MM_initTimelines() Copyright 1997 Macromedia, Inc. All rights reserved.
    var ns = navigator.appName == "Netscape";
    var ns4 = (ns && parseInt(navigator.appVersion) == 4);
    var ns5 = (ns && parseInt(navigator.appVersion) > 4);
    document.MM_Time = new Array(1);
    document.MM_Time[0] = new Array(1);
    document.MM_Time["Timeline1"] = document.MM_Time[0];
    document.MM_Time[0].MM_Name = "Timeline1";
    document.MM_Time[0].fps = 15;
    document.MM_Time[0][0] = new String("sprite");
    document.MM_Time[0][0].slot = 1;
    if (ns4)
        document.MM_Time[0][0].obj = document["Layer1"];
    else if (ns5)
        document.MM_Time[0][0].obj = document.getElementById("Layer1");
    else
        document.MM_Time[0][0].obj = document.all ? document.all["Layer1"] : null;
    document.MM_Time[0][0].keyFrames = new Array(1, 20, 60, 80);
    document.MM_Time[0][0].values = new Array(3);
    if (ns5)
        document.MM_Time[0][0].values[0] = new Array("440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px", "440px");
    else
        document.MM_Time[0][0].values[0] = new Array(440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440,440);
    document.MM_Time[0][0].values[0].prop = "left";
    if (ns5)
        document.MM_Time[0][0].values[1] = new Array("-150px", "-141px", "-131px", "-122px", "-112px", "-103px", "-94px", "-84px", "-75px", "-66px", "-57px", "-49px", "-41px", "-34px", "-28px", "-21px", "-16px", "-10px", "-5px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "0px", "-5px", "-9px", "-15px", "-20px", "-26px", "-32px", "-39px", "-46px", "-53px", "-61px", "-70px", "-79px", "-88px", "-96px", "-105px", "-114px", "-123px", "-132px", "-141px", "-150px");
    else
        document.MM_Time[0][0].values[1] = new Array(-150,-141,-131,-122,-112,-103,-94,-84,-75,-66,-57,-49,-41,-34,-28,-21,-16,-10,-5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,-5,-9,-15,-20,-26,-32,-39,-46,-53,-61,-70,-79,-88,-96,-105,-114,-123,-132,-141,-150);
    document.MM_Time[0][0].values[1].prop = "top";
    if (!ns4) {
        document.MM_Time[0][0].values[0].prop2 = "style";
        document.MM_Time[0][0].values[1].prop2 = "style";
    }
    document.MM_Time[0][0].values[2] = new Array("visible","visible","visible","visible");
    document.MM_Time[0][0].values[2].prop = "visibility";
    if (!ns4)
        document.MM_Time[0][0].values[2].prop2 = "style";
    document.MM_Time[0].lastFrame = 80;
    for (i=0; i<document.MM_Time.length; i++) {
        document.MM_Time[i].ID = null;
        document.MM_Time[i].curFrame = 0;
        document.MM_Time[i].delay = 1000/document.MM_Time[i].fps;
    }
}
//-->
</script>
</head>

<body>

<div id="Layer1" style="position:absolute; left:440px; top:-150px; width:218px; height:106px; z-index:1; visibility: visible;">
  <table width="100%" border="0" cellspacing="0" cellpadding="3">
    <tr>
      <td bgcolor="#C0D2DA"><p>&nbsp;</p>
        <p align="center"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Message
          has been</font></p>
        <p align="center"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">popped-up
          !!</font></p>
        <p>&nbsp;</p></td>
    </tr>
  </table>
</div>
<p><a href="#" onClick="MM_timelinePlay('Timeline1')">Click Here</a></p>
</body>
</html>
0
 
mackbestAuthor Commented:
Hemanth,

Many, many thanks! Your a star! I know it's asking for a lot, but you couldn't do a few more changes cold you.

1) Make it look more like msn pop-up
2) it should be on the bottom-right corner of screen
3) instead of clicking on 'Click here' to display it, it should load when the page loads.

Also out of interest, why are there so many 440px?

As you can see i've increased the no. of points to compensate you for you hard efforts.

Thanks again!
0
 
hemanthsharmaCommented:
I couldn't make the popup position on the left corner... i tried a lot and it couldn't be done...

i can make it popup from left or top... but not from right, or bottom... :(

440px is the value of the distance of the layer from the x axis... it has certain frames where in it is animated. so, while the whole animation is taking place, i all the frames, it should be 440 pixels from the left...

thats because, the left and top distance of the layer has to be given in css... and not in js.

so, in css, i cant calculate the screen width and screen height.

i am giving the link to source code where in i have enhanced the look just like in msn messenger... it also opens when page is loaded.

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

to view it, http://www.designprovince.com/pop/pop.html

http://designprovince.com/pop/pop.zip

Thanks.
Hemanth Sharma.
0

Featured Post

Important Lessons on Recovering from Petya

In their most recent webinar, Skyport Systems explores ways to isolate and protect critical databases to keep the core of your company safe from harm.

  • 3
  • 3
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now