Solved

Messenger Style pop-up on website

Posted on 2003-11-03
9
317 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
 
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
3 Use Cases for Connected Systems

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

 

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

Zoho SalesIQ

Hassle-free live chat software re-imagined for business growth. 2 users, always free.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
FTP File permissions 1 45
Angular JS form 8 45
Set cookies HttpOnly and Secure 4 114
Adding a hidden div to each row in a table 6 62
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
A great marketing strategy is diverse.  Read about the not so popular, yet effective, marketing tactics you can start using today!
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.

863 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

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now