✔ Effect.toggle funktioniert nicht bei php-Dateien.

F

FleyerShaver

Grünschnabel
Ich habe mir das Script von http://script.aculo.us/ runtergeladen. Jetzt habe ich es von meiner test.html so eingebaut:
HTML: 
  <script src="../../includes/javascripts/prototype.js" type="text/javascript"></script>
  <script src="../../includes/javascripts/scriptaculous.js" type="text/javascript"></script>
  <script src="../../includes/javascripts/unittest.js" type="text/javascript"></script>
  <a href="#" onclick="Effect.toggle('addgames','BLIND'); return false;">Gamelinks</a>
  <div id="addgames" style="display:none;"><div style="background-color:#ff8080;width:300px;border:2px solid red;padding:10px;">seergekfeqwöäogwegopgewopgewg</div></div>
Da funktioniert es perfekt.(siehe: http://www.gandc.de/infusions/arcade/test.html ) Wenn ich es jetzt aber versuche in eine php-Datei einzubauen funktioniert es nicht. Es pasiert überhaupt nichts. Hier ist der Code:
PHP: 
<a href="#" onclick="Effect.toggle('addgames','BLIND'); return false;">Gamelinks</a> | 
<a href="#" onclick="Effect.toggle('rateit','BLIND'); return false;">Game bewerten</a>

<?php
echo '
<div id="addgames" style="display:none;"><div style="background-color:#ff8080;width:600px;height:auto;border:2px solid red;padding:10px;">
    <table width="0" border="0">
  <tr>
    <td width>Link:</td>
    <td width=201><input type="text" value="&lt;a href=&quot;http://www.gandc.de/infusions/arcade/games.php?game_id='.$game['lid'].'&quot;&gt;'.$game['title'].'&lt;/a&gt; " readonly="true"></td>
  </tr>
  <tr>
    <td>Popup</td>
    <td><input type="text" value="&lt;a href=&quot;http://www.gandc.de/gamepopup.php?id='.$game['lid'].'&quot;  target=&quot;detail&quot; onclick=&quot;javascript:window.open(\'\',\'detail\',\'width='.$width.', height='.$height.', directories=no, toolbar=no, location=no, menubar=no, scrollbars=yes, status=no, resizable=no, dependent=no\')&quot;&gt;'.$game['title'].'&lt;/a&gt;" readonly="true"></td>
  </tr>
  <tr>
    <td>Iframe</td>
    <td><input type="text" value="&lt;iframe src=&quot;http://www.gandc.de/gameiframe.php?id='.$game['lid'].'&quot; height=&quot;100&quot; width=&quot;150&quot;marginheight=&quot;0&quot; marginwidth=&quot;0&quot; frameborder=&quot;0&quot;&gt;" readonly="true"></td>
  </tr>
</table></div></div>
';
echo '<div id="addgames" style="display:none;"><div style="background-color:#ff8080;width:600px;border:2px solid red;padding:10px;">Test</div></div>';
Die Seite dafür ist http://gandc.de/infusions/arcade/games.php?game_id=337 und es soll der toggle Effekt passieren wenn man und dem Game auf Gamelinks oder Game bewerten klickt. Weiß einer warum das so ist?
 
Hi,

ich könnte mir vorstellen, dass es an der Reihenfolge liegt, in der Du die externen JS-Dateien einbindest. Ich denke,
scriptaculous.js erwartet, dass die prototype.js bereits eingebunden ist.
Code: 
<script src="http://www.gandc.de/includes/javascripts/prototype.js" type="text/javascript"></script>
<script src="http://www.gandc.de/includes/javascripts/scriptaculous.js" language='JavaScript' type="text/javascript"></script>
Ciao
Quaese
 
Hi,

unabhängig davon solltest du die folgenden Quellcode-Zeilen innerhalb des Dokumentheaders <head> ... </head>, und nicht vor der Dokumenttyp-Deklaration notieren:

Code: 
<script src="../../infusions/arcade/inc/arcade.js" language="JavaScript" type="text/javascript"></script><style type="text/css">
/* ThemeOfficeMenu Style Sheet */

.ThemeOfficeMenu,.ThemeOfficeSubMenuTable
{
	font-family:	arial, verdana, sans-serif;
	font-size:	8pt;
	padding:	0;
	white-space:	nowrap;
	cursor:		pointer;
}

.ThemeOfficeSubMenu
{
	position:	absolute;
	visibility:	hidden;

	/*
	   Netscape/Mozilla renders borders by increasing
	   their z-index.  The following line is necessary
	   to cover any borders underneath
	*/
	z-index:	100;
	border:		0;
	padding:	0;

	overflow:	visible;
	border:		1px solid #8C867B;

	/*filter:progid:DXImageTransform.Microsoft.Shadow(color=#BDC3BD, Direction=135, Strength=4); */
}

.ThemeOfficeSubMenuTable
{
	overflow:	visible;
}

.ThemeOfficeMainItem,.ThemeOfficeMainItemHover,.ThemeOfficeMainItemActive,
.ThemeOfficeMenuItem,.ThemeOfficeMenuItemHover,.ThemeOfficeMenuItemActive
{
	border:		0;
	white-space:	nowrap;
}


.ThemeOfficeMainItem
{
	background-color:	#161616;
	font-size:	8pt;
	color: #808080;
	height: 10px;
	width: ;

}

.ThemeOfficeMainItemHover,.ThemeOfficeMainItemActive
{
	background-color:	#161616;
	font-size:	8pt;
	color: #808080;
	height: 10px;
	width: ;

}

.ThemeOfficeMenuItem
{
	background-color:	#161616;
}

.over
{
	color: Red;
	font-weight: bolder;
	font-style: italic
} 

.ThemeOfficeMenuItemHover,.ThemeOfficeMenuItemActive
{
	background-color:	#161616;
}

/* horizontal main menu */

.ThemeOfficeMainItem
{
	padding: 3px 1px 3px 1px;
	border: 0;
}

td.ThemeOfficeMainItemHover,td.ThemeOfficeMainItemActive
{
	padding:	0px;
	border-right:	1px solid #436ba3;
	border-left:	1px solid #436ba3;
}

.ThemeOfficeMainFolderLeft,.ThemeOfficeMainItemLeft,
.ThemeOfficeMainFolderText,.ThemeOfficeMainItemText,
.ThemeOfficeMainFolderRight,.ThemeOfficeMainItemRight
{
	background-color:	inherit;
}

/* vertical main menu sub components */

td.ThemeOfficeMainFolderLeft,td.ThemeOfficeMainItemLeft
{
	padding-top:	1px;
	padding-bottom:	1px;
	padding-left:	0px;
	padding-right:	1px;

	border-top:	1px solid #436ba3;
	border-bottom:	1px solid #436ba3;
	border-left:	1px solid #436ba3;

	background-color:	inherit;
}

td.ThemeOfficeMainFolderText,td.ThemeOfficeMainItemText
{
	padding-top:	1px;
	padding-bottom:	1px;
	padding-left:	4px;
	padding-right:	4px;

	border-top:	1px solid #436ba3;
	border-bottom:	1px solid #436ba3;

	background-color:	inherit;
	white-space:	nowrap;
	width: 100%;

}

td.ThemeOfficeMainFolderRight,td.ThemeOfficeMainItemRight
{
	padding-top:	1px;
	padding-bottom:	1px;
	padding-left:	0px;
	padding-right:	0px;

	border-top:	1px solid #436ba3;
	border-bottom:	1px solid #436ba3;
	border-right:	1px solid #436ba3;

	background-color:	inherit;
}

tr.ThemeOfficeMainItem td.ThemeOfficeMainFolderLeft,
tr.ThemeOfficeMainItem td.ThemeOfficeMainItemLeft
{
	padding-top:	2px;
	padding-bottom:	2px;
	padding-left:	1px;
	padding-right:	1px;

	white-space:	nowrap;

	border:		0;
	background-color:	inherit;

}

tr.ThemeOfficeMainItem td.ThemeOfficeMainFolderText,
tr.ThemeOfficeMainItem td.ThemeOfficeMainItemText
{
	padding-top:	2px;
	padding-bottom:	2px;
	padding-left:	4px;
	padding-right:	4px;

	border:		0;
	background-color:	inherit;
}

tr.ThemeOfficeMainItem td.ThemeOfficeMainItemRight,
tr.ThemeOfficeMainItem td.ThemeOfficeMainFolderRight
{
	padding-top:	2px;
	padding-bottom:	2px;
	padding-left:	0px;
	padding-right:	1px;

	border:		0;
	background-color:	inherit;
}

/* sub menu sub components */

.ThemeOfficeMenuFolderLeft,.ThemeOfficeMenuItemLeft
{
	padding-top:	1px;
	padding-bottom:	1px;
	padding-left:	1px;
	padding-right:	2px;

	border-top:	1px solid #436ba3;
	border-bottom:	1px solid #436ba3;
	border-left:	1px solid #436ba3;

	background-color:	inherit;
	white-space:	nowrap;
}

.ThemeOfficeMenuFolderText,.ThemeOfficeMenuItemText
{
	padding-top:	1px;
	padding-bottom:	1px;
	padding-left:	4px;
	padding-right:	4px;

	border-top:	1px solid #436ba3;
	border-bottom:	1px solid #436ba3;

	background-color:	inherit;
	white-space:	nowrap;
	font-size:	10pt;
	height: 10px;
	color: ;
	width: ;

}

.ThemeOfficeMenuFolderRight,.ThemeOfficeMenuItemRight
{
	padding-top:	1px;
	padding-bottom:	1px;
	padding-left:	0px;
	padding-right:	0px;

	border-top:	1px solid #436ba3;
	border-bottom:	1px solid #436ba3;
	border-right:	1px solid #436ba3;

	background-color:	inherit;
	white-space:	nowrap;
}

.ThemeOfficeMenuItem .ThemeOfficeMenuFolderLeft,
.ThemeOfficeMenuItem .ThemeOfficeMenuItemLeft
{
	padding-top:	2px;
	padding-bottom:	2px;
	padding-left:	1px;
	padding-right:	2px;

	white-space:	nowrap;

	border: 	0px;
	background-color:	#DDE1E6;
}

.ThemeOfficeMenuItem .ThemeOfficeMenuFolderText,
.ThemeOfficeMenuItem .ThemeOfficeMenuItemText
{
	padding-top:	2px;
	padding-bottom:	2px;
	padding-left:	4px;
	padding-right:	4px;

	border:		0px;
	background-color:	inherit;
}

.ThemeOfficeMenuItem .ThemeOfficeMenuFolderRight,
.ThemeOfficeMenuItem .ThemeOfficeMenuItemRight
{
	padding-top:	2px;
	padding-bottom:	2px;
	padding-left:	0px;
	padding-right:	1px;

	border:		0;
	background-color:	inherit;
}

/* menu splits */

.ThemeOfficeMenuSplit
{
	margin:		1px;
	height:		1px;
	overflow:	hidden;
	background-color:	inherit;
	border-top:	1px solid #C6C3BD;
}

/* image shadow animation */

/*
	seq1:	image for normal
	seq2:	image for hover and active

	To use, in the icon field, input the following:
	<img class=seq1 src=normal.gif /><img class=seq2 src=hover.gif />
*/

.ThemeOfficeMenuItem img.seq1
{
	display:	inline;
}

.ThemeOfficeMenuItemHover seq2,
.ThemeOfficeMenuItemActive seq2
{
	display:	inline;
}

.ThemeOfficeMenuItem .seq2,
.ThemeOfficeMenuItemHover .seq1,
.ThemeOfficeMenuItemActive .seq1
{
	display:	none;
}


/* inactive settings */
div.inactive td.ThemeOfficeMainItemHover, div.inactive td.ThemeOfficeMainItemActive
{
	border-top: 0px;
	border-right:	1px solid #f1f3f5;
	border-left:	1px solid #f1f3f5;
}

div.inactive .ThemeOfficeMainItem {
	color: #bbb;

}

div.inactive span.ThemeOfficeMainItemText {
	color: #aaa;
}

div.inactive .ThemeOfficeMainItemHover, div.inactive .ThemeOfficeMainItemActive
{
	background-color:	#f1f3f5;
}

.menu-header {
	border-top: solid #C8D5DF; 
	border-top-width: 0px; 
	border-left: solid #C8D5DF; 
	border-left-width: 0px; 
	border-right: solid #C8D5DF; 
	border-right-width:0px; 
	border-bottom: solid #C8D5DF; 
	border-bottom-width:1px;
	padding:0px 14px 0px 14px;
}

</style>
	<script type="text/javascript">
 
		var mainSiteRoot ="http://gandc.de/";
		var menuImagesRoot = "http://gandc.de/" + "infusions/dhtmlmenu/images/";
		var menuItemFontColor ="";
		var menuItemHoverColor ="";
		var menuAccessLevel ="0";
		var userAccessGroups ="0";
	</script>


<script type='text/javascript' language='JavaScript' src='http://gandc.de/infusions/dhtmlmenu/scripts/JSCookMenu.js'></script>
<script type='text/javascript' language='JavaScript' src='http://gandc.de/infusions/dhtmlmenu/scripts/effect.js'></script>
 
Quaese hat gesagt.:
Hi,

ich könnte mir vorstellen, dass es an der Reihenfolge liegt, in der Du die externen JS-Dateien einbindest. Ich denke,
scriptaculous.js erwartet, dass die prototype.js bereits eingebunden ist.
Code: 
<script src="http://www.gandc.de/includes/javascripts/prototype.js" type="text/javascript"></script>
<script src="http://www.gandc.de/includes/javascripts/scriptaculous.js" language='JavaScript' type="text/javascript"></script>
Ciao
Quaese
Zum Vergrößern anklicken....

DAnke werd ich gleich ausprobieren daran hab ich gar nicht gedacht

EDIT: Ich hab jetzt diese Reihenfolge genommen:
HTML: 
<script src="../../includes/javascripts/prototype.js" type="text/javascript"></script>
  <script src="../../includes/javascripts/scriptaculous.js" type="text/javascript"></script>
  <script src="../../includes/javascripts/unittest.js" type="text/javascript"></script>
Leider funktioniert es immer noch nicht.
 
Zuletzt bearbeitet:
Hi,

es liegt offensichtlich an diesem Script:
Code: 
<script language="Javascript" type="text/javascript" src="http://game-toplist.de/image2.php?id=FleyerShaver"></script>
Wenn ich es auskommentiere, funktioniert die Toggle-Funktion.

Edit:
Ausserdem ist mir aufgefallen, dass Du die ID addgames zweimal verwendest. Im zweiten Fall soll
es sicherlich rateit lauten.

Ciao
Quaese
 
Zuletzt bearbeitet:
Quaese hat gesagt.:
Hi,

es liegt offensichtlich an diesem Script:
Code: 
<script language="Javascript" type="text/javascript" src="http://game-toplist.de/image2.php?id=FleyerShaver"></script>
Wenn ich es auskommentiere, funktioniert die Toggle-Funktion.

Edit:
Ausserdem ist mir aufgefallen, dass Du die ID addgames zweimal verwendest. Im zweiten Fall soll
es sicherlich rateit lauten.

Ciao
Quaese
Zum Vergrößern anklicken....

Danke da wer ich nie drauf gekommen
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück