Problem mit Javascript

Allgemeiner Support zum phpBB 2 Board und phpBB 2 Modifikationen
Forumsregeln
Auch wenn hier der Support für phpBB 2 weiterhin aufrecht erhalten bleibt, weisen wir darauf hin, dass das phpBB 2 nicht mehr offiziell unterstützt und weiterentwickelt wird!
Antworten
Darezettl
Beiträge: 589
Registriert: So 31.Jul, 2005 23:43

Problem mit Javascript

Beitrag von Darezettl »

Ich verwende in der viewforum page einenn mod, der beim überfahren des thread titels mit der maus eine vorschau des themas anzeigt.
ich hätte es gerne dass diese vorschau aber erst kommt wenn man 2 sekunden oder länger mit der maus auf dem thread titel ist. wie geht das?

Code: Alles auswählen

<script language="Javascript" type="text/javascript">
<!--
var agt = navigator.userAgent.toLowerCase();
var originalFirstChild;

function createTitle(which, string, x, y)
{
	// record the original first child (protection when deleting)
	if (typeof(originalFirstChild) == 'undefined')
	{
		originalFirstChild = document.body.firstChild;
	}

	x = document.all ? (event.clientX + document.body.scrollLeft) : x;
	y = document.all ? (event.clientY + document.body.scrollTop) : y;
	element = document.createElement('div');
	element.style.position = 'absolute';
	element.style.zIndex = 1000;
	element.style.visibility = 'hidden';
	excessWidth = 0;
	if (document.all)
	{
		excessWidth = 50;
	}
	excessHeight = 20;
	element.innerHTML = '<div class="queens1">Thema Vorschau</div><div class="queens2">' + string + '</div>';
	renderedElement = document.body.insertBefore(element, document.body.firstChild);
	renderedWidth = renderedElement.offsetWidth;
	renderedHeight = renderedElement.offsetHeight;

	// fix overflowing off the right side of the screen
	overFlowX = x + renderedWidth + excessWidth - document.body.offsetWidth;
	x = overFlowX > 0 ? x - overFlowX : x;

	// fix overflowing off the bottom of the screen
	overFlowY = y + renderedHeight + excessHeight - window.innerHeight - window.pageYOffset;
	y = overFlowY > 0 ? y - overFlowY : y;

	renderedElement.style.top = (y + 15) + 'px';
	renderedElement.style.left = (x + 15) + 'px';

	// windows versions of mozilla are like too fast here...we have to slow it down
	if (agt.indexOf('gecko') != -1 && agt.indexOf('win') != -1)
	{
		setTimeout("renderedElement.style.visibility = 'visible'", 1);
	}
	else
	{
		renderedElement.style.visibility = 'visible';
	}
}

function destroyTitle()
{
	// make sure we don't delete the actual page contents (javascript can get out of alignment)
	if (document.body.firstChild != originalFirstChild)
	{
		document.body.removeChild(document.body.firstChild);
	}
}
//-->
</script>

danke
Bild
Life begins @ 1/1000
Benutzeravatar
oxpus
Administrator
Beiträge: 28735
Registriert: Mo 27.Jan, 2003 22:13
Wohnort: Bad Wildungen
Kontaktdaten:

Beitrag von oxpus »

Bette den Aufruf bei onmouseover so ein:

Code: Alles auswählen

setTimeout("createTitle(......)", 2000);
Dann wird das erst nach 2000 Millisekunden (= 2 Sekunden) ausgeführt.
Karsten Ude
-={ Das Mädchen für alles }=-
Kein Support per Messenger, Email oder PN! Unaufgeforderte Nachrichten werden ignoriert!
No support per Messenger, Email or PM. Each unasked message will be ignored!
Darezettl
Beiträge: 589
Registriert: So 31.Jul, 2005 23:43

Beitrag von Darezettl »

Ich hätte es nun so probiert, aber das Teil kommt immer noch sofort wenn man mit der Maus drüber fährt:

Code: Alles auswählen

<a href="{topicrow.U_VIEW_TOPIC}" onmouseover="setTimeout(createTitle(this, '{topicrow.FIRST_POST}', event.pageX, event.pageY), 2000);" onmouseout="destroyTitle();" class="topictitle">{topicrow.TOPIC_TITLE}</a>
Bild
Life begins @ 1/1000
Benutzeravatar
oxpus
Administrator
Beiträge: 28735
Registriert: Mo 27.Jan, 2003 22:13
Wohnort: Bad Wildungen
Kontaktdaten:

Beitrag von oxpus »

Dann versuchs mal mit "window.settimeout...".
Karsten Ude
-={ Das Mädchen für alles }=-
Kein Support per Messenger, Email oder PN! Unaufgeforderte Nachrichten werden ignoriert!
No support per Messenger, Email or PM. Each unasked message will be ignored!
Darezettl
Beiträge: 589
Registriert: So 31.Jul, 2005 23:43

Beitrag von Darezettl »

So gehts auch nicht, es erfolgt weietrhin keine Zeitverzögerung.

Code: Alles auswählen

<a href="{topicrow.U_VIEW_TOPIC}" onmouseover="window.setTimeout(createTitle(this, '{topicrow.FIRST_POST}', event.pageX, event.pageY), 2000);" onmouseout="destroyTitle();" class="topictitle">{topicrow.TOPIC_TITLE}</a>
Hast noch an anderen Vorschlag, oxpus?
Bild
Life begins @ 1/1000
Benutzeravatar
oxpus
Administrator
Beiträge: 28735
Registriert: Mo 27.Jan, 2003 22:13
Wohnort: Bad Wildungen
Kontaktdaten:

Beitrag von oxpus »

Kommt es denn zu einem Javascrpt-Fehler? Dann wäre die Angabe hier erst recht defekt.
Oder Du packst den Aufruf in eine Funktion und rufst diese Funktion auf...

Viel mehr kann ich auch nur helfen, wenn ich das selber teste, aber da ist Zeitmangel der Gegner des Gedanken...
Karsten Ude
-={ Das Mädchen für alles }=-
Kein Support per Messenger, Email oder PN! Unaufgeforderte Nachrichten werden ignoriert!
No support per Messenger, Email or PM. Each unasked message will be ignored!
Darezettl
Beiträge: 589
Registriert: So 31.Jul, 2005 23:43

Beitrag von Darezettl »

Nein es kommt zu keinem Fehler.
Wie würde das mit der Funktion gehen?
Kannst du mir da helfen?
Bild
Life begins @ 1/1000
Gichtus
Beiträge: 107
Registriert: Mi 21.Jan, 2004 23:13
Wohnort: Arnstadt

Beitrag von Gichtus »

a) Warum nicht einfach Zeilen 46 und 50 ändern? Dadurch wird die Funktion zwar sofort ausgeführt, aber erst nach 2000ms auf sichtbar geschaltet. (sollte jedenfalls)

b) setTimeout() benötigt als ersten Parameter einen String, der den Befehl enthält, nicht den Befehl selbst. (bzw. muss der Befehl als String übergeben werden. (z.B.: 'befehl();', oder 'befehl('+variable+');' )

G
Bild
Darezettl
Beiträge: 589
Registriert: So 31.Jul, 2005 23:43

Beitrag von Darezettl »

Hi Gichtus, das hätte ich mir auch schon überlegt bzw. probiert aber ich schaffte es nicht. Könntest du mal genau posten, wie das Javascript dann aussehen müsste?
Bild
Life begins @ 1/1000
Gichtus
Beiträge: 107
Registriert: Mi 21.Jan, 2004 23:13
Wohnort: Arnstadt

Beitrag von Gichtus »

Code: Alles auswählen

<script language="Javascript" type="text/javascript">
  <!--
    var agt = navigator.userAgent.toLowerCase();
    var originalFirstChild;
    function createTitle(which, string, x, y)
      {
      // record the original first child (protection when deleting)
      if (typeof(originalFirstChild) == 'undefined')
        {
        originalFirstChild = document.body.firstChild;
        }
      x = document.all ? (event.clientX + document.body.scrollLeft) : x;
      y = document.all ? (event.clientY + document.body.scrollTop) : y;
      element = document.createElement('div');
      element.style.position = 'absolute';
      element.style.zIndex = 1000;
      element.style.visibility = 'hidden';
      excessWidth = 0;
      if (document.all)
        {
        excessWidth = 50;
        }
      excessHeight = 20;
      element.innerHTML = '<div class="queens1">Thema Vorschau</div><div class="queens2">' + string + '</div>';
      renderedElement = document.body.insertBefore(element, document.body.firstChild);
      renderedWidth = renderedElement.offsetWidth;
      renderedHeight = renderedElement.offsetHeight;

      // fix overflowing off the right side of the screen
      overFlowX = x + renderedWidth + excessWidth - document.body.offsetWidth;
      x = overFlowX > 0 ? x - overFlowX : x;

      // fix overflowing off the bottom of the screen
      overFlowY = y + renderedHeight + excessHeight - window.innerHeight - window.pageYOffset;
      y = overFlowY > 0 ? y - overFlowY : y;

      renderedElement.style.top = (y + 15) + 'px';
      renderedElement.style.left = (x + 15) + 'px';

      setTimeout("renderedElement.style.visibility = 'visible'", 2000);

      }


    function destroyTitle()
      {
      // make sure we don't delete the actual page contents (javascript can get out of alignment)
      if (document.body.firstChild != originalFirstChild)
        {
        document.body.removeChild(document.body.firstChild);
        }
      }
  //-->
</script>
Der Aufruf:

Code: Alles auswählen

<a href="{topicrow.U_VIEW_TOPIC}" onmouseover="createTitle(this, '{topicrow.FIRST_POST}', event.pageX, event.pageY);" onmouseout="destroyTitle();" class="topictitle">{topicrow.TOPIC_TITLE}</a>
Bild
Darezettl
Beiträge: 589
Registriert: So 31.Jul, 2005 23:43

Beitrag von Darezettl »

Das klappt prima.
Danke dir!


edit: dann nur noch eins was mich stört:

das vorschau-"fenster" ist ja immer unterhalb der mausposition platziert.
wenn man jetzt nen langen thread-titel hat und sehr weit rechts des titels mit der maus drüber fährt, ist das vorschau-fenster manchmal über den rechten bildschirm rand raus und es erscheint ein unschöner scrollbalken.

wie müsste man es ändern, dass das fenster - egal wie weit rechts man über den thread titel drüber fährt - niemals über den bildschirm raus geht?
Bild
Life begins @ 1/1000
Benutzeravatar
oxpus
Administrator
Beiträge: 28735
Registriert: Mo 27.Jan, 2003 22:13
Wohnort: Bad Wildungen
Kontaktdaten:

Beitrag von oxpus »

Das macht der Browser selber und ist nicht wirklich steuerbar.
Bibliotheken wie overLIB sind da besser, abe auch nicht einfach zu handhaben...
Karsten Ude
-={ Das Mädchen für alles }=-
Kein Support per Messenger, Email oder PN! Unaufgeforderte Nachrichten werden ignoriert!
No support per Messenger, Email or PM. Each unasked message will be ignored!
Darezettl
Beiträge: 589
Registriert: So 31.Jul, 2005 23:43

Beitrag von Darezettl »

Gichtus weißt du was dazu?
Bild
Life begins @ 1/1000
Gichtus
Beiträge: 107
Registriert: Mi 21.Jan, 2004 23:13
Wohnort: Arnstadt

Beitrag von Gichtus »

Vom Prinzip her ganz simpel:
Für die Breite:
-finde die Bildschirmbreite heraus
-finde heraus, wie breit die Vorschau sein wird (bevor sie angezeigt wird - sonst gibt es u.U. eine Art "Flackern")
-wenn Mausposition+Vorschaubreite>Bildschirmbreite, dann verschiebe Vorschau nach links

Das ganze dann nochmal für die Bildschirmhöhe.

Habe das vor langer Zeit mal versucht, war aber für mich nicht so wichtig, besonders nachdem jeder Browser anders reagiert hat.

/e: gerade bemerkt: sowas ist schon im Code: Zeilen 29-35. Warum es manchmal nicht funktioniert, kann ich leider auch nicht beantworten.
Bild
Darezettl
Beiträge: 589
Registriert: So 31.Jul, 2005 23:43

Beitrag von Darezettl »

Naja habs jetzt mit css gelöst, also passt schon.

Aber jetzt was ganz anderes: Ich hätte gerne, dass im ersten div tag - sozusagen der header der vorschau - statt "thema vorschau" der titel des threads steht, der gerade ge-previewd wird, was ja mit der Variable {topicrow.TOPIC_TITLE} geht, innerhalb des switches
<-- BEGIN topicrow -->
<-- END topicrow -->

ist ja klar.

Nur bei mir geht es nicht, kann mir jemand sagen wieso???
Wenn ich es so mache, kommt gar kein Vorschau Fenster mehr.

Code: Alles auswählen

<script language="Javascript" type="text/javascript">
  <!--
    var agt = navigator.userAgent.toLowerCase();
    var originalFirstChild;
    function createTitle(which, string, x, y)
      {
      // record the original first child (protection when deleting)
      if (typeof(originalFirstChild) == 'undefined')
        {
        originalFirstChild = document.body.firstChild;
        }
      x = document.all ? (event.clientX + document.body.scrollLeft) : x;
      y = document.all ? (event.clientY + document.body.scrollTop) : y;
      element = document.createElement('div');
      element.style.position = 'absolute';
      element.style.zIndex = 1000;
      element.style.visibility = 'hidden';
      excessWidth = 0;
      if (document.all)
        {
        excessWidth = 50;
        }
      excessHeight = 20;
      <-- BEGIN topicrow -->
      element.innerHTML = '<div class="queens1">{topicrow.TOPIC_TITLE}</div><div class="queens2">' + string + '</div>';
      <!-- END topicrow -->
      renderedElement = document.body.insertBefore(element, document.body.firstChild);
      renderedWidth = renderedElement.offsetWidth;
      renderedHeight = renderedElement.offsetHeight;
      // fix overflowing off the right side of the screen
      overFlowX = x + renderedWidth + excessWidth - document.body.offsetWidth;
      x = overFlowX > 0 ? x - overFlowX : x;
      // fix overflowing off the bottom of the screen
      overFlowY = y + renderedHeight + excessHeight - window.innerHeight - window.pageYOffset;
      y = overFlowY > 0 ? y - overFlowY : y;
      renderedElement.style.top = (y + 15) + 'px';
      renderedElement.style.left = (x + 15) + 'px';
      setTimeout("renderedElement.style.visibility = 'visible'", 900);
      }
    function destroyTitle()
      {
      // make sure we don't delete the actual page contents (javascript can get out of alignment)
      if (document.body.firstChild != originalFirstChild)
        {
        document.body.removeChild(document.body.firstChild);
        }
      }
  //-->
</script>
Wenn ich die Switches weglasse, erscheint das Fenster zwar wieder, aber ohne Text (im Header)!!
Bild
Life begins @ 1/1000
Benutzeravatar
oxpus
Administrator
Beiträge: 28735
Registriert: Mo 27.Jan, 2003 22:13
Wohnort: Bad Wildungen
Kontaktdaten:

Beitrag von oxpus »

Code: Alles auswählen

<-- BEGIN topicrow -->
Da fehlt was...








Code: Alles auswählen

<!-- BEGIN topicrow -->
Karsten Ude
-={ Das Mädchen für alles }=-
Kein Support per Messenger, Email oder PN! Unaufgeforderte Nachrichten werden ignoriert!
No support per Messenger, Email or PM. Each unasked message will be ignored!
Darezettl
Beiträge: 589
Registriert: So 31.Jul, 2005 23:43

Beitrag von Darezettl »

Ok, hab ich ausgebessert.
Es geht rotzdem nichts (Fehler haben sich nicht verändert).

was nun?
Bild
Life begins @ 1/1000
Benutzeravatar
oxpus
Administrator
Beiträge: 28735
Registriert: Mo 27.Jan, 2003 22:13
Wohnort: Bad Wildungen
Kontaktdaten:

Beitrag von oxpus »

Was meinst Du eigentlich mit "Preview"?
Karsten Ude
-={ Das Mädchen für alles }=-
Kein Support per Messenger, Email oder PN! Unaufgeforderte Nachrichten werden ignoriert!
No support per Messenger, Email or PM. Each unasked message will be ignored!
Darezettl
Beiträge: 589
Registriert: So 31.Jul, 2005 23:43

Beitrag von Darezettl »

hab mal n Screenshot gemacht.
Und da wo steht "Thema Vorschau" hätt ich halt gern den Thread-Titel
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.
Bild
Life begins @ 1/1000
Benutzeravatar
oxpus
Administrator
Beiträge: 28735
Registriert: Mo 27.Jan, 2003 22:13
Wohnort: Bad Wildungen
Kontaktdaten:

Beitrag von oxpus »

Ach so, daß, ja jetzt bin ich wieder im Bilde.

Nun ja, wenn Du den Titel so übergibst, kann das Script ihn nicht verarbeiten, da die Anweisung irrführender Weise mehrfach vorkommt.
Der Switch sorgt dann für den Fehler.
Warum übergibst Du nicht einfach beim Aufruf von createTitle(which, string, x, y) den Topic-Titel mit? Dann kann der im Script eingesetzt und damit angezeigt werden...
Karsten Ude
-={ Das Mädchen für alles }=-
Kein Support per Messenger, Email oder PN! Unaufgeforderte Nachrichten werden ignoriert!
No support per Messenger, Email or PM. Each unasked message will be ignored!
Darezettl
Beiträge: 589
Registriert: So 31.Jul, 2005 23:43

Beitrag von Darezettl »

Äh.. ja und wie sähe der code dazu dann aus?
weil da kann ich mir jetzt nichts drunter vorstellen wie das zu machen wär.. ;)
Bild
Life begins @ 1/1000
Benutzeravatar
oxpus
Administrator
Beiträge: 28735
Registriert: Mo 27.Jan, 2003 22:13
Wohnort: Bad Wildungen
Kontaktdaten:

Beitrag von oxpus »

Das wäre das Script:

Code: Alles auswählen

<script language="Javascript" type="text/javascript">
  <!--
    var agt = navigator.userAgent.toLowerCase();
    var originalFirstChild;
    function createTitle(which, string, x, y, topic_title)
      {
      // record the original first child (protection when deleting)
      if (typeof(originalFirstChild) == 'undefined')
        {
        originalFirstChild = document.body.firstChild;
        }
      x = document.all ? (event.clientX + document.body.scrollLeft) : x;
      y = document.all ? (event.clientY + document.body.scrollTop) : y;
      element = document.createElement('div');
      element.style.position = 'absolute';
      element.style.zIndex = 1000;
      element.style.visibility = 'hidden';
      excessWidth = 0;
      if (document.all)
        {
        excessWidth = 50;
        }
      excessHeight = 20;
      element.innerHTML = '<div class="queens1">'+topic_title+'</div><div class="queens2">' + string + '</div>';
      renderedElement = document.body.insertBefore(element, document.body.firstChild);
      renderedWidth = renderedElement.offsetWidth;
      renderedHeight = renderedElement.offsetHeight;
      // fix overflowing off the right side of the screen
      overFlowX = x + renderedWidth + excessWidth - document.body.offsetWidth;
      x = overFlowX > 0 ? x - overFlowX : x;
      // fix overflowing off the bottom of the screen
      overFlowY = y + renderedHeight + excessHeight - window.innerHeight - window.pageYOffset;
      y = overFlowY > 0 ? y - overFlowY : y;
      renderedElement.style.top = (y + 15) + 'px';
      renderedElement.style.left = (x + 15) + 'px';
      setTimeout("renderedElement.style.visibility = 'visible'", 900);
      }
    function destroyTitle()
      {
      // make sure we don't delete the actual page contents (javascript can get out of alignment)
      if (document.body.firstChild != originalFirstChild)
        {
        document.body.removeChild(document.body.firstChild);
        }
      }
  //-->
</script>
und in der viewforum.php musst Du den Aufruf so einbauen:

Code: Alles auswählen

<a href="{topicrow.U_VIEW_TOPIC}" onmouseover="createTitle(this, '{topicrow.FIRST_POST}', event.pageX, event.pageY, '{topicrow.TOPIC_TITLE}');" onmouseout="destroyTitle();" class="topictitle">{topicrow.TOPIC_TITLE}</a>
Zuletzt geändert von oxpus am Di 05.Dez, 2006 18:10, insgesamt 1-mal geändert.
Karsten Ude
-={ Das Mädchen für alles }=-
Kein Support per Messenger, Email oder PN! Unaufgeforderte Nachrichten werden ignoriert!
No support per Messenger, Email or PM. Each unasked message will be ignored!
Darezettl
Beiträge: 589
Registriert: So 31.Jul, 2005 23:43

Beitrag von Darezettl »

Super, danke dir! ;)


edit: eins noch.
und zwar hätte ich gern wenn der erste beitrage ein zitat oder code enthält dieser nicht angezeigt wird, sondern stattdessen ein text dass man den beitrag öffnen soll.

im ursprünglichen code des mods ist sowas für den hide bbcode mod ja schon vorgesehen:

Code: Alles auswählen

//
// display first message as title by emrag ;)
//

		//
		// character limit for hover title
		//
		$chr_limit = '1000';

		$sql = "SELECT p.*,  pt.post_text, pt.post_id, pt.bbcode_uid
			FROM " . POSTS_TABLE . " p, " . POSTS_TEXT_TABLE . " pt
			WHERE p.topic_id = $topic_id
				AND pt.post_id = p.post_id
			ORDER BY p.post_time
			LIMIT 1";
		if ( !($result = $db->sql_query($sql)) )
		{
		   message_die(GENERAL_ERROR, 'Could not obtain topic information', '', __LINE__, __FILE__, $sql);
		}

		$row = $db->sql_fetchrow($result);
		$first_post = $row['post_text'];
		$first_post_bbcode_uid = $row['bbcode_uid'];

	//
	// if message is longer than character limit break message
	// and add "..." at the last of message
	//
	if (strlen($first_post) > $chr_limit)
	{
		$first_post = substr($first_post, 0, $chr_limit);
		$first_post .= '...';
	}

	//
	// If the board has HTML off but the post has HTML
	// on then we process it, else leave it alone
	//
	if ( !$board_config['allow_html'] )
	{
		if ( $row['enable_html'] )
		{
			$first_message = preg_replace('#(<)([\/]?.*?)(>)#is', "<\\2>", $first_post);
		}
	}

	//
	// Parse message for BBCode if required
	//
	if ( $board_config['allow_bbcode'] )
	{
		if ( $first_post_bbcode_uid != '' )
		{
			$first_post = ( $board_config['allow_bbcode'] ) ? bbencode_second_pass($first_post, $first_post_bbcode_uid) : preg_replace('/\:[0-9a-z\:]+\]/si', ']', $first_post);
		}
	}

	//
	// Parse smilies
	//
	if ( $board_config['allow_smilies'] )
	{
		if ( $row['enable_smilies'] )
		{
			$first_post = smilies_pass($first_post);
		}
	}

	//
	// replace \n with <br />
	//
	$first_post = preg_replace("/[\n\r]{1,2}/", '<br />', $first_post);

	//
	// escape from double and/or single quotes
	//
	$first_post = str_replace(array('"', '\''), array('"', '\\\''), $first_post);

	//
	// if message have [hide] [/hide] tags
	// there will be an error message instead of normal message
	//
	if ( preg_match("/\[hide\]/i", $first_post) && preg_match("/\[\/hide\]/i", $first_post))
	{
		$first_post = '<b>Protected message:</b><br>If you are a <b>*registered user*</b> :<br>you must post a reply to this topic to see the message';
	}

//
// display first message as title by emrag ;)
//
ich wolltedas für [ code ] und [ quote ] erweitern, aber das klappt nicht.
so hätt ichs gemacht (nach dem zeugs für den hide mod):

Code: Alles auswählen

if ( preg_match("/\[code\]/i", $first_post) && preg_match("/\[\/code\]/i", $first_post))
	{
		$first_post = '<b>Protected message:</b><br>If you are a <b>*registered user*</b> :<br>you must post a reply to this topic to see the message';
	}
if ( preg_match("/\[quote\]/i", $first_post) && preg_match("/\[\/quote\]/i", $first_post))
	{
		$first_post = '<b>Protected message:</b><br>If you are a <b>*registered user*</b> :<br>you must post a reply to this topic to see the message';
	}

Aber es werden weiterhin beide tags im preview fenster angezeigt. was ist falsch und wie gehts richtig???
Zuletzt geändert von Darezettl am Di 05.Dez, 2006 18:47, insgesamt 1-mal geändert.
Bild
Life begins @ 1/1000
Antworten