Lightboxfenster für PM Benachrichtigung für phpbb

P@InKiLLeR

Ensign
Dabei seit
Sep. 2011
Beiträge
151
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 :rolleyes:

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 ;)

 

benneq

Admiral
Dabei seit
Juli 2010
Beiträge
9.005
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.
 

P@InKiLLeR

Ensign
Ersteller dieses Themas
Dabei seit
Sep. 2011
Beiträge
151
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>
 
Zuletzt bearbeitet:

benneq

Admiral
Dabei seit
Juli 2010
Beiträge
9.005
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 ;)
 

P@InKiLLeR

Ensign
Ersteller dieses Themas
Dabei seit
Sep. 2011
Beiträge
151
Danke für die mühe ;)

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

benneq

Admiral
Dabei seit
Juli 2010
Beiträge
9.005
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.
 
Zuletzt bearbeitet:

benneq

Admiral
Dabei seit
Juli 2010
Beiträge
9.005
okay, dann pures jQuery :D

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.
 
Zuletzt bearbeitet:

P@InKiLLeR

Ensign
Ersteller dieses Themas
Dabei seit
Sep. 2011
Beiträge
151
okay, dann pures jQuery :D

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 ;)
 
Zuletzt bearbeitet:

benneq

Admiral
Dabei seit
Juli 2010
Beiträge
9.005
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...
 

P@InKiLLeR

Ensign
Ersteller dieses Themas
Dabei seit
Sep. 2011
Beiträge
151
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:

 
Zuletzt bearbeitet:

benneq

Admiral
Dabei seit
Juli 2010
Beiträge
9.005
Du musst nun mit jQuery einen Klick auf "elementid" simulieren
 

P@InKiLLeR

Ensign
Ersteller dieses Themas
Dabei seit
Sep. 2011
Beiträge
151
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:

 
Zuletzt bearbeitet:

P@InKiLLeR

Ensign
Ersteller dieses Themas
Dabei seit
Sep. 2011
Beiträge
151
@bennequ

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

 

benneq

Admiral
Dabei seit
Juli 2010
Beiträge
9.005
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 -->
 
Zuletzt bearbeitet:

P@InKiLLeR

Ensign
Ersteller dieses Themas
Dabei seit
Sep. 2011
Beiträge
151
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?! :rolleyes:

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 -->
 
Zuletzt bearbeitet:

benneq

Admiral
Dabei seit
Juli 2010
Beiträge
9.005
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>
 

P@InKiLLeR

Ensign
Ersteller dieses Themas
Dabei seit
Sep. 2011
Beiträge
151
Klappt nicht,habs mit Rokbox probiert und ohne :rolleyes:

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