how to create a pop-up in php forum [Archive]

View Full Version : how to create a pop-up in php forum

itprosam

02-18-2014, 06:40 AM

Hi, I would like to know how to create a pop-up message in phpbb forum index page only.
What I am trying to achieve is that when a user lands on index.php page of my forum a pop-up should come and inside will be a message and a link to a page within my website.
I am not sure how to make that work.
I just want to have some kind of window popping up either be it using jQuery, JS etc. as long as it pops up to grab user's attention. Just like a private PM message would in php forums.
Any help would be appreciated.

Beverleyh

02-18-2014, 08:06 AM

There are 2 files in the template folder where you could put a popup script for your forum index page;

"phpBB3/styles/subsilver2/template/forumlist_body.html" - This is specific to the forum index so you should just be able to put a script here and only have it popup on the main index page - change "subsilver2" for your theme folder.

And "phpBB3/styles/subsilver2/template/overall_header.html" - This is the header file for the whole forum, and every page, so you'd need to isolate only the index page when you're on it, by doing something like this;


$page = basename(substr($_SERVER['PHP_SELF'],0,strrpos($_SERVER['PHP_SELF'],'.'))); // get web page and strip extension
if ($page == 'index') {


... Your HTML/JS here ...


}


The funny HTML comments that hold PHP and ENDPHP are phpBB's version of opening and closing PHP tags. To use them/custom PHP in the template files, you'll need to enable PHP in the ACP: https://www.phpbb.com/community/viewtopic.php?p=12913460&sid=f17f5aec4e8ff819d5af933fb1b6549d#p12913460

To see the sample code above working, just paste it at the very bottom of the overall_header.html file (after you've enabled PHP via the ACP) and you'll only see " ... Your HTML/JS here ... " when you're on the main index page.

So now you know where to put the code, you need to choose a popup script that you'd like to use. Have a look in the DD library as there may be something there, and have a play to see what you come up with.

itprosam

02-18-2014, 09:05 AM

thanks Beverly
I will try it and see if this works, will post updates...

thanks it worked greatly :)
much appreciated

itprosam

02-18-2014, 11:34 AM

I quick follow-up
what if I want to have that pop-up happen per session? (i.e. no popup until user closes and re-opens the browser and revisit website)

Beverleyh

02-18-2014, 11:56 AM

There are scripts that use a cookie in the DD library. Have you tried one of those?: http://www.dynamicdrive.com/dynamicindex17/

Maybe the Sticky Note Script?: http://www.dynamicdrive.com/dynamicindex17/stickynote.htm

Or Stay on Top Content Script?: http://www.dynamicdrive.com/dynamicindex17/stayontop.htm

itprosam

02-18-2014, 12:00 PM

I will try and post my results :) thanks

itprosam

02-19-2014, 05:21 AM

I checked it out but all those scripts advised to put something in HEAD and then BODY but as you know I am using php.. would I have to type a whole html page within the parameters you advised in previous script. 2nd I do not see any browser session coding in there or am I missing it??

Beverleyh

02-19-2014, 05:20 PM

PHP is the server side language that processes stuff on the server and queries the phpbb3 database etc, BUT, the output is in HTML - that's what is served to website visitors via a browsers and what you can see if you view the source.

Look again in the aforementioned overall_header.html template file and you'll see familiar HTML elements such as the <head>, </head> and <body> tags - this is where you'd put your popup script according to the DD instructions. Assuming that you know your markup and do not rely on a WYSIWYG editor such as Dreamweaver, you can edit this template file like any other HTML document (and, just so you're aware, the closing </body> and </html> tags are located in the similarly named overall_footer.html file)

itprosam

02-20-2014, 08:21 AM

Thanks Beverly and I do not use any kind of WYSIWYG editor, I use Notepad or Notepad++
I used your script mentioned above to modify "forumlist_body.html" and created an html page within the following code


$page = basename(substr($_SERVER['PHP_SELF'],0,strrpos($_SERVER['PHP_SELF'],'.'))); // get web page and strip extension
if ($page == 'index') {


... Your HTML/JS here ...


}


The Following script is the one I used to make a pop-up per browser session:

Step 1: Insert the following into the <head> section of your page

<script>

/*
Fair well window launcher script
By JavaScript Kit ()
Over 200+ free scripts here!
*/

function openpopup(){
//configure "seeyou.htm and the window dimensions as desired
window.open("seeyou.htm","","width=300,height=338")
}

function get_cookie(Name) {
var search = Name + "="
var returnvalue = "";
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) { // if cookie exists
offset += search.length
// set index of beginning of value
end = document.cookie.indexOf(";", offset);
// set index of end of cookie value
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

function loadpopup(){
if (get_cookie('popped')==''){
openpopup()
document.cookie="popped=yes"
}
}

</script>

Step 2: Insert the following into the <body> tag itself, like this:

<body onload="loadpopup()">

But Now the problem is Pop-up Blockers are blocking all the pop-ups hence I am looking for jQuery pop-up so it may not be blocked...
Please advise...

itprosam

02-20-2014, 11:00 AM

after many tries I was able to run the stickynote script
but its only coming up on Internet Explorer, It can't seem to load on Firefox and Chrome. Please check my coding and advise.

<html>
<head>
<style type="text/css">

.stickynote{
position:absolute;
visibility:hidden;
width: 300px;
height: 100px;
border: 2px solid black;
background-color: grey;
padding: 4px;
box-shadow: 3px 3px 8px #818181;
-webkit-box-shadow: 3px 3px 8px #818181;
-moz-box-shadow: 3px 3px 8px #818181;
}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script src="stickynote.js">

/***********************************************
* Sticky Note Script (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

</script>

<script>

var mysticky=new stickynote({
content:{divid:'stickynote1', source:'inline'},
showfrequency:'always',
hidebox:8
})

</script>

</head>

<div id="stickynote1" class="stickynote" align="center">
<b><big><br><br>Please Support us by your donations.</big></b>

<div align="center">
<a href="#" onClick="mysticky.showhidenote('hide');return false">Hide Box</a>
</div>

</div>
</body>
</html>

Beverleyh

02-20-2014, 06:00 PM

I'm not sure why you're posting the markup for a standalone web page. Where does a standalone page fit in to the equation?

According to the Sticky Note instructions, you have styles and javascripts to paste in to the HEAD section of the web document, and you also have the sticky div markup to paste in to the BODY section of the web document.

In a phpbb3 forum, both the HEAD and opening BODY tags appear in the "overall_header.html" file, so you only need to modify this one file, pasting the Sticky Note component parts where instructed.

The markup in the BODY for the sticky div can be put in to the previous code sample, which will make it visible on the index page only;


$page = basename(substr($_SERVER['PHP_SELF'],0,strrpos($_SERVER['PHP_SELF'],'.'))); // get web page and strip extension
if ($page == 'index') {


<div id="stickynote1" class="stickynote">
<img src="http://i52.tinypic.com/2usu1ad.gif" align="left" />Display any content here, from text, images, to rich HTML. Use the close link to dismiss the box. Click the close box to dismiss it.

<div align="right">
<a href="#" onClick="mysticky.showhidenote('hide');return false">Hide Box</a>
</div>


}


You don't need to edit "forumlist_body.html" in this case (this is just a fragment of template markup - an incomplete web document, that is called in to play when the phpbb3 forum index is viewed) and you don't need to create a new/standalone web page.

Feel free to post the modified "overall_header.html" file once you've put your sticky code/markup into it, but you'll also need to post a link to your forum so we can troubleshoot a live installation of the script.

itprosam

02-27-2014, 02:42 AM

Hi Beverly,
sorry for late reply, I was sick.
I made changes to overall_header but now it pops up on all pages. I wanted it to only pop-up once on Index.php page so user's do not get annoyed.
that pop-up will basically ask for donations or if any specific news. I want user's to return to my forums rather then leave by getting annoyed with that pop-up.
Below is the whole code for overall_header:

Head portion of overall_header file

<style type="text/css">

.stickynote{
position:absolute;
visibility:hidden;
width: 300px;
height: 100px;
border: 2px solid black;
background-color: grey;
padding: 4px;
box-shadow: 3px 3px 8px #818181;
-webkit-box-shadow: 3px 3px 8px #818181;
-moz-box-shadow: 3px 3px 8px #818181;
}

</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script src="stickynote.js">

/***********************************************
* Sticky Note Script (c) Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/

</script>

<script>

var mysticky=new stickynote({
content:{divid:'stickynote1', source:'inline'},
showfrequency:'always',
hidebox:8
})

</script>
</head>

Body of overall_header file

<div id="stickynote1" class="stickynote" align="center">
<b><big><br><br>Please Support us by your donations.</big></b>

<div align="center">
<a href="#" onClick="mysticky.showhidenote('hide');return false">Hide Box</a>
</div>

</div>

itprosam

02-27-2014, 02:44 AM

I already posted your reply but problem below:
... why does it needs moderator review each time I post using advanced editor? it takes a long time to get it approved and posted. Will I ever be able to post directly without any intrusion?

Beverleyh

02-27-2014, 06:16 AM

I made changes to overall_header but now it pops up on all pages. I wanted it to only pop-up once on Index.php page so user's do not get annoyed.
Yes, as previously stated...

The markup in the BODY for the sticky div can be put in to the previous code sample, which will make it visible on the index page only;


$page = basename(substr($_SERVER['PHP_SELF'],0,strrpos($_SERVER['PHP_SELF'],'.'))); // get web page and strip extension
if ($page == 'index') {


<div id="stickynote1" class="stickynote">
<img src="http://i52.tinypic.com/2usu1ad.gif" align="left" />Display any content here, from text, images, to rich HTML. Use the close link to dismiss the box. Click the close box to dismiss it.

<div align="right">
<a href="#" onClick="mysticky.showhidenote('hide');return false">Hide Box</a>
</div>


}

I'm not sure what the exact criteria is for new members and moderated posts. It won't happen forever though - presumably once you have hit a minimum post count or length of registration, your posts will go through without a hitch.

itprosam

02-27-2014, 07:12 AM

hmm I tried that but now it's giving me error messages :S
I kept the Head portion of the coding as is but followed your instructions to make changes at the very bottom of overall_header file and added that snippet as above mentioned. Please see the code for the whole overall_header file and check the error on the website then please advise :)
my header file is way too big. I have uploaded it. Please download it and check:
http://www.firedrive.com/file/0CA31289494A0A20

I reverted back to old code for now as I am working on the forum. Please check the above file and advise.

Deadweight

02-27-2014, 07:04 PM

Hey if you still would like a window pop up here is something i created. It's simple and quick:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Game Selection</title>
<style>
* { margin:0 auto; padding:0;}
body { background-color:#CCCCCC;}

#play { width:200px; border:1px solid black; text-align:center; margin-top:5px; cursor:pointer; background:white;}
#play:hover { text-decoration:underline;}

#bce_popup {
position:absolute;
top:0;
left:0;
background-color:black;
background-color: rgba(0,0,0,0.85);
width:100%;
height:100%;
display:none;
}

#bce_main {
top:10px;
height: 80%;
width:80%;
margin-top:10px;
clear:both;
position:absolute;
display:none;
background-color:transparent;
border:1px solid black;
background-color:white;
margin-left:10%;
}
</style>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(function(){

$(document).on('click','#play',function(){
create_popup();
})

$(document).on('click','#bce_popup',function(){
close_pop()
})

})
function create_popup(){
$('body').append('<div id="bce_popup"></div><div id="bce_main"></div>');
$('#bce_popup').fadeIn(400);
$('#bce_main').fadeIn(400);
}
function close_pop(){
$('#bce_popup').fadeOut(400)
$('#bce_main').fadeOut(400)
delay(400)
$('#bce_popup').remove()
$('#bce_main').remove()
}
</script>
</head>
<body>

<div id="play">Display</div>

</body>
</html>

Place anything between
<div id="bce_main"></div> to display. Also to hide just click the grey area. Let me know if this works for you.

itprosam

03-03-2014, 03:17 AM

"Crazykld69" it worked but I want the pop-up to be displayed automatically rather the OnClick feature ... and "Beverleyh" did you got a chance to look at the coding??

Deadweight

03-03-2014, 05:35 AM

That is easy to fix.
change

<script>
$(function(){

$(document).on('click','#play',function(){
create_popup();
})

$(document).on('click','#bce_popup',function(){
close_pop()
})

})

to

<script>
$(function(){

create_popup();

$(document).on('click','#bce_popup',function(){
close_pop()
})

})

itprosam

03-03-2014, 06:22 AM

thanks "Crazykld69" it worked ... please check and advise if it's working correctly as it supposed to.
is there a way I can make it only a session pop-up??
link is mentioned above..

Deadweight

03-03-2014, 08:28 AM

Ah i see you want it only to pop up on the index page. DO you want it to cover the whole page?

itprosam

03-03-2014, 08:48 AM

well if you look at the site now it shows the way I want it to but I don't want to annoy users by popping up every single time, hence once per session or a instance of time like after every 10 mins or so..?

Beverleyh

03-03-2014, 06:56 PM

I meant to reply the other day but I got tied up in work.

Unfortunately your website is specifically designed to support illegal activity and DD is not in a position to assist you. Please seek help elsewhere.

I am closing this thread.