Solved

Messenger Style pop-up on website

Posted on 2003-11-03
9
323 Views
Last Modified: 2013-11-28
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
Comment
Question by:mackbest
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 2
  • +1
9 Comments
 
LVL 1

Expert Comment

by:rabi9634
ID: 9671198
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
 
LVL 16

Expert Comment

by:jaysolomon
ID: 9671895
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
 

Author Comment

by:mackbest
ID: 9679144
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
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 
LVL 16

Expert Comment

by:jaysolomon
ID: 9679233
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
 

Author Comment

by:mackbest
ID: 9679272
points wise...look again!
any help would be appreciated!
0
 
LVL 1

Expert Comment

by:hemanthsharma
ID: 9691653


                 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
 
LVL 1

Expert Comment

by:hemanthsharma
ID: 9691656


                 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
 

Author Comment

by:mackbest
ID: 9700056
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
 
LVL 1

Accepted Solution

by:
hemanthsharma earned 300 total points
ID: 9709744
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

Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
There are many other benefits to creating an inbound marketing strategy. Let’s take a look at five of the biggest and how they'll affect your business.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question