DIV Layer einmalig mit Schließ-Funktion

Kai Schiffer

Hallo Zusammen,
ich möchte einen DIV Layer erstellen der nur einmal pro Besucher angezeigt wird in einer Session. Dieser soll über Klick zu schließen sein. Habe den Code soweit vorbeireitet nur bekomme ich irgendwie den Java Part nicht ans laufen.

PHP

<?php session_start();
if($_SESSION['welcome'] != true)
{ 
   $_SESSION['welcome'] = true;


   echo "<div id='layer'>Hier steht der Text, der nur 1x angezeigt werden soll.</br><span id='close'>X</span></div>";
}  { ?>
<script type="text/javascript">


$(document).ready(function(){ 
  $('#close').click(function() { 
    $('#layer').fadeOut(500);
  });
  window.setTimeout(function() {
    win = $(window);
    $('#layer')
      .css({
        'width': layerWidth + 'px',
        'height': layerHeight + 'px',
        'top': '0px',
        'left': '-' + layerWidth + 'px'
      })
      .animate({
        'top': win.height() / 2 - layerHeight / 2,
        'left': win.width() / 2 - layerWidth / 2
    }, 0000);
  }, 0000);
});
</script>
<?php } ?>

Alles anzeigen

synaptic

mag daran liegen dass es javascript ist und nicht java...

also du hast beim window geschafft die richtige funktion zu nehmen, wieso nimmst du dann an, dass layerwidth und layerheight bereits bekannt sind?
also das is jetzt mal ungetestet das, was mir direkt ins auge springt und aua schreit..
dann gibts tools wie firebug fürn firefox, der zeigt einem sämtliche fehler an, sogar mit zeile und zeichen

probiers nochma, du bis auf nem guten weg, wenn weiterhin nich klappt sag halt nochma besheid dann schau ich mir das mal näher an

Kai Schiffer

Zitat

wieso nimmst du dann an, dass layerwidth und layerheight bereits bekannt sind?

Das habe ich hier jetzt nicht mit rein kopiert. Das wird über CSS gemacht.
Hier versändnishalber dann der komlpette Code, aber wie gesagt es liegt nur an der Überagabe des <span id=close> zu dem Javascript.
Eigenständig ohne den Session String funktioniert der Code.

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>Unbenanntes Dokument</title>
<style type="text/css">
#layer {
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    background-image: url(Bilder/bgface.png);
    background-repeat: repeat;
    text-align: center;
    vertical-align: middle;
}
</style>
</head>
<?php session_start();
if($_SESSION['welcome'] != true)
{ 
   $_SESSION['welcome'] = true;


   echo "<div id='layer'>Hier steht der Text, der nur 1x angezeigt werden soll.</br><span id='close'>X</span></div>";
}  { ?>
<script type="text/javascript">


$(document).ready(function(){ 
  $('#close').click(function() { 
    $('#layer').fadeOut(500);
  });
  window.setTimeout(function() {
    win = $(window);
    $('#layer')
      .css({
        'width': layerWidth + 'px',
        'height': layerHeight + 'px',
        'top': '0px',
        'left': '-' + layerWidth + 'px'
      })
      .animate({
        'top': win.height() / 2 - layerHeight / 2,
        'left': win.width() / 2 - layerWidth / 2
    }, 0000);
  }, 0000);
});
</script>
<?php } ?>




<body>
</body>
</html>

Alles anzeigen

synaptic

loool..

ok ich hab mir das jetzt mal mit etwas mehr zeit angesehen und mit deinem css is auf einmal dein javascript zu 95% überflüssig
ich hab hier unten mal den code ganz unsauber so gemacht, dass er funktioniert und auch das unnütze javascript entfernt.

PHP

<?php session_start();
$_SESSION['welcome'] = false; // rausnehmen, is nur fürs testen auf false
if($_SESSION['welcome'] != true) boolsche werte fragt mit auf typengleichheit mit === oder !==
{ 
   $_SESSION['welcome'] = false;


   echo "<div id='layer'>Hier steht der Text, der nur 1x angezeigt werden soll.</br><span id='close'>X</span></div>";
}  { ?>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">


$(document).ready(function(){ 
  $('#close').click(function() { 
    $('#layer').fadeOut(500);
  });
/*  window.setTimeout(function() {
    win = $(window);
    $('#layer')
      .css({
        'width': $(this).width() + 'px',
        'height': $(this).height() + 'px',
        'top': '0px',
        'left': '-' + $(this).width() + 'px'
      })
      .animate({
        'top': win.height() / 2 - $(this).height() / 2,
        'left': win.width() / 2 - $(this).width() / 2
    }, 0000);
  }, 0000);
  */
});
</script>
<?php } ?> <style type="text/css">
#layer {
    position: absolute;
    left: 0px;
    top: 0px;
    height: 100%;
    width: 100%;
    background-image: url(Bilder/bgface.png);
    background-repeat: repeat;
    background-color: lime;
    text-align: center;
    vertical-align: middle;
}
</style>

Alles anzeigen

also zur erklärung:
dein css machts js für größe und breite sinnfrei

im js, meine funktionen;
$(this).width() und $(this).height() (ok sind nich meine sondern die von jquery)
die ergebnisse speichert man normalerweise in variablen, hat performancegründe, weil man die gleichen berechnungen nicht jedes mal neu ausführt.

und nochmal zur info:
win.height() und win.width() da hast du funktionen benutzt

Zitat

'width': layerWidth + 'px',
'height': layerHeight + 'px',
'top': '0px',
'left': '-' + layerWidth + 'px'

hier hast du variablen benutzt ohne dass diese initialisiert oder deklariert waren!!
dein javascript weiß doch nicht, was im css steht.. woher solls das auch wissen?

Kai Schiffer

Sehr gut, ich danke dir!

DIV Layer einmalig mit Schließ-Funktion

Tags

Benutzer online in diesem Thema