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
Solved

Messenger Style pop-up on website

Posted on 2003-11-03
9
320 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
  • 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
How our DevOps Teams Maximize Uptime

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us. Read the use case whitepaper.

 
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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Scroll 5 news at a time. 4 33
Wordpress plugins not working in html 3 37
QQ problem 22 42
Start Auto-download of File when page loads? 1 20
Learn about the eCommerce marketing trends for the year ahead.
Starting your own business is always a daunting process, and for most people it is brand new experience. Avoid the common pitfalls by following these tips to start on the road to success.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

808 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