JS Ebene nur einblenden wenn Fenster-Breite min. 1000 Pixel

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

Autor dieses Themas

15:23, 16.2.2012

Hallo

warum funktioniert folgender Code nicht ?!

Das DIV Element mit der id="adsky" soll nur eingeblenet werden,
wenn die Fenster-Breite mind. 1000 Pixel beträgt ... tut es aber nicht

<html>
<head>
<title>TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--

body { 
 color:#000000; 
 background:#FFFFFF; 
 margin: 0px; 
 padding: 0px;
} 

#adsky { 
  position: fixed; 
  top: 20px;
  left: 20px;
  visibility: hidden;
  margin: 0px; 
  padding: 10px; 
  width: 140px; 
  height: 700px;
  background: #DEDEDE;
} 

-->
</style>


<script type="text/javascript">

function xaus(x) { 
/* ---- function div id ausblenden --- */ 
  document.getElementById(x).style.visibility = "hidden"; 
}

function xan(x) { 
/* ---- function div id einblenden --- */ 
  document.getElementById(x).style.visibility = "visible"; 
}

</script>


</head>

<body>


<script type="text/javascript">

/* ---- body Breite ermitteln --- */ 
var xbreite = document.body.offsetWidth; 

if (xbreite > 1000) { 
  xan('adsky');   /* ---- div id einblenden --- */ 
} 
else { 
  xaus('adsky');  /* ---- div id ausblenden --- */ 
} 

</script>

<div id="adsky">
  <br>TEST
  <br><a href="javascript:xaus('adsky');">Close</a> 
  <br>TEST
  <br>TEST
  <br>TEST
</div>


<div align="center">
<br>
<br>
<br> <a href="javascript:xan('adsky');">Show</a> 
<br>
<br>
<br>
<script type="text/javascript">
  document.write('<br /> Fenster-Breite: ' + xbreite +' Pixel'); 
</script>
<br>
<br>
<br>
</div>

</body>
</html>

Das ein- / aus- blenden funktioniert mit den Links wunderbar
aber nicht mit der if-Bedingung, die prüft, ob (xbreite > 1000)

dabei ist das doch der gleiche "Weg" .. Aufruf der entsprechenden Funktion
aber nur bei Klick auf Link funktioniert es ... soll aber schon bei Aufruf greifen

wie sonst könnte man ermitteln, wie groß die Browserfenster-Breite ist
und je nachdem (größer / kleiner 1000 Pixel) die DIV id entweder visible / hidden

??

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage
anti-atomkraft

anti-atomkraft hat kostenlosen Webspace.
16:25, 16.2.2012
Hast du schonmal versucht, dir xbreite ausgeben zu lassen?
offsetWidth funktioniert nämlich nicht in allen Browsern...
Sollte passieren, was ich vermute (xbreite ist null, undefined, oder 0); dann kannst'e das mal mit der jQuery-Methode .width(),
bzw. .css('width') versuchen...

Nachtrag: Sehe gerade, dass du es in deinem Skript bereits ausgibst...
Möglicherweise ist die Seite zu dem Zeitpunkt noch nicht vollständig aufgebaut...
Am besten versucht du die Abfrage erst beim onLoad auszuführen, also in normalem JS:
```
document.body.onload=function(){ /* Deine Abfrage */}
```
und unter jQuery:
```
$(document).ready(function(){/* Deine Abfrage */});
```
Beitrag zuletzt geändert: 16.2.2012 16:30:17 von anti-atomkraft

pcw

pcw hat kostenlosen Webspace.

18:19, 16.2.2012

@media screen and (max-width: 999pxx)  {

#adsky { display: none;  }
}

@media screen and (min-width: 1000px)  {

#adsky { display: block; }

}

warum nicht so?

fatfreddy

fatfreddy hat kostenlosen Webspace.

0:38, 17.2.2012

pcw schrieb:
warum nicht so?

Eventuell, weil media-queries in älteren Browsern nicht unterstützt werden?
...mal unabhängig davon, daß dieser überflüssige Javascriptrotz wieder andere Nachteile hat.
pcw

pcw hat kostenlosen Webspace.

13:40, 18.2.2012

fatfreddy schrieb:

Eventuell, weil media-queries in älteren Browsern nicht unterstützt werden?

naja, das kann man ihnen ja beibringen

dexus85

dexus85 hat kostenlosen Webspace.

14:02, 18.2.2012

Da ihm ja keiner helfen wollte:

<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="content-type" content="text/html" />
	<meta name="author" content="Josef Fröhle" />
	<title>Unbenannt 1</title>
    <style type="text/css">
    <!--
    body {
     color:#000000;
     background:#FFFFFF;
     margin: 0px;
     padding: 0px;
    }
    #adsky {
      position: fixed;
      top: 20px;
      left: 20px;
      display: none;
      margin: 0px;
      padding: 10px;
      width: 140px;
      height: 700px;
      background: #DEDEDE;
    }
    -->
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.js"></script>
    <script type="text/javascript">
    var xbreite = 0;;
    function getWidth() {
        xbreite = document.body.offsetWidth;
        if (xbreite >= 1000) {
          xan('adsky');   /* ---- div id einblenden --- */
        }
        else {
          xaus('adsky');  /* ---- div id ausblenden --- */
        }
        $('#windowWidth').text(xbreite);
    }
    function xaus(x) {
    /* ---- function div id ausblenden --- */
      document.getElementById(x).style.display= "none";
    }
    function xan(x) {
    /* ---- function div id einblenden --- */
      document.getElementById(x).style.display= "block";
    }
    $(document).ready(function(){
        $(window).resize(function() {
            getWidth();
        });
        getWidth();
    });
    </script>
</head>
<body>
<div id="adsky">
  <br />TEST
  <br /><a href="javascript:xaus('adsky');">Close</a>
  <br />TEST
  <br />TEST
  <br />TEST
</div>
<div align="center">
<br />
<br />
<br /> <a href="javascript:xan('adsky');">Show</a>
<br />
<br />
<br />
<br /> Fenster-Breite: <span id="windowWidth">0</span> Pixel
<br />
<br />
<br />
</div>
</body>
</html>

Viel spaß damit :)

Beitrag zuletzt geändert: 18.2.2012 14:05:32 von dexus85

Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?

Über lima-city

lima-city bietet dir kostenlosen und werbefreien Speicherplatz für Deine Homepage. Sofort anmelden und direkt loslegen mit Webspace, PHP, Datenbanken, günstigen Domains und einer tollen Community!

kostenloser Webspace werbefrei: lima-city