Lightboxfenster für PM Benachrichtigung für phpbb

HUNTwerker · 17. Februar 2013

Hallo,

ich suche folgendes,es soll sich ein Lightboxfenster öffnen wenn man für eine PM eine Benachrichtigung(PopUp Fenster) bekommt!

Habe das hier gefunden: http://www.wjunction.com/64-webmaster-resources/26296-[phpbb3]-new-pm-customizeable-lightbox.html

Nur leider funktioniert die Version nicht in Google Chrome!

In einem anderen Forum wurde mir geraten das ganze so Umzusetzen:

Mootools sucks. Nimm lieber eine homogene jQuery Lösung
Die läuft dann auch Multibrowser.

Nur leider habe ich davon absolut keine Ahnung

Hat jemand von Euch einen Tip wie man das Umsetzen könnte so das es
funktioniert und was man wo einfügen muss?

Bin für jeden Hinweis dankbar,Gruss

Version des Boards:Phpbb 3.0.11

benneq · 18. Februar 2013

Funktioniert's denn in anderen Browsern?

Und das Popup kommt nicht sofort, sondern erst wenn man die Seite wechselt.

Vielleicht mal die relevanten Teile des generierten HTML Codes hier posten, damit man sich das "Ergebnis" mal ansehen kann.

HUNTwerker · 18. Februar 2013

benneque schrieb:
1.)Funktioniert's denn in anderen Browsern?

2.)Und das Popup kommt nicht sofort, sondern erst wenn man die Seite wechselt.

3.)Vielleicht mal die relevanten Teile des generierten HTML Codes hier posten, damit man sich das "Ergebnis" mal ansehen kann.

1.)Getestet in FF und IE funzt es wunderbar

2.)Ja das weiß ich

3.)Bitte sehr:

overall_header.html

PHP:

<!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"*dir="{S_CONTENT_DIRECTION}"*lang="{S_USER_LANG}"*xml:lang="{S_USER_LANG}">
<head>

<meta*http-equiv="content-type"*content="text/html;*charset={S_CONTENT_ENCODING}"*/>
<meta*http-equiv="content-language"*content="{S_USER_LANG}"*/>
<meta*http-equiv="content-style-type"*content="text/css"*/>
<meta*http-equiv="imagetoolbar"*content="no"*/>
<meta*name="resource-type"*content="document"*/>
<meta*name="distribution"*content="global"*/>
<meta*name="copyright"*content="2000,*2002,*2005,*2007*phpBB*Group"*/>
<meta*name="keywords"*content=""*/>
<meta*name="description"*content=""*/>
{META}
<title>{SITENAME}*&bull;*<!--*IF*S_IN_MCP*-->{L_MCP}*&bull;*<!--*ELSEIF*S_IN_UCP*-->{L_UCP}*&bull;*<!--*ENDIF*-->{PAGE_TITLE}</title>

<link*rel="stylesheet"*href="{T_STYLESHEET_LINK}"*type="text/css"*/>

<script*type="text/javascript">
<script*type="text/javascript"*src="rokbox/mootools-release-1.11.js"></script>

<script*type="text/javascript"*src="rokbox/rokbox.js"></script>
<link*href="rokbox/themes/dark/rokbox-style.css"*rel="stylesheet"*type="text/css"*/>
<script*type="text/javascript"*src="rokbox/themes/light/rokbox-config.js">
//*<![CDATA[


function*popup(url,*width,*height,*name)
{
****if*(!name)
****{
********name*=*'_popup';
****}

****window.open(url.replace(/&amp;/g,*'&'),*name,*'height='*+*height*+*',resizable=yes,scrollbars=yes,width='*+*width);
****return*false;
}

function*jumpto()
{
****var*page*=*prompt('{LA_JUMP_PAGE}:',*'{ON_PAGE}');
****var*perpage*=*'{PER_PAGE}';
****var*base_url*=*'{A_BASE_URL}';

****if*(page*!==*null*&&*!isNaN(page)*&&*page*>*0)
****{
********document.location.href*=*base_url.replace(/&amp;/g,*'&')*+*'&start='*+*((page*-*1)***perpage);
****}
}

/**
**Find*a*member
*/
function*find_username(url)
{
****popup(url,*760,*570,*'_usersearch');
****return*false;
}

/**
**Mark/unmark*checklist
**id*=*ID*of*parent*container,*name*=*name*prefix,*state*=*state*[true/false]
*/
function*marklist(id,*name,*state)
{
****var*parent*=*document.getElementById(id);
****if*(!parent)
****{
********eval('parent*=*document.'*+*id);
****}

****if*(!parent)
****{
********return;
****}

****var*rb*=*parent.getElementsByTagName('input');
****
****for*(var*r*=*0;*r*<*rb.length;*r++)
****{
********if*(rb[r].name.substr(0,*name.length)*==*name)
********{
************rb[r].checked*=*state;
********}
****}
}

<!--*IF*._file*-->

****/**
******Play*quicktime*file*by*determining*it's*width/height
******from*the*displayed*rectangle*area
*****
******Only*defined*if*there*is*a*file*block*present.
*****/
****function*play_qt_file(obj)
****{
********var*rectangle*=*obj.GetRectangle();

********if*(rectangle)
********{
************rectangle*=*rectangle.split(',')
************var*x1*=*parseInt(rectangle[0]);
************var*x2*=*parseInt(rectangle[2]);
************var*y1*=*parseInt(rectangle[1]);
************var*y2*=*parseInt(rectangle[3]);

************var*width*=*(x1*<*0)*?*(x1***-1)*+*x2*:*x2*-*x1;
************var*height*=*(y1*<*0)*?*(y1***-1)*+*y2*:*y2*-*y1;
********}
********else
********{
************var*width*=*200;
************var*height*=*0;
********}

********obj.width*=*width;
********obj.height*=*height*+*16;

********obj.SetControllerVisible(true);

********obj.Play();
****}
<!--*ENDIF*-->

</script>
</head>
<body*onload="<!--*IF*S_DISPLAY_PM*-->clickElement('myclicker')<!--*ENDIF*-->"*class="{S_CONTENT_DIRECTION}">
<!--Header-->
<div*class="header">

<div*class="navalign">
<a*class="nav_links"*href="{U_FAQ}">{L_FAQ}</a>
&nbsp;*&nbsp;<a*class="nav_links"*href="{U_SEARCH}">{L_SEARCH}</a>
&nbsp;*&nbsp;<a*class="nav_links"*href="{U_MEMBERLIST}">{L_MEMBERLIST}</a>
<!--*IF*S_USER_LOGGED_IN*-->&nbsp;*&nbsp;<a*class="nav_links"*href="{U_PROFILE}">{L_PROFILE}</a><!--*ENDIF*-->
<br*/>
<a*href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>*&middot;*<a*href="{U_SEARCH_ACTIVE_TOPICS}">{L_SEARCH_ACTIVE_TOPICS}</a>
<!--*IF*S_USER_LOGGED_IN*-->
<a*href="{U_SEARCH_NEW}">*&middot;*{L_SEARCH_NEW}</a>*&middot;*<a*href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a>
<!--*ENDIF*-->
</div>
</div>
<!--End*Header-->
<!--*IF*S_DISPLAY_PM*-->
<a*id="myclicker"*rel="rokbox[320*40][module=privmsg]"*href="#"*title=""*accesskey="l"></a>
<!--*ENDIF*-->
<div*id="wrapper">
<div*class="content_top"></div>
<div*class="contentbg">
<div*id="ipbwrapper3">
<a*name="top"></a>

<br*/>






****<br*style="clear:*both;"*/>

****<!--*INCLUDE*breadcrumbs.html*-->

****<br*/>

overall_footer.html

PHP:

<!--*IF*not*S_IS_BOT*-->{RUN_CRON_TASK}<!--*ENDIF*-->
<!--*IF*U_ACP*--><center><span*class="gensmall">[*<a*href="{U_ACP}">{L_ACP}</a>*]</span></center><br*/><br*/><!--*ENDIF*-->

<!--
****We*request*you*retain*the*full*copyright*notice*below*including*the*link*to*[url]www.phpbb.com[/url].
****This*not*only*gives*respect*to*the*large*amount*of*time*given*freely*by*the*developers
****but*also*helps*build*interest,*traffic*and*use*of*phpBB3.*If*you*(honestly)*cannot*retain
****the*full*copyright*we*ask*you*at*least*leave*in*place*the*"Powered*by*phpBB"*line,*with
****"phpBB"*linked*to*[url]www.phpbb.com.*If*you*refuse*to*include*even*this*then*support*on*our[/url]
****forums*may*be*affected.

****The*phpBB*Group*:*2006
//-->

<!--Footer-->
<div*align="center"*style="position:*relative;*right:*10px;">
<div*class="footer_bg">
<div*style="padding-top:*25px;">
<span*class="copyright">Powered*by*<a*href="http://www.phpbb.com/">phpBB</a>*&copy;*2000,*2002,*2005,*2007*phpBB*Group</span><!--*IF*TRANSLATION_INFO*--><br*/>{TRANSLATION_INFO}<!--*ENDIF*--><!--*IF*DEBUG_OUTPUT*--><br*/><bdo*dir="ltr">[*{DEBUG_OUTPUT}]</bdo><!--*ENDIF*--></span></div>
<!--DO*NOT*REMOVE--><center><a*style="text-decoration:*none;"*href="http://www.gamesitetemplates.com">Design*By**GameSiteTemplates</a><center><!--DO*NOT*REMOVE-->
</div>
</div>
<!--End*Footer-->
</div>*<!--IPBWrapper3*Alignement*DIV-->
</div>*<!--ContentBG*DIV-->
<div*class="content_bottom"></div>*<!--Content*Bottom-->
</div>*<!--Wrapper*DIV-->
<!--*IF*S_DISPLAY_PM*-->
<!--*INCLUDE*newPM.html*-->

<script*type="text/javascript">
function*clickElement(elementid){
if*({S_NEW_PM})
{
var*e*=*document.getElementById(elementid);
****if*(typeof*e*==*'object')*{
********/*if(typeof*e.click*!=*'undefined')*{
************e.click();
************alert('click');
************return*false;
********}
********else**/
********if(document.createEvent)*{
************var*evObj*=*document.createEvent('MouseEvents');
************evObj.initEvent('click',true,true);
************e.dispatchEvent(evObj);
************return*false;
********}
********else*if(document.createEventObject)*{
************e.fireEvent('onclick');
************alert('createEventObject');
************return*false;
********}
********else*{
************e.click();
************alert('click');
************return*false;
********}
****}
}
}
</script>
<!--*ENDIF*-->
</body>
</html>

newPM.html

PHP:

<style*type="text/css">
#privmsg*{display:*none;}
</style>

<div*id="privmsg">
<center>
<table*border="0"*cellspacing="0"*cellpadding="0">
<tr>
<td*valign="top"*style="padding-left:*6px;">
You*have*a*new*message.*Would*you*like*to*read*it?
</td>
</tr>
</table>
<br*/>
<a*href="ucp.php?i=pm&folder=inbox"><button*type="button">Yes</button></a>
&nbsp;&nbsp;
<a*href="#"*onClick="javascript:rokbox.close()"><button*type="button">No</button></a>
</center>
</div>

benneq · 18. Februar 2013

Der Fehler liegt also höchstwahrscheinlich irgendwo da: document.createEvent('MouseEvents'); (Zeile 44 overall_footer)

Und nach kurzem Googlen bin ich hier gelandet: http://stackoverflow.com/questions/8801570/simulate-a-click-on-a-tag-in-chrome

Und siehe da scheint der unterschied zu liegen:
IE + FF: evObj.initEvent('click',true,true);
Chrome: evObj.initMouseEvent('click', true, true, window, 0, 0, 0, 0, 0,false, false, false, false, 0, null);

Tausch die Zeilen mal aus und schau ob es funktioniert. Wenn ja, dann muss eine Weiche her. Oder halt wirklich jQuery. Aber ob man einen dicken Batzen JavaScript mitschicken will, nur damit ein Klick ausgeführt wird ist fraglich

HUNTwerker · 18. Februar 2013

Danke für die mühe

Geht leider nicht,dann wohl doch mit jQuery nur wie und wo wird es eingebunden?

benneq · 18. Februar 2013

overall_footer, zeile 32 bis 61.

ersetz die mal komplett durch:

Code:

function clickElement(elementid){
if ({S_NEW_PM})
{
alert('neue Nachricht');
}
}

Wenn das nun in allen Browsern geht, dann weißt du, dass genau da rein der jQuery Code gehört:

Code:

function clickElement(elementid){
if ({S_NEW_PM})
{
// HIER DER JQUERY CODE
}
}

P.S. für jQuery musst du natürlich im <head> die jQuery Library laden.

HUNTwerker · 18. Februar 2013

Nee geht nicht,kommt keine Meldung garnix

benneq · 18. Februar 2013

okay, dann pures jQuery

Ist ja schlimm wie inkonsistent so einfache Dinge laufen.

1. jQuery einbinden (so wie schon passiert mit den mootools oder rokbox.js)
2. einfach irgendwo folgendes schreiben:

Code:

<script type="text/javascript">
$(function(){ 
   alert('neue Nachricht');
})
</script>

Das ist die Methode mittels jQuery um direkt nachdem die Seite 'ready' ist, einen Aufruf zu machen.

P.S. Du musst deinem Board irgendwo sagen, dass es den Cache leeren soll. aber das stand ja auch auf der Seite, die du im ersten Post verlinkt hattest.

HUNTwerker · 18. Februar 2013

benneque schrieb:
okay, dann pures jQuery

Ist ja schlimm wie inkonsistent so einfache Dinge laufen.

1. jQuery einbinden (so wie schon passiert mit den mootools oder rokbox.js)
2. einfach irgendwo folgendes schreiben:

Code:

<script type="text/javascript"> $(function(){ alert('neue Nachricht'); }) </script>

Das ist die Methode mittels jQuery um direkt nachdem die Seite 'ready' ist, einen Aufruf zu machen.

P.S. Du musst deinem Board irgendwo sagen, dass es den Cache leeren soll. aber das stand ja auch auf der Seite, die du im ersten Post verlinkt hattest.

1.)Was genau soll ich da einbinden,habe keinen Code geschweige denn jQuery.js aufn Server liegen?
Ich fange also von Null an wenn Du verstehst

2.)in die overal footer oder header.html?

PS: Danke für den Tip Cache leeren mache ich immer damit der neue Code wirksam wird

benneq · 18. Februar 2013

Also erstmal natürlich eine jquery.js auf deinen Server legen.
Dann im HTML <head> einbinden. Quasi genau so wie die mootools.js und die rokbox.js
Dann hast du die Voraussetzung geschaffen um jquery zu benutzen. Den Code zum Aufruf der Lightbox kannst du wie gehabt in die Overall footer packen.

Sorry, bin gerade etwas unflexibel mit dem iPhone hier...

HUNTwerker · 18. Februar 2013

Kein Problem,dafür das Du mit dem Iphone schreibst kannste das sehr gut,ich würde dafür ewig brauchen

Es funzt,nur kommt das Fenster ständig was aber sicher so gewollt ist
von Dir um erstmal zu sehen ob der Code Überhaupt funktioniert!

Wie kann man das ganze nun mit Rockbox benutzen so das das
PM Fenster seinen eigenen anpassbaren Style hat so wie in der newPM.html?

Oder kann man das ganze auch ohne Rockbox Realisieren den Style des PM Fensters?

So siehts atm aus bei Deinem Style:

der Style von Rokbox:

benneq · 18. Februar 2013

Du musst nun mit jQuery einen Klick auf "elementid" simulieren

HUNTwerker · 18. Februar 2013

Alles klar,danke es geht, nur wird im FF ein kleines Fenster angezeigt während
im Chrome das kpl. zu sehen ist!

Wie kann ich den Style anpassen so das die Daten aus der newPM.html geladen werden wie bei Rokbox,

und das man die Wahl hat per Buttons die Nachricht gleich zu lesen oder nicht?

Sieht dann so aus:

HUNTwerker · 19. Februar 2013

@bennequ

Haste keine Idee wie man das umsetzen könnte,zumindest die Buttons "Ja" "Nein" mit einbauen?

benneq · 19. Februar 2013

Wie schaut deine jQuery Funktion denn aktuell aus?

immer noch so?

Code:

<script type="text/javascript">
$(function(){ 
   alert('neue Nachricht');
})
</script>

wenn ja, dann wird der klick immer noch nicht simuliert.

Laut dem Code von dem Lightbox-Fritzen müsste es dann so sein:

Code:

<!-- IF S_DISPLAY_PM -->
<script type="text/javascript">
$(function(){
  var linkEl = $('#myclicker');
  if(linkEl.attr('onclick') === undefined) {
    document.location = linkEl.attr('href');
  } else {
    linkEl.click();
  }
});
</script>
<!-- ENDIF -->

HUNTwerker · 20. Februar 2013

Guten Morgen,

der Code sieht so aus:

HTML:

<script type="text/javascript">
$(function clickElement(elementid){
if ({S_NEW_PM})
   alert('Hallo Du hast eine neue Private Nachricht bekommen!');

})

</script>

habe Deinen probiert passiert nix!

Spricht die Funktion "myclicker" von Deinem Post nicht den Code in der overall_header.thml an,
braucht man dafür nicht wieder Rokbox laut dem Code 2 Schnipsel damit die Lightbox sich öffnet?!

Code 1 aus der overall_header

HTML:

<body onload="<!-- IF S_DISPLAY_PM -->clickElement('myclicker')<!-- ENDIF -->" class="{S_CONTENT_DIRECTION}">

Code 2 aus der overall_header

HTML:

<!--End Header-->
<!-- IF S_DISPLAY_PM -->
<a id="myclicker" rel="rokbox[320 40][module=privmsg]" href="#" title="" accesskey="l"></a>
<!-- ENDIF -->

benneq · 20. Februar 2013

Ja ne... eigentlich sorgt die jQuery Funktion $(...); dafür, dass es erst ausgeführt wird, wenn der Browser fertig ist mir laden. Also fast dasselbe wie das "onload" im body.

Code:

<script type="text/javascript">
$(function clickElement() {
  if ({S_NEW_PM}) {
    $('#myclicker').trigger('click');
  }  
})
</script>

HUNTwerker · 20. Februar 2013

Klappt nicht,habs mit Rokbox probiert und ohne

In der overall_header beliebt ja alles beim alten oder muss was raus?

Suche

Lightboxfenster für PM Benachrichtigung für phpbb

HUNTwerker

Ensign

benneq

Fleet Admiral

HUNTwerker

Ensign

benneq

Fleet Admiral

HUNTwerker

Ensign

benneq

Fleet Admiral

HUNTwerker

Ensign

benneq

Fleet Admiral

HUNTwerker

Ensign

benneq

Fleet Admiral

HUNTwerker

Ensign

benneq

Fleet Admiral

HUNTwerker

Ensign

HUNTwerker

Ensign

benneq

Fleet Admiral

HUNTwerker

Ensign

benneq

Fleet Admiral

HUNTwerker

Ensign

Ähnliche Themen