✔ Wie divs mit über js gesetzten Style-Attributen unterscheiden

[Krischan]

Hallo liebe Leute,
bevor ich weitere Stunden 'planlos' rumprobiere, hoffe ich, dass ich hier einen Denkanstoss bekomme:
Ich habe auf meiner Seite eine Message-Box wie hier:-> http://www.cssnewbie.com/message-box-javascript-css/ beschrieben ,
bei deren Schliessen ein cookie gesetzt wird, der das WiederAnzeigen der Box für vorgegebene Zeit verhindert.
Beim Laden der Seite wird der Status geprüft und mit

 .style.display = "none";  oder  .style.display = "block";

die Box angezeigt oder nicht.Jetzt kann ich die Box mit folgendem Script ein- und aus-blenden :

<script src="http://code.jquery.com/jquery-latest.js"></script> 
  <script type="text/javascript">
$("#message-1").delay(5000).fadeIn(1750) .delay(20000) .fadeOut(1750);
</script>

Allerdings wird die Box dann auch bei gesetztem cookie angezeigt (..trotz .style.display = "none";...?)
Ein

document.getElementById("#message-1").style

zeigt nur die im html-tag gesetzten inline-styles an, so dass ich so die beiden Zustände der Box nicht unterscheiden kann.
(Wie) ist es möglich, die mit javascript gesetzten style-attribute auszulesen?
oder ist es möglich mit js einen 'Erkennungs'- inline-style zu setzen oder vielleicht die id zu ändern?

Gruss Krischan

 

[tombe]

Ich habe jetzt zwar keine direkte Lösung/keinen Code parat aber musst du nicht zuerst mal prüfen ob das Cookie gesetzt ist und dann entsprechend handeln.

Also die Box generell erstmal display = none, dann das Cokkie prüfen und je nachdem die Box einblenden oder auch nicht.

 

[Krischan]

Danke für die schnelle Antwort tombe,

|Also die Box generell erstmal display = none, dann das Cokkie prüfen und je nachdem die Box einblenden oder auch nicht.

Das passiert und funktioniert ja auch - ohne jquery-Anweisung...
- aber die jquery-Anweisung blendet eben auch die 'display: none; - Box ein.

Ich müsste das bei der cookie-Überprüfung gesetzte style-Attribut auslesen können und die jquery-Anweisung aud die 'display: block; - Box beschränken.

Gruss Krischan

 

[tombe]

Ich dachte an etwas in der Art:

<style type="text/css">
#popup
{
	width: 150px;
	height: auto;
	border: solid 1px #808080;
	display: none;
	padding: 15px;
	position: absolute;
	z-index: 1;
	top: 50px;
	left: 200px;
	background-color: #FFFFFF;
}
#text
{
	width: 500px;
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 0;
}

</style>

<script language="javascript" type="text/javascript" src="../jquery/jquery-1.8.0.min.js"></script>
<script language="javascript" type="text/javascript">
    $(document).ready(function() {
		if (document.cookie){
			$("#popup").css("display", document.cookie);
		} else{
			$("#popup").css("display", "block");
		}
	});

	function close_pop() {
		var datum = new Date();
		var zeit = datum.getTime() + 10000;
		datum.setTime(zeit);
		document.cookie = "none; expires=" + datum.toGMTString();
		document.getElementById("popup").style.display = "none";
	}
</script>
<div id="popup"><a href="#" onclick="close_pop();">[X]</a><br />Das hier ist das Hinweisfenster welches durch Cookie ein- oder ausgeblendet wird.</div>
<div id="text">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</div>

Beim ersten Laden ist die Hinweisbox sichtbar da noch kein Cookie existiert. Klickt man dann auf das X zum Schließen bleibt die Box für 10 Sekunden verschwunden. Egal ob man F5 drückt oder die Seite komplett neu lädt. Nach Ablauf der 10 Sekunden erscheint die Hinweisbox wieder.

 

[Krischan]

Danke für Deinen code tombe,

aber soweit war ich ja auch schon - nur das dezente Ein-/Ausblenden der Box mit jquery hat nicht geklappt -> der gesetzte cookie wurde nicht akzeptriert, es wurde auch die box mit "display: none" ein-/ausgeblendet..

Mit folgender 'Konstruktion' klappt das jetzt - die Box in einem zusätzlichen div mit "display: none" und dieses mit
jquery ein-/auslenden..die Box selber hat ebenfalls style="display: none"

<div id="hide" style="display: none">   
   
  <div  id="message" class="msgbox" style="top: 123px; width: 320px; height: 65px; " >
      <a href="#" class="close" onclick="closeBox('message');
       return false;" title="Schliessen"> <img src="http://www.tutorials.de/images/Cancel.png" width="18" height="18" alt="" /></a> 
  <p>Wichtige</p>
   <p  class="big"> Infos </p>
       </div>
        
   </div> 
   
<script src="http://code.jquery.com/jquery-latest.js"></script> 
   <script type="text/javascript">
    $("#hide").delay(5000).fadeIn(1750).delay(15000).fadeOut(1750); 
      </script>

Die Box wird jetzt nach 5 sek. eingeblendet, bleibt für 15 sek. und wird dann wieder ausgeblendet.
Wird die Box vom user geschlossen wird sie erst nach Ablauf des cookies wieder eingeblendet-> im Bsp. 15 min..
Hier 'mein' script zum Überprüfen des cookies :

<body onload = "loadMsg('msgbox');" >   
<script type="text/javascript">
function closeBox(toClose) {
   document.getElementById(toClose).style.display = "none";
   setCookie(toClose, "closed", 1 ) ;
}
function setCookie(cName, value, expirehours ){
 var date = new Date();
    date.setTime(date.getTime()+(15*60*1000));  // Ablaufzeit in min x*60*1000
    var expires = date.toGMTString();
    var offset= -date.getTimezoneOffset()/60;
    document.cookie =cName + "=" + escape(value)+offset+';expires='+expires+';path=/';
}
   
function loadMsg(msgClass) {
   msg = document.getElementsByTagName("div");
   for (i=0; i<msg.length; i++) {
      if(msg[i].className == msgClass) {
         if(document.cookie.indexOf(msg[i].id) == -1) {
            msg[i] .style.display = "block" ;
                 }
             }
       }    
    }
     </script>

Schönes WE

Krischan