[SOLVED] How to make the PM pop up box?

[Monie]

I just can't stop thinking about this forum PM Pop-Up message box that indicate you have a Private Message (PM)!

Any idea how to make them (JS?, ASP?, PHP???)
Is it a "simple-to-do things"..???

Thanks..

[alexgeek]

Javascript caused by a server side variable
The server side bit just says to do it,
the difficult part is the PM thing itself in JS.
This should be moved to JS section

[Monie]

Ok then, I'll move this thread to JS Forum!

[c010depunkk]

OK, can you be a bit more specific about what you want help with.

Are you wondering how to know when to show the popup? Or how to animate it?

[Monie]

From my experience, I generally know that there is some code for checking if a certain field in my table database is new (when someone PM me, some field will be set to NEW), then the popup box will appear (with the animation)

pseudocode:

Code: Select all

If recordset("newPm") = 'New' Then
   animate the popup box with the link to the new pm message
End If

Once they have read that, update the "newPm" field from "NEW" to "READ".
So, am I thinking creative enough?

[c010depunkk]

yeah, that should work.

[Monie]

I am having a bit problem with the javascript tho..
I mean how to do the animation things? It's javascript right?

Anybody can help me..?

[c010depunkk]

yes, it's javacript.....

Do you have any code yet?

[Monie]

Not really. All still a bit blur to me.. but I get the idea, roughly not too sure..
My current idea...:

When someone post me a message(saved to myMessage field) and automatically set the myMessageElert field status to 'NEW'

there will be a IF Then Else function in my ASP page to check:

Code: Select all

If myMessageElert = 'NEW' and user = session("user") Then
  animate popup box to elert user
End If

beyond that, I am blank

[RohanShenoy]

I guess you would have include a server side script which would create a pop-up box when $unreadprivatemessages!=0

[Monie]

Thanks for the info, but an example would be much better.
How does the page run the comparison code each time we have a new PM, does it refreshed? I don't think so, right?

[RohanShenoy]

^monie, I don't know much because I am not an official programmer by qualification. Its just out of my curiosity.

About your question, I think logically, one would have to go about this way:
1. In the showthread.php, newthread.php, and index.php, there should be a code that indicates the table prefix and column name in MySQL database for unread private messages.

2. If the no. of unread private messages is not equal to zero, a javascript would be inserted in the page . The JS would contain confirm function and window.open function.

[Monie]

Wow that's complicated!

[Rakuli]

Well actually it's not quite as complicated as all that.. lol

I don't know how the webforumz one actually works but this is what I would do....

In the head of your page, write with ASP or whatever
<script type="text/javascript">
If myMessageElert = 'NEW' and user = session("user") Then
// Write to page (not sure how with ASP
var showPMpopup = true;
Else
var showPMpopup = false;
End If
</script>

That would really be all that is needed from the server side (you can of course add more to make the PM popup more detailed, like the title of the PM and how many are new etc...

Then for the javascript.... This is very quickly thrown together and probably isn't as foolproof as the WFZ one....

PHP: Select all

<script type="text/javascript">

// Place this just below the </body> tag



if (showPMpopup)

{

    document.write('<div style="width:300px;height:150px;border:solid 1px #000000;background-color:blue;position:absolute;top:-155px;left:100px;" id="PMpopup">PM Stuff here, you could write me without javascript or write me with ASP... this is as an example....<\/div>');



// now to animate the popup

// set some variables





function animatedPopup(varName)

{

    this.variableName = varName; // Store the name of the variable for later reference

    this.speed = 5;// move everything every x milliseconds

    this.pixelsPerMove = 2; // how many pixels to move from top eah time

    this.finalPosFromTop = 100; // where will it stop from the top of the screen

    this.horizontalMovement = 6; // how much pixel variation on each side?

    this.currentHorizontalDirection = 1; // 1 = left, 0 = right

    this.PMbox = document.getElementById('PMpopup'); // the div for the popup box

    

    this.startY =  !isNaN(parseInt(this.PMbox.style.top)) ? parseInt(this.PMbox.style.top) : 0; // current X axis position, assume 0 if not set

    this.startX = !isNaN(parseInt(this.PMbox.style.left)) ? parseInt(this.PMbox.style.left) : 0; // current X axis position, assume 0 if not set

    

    this.currentY = this.startY;

    this.currentX = 0;

    this.timeout = false; // the timeout holder

    

    this.animatePopup = function () {

        

        if (this.currentY >= this.finalPosFromTop)

        { // If the final Y position has been reached, set it at the final spot and exit

            this.PMbox.style.top = this.finalPosFromTop + 'px';// move the last increment

            return;

        } else 

            this.PMbox.style.top = this.currentY + 'px'; 

        

        // Now for the 'shaking' effect, don't move any further if we have reached our limit

        if (Math.abs(this.currentX) < this.horizontalMovement)

            this.PMbox.style.left = (this.startX - this.currentX) + 'px';

        else if (this.currentX < 0)

            this.currentHorizontalDirection = 0; // if we reached the limit in negative numbers, now we need to do positive

        else

            this.currentHorizontalDirection = 1; // If reached and positive, start heading back to the left

        

        // set up the movements

        this.currentY += this.pixelsPerMove; // the pixels from top

        

        // Now a randome movement left or right of the horizontal axis

        this.currentX = this.currentHorizontalDirection == 1 ? this.currentX - Math.round(Math.random() * 4) + 1 : this.currentX + Math.round(Math.random() * 4) + 1;

        

        // finally, set the timeout for the function to runagain

        this.timeout = setTimeout(this.variableName + '.animatePopup()', this.speed);

    }

        

}

// Now the actual variable is set

var PMAnimator = new animatedPopup('PMAnimator');

// run the function after a second



setTimeout('PMAnimator.animatePopup()', 1000);



}

</script> 

Works pretty well

** Rakuli grins cause it was easier than he thought **

[Monie]

Hai rakuli, Thanks for the code, just a simple question tho...

Code: Select all

<script type="text/javascript">
If myMessageElert = 'NEW' and user = session("user") Then
  // Write to page (not sure how with ASP -> what should I do with this one? do you mean display something from the database or some message?
      var showPMpopup = true;
Else
      var showPMpopup = false;
End If
</script>

I'll try them tonight and let you know by tomorrow. If I success, a +rep point is waiting you

[Rakuli]

Actually write the literal string 'var showPMpopup = true;' with ASP...

The else write the same javascript variable as false so the literal string 'var showPMpopup = false'

[Monie]

Shouldn't that be in javascript code since it is in the <script type="text/javascript">? Just my curious..

If I am correct, I will declare showPMpopup as an ASP variable like this:

Code: Select all

<script type="text/javascript">
Dim showPMpopup
If myMessageElert = 'NEW' and user = session("user") Then
  showPMpopup = true;
Else
  showPMpopup = false;
End If
</script>

I am right, am I? Just making sure I am in the right track so that I wont waste my time tonight trying them (no internet in my house, down for a while...)

[Rakuli]

Well, I have no idea what you do with ASP but let's say it was PHP

PHP: Select all

echo '<script type="text/javascript">';

if ($newMessages = true)

   echo 'var showPMpopup = true;';

else

   echo 'var showPMpopup = false;';

echo '</script>'; 

All you need to so is set the variable in ASP if there is a new message then write the appropriate javascript variable to the page.

Cheers,

[Monie]

"echo" means it will be printed/display in the page, am I right? or just a simple line of code..?
Do you mean I must write ASP code in Javascript..?

**monie tell himself to stop questioning! you should try them first before throwing any stupid, useless question!!

I'll get back to you tomorrow Rakuli. Thanks.

[Rakuli]

Echo means , write this to the page at this exact location... You shoule write javascript with ASP not vice versa....

eg.

HTML: Select all

<html>
<head>
<title>Randomly Chosen</title>
<script type="text/javascript">

<%
/* ASP logic here that will print either 'var showPmpopup = false;' or 'var showPmpopup = true' */
%>
</script>
</head>
<body>
Whoe bunch of really cool stuff
<script type="text/javascript">
// Dump that entire load of code from my main code post here...
</script>
</body>
</html>

Cheers,