TP-Docs
HTML5 Icon HTML5 Icon HTML5 Icon
TP on Social Media

Recent

User

Welcome to TinyPortal. Please login or sign up.

Stats

Members
  • Total Members: 3,966
  • Latest: safir45
Stats
  • Total Posts: 195,982
  • Total Topics: 21,320
  • Online today: 1,186
  • Online ever: 8,223 (February 19, 2025, 04:35:35 AM)
Users Online
  • Users: 0
  • Guests: 340
  • Total: 340

[Block] Popup Window - User configurable

Started by Zetan, June 03, 2009, 08:25:47 AM

Previous topic - Next topic

0 Members and 1 Guest are viewing this topic.

Print
Go Down Pages1 2 All
User actions

Zetan

June 03, 2009, 08:25:47 AM Last Edit: June 12, 2009, 07:00:50 AM by Zetan
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



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:

    Code Select


    <!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.

    Code Select


    <!--
    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.

Zetan

#1
June 04, 2009, 07:16:55 PM
[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.

FERNSIDEâ„¢

#2
June 11, 2009, 11:59:57 AM
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 :)

Zetan

#3
June 11, 2009, 12:14:16 PM Last Edit: June 11, 2009, 12:25:22 PM by Zetan
This is the section for the button:

Code Select


<!-- Create the button START -->

<div align="center">
<A HREF="javascript:popUp('PopupDemo.html')">Launch Popup Window</A>
</div>

<!-- Create the button END -->




Code Select
<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:

    Code Select


    '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.

FERNSIDEâ„¢

#4
June 11, 2009, 12:30:18 PM
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

Zetan

#5
June 11, 2009, 12:32:52 PM
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.

FERNSIDEâ„¢

#6
June 11, 2009, 01:19:06 PM
Thanks mate, PM sent :)

Zetan

#7
June 11, 2009, 01:28:06 PM
Looking now..

You have a weird site address going on, whats with the 3 slashes? ///index.php?

FERNSIDEâ„¢

#8
June 11, 2009, 01:33:44 PM
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

Zetan

#9
June 11, 2009, 01:35:21 PM Last Edit: June 11, 2009, 02:56:21 PM by Zetan
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.
Print
Go Up Pages1 2 All
User actions

This website is proudly hosted on Crocweb Cloud Website Hosting.