JavaScript Fenster für Benutzer anzeigen

Professional

Friday, January 28th 2011, 10:49pm

HiHo,

Mir fällt leider kein Begriff ein aber ich versuch es mal zu beschreiben.
Wenn man eine bestimmte Seite öffnet soll sich eine Art popup öffnen, nur das dieses eine kleine Info für die User bereit stellt.
Genauer gesagt, wenn ein User eine bestimmte Foren ID aufruft soll sich ein kleies javascript fenster mit Infos öffen.
Kennt da wer was?

This post has been edited 1 times, last edit by "Fragz" (Jan 29th 2011, 9:51am)

Torben Brodt

Administrator

Posts: 8,454

2

Saturday, January 29th 2011, 1:40pm

Wie soll das denn aussehen?

Ein Fenster, also Popup?
Ein Div?

HTML Code

<!DOCTYPE html> 
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
  <title>jquery dialog - jsFiddle demo by TorbenBrodt</title> 
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.4.4.min.js'></script> 
 
  <link rel="stylesheet" type="text/css" href="/css/normalize.css"> 
  <link rel="stylesheet" type="text/css" href="/css/result-light.css"> 
 
  <style type='text/css'> 
 
  </style> 
 
  <script type='text/javascript'> 
  //<![CDATA[ 
  $(window).load(function(){
  $( "#dialog" ).dialog();
  });
  //]]> 
  </script> 
 
</head> 
<body> 
  <!DOCTYPE html> 
<html lang="en"> 
<base href="http://jqueryui.com/"/> 
<head> 
    <meta charset="utf-8"> 
    <title>jQuery UI Dialog - Default functionality</title> 
    <link rel="stylesheet" href="themes/base/jquery.ui.all.css"> 
    <script src="external/jquery.bgiframe-2.1.2.js"></script> 
    <script src="ui/jquery.ui.core.js"></script> 
    <script src="ui/jquery.ui.widget.js"></script> 
    <script src="ui/jquery.ui.mouse.js"></script> 
    <script src="ui/jquery.ui.draggable.js"></script> 
    <script src="ui/jquery.ui.position.js"></script> 
    <script src="ui/jquery.ui.resizable.js"></script> 
    <script src="ui/jquery.ui.dialog.js"></script> 
</head> 
<body> 
 
<div id="dialog" title="Basic dialog"> 
    <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p> 
</div> 
 
</body> 
</html> 
 
</body> 
 
 
</html>

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

Fragz

Professional

Posts: 256

3

Saturday, January 29th 2011, 2:03pm

Genau sowas.

Das wenn man zb die index.php aufruft die index geöffnet wird und zusätzlich die Box "Basic dialog"
Man muss sie auch nicht verschieben können.

Div währe mir lieber als popup

Torben Brodt

Administrator

Posts: 8,454

4

Saturday, January 29th 2011, 4:07pm

wenn es nicht so fancy sein soll, dann machs einfach mit CSS und position:absolute.
Ansonsten nimmst du einfach die Jquery Lösung aus meinem Posting.
Lg

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

Fragz

Professional

Posts: 256

5

Saturday, January 29th 2011, 8:15pm

HiHo,

Also NUR css kommt nicht in Frage. Man sollte die eingeblendete Seite auch schliessen können.
Deon Script ist schon das perfekte Beispiel.

Fragz

Professional

Posts: 256

6

Saturday, January 29th 2011, 8:52pm

ok nu hab ich was gefunden.

HTML Code

<a href="javascript:showDialog('Success','Your request has been successfully received.','success');">Success</a>

Wie kann ich es den anstellen das man keinen Link klicken muss sondern beim aufruf der Seite es sofort eingeblendet wird?

Torben Brodt

Administrator

Posts: 8,454

7

Saturday, January 29th 2011, 8:56pm

entweder mit <body onload="showDialog(...)">
oder mit deinem Framework deiner Wahl:

	JavaScript Code
1 2 3	$(document).load(function(){ showDialog(...) });

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

Fragz

Professional

Posts: 256

8

Saturday, January 29th 2011, 9:15pm

Hm, das Problem ist, es muss in den php code

	PHP Quellcode
1 2 3 4	if ($f !== 2 ) { hier sollte die funktion aufgerufen werden }

JavaScript Code

1
2
3

$(document).load(function(){
  showDialog('Success','Your request has been successfully received.','success')
});

Torben Brodt

Administrator

Posts: 8,454

9

Sunday, January 30th 2011, 10:07am

Wo ist jetzt das Problem?

PHP Quellcode

if ($f !== 2 )
{
echo "$(document).load(function(){
  showDialog('Success','Your request has been successfully received.','success')
});";
}

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

Fragz

Professional

Posts: 256

10

Sunday, January 30th 2011, 10:17am

das er mir den js code als text ausgibt mit deinem beispiel

Torben Brodt

Administrator

Posts: 8,454

11

Sunday, January 30th 2011, 10:44am

So ein bisschen php musst du dir langsam mal selber aneigenen. Es handelt sich hier nur um ein echo. Das ist Lektion Nummer 1.
Fehlen tuen offensichtlich noch die script Tags die, die du ausgeben musst, siehe #3 und #7

PHP Quellcode

if ($f !== 2 )
{
echo '<script>';
echo "$(document).load(function(){
  showDialog('Success','Your request has been successfully received.','success')
});";
echo '</script>';
}

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

Fragz

Professional

Posts: 256

12

Sunday, January 30th 2011, 4:04pm

HiHo,

Sry, Manschmal setzt das Hirn einfach aus weil ich zu voreilig bin.

Fragz

Professional

Posts: 256

13

Monday, January 31st 2011, 8:30am

HiHo,

Ok irgendwie haut das ganze noch nicht wirklich.

Im Body Tag klappt es ohne Probleme. Auch wenn ich den Link anklicke klappt es.
Allerdings wenn ich den Code in php einfüge haut es nicht hin.

PHP Quellcode

echo "<script type=\"text/javascript\">" . chr(10);
  echo "$(document).load(function(){" . chr(10);
  echo "showDialog('Success','Your request has been successfully received.','success')" . chr(10);
  echo "}" . chr(10);
  echo '</script>' . chr(10);

Das Problem was ich habe bzw wo ich denke liegt darin das der PHP Code an der Falschen stelle ist um richtig zu funktionieren.
Der Code soll NUR ausgeführt werden wenn jemand zb hier im Forum auf "Thema erstellen" klickt. Sprich ich kann ihn nicht in den PHP Teil setzen der für den Header zuständig ist.
Es gibt in meinem Forum eine class_core.php, diese generiert den Header bis zum Body Tag. Die class_posting.php generiert die Postboxen etc und genau in diese File muss sie rein, ausserhalb den <head> und innerhalb von <body></body>

Kann man evtl mit hilfe von JS diese funktion aufrufen wenn der $_GET parameter f die 2 enthällt?
post.php?mode=new&f=2

Fragz

Professional

Posts: 256

14

Monday, January 31st 2011, 8:09pm

Ok ich habs nun anders gelöst.
Der Block der die Forenregeln im htm Dokument ausgibt habe ich gelöscht und die Funktion eingefügt.

Aus

Source code

{if $RULES != ''}
<div class="forum_rules">
	<h2>{$LANG.forum_rules_set}</h2>
	<br />
	{if $IS_RULES_LINK}
		{$LANG.forum_rules_text}
		<br /><br />
		<a href="topic.{$EXT}?t={$RULES}" target="_blank">{$LANG.forum_rules_click}</a>
	{else}
		{$RULES}
	{/if}
</div>
{/if}

wurde

	Source code
1 2 3 4 5 6	{if $RULES != ''} <script language="JavaScript" type="text/javascript"> showDialog('{$LANG.forum_rules_set}','{$RULES}','success') </script> {/if}

Ohne den Platzhalter {$RULES} der die Regeln ausgibt klappt es, sprich wenn ich es durch einen Text ersetze. Mit dem Platzhalter nicht.
Als Template ENgine nutze ich Smarty. Hat dafür wer einen Tip?

EDIT: Ok, js kommt wohl mit mit html tags klar die sich im Text befinden.

This post has been edited 1 times, last edit by "Fragz" (Jan 31st 2011, 9:28pm)

Scriptheld

Unregistered

15

Monday, January 31st 2011, 10:12pm

JavaScript String dürfen keine Zeilenumbrüche enthalten. Diese müssen escapet werden. Schau dir mal das Tutorial an: JSON: PHP und JavaScript

Ausschnitt:

PHP Quellcode

<?php
$data = 'Test
Test';
$json = json_encode($data);
?>
<script type="text/javascript">
// JavaScript Datenerhebung
var json = '<?= $json ?>';

Fragz

Professional

Posts: 256

16

Wednesday, February 2nd 2011, 4:08pm

HiHo,

Also im js Code ist zu finden

	JavaScript Code
1 2 3	dialogtitle.innerHTML = title; dialogcontent.className = type; dialogcontent.innerHTML = message;

Normal sollte dies doch dann klappen oder Täusche ich mich da?

JavaScript Code

// build/show the dialog box, populate the data and call the fadeDialog function //
function showDialog(title,message,type,autohide) {
  if(!type) {
    type = 'error';
  }
  var dialog;
  var dialogheader;
  var dialogclose;
  var dialogtitle;
  var dialogcontent;
  var dialogmask;
  if(!document.getElementById('dialog')) {
    dialog = document.createElement('div');
    dialog.id = 'dialog';
    dialogheader = document.createElement('div');
    dialogheader.id = 'dialog-header';
    dialogtitle = document.createElement('div');
    dialogtitle.id = 'dialog-title';
    dialogclose = document.createElement('div');
    dialogclose.id = 'dialog-close'
    dialogcontent = document.createElement('div');
    dialogcontent.id = 'dialog-content';
    dialogmask = document.createElement('div');
    dialogmask.id = 'dialog-mask';
    document.body.appendChild(dialogmask);
    document.body.appendChild(dialog);
    dialog.appendChild(dialogheader);
    dialogheader.appendChild(dialogtitle);
    dialogheader.appendChild(dialogclose);
    dialog.appendChild(dialogcontent);;
    dialogclose.setAttribute('onclick','hideDialog()');
    dialogclose.onclick = hideDialog;
  } else {
    dialog = document.getElementById('dialog');
    dialogheader = document.getElementById('dialog-header');
    dialogtitle = document.getElementById('dialog-title');
    dialogclose = document.getElementById('dialog-close');
    dialogcontent = document.getElementById('dialog-content');
    dialogmask = document.getElementById('dialog-mask');
    dialogmask.style.visibility = "visible";
    dialog.style.visibility = "visible";
  }
  dialog.style.opacity = .00;
  dialog.style.filter = 'alpha(opacity=0)';
  dialog.alpha = 0;
  var width = pageWidth();
  var height = pageHeight();
  var left = leftPosition();
  var top = topPosition();
  var dialogwidth = dialog.offsetWidth;
  var dialogheight = dialog.offsetHeight;
  var topposition = top + (height / 3) - (dialogheight / 2);
  var leftposition = left + (width / 2) - (dialogwidth / 2);
  dialog.style.top = topposition + "px";
  dialog.style.left = leftposition + "px";
  dialogheader.className = type + "header";
  dialogtitle.innerHTML = title;
  dialogcontent.className = type;
  dialogcontent.innerHTML = message;
  var content = document.getElementById(WRAPPER);
  dialogmask.style.height = content.offsetHeight + 'px';
  dialog.timer = setInterval("fadeDialog(1)", TIMER);
  if(autohide) {
    dialogclose.style.visibility = "hidden";
    window.setTimeout("hideDialog()", (autohide * 1000));
  } else {
    dialogclose.style.visibility = "visible";
  }
}

Torben Brodt

Administrator

Posts: 8,454

17

Thursday, February 3rd 2011, 8:38am

Das Problem ist wie du die PHP Inhalte an JavaScript übergibst.
$LANG.forum_rules_set und $RULES dürfen keine Zeilenumbrüche oder Anführungszeichen enthalten. Deswegen musst du sie JSON enkodieren.
Schau mal in den genannten Wiki Beitrag.

Latest blogs: Neuer EX4 Server, Java EE Summit im Juni in München, Kostenlos zur Cebit + Windows 8 Entwickler Schulung

Coder Forum