Antworten auf deine Fragen:
Neues Thema erstellen

Brauche hilfe bei popup box

shadownight

Nicht mehr ganz neu hier

Hallo liebe Community ich benoetige mal wieder eure hilfe.
Ich moechte eine Popup box erstellen die wenn z.B eine Nachricht erhaelt kurtzt auftaucht und das mann sie dann wieder schliessen kann doch ich weis nicht so recht wie ich das bewerkstelligen soll.
Hoffe ihr koennt mir helfen.Danke schonmal im vorraus
 

MyBad

localhorst

AW: Brauche hilfe bei popup box

Geht es dir nun um das Popup ansich oder um die Möglichkeit eine Info bei neuer Nachricht einzublenden, ohne das der Nutzer interagieren (z. B. die Seite neu laden) muss?

Für letzteres bietet HTML5 eine schicke Möglichkeit:


Als Fallback könntest du per JS / AJAX alle X Sekunden / Minuten auf neue Nachrichten prüfen.
 

shadownight

Nicht mehr ganz neu hier

AW: Brauche hilfe bei popup box

mir geht es ehr um das letztere also das wenn der user ne neue naricht erhaelt soll kurz ne info box auftauchen wo z.B steht " neue nachricht von user erhalten"

Der link sieht ganz interessant aus vielen dank fier deine antwort
 

shadownight

Nicht mehr ganz neu hier

AW: Brauche hilfe bei popup box

Also ich das mal probiert mit dem Server pushen in HTML aber ich verstehe nicht wie ich das mit der DB machen soll hier mal mein versuch

<?php
error_reporting("E_ALL");
include 'includes/config.inc.php';
include 'includes/functions.php';

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Protected-Studios</title>
<link rel="stylesheet" type="text/css" href="includes/dropdown_login.css" media="screen" />
<script type="text/javascript" src="includes/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="includes/jquery-ui-1.8.23.custom.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
$('#login-trigger').click(function(){
$(this).next('#login-content').slideToggle();
$(this).toggleClass('active');

if ($(this).hasClass('active')) $(this).find('span').html('▲')
else $(this).find('span').html('▼')
})
});
</script>
<script type="text/javascript" language="javascript">
// Prüfen ob der Browser diese Events unterstützt
// Wenn nein, vielleicht Fallback mit AJAX
if(typeof(EventSource)!=="undefined") {
// Neues Objekt erstellen, EventSource bekommt den Pfad zum Serverscript
// das die Updates liefert.
var serverStream = new EventSource("client_pusher.php");
// Diese Funktion wird ausgeführt, sobald eine neue Nachricht
// vom Server gepusht wurde.
serverStream.onmessage = function(event) {
// Daten vom Server sind per event.data zugreifbar
// Container mit den neuen Daten updaten.
document.getElementById("realtime_data").innerHTML = event.data;
};
}
else {
// Hier eventuell Ajax Fallback
document.getElementById("realtime_data").innerHTML =
"Update deinen beschissenen Steinzeit-Browser";
}
</script>
<style type="text/css">

#dropmenudiv{
position:absolute;
border:1px solid black;
border-bottom-width: 0;
font:normal 14px Verdana;
line-height:17px;
z-index:100;
background-image:url(main_images/navi_style_dd.jpg);
}

#dropmenudiv a{
width: 100%;
text-align:center;
display: block;
text-indent: 0px;
border-bottom: 1px solid black;
padding: 1px 0 ;
text-decoration: none;
font-weight: none;
color:#222222;
}

#dropmenudiv a:hover{ /*hover background image*/
background-image:url(main_images/navi_style_h.jpg);
color:#transparent;

}

.navi{
text-align:center;
font-family:Verdana, Geneva, sans-serif;
text-decoration:none;
color:#222222;
}
.navi a{
text-align:center;
font-family:Verdana, Geneva, sans-serif;
text-decoration:none;
color:#999;
}
.navi a:hover{
text-align:center;
font-family:Verdana, Geneva, sans-serif;
text-decoration:none;
color:#06F;
}
body {
background-image: url();
background-color: #000000;
}
</style>

<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 1
var menu1=new Array()
menu1[0]='<a href="index.php?site=news"><font color="#b1b1b1">News</font></a>'
menu1[1]='<a href="index.php?site=news&action=archiv"><font color="#b1b1b1">News Archiv</font></a>'
menu1[2]='<a href="index.php?site=articles"><font color="#b1b1b1">Articles</font></a>'
menu1[3]='<a href="index.php?site=history"><font color="#b1b1b1">History</font></a>'
menu1[4]='<a href="index.php?site=links"><font color="#b1b1b1">Links</font></a>'
menu1[5]='<a href="index.php?site=about"><font color="#b1b1b1">About us</font></a>'

//Contents for menu 2, and so on
var menu2=new Array()
menu2[0]='<a href="index.php?site=members"><font color="#b1b1b1">Members</font></a>'
menu2[1]='<a href="index.php?site=clanwars"><font color="#b1b1b1">Clanwars</font></a>'
menu2[2]='<a href="index.php?site=calendar"><font color="#b1b1b1">Calendar</font></a>'
menu2[3]='<a href="index.php?site=challenge"><font color="#b1b1b1">Fight us</font></a>'
menu2[4]='<a href="index.php?site=awards"><font color="#b1b1b1">Awards</font></a>'
menu2[5]='<a href="index.php?site=sponsors"><font color="#b1b1b1">Sponsors</font></a>'

//Contents for menu 3, and so on
var menu3=new Array()
menu3[0]='<a href="index.php?site=forum"><font color="#b1b1b1">Forum</font></a>'
menu3[1]='<a href="index.php?site=guestbook"><font color="#b1b1b1">Guestbook</font></a>'
menu3[2]='<a href="index.php?site=gallery"><font color="#b1b1b1">Gallery</font></a>'
menu3[3]='<a href="index.php?site=whoisonline"><font color="#b1b1b1">Who is online</font></a>'
menu3[4]='<a href="index.php?site=newsletter"><font color="#b1b1b1">Newsletter</font></a>'
menu3[5]='<a href="index.php?site=contact"><font color="#b1b1b1">Contact</font></a>'

//Contents for menu 4, and so on
var menu4=new Array()
menu4[0]='<a href="index.php?site=files"><font color="#b1b1b1">Downloads</font></a>'
menu4[1]='<a href="index.php?site=linkus"><font color="#b1b1b1">Link us</font></a>'
menu4[2]='<a href="index.php?site=joinus"><font color="#b1b1b1">Join us</font></a>'
menu4[3]='<a href="index.php?site=search"><font color="#b1b1b1">Search</font></a>'
menu4[4]='<a href="index.php?site=polls"><font color="#b1b1b1">Polls</font></a>'
menu4[5]='<a href="index.php?site=imprint"><font color="#b1b1b1">Imprint</font></a>'



var menuwidth='165px' //default menu width
var menubgcolor='transparent' //menu bgcolor
var disappeardelay=250 //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>
<style type="text/css">
<!--
body {
background-color: #101010;
}
-->
</style>

</head>

<body>
<table border="0" cellpadding="0" cellspacing="0" align="center" width="1280">
<tr>
<td background="main_images/overhead.png" height="47">
<?php
if(empty($_SESSION["username"]))
{
echo '<nav>
<ul>
<li id="login">
<a id="login-trigger" href="#">
<font color="#06F">Log in <span>?</span></font>
</a>
<div id="login-content">
<form action="login.php" method="post">
<fieldset id="inputs">
<input type="text" name="username" placeholder="Your email address">
<input type="password" name="passwort" placeholder="Password">
</fieldset>
<fieldset id="actions">
<input type="submit" value="Log in">
<label><input type="checkbox" checked="checked"> Keep me signed in</label>
</fieldset>
</form>
</div>
</li>
<li id="signup">
<a href="register.php"><font color="#06F">Sign up Free</font></a>
</li>
</ul>
</nav>';
}
else
{
echo '<nav>
<ul>
<li id="login">
<a id="login-trigger" href="#">
<font color="#06F">Log in <span>?</span></font>
</a>
<div id="login-content">
Herzlich willkommen '.$_SESSION["username"];
include 'client_pusher.php';
echo '<div id="realtime_data">Platzhalter</div>';
?>


<?php
echo '<br /><form action="logout.php">
<input type="submit" value="Logout">
</form>
</div>
</li>
</ul>
</nav>';
}
?>

So das ist der teil wo später die ausgabe gemacht werden soll.

und hier die Pusherdatei:

<?php
header('Content-Type: text/event-stream');
header('Cache-Control: no-cache');
$abfrage = "SELECT * FORM user_massages WHERE empfanger= '".$_SESSION['username']."' AND gelesen= 0";
$res = $db->query($abfrage)
while($row = $res->fetch_array())
{
echo 'data: '.'neue Nachricht erhalten';
}
flush();
?>

Aber irgent wie geht das nicht der liefert die daten nicht und gibt sie icht aus.

Hoffe könnt mir nochmal helfen
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.565
Beiträge
1.538.067
Mitglieder
67.488
Neuestes Mitglied
Andrew56524
Oben