Welcome Guest!

If you do not have an account yet on The Web Squeeze forums, please Register! It’s FREE and there are many benefits:

  • Receive Fast Advice
  • Learn Programming Languages
  • Get Professional Website Reviews
  • Quick Troubleshooting Assistance

> Javascript Pop Up

This is a discussion on Javascript Pop Up, within the Javascript section. This forum and the thread "Javascript Pop Up" are both part of the Programming Your Website category.

 
Reply to this topicStart new topic
> Javascript Pop Up
Jason
post May 30 2008, 11:57 AM
Post #1


Master of the Universe
Group Icon

Posts: 1,297
Joined: 15-February 08
From: London, England


Hello, I swear this has been asked before on this forum but am having some trouble finding it. I am looking to create a pop like 'My Assistant.'

I would like a form to pop up. Once it has been submitted the page will be reloaded. Could someone tell me how I can achieve this?


Thanks


--------------------
Go to the top of the page
 
+Quote Post
Rakuli
post May 30 2008, 12:05 PM
Post #2


Squeeze Machine
Group Icon

Posts: 763
Joined: 13-February 08
From: Catching the squeezed drips downunder.


I wrote a script to do exactly this for Monie over at webforumz -- I'll see if I can track down the code...


--------------------
Luke Dingle . com

Turn Over a Playful Leaf on Web Design -- read about the javascript cat
Go to the top of the page
 
+Quote Post
Rakuli
post May 30 2008, 12:12 PM
Post #3


Squeeze Machine
Group Icon

Posts: 763
Joined: 13-February 08
From: Catching the squeezed drips downunder.


Actually, that has nothing to do with your question really sad.gif .. woops, should have read the question a bit more thoroughly.

The code below is for an assistant that pops up when you have a new message...


To achieve what you're after, it's just a matter of creating a new absolutely positioned div element in the page with javascript and adding a form inside of it. You can then submit the form with ajax and refresh the page.


Okay, here is the original code


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>




CODE
<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> 



And it came from this thread over at WBFZ http://www.webforumz.com/javascript-forum/...make-the-pm.htm


--------------------
Luke Dingle . com

Turn Over a Playful Leaf on Web Design -- read about the javascript cat
Go to the top of the page
 
+Quote Post
Jason
post May 31 2008, 06:19 AM
Post #4


Master of the Universe
Group Icon

Posts: 1,297
Joined: 15-February 08
From: London, England


Thank you very much, I will look into the on Monday and get back to you with my results and/or any changes that I made


--------------------
Go to the top of the page
 
+Quote Post
Jason
post Jun 2 2008, 03:31 AM
Post #5


Master of the Universe
Group Icon

Posts: 1,297
Joined: 15-February 08
From: London, England


I decided to go for something a little less Jazzy. This code creates a centered pop up box.


CODE
<script type="text/javascript">

function formPopup()
{
    // Sort out positioning.
    var boxWidth = 740;
    var pageWidth = document.documentElement.clientWidth;
    var yPos = 100;
    
    var halfPage = document.documentElement.clientWidth / 2;
    var halfBox = boxWidth / 2;
    var xPos = halfPage - halfBox;
    
    document.write('<div style="width:' + boxWidth + 'px;height:auto;position:absolute;top:' + yPos + 'px;left:' + xPos + 'px;" id="FormPopup">');
    
    // Content Here
    
    document.write('<\/div>');
}

formPopup();

</script>


--------------------
Go to the top of the page
 
+Quote Post
MikeHopley
post Jun 2 2008, 04:09 AM
Post #6


Squeeze Machine
Group Icon

Posts: 677
Joined: 15-February 08
From: UK


Eewww, document.write tongue.gif

Use the DOM instead.

And for all you XHTML-heads: you do know that document.write cannot be used with XHTML, right?
Go to the top of the page
 
+Quote Post
Monie
post Jun 2 2008, 04:35 AM
Post #7


Squeeze Machine
*****

Posts: 731
Joined: 13-February 08
From: Borneo


QUOTE (Jason @ May 31 2008, 12:57 AM) *
Hello, I swear this has been asked before on this forum but am having some trouble finding it. I am looking to create a pop like 'My Assistant.'

I would like a form to pop up. Once it has been submitted the page will be reloaded. Could someone tell me how I can achieve this?


Thanks


I still keep that code Rakuli gave in my "Fire Ressistant Cabinet" biggrin.gif


--------------------

Go to the top of the page
 
+Quote Post
If you found The Web Squeeze to be helpful, please donate so we can keep this site FREE, FRESH, and fortified with Web Design & Development info!
Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 

Collapse

> Similar Topics

    Topic Title Replies Topic Starter Views Last Action
No New Posts   2 marSoul 352 23rd February 2008 - 10:52 AM
Last post by: marSoul
No New Posts   2 Jason 184 3rd April 2008 - 05:57 AM
Last post by: Jason
No New Posts   13 Jason 400 17th April 2008 - 12:55 AM
Last post by: Ryan
No New Posts   2 MikeHopley 271 2nd November 2008 - 06:17 PM
Last post by: MikeHopley
No New Posts   6 Squeeze Bot 461 27th June 2008 - 09:55 AM
Last post by: Rakuli