This is a simple user configurable Popup Window, useful for streaming media such as a Shoutcast Radio Player where you want people to be able to listen to music, for example, while being able to continue browsing your website without the player being interupted and restarting each time a page is changed or refreshed. Many modern Flash players now feature their own popout player launched from within the application itself, but there are still other players and other uses for a Popup Window.
I have created a demo page at my website for you to view the Popup Window. In the demo, I have used some elements of the style.css from the SMF Default Core Theme as the basic theme for the Popup:
Popup Demo (http://www.slayingsteel.com/index.php?page=PopupDemo)
I have written this Popup Window so that it uses:
- stylesheet elements from a theme of your choice that you have installed to your SMF forum, you can simply change the path to a path to a theme on your site.
- A banner.
- A TITLE for the popup window itself.
- A HOME button, this doesn't really need to be changed unless your home page is different from the default.
- A Title inside the window.
- A Table (Your Code Here) where you can paste in your own code, this popup is just the shell for your code.
- A CLOSE WINDOW button.
Copy / Paste the following code into Notepad:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
Popup Window v 0.0.1 by Zetan
www.tinyportal.co.uk
www.slayingsteel.com
-->
<html>
<head>
<title>Popup Window Title Here</title>
<link rel="stylesheet" type="text/css" href="/Themes/default/style.css" />
</head>
<body style="margin: 1ex;">
<div align="center">
<table width="485" height="10" cellpadding="0" cellspacing="0" border="0" bordercolor="#333333">
<tr border="0">
<img src="/images/PopupDemoBanner.jpg">
</tr>
<tr class="titlebg">
<td align="left" class="windowbg">
<font color="#1300AF">
[<a href="/index.php" target="_blank">Home</a>]
<div align="center">
<strong>Popup Title Here</strong>
</font>
</div>
</td>
</tr>
<tr class="windowbg" width="485" height="300">
<td align="top">
<div align="center">
<!-- YOUR CODE HERE START -->
Your Code Here
<!-- YOUR CODE HERE FINISH -->
<tr>
<td class="windowbg" align="center">
<hr />
<a href="javascript:window.close();">
<strong>Close Window</strong>
</a>
</td>
</tr>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
... and Save As, in this example I've named it:
- PopupDemo.html
This file then needs to be uploaded to the root directory of your website:
- /public_html/PopupDemo.html
Or, the directory where your forum resides.
Now that we have our Popup window shell uploaded, we need to create a link or button to launch it.
In this example I am simply pasting the code into a HTML type, TP Article, you can put the code where you like.
Here is a quick overview of what each element does:
- toolbar: Home, Reload, Print etc.
- scrollbars: If the content overflows the boundery of the set size, we get scrollbars.
- location: Address of PopupDemo.htm
- statusbar: The bottom left of the browser window, notification area.
- menubar: File | Edit | View | Bookmarks | Tools | Help, etc.
- resizable: enables people to be able to resize the window
- width: popup window size.
- height: popup window size.
This is what defines the window elements itself, including, most importantly, the size of the popup window.
As you can see by studying the code in the Script, we can turn various window elements on=1 or off=0.
Here is the code for the button to launch the Popup.
<!--
Popup Window Button v 0.0.2 by Zetan
www.tinyportal.co.uk
www.slayingsteel.com
-->
<SCRIPT LANGUAGE="JavaScript">
function popUp(URL)
{
day = new Date();
id = day.getTime();
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=1,statusbar=1,menubar=1,resizable=1,width=540,height=420');");
}
// End -->
</script>
<!-- Create the button START -->
<div align="center">
<A HREF="javascript:popUp('PopupDemo.html')">Launch Popup Window</A>
</div>
<!-- Create the button END -->
- Edit the address of the link to launch the Popup to the path where you have uploaded the html file.
Hopefully, if you have followed the steps correctly, you should now have a popup window containing your code. I origianlly wrote this for my own Shoutcast Radio Stream that I used to host, it was launched from 2 different links for 2 popup windows, each with a different bitrate stream, 128kbps and 64kbps.
[NOTE]
Please make sure your code works before using the popup. This topic is just for the popup window itself, what you put in the popup is not supported in this topic, unless your code conflicts with the popup code.
[UPDATE]
Added a second demo featuring an audio player and custom theme. Currently uploading tracks to the player which need some name edits. I'll post the code for the demo later when it's finished.
Hi Zetan,
love your popup code mate.
I cannot get the button to work though.
Where you state this "Edit the address of the link to launch the Popup to the path where you have uploaded the html file."
could you show me where to do this please?
Which part of the code using an example?
I've tried a few things with no success.
Thanks mate :)
This is the section for the button:
<!-- Create the button START -->
<div align="center">
<A HREF="javascript:popUp('PopupDemo.html')">Launch Popup Window</A>
</div>
<!-- Create the button END -->
<A HREF="javascript:popUp('http://www.example.com/PopupDemo.html')">Launch Popup Window</A>You shouldn't need a complete URL unless the file is hosted externally from the site where the link is.
- /popups/PopupDemo.html
should work if you have the file in a separate folder.
also, this line needs to be kept intact:
'toolbar=0,scrollbars=1,location=1,statusbar=1,menubar=1,resizable=1,width=600,height=500');");
Don't split it, just change the 0's and 1's and the size. Editing this line by splitting the elements into individual lines often prevents the popup from working.
Yep, that was the original place I added the url, but for some reason nothing happens when I click the link.
I can go to the popup box in my browser, its just the button that isnt working for me.
Im putting it in a block(scriptbox) as Im still on TP v0.9.8, should that matter? Ive tried an html block also to no avail.
I havent edited any of the code, as Im trying to get it to work first lol
Would you mind if I take a look? You are welcome to PM me with a temp admin account, password and username. Plus the complete URL to the file.
Thanks mate, PM sent :)
Looking now..
You have a weird site address going on, whats with the 3 slashes? ///index.php?
Yeah, I havent had time to sort that out yet, only just started that site to start testing again instead of coding live.
Im not worried as its a mates host, but I'll sort that out tomorrow.
Off to bed.
Thanks for having a look mate :)
Ciao
Well, I just copied the code from my demo page, it works. I'll check over the code posted above.
[edit] Removed temporary test page link.
Thanks mate.
I popup on your site?
Yeah I went to that page to check out the popup before I tried the code.
No, thats a new test page, with the address of your popup demo :)
I've ammended the code for the button in the first post, you can test it for me if you don't mind.
Thanks for bug hunting, lol.. it can be a bit finiky sometimes.. might have been a comment causing it.
[edit] It was actually the line I mentioned before:
'toolbar=0,scrollbars=1,location=1,statusbar=1,menubar=1,resizable=1,width=600,height=500');");
it needs to be all on the same line:
eval("page" + id + " = window.open(URL, '" + id + "', 'toolbar=0,scrollbars=0,location=1,statusbar=1,menubar=1,resizable=1,width=540,height=420');");
My fault! .... stoopid finiky code
lol yeah, I saw that before I crashed last night after you mentioned that line.
Thanks for your assistance, and I'll lead the bug hunt for you anytime! lol ;)
Gonna tear down that site and install smf2 n the latest TP.
About time I started learning the layout :)
Cheers
Quote from: Sabreâ„¢ on June 12, 2009, 03:29:26 AM
lol yeah, I saw that before I crashed last night after you mentioned that line.
Thanks for your assistance, and I'll lead the bug hunt for you anytime! lol ;)
Gonna tear down that site and install smf2 n the latest TP.
About time I started learning the layout :)
Cheers
Time Out Sabreâ„¢. TP will not currently work with SMF 2 unless you happen to be a team member and have a copy of TP 2 Alpha. I don't think any of this applies, does it?
ZarPrime
Well as you can see ZarPrime, No I am not a team member, that therefore means I would not, or should not have a copy of TP 2 Alpha. Shouldn't it?
What I meant is to install smf2 on one of my test sites, and install the latest TP on another, as I have multiple test sites for other projects, and have not done so yet. Anybody that has been here long enough usually knows that there is no version of TP publicly available for smf 2.0 RC1-1. I may explain my intentions completely next time.
But thank You for the heads up anyway. (https://www.tinyportal.net/proxy.php?request=http%3A%2F%2Fwww.getsmile.com%2Femoticons%2Fsmileys-91853%2F_950%2Fumbrella.gif&hash=2bd8db0a0ae84a802b1074a77fa8b260f0561683)
Back on topic
Quote from: Zetan on June 11, 2009, 01:45:10 PMI've ammended the code for the button in the first post, you can test it for me if you don't mind.
Yep, works as designed.
Cheers mate :)
Quote from: Sabreâ„¢ on June 12, 2009, 06:40:20 AM
Quote from: Zetan on June 11, 2009, 01:45:10 PMI've ammended the code for the button in the first post, you can test it for me if you don't mind.
Yep, works as designed.
Cheers mate :)
You're welcome :)
Quote from: Sabreâ„¢ on June 12, 2009, 06:40:20 AM
Well as you can see ZarPrime, No I am not a team member, that therefore means I would not, or should not have a copy of TP 2 Alpha. Shouldn't it?
What I meant is to install smf2 on one of my test sites, and install the latest TP on another, as I have multiple test sites for other projects, and have not done so yet. Anybody that has been here long enough usually knows that there is no version of TP publicly available for smf 2.0 RC1-1. I may explain my intentions completely next time.
But thank You for the heads up anyway. (https://www.tinyportal.net/proxy.php?request=http%3A%2F%2Fwww.getsmile.com%2Femoticons%2Fsmileys-91853%2F_950%2Fumbrella.gif&hash=2bd8db0a0ae84a802b1074a77fa8b260f0561683)
NP Sabre, I think I knew that you knew that TP 1 doesn't work on SMF 2, but there are people who have tried to install it on SMF 2 and later found out they made a mistake. I was just trying to make sure the same thing didn't happen to you. :up:
Back to topic.
ZP
works great, nice code Zetan :up:
Quote from: Lord Anubis on July 13, 2009, 12:07:51 AM
works great, nice code Zetan :up:
Thanks Lord Anubis :)