Solved

Messenger Style pop-up on website

Posted on 2003-11-03
9
315 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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 

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

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

Using SQL Scripts we can save all the SQL queries as files that we use very frequently on our database later point of time. This is one of the feature present under SQL Workshop in Oracle Application Express.
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
The viewer will learn how to dynamically set the form action using jQuery.
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…

708 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

13 Experts available now in Live!

Get 1:1 Help Now