Welcome Guest!
Please login
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.
![]() ![]() |
May 30 2008, 11:57 AM
Post
#1
|
|
|
Master of the Universe ![]() 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 -------------------- |
|
|
May 30 2008, 12:05 PM
Post
#2
|
|
![]() Squeeze Machine ![]() 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...
-------------------- |
|
|
May 30 2008, 12:12 PM
Post
#3
|
|
![]() Squeeze Machine ![]() Posts: 763 Joined: 13-February 08 From: Catching the squeezed drips downunder. |
Actually, that has nothing to do with your question really
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. 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 -------------------- |
|
|
May 31 2008, 06:19 AM
Post
#4
|
|
|
Master of the Universe ![]() 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
-------------------- |
|
|
Jun 2 2008, 03:31 AM
Post
#5
|
|
|
Master of the Universe ![]() 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> -------------------- |
|
|
Jun 2 2008, 04:09 AM
Post
#6
|
|
|
Squeeze Machine ![]() Posts: 677 Joined: 15-February 08 From: UK |
Eewww, document.write
Use the DOM instead. And for all you XHTML-heads: you do know that document.write cannot be used with XHTML, right? |
|
|
Jun 2 2008, 04:35 AM
Post
#7
|
|
![]() Squeeze Machine ![]() ![]() ![]() ![]() ![]() Posts: 731 Joined: 13-February 08 From: Borneo |
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" -------------------- |
|
|
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!
![]() ![]() |
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:
Similar Topics
| Topic Title | Replies | Topic Starter | Views | Last Action | |||
|---|---|---|---|---|---|---|---|
![]() |
2 | marSoul | 352 | 23rd February 2008 - 10:52 AM Last post by: marSoul |
|||
![]() |
2 | Jason | 184 | 3rd April 2008 - 05:57 AM Last post by: Jason |
|||
![]() |
13 | Jason | 400 | 17th April 2008 - 12:55 AM Last post by: Ryan |
|||
![]() |
2 | MikeHopley | 271 | 2nd November 2008 - 06:17 PM Last post by: MikeHopley |
|||
![]() |
6 | Squeeze Bot | 461 | 27th June 2008 - 09:55 AM Last post by: Rakuli |
|||






May 30 2008, 11:57 AM












