vBulletin Style CSS based Java Menu (in viewtopic)

[ATARI]

Hi, zusammen mit oxpus hab ich in der letzten Woche versucht, ein Menü wie man es von vbulletin foren kennt wenn man auf den benutzernamen des posters in der viewtopic ansicht klickt zu bauen.
das ganze basiert auf diesem javascript von dynamicdrive.com.

da bilder mehr als tausend worte sagen, so sähe es aus..

Menu zugeklappt:
[ externes Bild ]

Menu aufgeklappt:
[ externes Bild ]


Ziemlich geile Sache also!


Ich hab mal alle bisherigen Überlegungen, wie es gehen müsste als mod-datei zusammengeschrieben.
(DIES IST KEIN OFFIZIELLER MOD UND FUNZT AUCH NICHT >> JA NICHT INSTALLIEREN !!! SOLL NUR ZUR BESSEREN ÜBERSICHT DIENEN !!!)

Code: Alles auswählen

##############################################################
## MOD Title: CSS based Java Menu in Viewtopic
## MOD Author: Darezettl
## MOD Description: Adds a CSS based Javascript Menu to viewtopic when you click on
##                  on the posters name. Similiar to vb's one! ;)
## MOD Version: 0.0.0 (not working!!! please do not install on live boards!!)
##
## Installation Level: ez
## Installation Time: 5 min
## Files To Edit: 3
##                templates/subSilver/subSilver.css
##                templates/subSilver/viewtopic_body.tpl
##                viewtopic.php
## Included Files: n/a
##############################################################
## For Security Purposes, Please Check: http://www.phpbb.com/mods/downloads/ for the
## latest version of this MOD. Downloading this MOD from other sites could cause malicious code
## to enter into your phpBB Forum. As such, phpBB will not offer support for MODs not offered
## in our MOD-Database, located at: http://www.phpbb.com/mods/downloads/
##############################################################
## Before Adding This MOD To Your Forum, You Should Back Up All Files Related To This MOD
##############################################################
#
#-----[ OPEN ]------------------------------------------
#
viewtopic.php
#
#-----[ FIND ]------------------------------------------
#
$template->assign_block_vars('postrow', array(
#
#-----[ BEFORE, ADD ]------------------------------------------
#
	$menu = array();
	$menu[0] = '<a href="javascript:void(0)">&raquo; Optionen</a>';
	$menu[1] = $profile;
	$menu[2] = $pm;
	$menu[3] = $search;
	$menu[4] = $email;
	$menu[5] = $www;
#
#-----[ FIND ]------------------------------------------
#
'MINI_POST_IMG' => $mini_post_img,
#
#-----[ BEFORE, ADD ]------------------------------------------
#
'DROPDOWNMENU2' => $menu,
#
#-----[ OPEN ]------------------------------------------
#
templates/subSilver/viewtopic_body.tpl
#
#-----[ FIND ]------------------------------------------
#
<table
#
#-----[ BEFORE, ADD ]------------------------------------------
#
<script type="text/javascript">
<!--
/***********************************************
* AnyLink Drop Down Menu- © Dynamic Drive (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//Contents for menu 2, and so on
var menuwidth='180px' //default menu width
var menubgcolor='f9f9f9'  //menu bgcolor
var disappeardelay='999999999999999999'  //menu disappear speed onMouseout (in miliseconds)
var hidemenu_onclick='yes' //hide menu when user clicks within menu?

/////No further editting needed

var ie4=document.all
var ns6=document.getElementById&&!document.all

if (ie4||ns6)
document.write('<div id="dropmenudiv" style="visibility:hidden;width:'+menuwidth+';background-color:'+menubgcolor+'" onMouseover="clearhidemenu()" onMouseout="dynamichide(event)"></div>')

function getposOffset(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
}


function showhide(obj, e, visible, hidden, menuwidth){
if (ie4||ns6)
dropmenuobj.style.left=dropmenuobj.style.top="-500px"
if (menuwidth!=""){
dropmenuobj.widthobj=dropmenuobj.style
dropmenuobj.widthobj.width=menuwidth
}
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover")
obj.visibility=visible
else if (e.type=="click")
obj.visibility=hidden
}

function iecompattest(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function clearbrowseredge(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=ie4 && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-15 : window.pageXOffset+window.innerWidth-15
dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=ie4 && !window.opera? iecompattest().scrollTop : window.pageYOffset
var windowedge=ie4 && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18
dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure){ //move up?
edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
if ((dropmenuobj.y-topedge)<dropmenuobj.contentmeasure) //up no good either?
edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
}
}
return edgeoffset
}

function populatemenu(what){
if (ie4||ns6)
dropmenuobj.innerHTML=what.join("")
}


function dropdownmenu(obj, e, menucontents, menuwidth){
if (window.event) event.cancelBubble=true
else if (e.stopPropagation) e.stopPropagation()
clearhidemenu()
dropmenuobj=document.getElementById? document.getElementById("dropmenudiv") : dropmenudiv
populatemenu(menucontents)

if (ie4||ns6){
showhide(dropmenuobj.style, e, "visible", "hidden", menuwidth)
dropmenuobj.x=getposOffset(obj, "left")
dropmenuobj.y=getposOffset(obj, "top")
dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+"px"
dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+"px"
}

return clickreturnvalue()
}

function clickreturnvalue(){
if (ie4||ns6) return false
else return true
}

function contains_ns6(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
}

function dynamichide(e){
if (ie4&&!dropmenuobj.contains(e.toElement))
delayhidemenu()
else if (ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6(e.currentTarget, e.relatedTarget))
delayhidemenu()
}

function hidemenu(e){
if (typeof dropmenuobj!="undefined"){
if (ie4||ns6)
dropmenuobj.style.visibility="hidden"
}
}

function delayhidemenu(){
if (ie4||ns6)
delayhide=setTimeout("hidemenu()",disappeardelay)
}

function clearhidemenu(){
if (typeof delayhide!="undefined")
clearTimeout(delayhide)
}

if (hidemenu_onclick=="yes")
document.onclick=hidemenu
//-->
</script>
#
#-----[ FIND ]------------------------------------------
#
{postrow.POSTER_NAME}
#
#-----[ REPLACE WITH ]------------------------------------------
#
<a href="javascript:void(0)" onClick="return dropdownmenu(this, event, {postrow.DROPDOWNMENU2}, '330px')" onMouseout="delayhidemenu()">{postrow.POSTER_NAME}</a>
#
#-----[ OPEN ]------------------------------------------
#
templates/subSilver/subSilver.css
#
#-----[ FIND ]------------------------------------------
#
body
#
#-----[ BEFORE, ADD ]------------------------------------------
#
#dropmenudiv{
position:absolute;
border:1px solid #CCCCCC;
border-bottom-width: 0;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
}

#dropmenudiv a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid #CCCCCC;
padding: 1px 0;
text-decoration: none;
font-weight: bold;
}

#dropmenudiv a:hover{ /*hover background color*/
background-color: #f3f3f3;
}

Da wir bei opxus nimmer weiterkommen, poste ich das ganze einfach mal hier, vielleicht hat ja einer der User von phpbb.de den Geistesblitz weiso es nicht geht.

Ahja, es passiert nun dies wenn man auf den Namen eines Posters klickt:

Wenn ich dann auf den Namen eines Poster klicke, passiert gar nix.
bzw. es erscheint ein kleiner waagrerechter Strich, wohl als Zeichen dass schon was da wäre, aber das Menü leer ist.

Also, jemand ne Idee wie man das Ding zum Laufen bringen könnte?

Ich denke, daran hätten viele Leute Interesse!

[Mehrpack]

hi,
ich hab leider sogut wie keine ahnung aber ich versuch trotzdem mal irgendwie zu helfen.

so wie ich beim mod einbau gesehn habe wird bei den mods mit javascript die ich verbaut habe ein eintrag in den overall_header.tpl und den simple_header.tpl hinzugefügt.
meistens lagern diese mods auch die javascript funktionen selber in eine seperate datei aus.

aber irgendwie habe ich das gefühl das der eintrag in die viewtopic_body irgendwie falsch ist, der eintrag zeigt irgendwie nicht richtig auf die funktion.
es steht nur das void da und nix passiert.

und irgendwie habe ich ausserdem das gefühl das das ganze vielleicht besser in der viewtopic selber aufgehoben wäre, so das es dann direkt ausgeben wird, wenn der username abgefragt wird.

wie gesagt leider hab ich keine grosse ahnung im dem bereich und kann euch nur gefühlsmässig was sagen, aber ich hoffe es hilft trotzdem irgendwie weiter, da dies aufjedenfall sehr interiesant ist und ich hoffe das ihr es noch lösen könnt und es dann raus kommt.

Mehrpack

[Mehrpack]

hi,
ich glaube ich habe etwas ähnliches an mod gefunden, vielleicht hilft er weiter um das problem zu lösen.

http://www.phpbb.com/phpBB/viewtopic.php?t=110870

Mehrpack

[John Doe]

Das ist leider was komplett anderes.
Da geht ganz simpel über ein neues Fenster. Da is nix mit Javascript.

Auf phpbb.com hat ja einer schon die Lösung gepostet.
Man braucht jetzt nur noch die Fähigkeit das umzusetzten.

[ATARI]

Joa, ich habs schon gesehen.. aber irgendwie check ich nicht was der liebe Paddic da genau meint..

[Mehrpack]

Das ist leider was komplett anderes.
Da geht ganz simpel über ein neues Fenster. Da is nix mit Javascript.

Auf phpbb.com hat ja einer schon die Lösung gepostet.
Man braucht jetzt nur noch die Fähigkeit das umzusetzten.

hi,
oh schade, hatte es nur gelesen mal kurz in den anfang des topics gelesen.
zu mehr hatte ich leider da keine zeit gehabt und ich habs lieber gepostet, auch wenns umsonst war.

ich hab mir das mal durchgelesen, aus neugier und da ich helfen möchte.
zwar hab ich keine ahnung, ich seh es eher als gering ein *g*, ob ich helfen kann das zu verstehn aber ich versuch einfach mal mein glück:

ich denke er sagt im grunde, das das was in der viewtopic steht, nicht so verwendet werden kann, da das tempalte system daraus kein javascript-menü erstellen kann.
er meint damit das in der viewtopic und bezieht sich mit array eben auf das array hier:

Code: Alles auswählen

   $menu = array(); 
   $menu[0] = '<a href="javascript:void(0)">&raquo; Optionen</a>'; 
   $menu[1] = $profile; 
   $menu[2] = $pm; 
   $menu[3] = $search; 
   $menu[4] = $email; 
   $menu[5] = $www;

aber jetzt bin ich mir nicht sicher ob er mit dem:

Code: Alles auswählen

$jsmenu="menu2 = new Array();"; 
foreach($menu as $key => $item) { 
    $jsmenu.="menu2[$key] = "$item";"; 
}

meint das das, das oben ersetzen soll oder ergänzen soll.
aber ich denke am ehestens eher ergänzen, wenn ich mir dann das anschaue:

Code: Alles auswählen

<a href="javascript:void(0)" onClick="{postrow.DROPDOWNMENU2}return dropdownmenu(this, event, menu2, '330px')" onMouseout="delayhidemenu()">{postrow.POSTER_NAME}</a>

und diese ergänzung muss dann wohl mit ins javascript rein oder ins template selber.

wobei ich denke das $item vielleicht einfach nur ein platzhalter für dann $pm, $profile und co ist.
aber sicher bin ich mir da nicht, jedenfalls sagt er das man im javascript eine javascript version des array braucht wie es im php da ist.

es könnte sein das dies:

Code: Alles auswählen

$jsmenu="menu2 = new Array();"; 
foreach($menu as $key => $item) { 
    $jsmenu.="menu2[$key] = "$item";"; 
}

dann vielleicht so aussehn sollte:

Code: Alles auswählen

$jsmenu="menu2 = new Array();"; 
foreach($menu as $key => $pm) { 
    $jsmenu.="menu2[$key] = "$pm";"; 
}
foreach($menu as $key => $profile) { 
    $jsmenu.="menu2[$key] = "$profile";"; 
}

und so weiter, mit den restlichen funktionen, aber ob das jetzt stimmt und so gehn würde, keine ahnung.

ausserdem meint er das javascript array einen eigenen einzigartige namen haben sollten und das das array selber nicht im event handler rein sollte sondern einen eigenen javascript abschnitt bekommen sollte.

ich hoffe das das irgendwie hilft und ich glück habe mit meinen vermutungen *g*

keine ahnung ob das die sache wirklich vereinfachen würde: vielleicht nicht gleich versuchen das gesamte menü zu baun im forum.
sondern wie er es gemacht hat erstmal schaun das man es unter html zum laufen bekommt und danach dann erstmal nur mit einem menüpunkt arbeiten im forum.
falls das funktioniert dann weitere menüpunkte hinzufügen bis man dann alles zusammen hat.

Mehrpack