InterOcean Designs - PopUp Content

InterOcean Designs :: ProBoards Codes :: ProBoard Code Database :: PopUp Content

Page 1 of 2 » Jump to page Go

Author

Topic: PopUp Content (Read 1,427 times)

SubDevo
Co-Admin
Code Support
member is offline

[avatar]

Creator of LSD...

Joined: Mar 2009
Gender: Male

Posts: 2,594
Location: MI, USA
Karma: 102

PopUp Content
« Thread Started on Jul 1, 2011, 3:01am »

PopUp Content by SubDevo
Tested in IE, FF, Opera, Safari and Chrome.

I already have a code for a popup music player and did a request for a popup chat.
I decided to make one code that allows you to use ANY HTML for the popup window.
This means any chatbox, music player or video embed codes. Or anything else that you want in the window. Each popup window that you create is completely customizable using CSS. That means each of your windows can have a different background color or image and more!

Enjoy!!!

SubDevo

Instructions:

You need two other items besides the code.
First you need to put this somewhere in your forum. It does not matter where.
Best to keep it just above the code so you can easily find it.

<div id="popupContent" style="display:none;">
ANY HTML CONTENT HERE
</div>

Replace the Yellow with your HTML content. Embed codes, HTML etc...
The ID is used in your link to launch the popup.

Second, you need a link to launch the popup. This could be a text or image link.
Just use javascript:popupStuff('ELEMENT ID', 'TITLE', WIDTH, HEIGHT) as the href of the link.
Note the use of single quotes (apostrophes) around the ID and TITLE.

Example:

<a href="javascript:popupStuff('popupContent', 'Our Chat!', 250, 500)">Launch our Forum Chat!</a>

In the above, it will launch a popup window containing the HTML from the element "popupContent".
The title of the window will be "Our Chat!" and it will be 250px wide by 500px high.

You may have multiple popups if you wish. Just copy/paste the div (above) changing the ID and the contents of it. Use the ID in the href of the link and also set the width and height values.
Make sure any ID's used are unique. Do not use the same name.

Please Read!
In order to use CSS (style your popup background etc..) and scripts or embed codes, you must do the following! Put  below the last script or style tag. These are standard HTML remarks. Your browser will now ignore everything in between these two remarks and those scripts will not load with every page load of your forum. This also ensures that any script or CSS you use will work in your popup for every major browser. There cannot be any other HTML remarks in the scripts or CSS that you use. So, don't use them and remove them if they are in the codes or CSS. The only two remarks should be the ones you added at the beginning and end as instructed.

Example:

The Yellow remarks are good. The Red remarks are bad and must be removed.
The green line is where you would put your background color for that individual popup.
To use an image change that line to: body {background-image: url(IMAGE URL);}

<div id="popupContent" style="display:none;">

</style>

<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
SOME RANDOM CHAT BOX EMBED CODE HERE
</object>

<script type="text/javascript">

</script>
-->
</div>

Of course, you can do more that just change the background color or image. You may use any CSS that you could use on your forum to change the links color, font sizes and styles etc...
Just ask if you need help with these.

Nothing else to edit in the code!

Location: Global Header or Footer

Code:
<script type="text/javascript">
/* PopUp Content by SubDevo */
/* v1.01 Global Header or Footer - Leave this header intact. Do not repost. */
/* [url]http://interoceandesigns.com[/url] or [url]http://lsdp.proboards.com[/url] */

function popupStuff(a,n,w,h){
   var b=document.getElementById(a),html,mC;
   if(b){ b=b.innerHTML.replace(//g,"");
      html='<html><head><title>'+n+'</title></head><body><div style="width: '+w+'px;">'+b+"</div></body></html>";
      mC=window.open('',a,'width='+(w+40)+',height='+(h+30)+',top=0,left=0,scrollbars=yes, resizable=yes');
      mC.focus(); with(mC.document){open(); write(html); close();}
}}
</script>

CODE EDIT (4/08/2012):
Code updated to allow the use of any CSS and scripts within the popup divs. Better cross browser compatibility and the code actually became smaller as a result.

« Last Edit: May 1, 2012, 6:58am by SubDevo »