JS-Menü mit Daten aus SQL-DB per PHP füllen

BG-Tomson · 22. November 2009

irgendwe habe ich das gefühl die funkton get_sub_menu() ist in der zeitbanner.php überhaupt nicht verfügbar. ich bekomme dort auch nix ausgegeben. hatte auch in der zeitbanner.php nochmal mit include(funktionen.php); die funktion an der stelle einzubinden, aber irgendwie ist das alles erfolglos.

BG-Tomson · 22. November 2009

Graube ich werde es morgennochmal versuchen und den ganzen js kram so gering wie möglich halten, also die zeitbanner.php ganz weg und die menuskript.js dann in menuskript.php umwandeln, so kmme ich nicht weiter, keine ahnung

Sven Mintel · 22. November 2009

Da lässt sich irgendwie nur schwer helfen, ich weiss ja nicht mal, wo du die Funktion stehen hast.

BG-Tomson · 23. November 2009

Jetzt ist es irgendwie ne unschöne Vermischung von JS und PHP

PHP:

<?php 

$totalButtons = 5;

$subInfo = get_sub_menu(1);


/*** SET BUTTONS' FILENAMES HERE ***/

for($i=0; $i<$totalButtons;$i++){
if ($i!=($zahl-1)) $f="r"; else $f="g";
$upSources[$i] = $f."button".($i+1)."up.png";
$overSources[$i] = $f."button".($i+1)."over.png";
}

// GENERATE SUB MENUS
for ($x=1; $x<=$totalButtons; $x++) {
	// SET EMPTY DIV FOR BUTTONS WITHOUT SUBMENU
	if (sizeof($subInfo[$x]) < 1 ) {
                ?><script type="text/javascript"> 
		document.write('<?php echo'<div id="submenu'.$x.'">';?>');
                </script><?php
	// SET DIV FOR BUTTONS WITH SUBMENU
	} 
        else 
        {
                ?><script type="text/javascript"> 
		document.write('<?php echo'<div id="submenu'.$x.'" class="dropmenu"';?>');
		document.write('onMouseOver="overSub=true;');
		document.write('setOverImg(\'' + (<?php echo $x; ?>) + '\',\'\');"');
		document.write('onMouseOut="overSub=false;');
		document.write('setTimeout(\'hideSubMenu(\\\'submenu' + (<?php echo $x; ?>) + '\\\')\',delay);');
		document.write('setOutImg(\'' + (<?php echo $x; ?>) + '\',\'\');">');
		document.write('<ul>');
                </script><?php


		for ($k=0; $k<sizeof($subInfo[$x]); $k++ ) {
                ?><script type="text/javascript"> 
	        document.write('<li>');
		document.write('<?php echo '<a href="'.$subInfo[$x][$k][menu_sub_url].'"';?>');
		document.write('<?php echo 'target="'.$subInfo[$x][$k][menu_sub_target].'"';?>');
		document.write('<?php echo $subInfo[$x][$k][menu_sub_text].'</a>';?>');
		document.write('</li>'); 
                </script><?php

       }	

                ?><script type="text/javascript"> 
  	        document.write('</ul>');
                </script><?php
      } 
     ?><script type="text/javascript"> 
     document.write('</div>');
     </script><?php
}
?>

Dann wird die Funktion aufgerufen und auch der Aufbau der Arrays ist Korrekt.

Nur Funktion ist weiter keine Vorhanden.

Weiß auch nicht so recht.

Sven Mintel · 23. November 2009

Schon vergessen?

Sven Mintel hat gesagt.:
In einer externen JS-Datei darfst du keine HTML-Tags/Kommentare notieren.

BG-Tomson · 23. November 2009

Ich weiß dass in dieser Datei noch immer am Anfang und Ende die HTML Anweisungen stehen, das war aber nur weil ich die "allein" getestet habe.

Wenn ich mir nun den Quelltext ansehe, dann steht dort auch das Richtige drin, dennoch werden keine Menüs angezeigt und die Submenüs werden auch nicht aufgeklappt. Woran kann das liegen?

PHP:

<script type="text/javascript">  
<?php
$totalButtons = 5; // get_menu($path);

$subInfo = get_sub_menu(1);
?>



//*** SET SUB MENU POSITION ( RELATIVE TO BUTTON ) ***//
xSubOffset = 124;
ySubOffset = 2;

//*** NO MORE SETTINGS BEYOND THIS POINT ***//
overSub = false;
delay = 1000;

/*** SET BUTTON'S FOLDER HERE ***/
buttonFolder = "http://www.tutorials.de/forum/images/menu/zeitbanner/";

upSources = new Array(rbutton1up.png,rbutton2up.png,rbutton3up.png,rbutton4up.png,rbutton5up.png);
overSources = new Array(rbutton1over.png,rbutton2over.png,rbutton3over.png,rbutton4over.png,rbutton5over.png);

/*** SET BUTTONS' FILENAMES HERE ***/

<?php
for($i=0; $i<$totalButtons; $i++){
if ($i!=($zahl-1)) $f="r"; else $f="g";
$upSources[$i] = $f."button".($i+1)."up.png";
$overSources[$i] = $f."button".($i+1)."over.png";
}

// GENERATE SUB MENUS
for ($x=1; $x<=$totalButtons; $x++) {
	// SET EMPTY DIV FOR BUTTONS WITHOUT SUBMENU
	if (sizeof($subInfo[$x]) < 1 ) {
          ?>              
		document.write('<?php echo'<div id="submenu'.$x.'">';?>');
          <?php
           
	// SET DIV FOR BUTTONS WITH SUBMENU
	} 
        else 
        {
         ?>
		document.write('<?php echo'<div id="submenu'.$x.'" class="dropmenu"';?>');
		document.write('onMouseOver="overSub=true;');
		document.write('setOverImg(<?php echo "'".$x."', 'submenu".$x."'"; ?>);"');
		document.write('onMouseOut="overSub=false;');
		document.write('setTimeout('hideSubMenu(<?php echo "\'submenu".$x."\')',";?>delay);");
		document.write('setOutImg(<?php echo "'".$x."','')"; ?>');
		document.write('<ul>');
         <?php

		for ($k=0; $k<sizeof($subInfo[$x]); $k++ ) {
         ?>
	        document.write('<li>');
		document.write('<?php echo '<a href="'.$subInfo[$x][$k][menu_sub_url].'"';?>');
		document.write('<?php echo 'target="'.$subInfo[$x][$k][menu_sub_target].'"';?>');
		document.write('<?php echo $subInfo[$x][$k][menu_sub_text].'</a>';?>');
		document.write('</li>'); 
        <?php
       }	
       ?>
  	        document.write('</ul>');
       <?php
      } 
      ?>
     document.write('</div>');
<?php
}
?>

//*** MAIN BUTTONS FUNCTIONS ***//
// PRELOAD MAIN MENU BUTTON IMAGES
function preload() {
	for ($x=0; $x<$totalButtons; $x++ ) {         
		buttonUp = new Image();
		buttonUp.src = buttonFolder + <?php echo $upSources[$x]; ?>;
		buttonOver = new Image();
		buttonOver.src = buttonFolder + <?php echo $overSources[$x]; ?>;  
	}
} 

// SET MOUSEOVER BUTTON
function setOverImg(But, ID) {
	document.getElementById('button' + But + ID).src = buttonFolder + overSources[But];
}

// SET MOUSEOUT BUTTON
function setOutImg(But, ID) {
	document.getElementById('button' + But + ID).src = buttonFolder + upSources[But];
}



//*** SUB MENU FUNCTIONS ***//
// GET ELEMENT ID MULTI BROWSER
function getElement(id) {
	return document.getElementById ? document.getElementById(id) : document.all ? document.all(id) : null; 
}

// GET X COORDINATE
function getRealLeft(id) { 
	var el = getElement(id);
	if (el) { 
		xPos = el.offsetLeft;
		tempEl = el.offsetParent;
		while (tempEl != null) {
			xPos += tempEl.offsetLeft;
			tempEl = tempEl.offsetParent;
		} 
		return xPos;
	} 
} 

// GET Y COORDINATE
function getRealTop(id) {
	var el = getElement(id);
	if (el) { 
		yPos = el.offsetTop;
		tempEl = el.offsetParent;
		while (tempEl != null) {
			yPos += tempEl.offsetTop;
			tempEl = tempEl.offsetParent;
		}
		return yPos;
	}
}

// MOVE OBJECT TO COORDINATE
function moveObjectTo(objectID,x,y) {
	var el = getElement(objectID);
	el.style.left = x;
	el.style.top = y;
}

// MOVE SUBMENU TO CORRESPONDING BUTTON
function showSubMenu(subID, buttonID) {
	hideAllSubMenus();
	butX = getRealLeft(buttonID);
	butY = getRealTop(buttonID);
	moveObjectTo(subID,butX+xSubOffset, butY+ySubOffset);
}

// HIDE ALL SUB MENUS
function hideAllSubMenus() {
	for ( x=0; x<<?php echo $totalButtons;?>; x++) {
		moveObjectTo("submenu" + (x+1) + "",-500, -500 );
	}
}

// HIDE ONE SUB MENU
function hideSubMenu(subID) {
	if ( overSub == false ) {
		moveObjectTo(subID,-500, -500);
	}
}

//preload();
</script>

Der Button wurde einmal aufgerufen um angezeigt zu werden.

HTML:

<a href="http://zeitbanner.f1-planet.de" onmouseover="setOverImg('3','');overSub=true;showSubMenu('submenu3','button3);" onmouseout="setOutImg('3','');overSub=false;setTimeout('hideSubMenu(\'submenu3\')',delay);" target="_blank"><img src="images/menu/zeitbanner/rbutton3up.png" border="0" id="button3" vspace="1" hspace="1"></a>

Danach soll er beim berühren die Farbe ändern (anderer Button) und bei bedarf ein Submenü aufgeklappt werden.

So sieht die Anzeige des Quelltextes aus:
Die Button 1 und 2 haben keine submenus nur der Button 3 hat in diesem Fall einen Menüpunkt.

Code:

document.write('<div id="submenu1">');
document.write('</div>');
              
document.write('<div id="submenu2">');
document.write('</div>');

document.write('<div id="submenu3" class="dropmenu"');
document.write('onMouseOver="overSub=true;');
document.write('setOverImg('3', 'submenu3');"');
document.write('onMouseOut="overSub=false;');
document.write('setTimeout('hideSubMenu(\'submenu3\')',delay);"');
document.write('setOutImg('3','')');
document.write('<ul>');
document.write('<li>');
document.write('<a href="http://www.f1-planet.de/new.php?path=zeitbanner/timebannerlist.php&id_nr=10"');document.write('target=""');
document.write('Mix 10</a>');
document.write('</li>'); 
document.write('</ul>');
document.write('</div>');

BG-Tomson · 24. November 2009

Komme leider damit nicht weiter.

Sven Mintel · 24. November 2009

Dein PHP-Code verursacht noch weitere Syntax-Fehler:

Code:

document.write('setOverImg('3', 'submenu3');"');
document.write('onMouseOut="overSub=false;');
document.write('setTimeout('hideSubMenu(\'submenu3\')',delay);"');
document.write('setOutImg('3','')');

Dort sind noch diverse Quotes, die du escapen musst.
Schau mal in der Fehlerkonsole nach, diese Fehler werden dort bestimmt gemeldet.

BG-Tomson · 24. November 2009

auch so keinen Erfolg

PHP:

        document.write('<?php echo'<div id="submenu'.$x.'" class="dropmenu"';?>');
        document.write('onMouseOver="overSub=true;');
        document.write('setOverImg(<?php echo "\'".$x."\', \'submenu".$x."\'"; ?>);"');
        document.write('onMouseOut="overSub=false;');
        document.write('setTimeout(\'hideSubMenu(<?php echo "\'submenu".$x."\')\',"; ?> delay););
        document.write('setOutImg(<?php echo "\'".$x."\',\'\')"; ?>">');
        document.write('<ul>');
         <?php

        for ($k=0; $k<sizeof($subInfo[$x]); $k++ ) {
         ?>
            document.write('<li>');
        document.write('<?php echo '<a href="'.$subInfo[$x][$k][menu_sub_url].'"';?>');
        document.write('<?php echo 'target="'.$subInfo[$x][$k][menu_sub_target].'"';?>');
        document.write('<?php echo $subInfo[$x][$k][menu_sub_text].'</a>';?>');
        document.write('</li>');

Sven Mintel · 24. November 2009

Sorry, aber ich bin kein Live-Debugger, für soetwas gibt es Werkzeuge, z.B. die erwähnte Fehlerkonsole. Dazu ist sie da.

JS-Menü mit Daten aus SQL-DB per PHP füllen

BG-Tomson

Grünschnabel

BG-Tomson

Grünschnabel

Sven Mintel

Mitglied

BG-Tomson

Grünschnabel

Sven Mintel

Mitglied

BG-Tomson

Grünschnabel

BG-Tomson

Grünschnabel

Sven Mintel

Mitglied

BG-Tomson

Grünschnabel

Sven Mintel

Mitglied

Neue Beiträge