✔ 4 sec nach seitenaufbau einen div layer einblenden

N

nanica

Grünschnabel
Hallo allerseits,
ich hab schon reichlich gesucht aber nicht wirklich etwas für mich brauchbares gefunden.
ich möchte 4sec nach seiten aufbau einen div layer einblenden, der dann nach klick auf ein X geschlossen wird.
das schliessen ist weiter kein problem, da setze ich über javascript das visibility-attribut auf hidden .
der layer soll aber erst 4sec nach aufruf der seite geladen bzw. geöffnet werden.
ist bestimmt relativ einfach, nur komm ich nicht drauf :/.
wäre nett wenn mir jemand helfen könnte :)
liebe grüsse
nanica
 
danke chmee für die schnelle antwort :)
ich probiers aus und melde mich wenns geklappt hat.
nanica
*verschwindet in ihrem phase5*
 
hmm ich hab irgendwas falsch gemacht, der layer wird immer noch sofort angezeigt und nciht verzögert. ich poste mal den code der seite.

PHP: 
<html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">

<head>
<title>template-css.html</title>
<meta name="author" content="kerstin">
<style type="text/css"><!--
*{
        margin:0;
        padding:0;
        }
        body
         {
         background-color: #FFFFFF;
         font-family: VERDANA,ARIAL,HELVETICA;
         text-align: center;
         border: 3px solid yellow;
         }
     #container
         {
        background-color: #FFFFFF;
         position: absolute:
         z-index: 3;
         height: 600px;
         width: 800px;
         border: 2px solid black;
         margin: auto;
         text-align: left;
         }

       #header
         {
         background-color: #FFFFFF;
         border: 2px solid blue;
         text-align: left;
         height: 96px;
         margin-bottom: 5px;
         }
         .headgrafik1
         {
         margin:0;
         float:left;
         vertical-align: bottom;
         border: 2px solid red;
         }
          .headgrafik2
         {
         float: right;
          border: 2px solid red;
         }
       #menutop
         {
         background-color: #FFFFFF;
         width: 795px;
         border-bottom: 1px solid black;
         }
       #menuleft
         {
         background-color: #E9F1F0;
         float: left;
         margin: 0;
         width: 106px;

         padding-top: 10px;
         padding-right: 10px;
         padding-bottom: 10px;
         padding-left: 10px;

         }
          #main
         {
         background-color: #CEE1DD;
         float: right;
         width: 690px;
         margin: 0px;
         padding-top: 10px;
         padding-right: 10px;
         padding-bottom: 10px;
         padding-left: 10px;
         }

       #main-layer
         {
         background-color: #CEE1DD;
         border: 3px solid green;
         position: fixed;
         top: 100px;
         left: 100px;
         width: 640px;
         height: 480px;
         z-index: 1;
         overflow: auto;
         margin: 0px;
         padding-top: 10px;
         padding-right: 10px;
         padding-bottom: 10px;
         padding-left: 10px;
         }
       #footer
         {
          background-color: #E9F1F0;
          text-align: right;
          float: right;
          clear: right;
          height: 20px;
          width: 690px;
          padding: 0;
          margin: 0;
         }
         #footerinnen
         {
          background-color: #CEE1DD;
          clear: left;
          margin: 0;
          width: 106px;
          height: 20px;
          float: left;
         }
--></style>
<script language="JavaScript">

function timedDiv()
{
var t=setTimeout("showDiv",4000);
}


function showDiv()
{
      document.getElementById("fragediv").style.visibility = 'visible';
}

         function hideDiv()
{
      document.getElementById("fragediv").style.visibility = 'hidden';
}
</script>


</head>
<body onload="timedDiv()">


<div id="container">
 <div id="header" >
<img src="gfx/logo.jpg" class="headgrafik1">
 <img src="gfx/composing.gif" class="headgrafik2">
         </div>
 <div id="menutop">lala</div>
 <div id="menuleft">lala</div>
 <div id="fragediv"
 	style="position: absolute; left: 100px; top: 80px; height: 400px visibility: hidden "> <!--dies ist der layer der geöffnet werden soll-->
<table border=0>
<tr><td></td><td align=right>
<a href="javascript:hideDiv()"><img src="gfx/close.JPG"></a>
</td></tr>
<tr><td colspan=2>
<iframe src="http:www.google.de" width="640" height="480" name="test">
</iframe>
</td></tr></table>

</div>

   <div id="main">Quod si tam Graecis novitas invisa fuisset quam nobis, quid nunc esset vetus? Aut quid haberet quod legeret tereretque viritim.Ut primum positis nugari Graecia bellis coepit et in vitium fortuna labier aequa, nunc athletarum studiis, nunc arsit equorum, marmoris aut eboris fabros aut aeris amavit, tibicinibus, nunc est gavisa tragoedis; puella.

 </div>
 <div id="footer">fuss </div>
 <div id="footerinnen"></div>
 </div>
</body>
</html>

was hab ich da falsch eingefügt ? :confused:
danke schon mal für die hilfe
nanica :)
 
Zuletzt bearbeitet:
fehler und problem gelöst, waren nur vergessene ; und () wie so oft *G*
danke noch mal und einen schönen 2. advent noch
nanica
 
Hier ohne die Semikolons:
Code: 
<div id="fragediv"
     style="position: absolute; left: 100px; top: 80px; height: 400px visibility: hidden "> <!--dies ist der layer der geöffnet werden soll-->
<table border=0>
<tr><td></td><td align=right>
<a href="javascript:hideDiv()">

Und hier mit:
Code: 
<div id="fragediv"
     style="position: absolute; left: 100px; top: 80px; height: 400px; visibility: hidden;"> <!--dies ist der layer der geöffnet werden soll-->
<table border=0>
<tr><td></td><td align=right>
<a href="javascript:hideDiv();">
 
So funktioniert es! Es war noch ein Fehler in der function timedDiv()..

HTML: 
<html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">

<head>
<title>template-css.html</title>
<meta name="author" content="kerstin">
<style type="text/css"><!--
*{
        margin:0;
        padding:0;
        }
        body
         {
         background-color: #FFFFFF;
         font-family: VERDANA,ARIAL,HELVETICA;
         text-align: center;
         border: 3px solid yellow;
         }
     #container
         {
        background-color: #FFFFFF;
         position: absolute:
         z-index: 3;
         height: 600px;
         width: 800px;
         border: 2px solid black;
         margin: auto;
         text-align: left;
         }

       #header
         {
         background-color: #FFFFFF;
         border: 2px solid blue;
         text-align: left;
         height: 96px;
         margin-bottom: 5px;
         }
         .headgrafik1
         {
         margin:0;
         float:left;
         vertical-align: bottom;
         border: 2px solid red;
         }
          .headgrafik2
         {
         float: right;
          border: 2px solid red;
         }
       #menutop
         {
         background-color: #FFFFFF;
         width: 795px;
         border-bottom: 1px solid black;
         }
       #menuleft
         {
         background-color: #E9F1F0;
         float: left;
         margin: 0;
         width: 106px;

         padding-top: 10px;
         padding-right: 10px;
         padding-bottom: 10px;
         padding-left: 10px;

         }
          #main
         {
         background-color: #CEE1DD;
         float: right;
         width: 690px;
         margin: 0px;
         padding-top: 10px;
         padding-right: 10px;
         padding-bottom: 10px;
         padding-left: 10px;
         }

       #main-layer
         {
         background-color: #CEE1DD;
         border: 3px solid green;
         position: fixed;
         top: 100px;
         left: 100px;
         width: 640px;
         height: 480px;
         z-index: 1;
         overflow: auto;
         margin: 0px;
         padding-top: 10px;
         padding-right: 10px;
         padding-bottom: 10px;
         padding-left: 10px;
         }
       #footer
         {
          background-color: #E9F1F0;
          text-align: right;
          float: right;
          clear: right;
          height: 20px;
          width: 690px;
          padding: 0;
          margin: 0;
         }
         #footerinnen
         {
          background-color: #CEE1DD;
          clear: left;
          margin: 0;
          width: 106px;
          height: 20px;
          float: left;
         }
--></style>
<script language="JavaScript">

function timedDiv()
{
var t=setTimeout("showDiv();",4000);
}


function showDiv()
{
      document.getElementById("fragediv").style.visibility = 'visible';
}

         function hideDiv()
{
      document.getElementById("fragediv").style.visibility = 'hidden';
}
</script>


</head>
<body onload="timedDiv()">


<div id="container">
 <div id="header" >
<img src="gfx/logo.jpg" class="headgrafik1">
 <img src="gfx/composing.gif" class="headgrafik2">
         </div>
 <div id="menutop">lala</div>
 <div id="menuleft">lala</div>
 <div id="fragediv"
     style="position: absolute; left: 100px; top: 80px; height: 400px; visibility: hidden; "> <!--dies ist der layer der geöffnet werden soll-->
<table border=0>
<tr><td></td><td align=right>
<a href="javascript:hideDiv();"><img src="gfx/close.JPG"></a>
</td></tr>
<tr><td colspan=2>
<iframe src="http:www.google.de" width="640" height="480" name="test">
</iframe>
</td></tr></table>

</div>

   <div id="main">Quod si tam Graecis novitas invisa fuisset quam nobis, quid nunc esset vetus? Aut quid haberet quod legeret tereretque viritim.Ut primum positis nugari Graecia bellis coepit et in vitium fortuna labier aequa, nunc athletarum studiis, nunc arsit equorum, marmoris aut eboris fabros aut aeris amavit, tibicinibus, nunc est gavisa tragoedis; puella.

 </div>
 <div id="footer">fuss </div>
 <div id="footerinnen"></div>
 </div>
</body>
</html>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück