✔ Eigenschaften eines Tags mit JS anders als ohne JS

D

drathy

Mitglied
Hallo mal wieder!

Ich hab mal eben eine generelle Frage:

Besteht die Möglichkeit, bspw. einen <div>-Tag mit anderen Eigenschaften zu versehen wenn JavaScript aktiviert ist, als wenn JS nicht aktiviert ist

Mittels <noscript> wird ja NUR das ausgeführt was innerhalb des Tags steht, wenn JS nicht aktiviert ist...
 
Du versiehst den div-Tag mit den Eigenschaften, die gelten soll, wenn Javascript aus ist und änderst dann die Eigenschaft mit Javascript-Befehlen. Die Befehle werden logischerweise bei ausgeschaltetem JS nicht ausgeführt => die alten Eigenschaften gelten. Aber darauf hättest du auch selber kommen können.
 
Sorry, wie ich merke, habe ich mich blöd ausgedrückt bzw. mein Problem nicht deutlich genug dargestellt.

Ich will einem <div>-Tag die Eigenschaft style="visibility:hidden" mitgeben, wenn JS aktiviert ist (um sie dann später per JS visible zu machen) und die Eigenschaft weglassen, wenn JS nicht aktiviert ist, da sonst ja nichts angezeigt wird...
 
Setze das "hidden" einfach per JS:
HTML: 
<script type="text/javascript">
function hideDiv(did) {
     document.getElementById(did).style.visibility = 'hidden'"
}
hideDiv("mydiv");
</script>
<body onload="hideDiv('mydiv');">

Gruß
.
 
Doch, doch, angekommen schon! Ich habe es sogar schon zuvor auf diese Weise versucht, doch leider lässt sich mein Problem damit nich lösen...verstehe auch nicht, warum!

Zur Erklärung:
Hier habe ich ein Problem beschrieben, welches ich auf die oben beschriebene Weise verhindern möchte.

Das Problem des Zuckens habe ich schon abgeschafft gehabt, und zwar wenn ich das umschließende Div zunächst mit "visibility:hidden" versehe, und es danach wieder per JS nach dem Zentrieren "visibility:visible" mache. Wie gesagt, so ist das "Zucken" weg. Problem ist nur, dass bei ausgeschaltetem JS nun gar nichts mehr angezeigt wird...daher wollte ich das auf diese Weise lösen...

Bin für alle Anmerkungen, Kritik und Verbesserungsvorschläge zu haben!

edit:
Gibt es nicht die Möglichkeit, einen Teil des HTML-Codes auszutauschen, wenn JS nicht verfügbar ist...so nach folgendem Motto:
Mit JS:
Code: 
<div style="visibility:hidden">

ohne JS (wobei hier dann ja natürlich eigentlich nichts im "style" stehen braucht):
Code: 
<div style="visibility:visible">
 
Zuletzt bearbeitet:
Hab fast die Schnauze voll, da ich es einfach nicht hinbekomme... ;)

Bin drauf und dran das nun mit css zu lösen, aber wollte mal eben Eure Meinung dazu hören. Wenn ich das Container-Div mit folgendem style versehe...

Code: 
.center {position:absolute;left:50%;top:50%;margin-left:-502px;margin-top:-311px;}

...wird ja alles schön zentriert.

Problem daran ist ja nur, dass bei geringeren Auflösungen ringsrum ein Rand nicht mehr sichtbar ist. Das wiederum könnte man ja per Javascript abfangen, allerdings besteht ja (sicherlich) immer noch ein (ganz) kleiner Kreis von Leuten die mit kleinerer Auflösung als 1024*768 und deaktiviertem JS durch die Gegend surfen.
Für die wäre die Seite dann ja nicht in akzeptabler Weise dargestellt - meint Ihr, das kann man vernachlässigen? In meinen Augen dürfte der Prozentsatz gegen null gehen, oder?
Was meint Ihr? BITTE teilt mir Eure Gedanken mit...
 
zu deinem JS-Problem: wenn JS aus ist, kannst du nichts austauschen.... weil du keine Skriptsprache verfügbar hast.

Du kannst es bspw. so machen:
Gebe dem DIV eine ID.
Mit der write()-Methode schreibst du dann in den <head> der Seite einen <style>-Block, welcher für dieses <div> "visibility:hidden" definiert.

Diese Angabe hat somit nur Auswirkung für Besucher mit aktiviertem JS.

Beim onload änderst du dann die visibility wie gehabt auf "visible".
 
Hallo,

ich würde horizontal über CSS zentrieren, die vertikale Zentrierung kannst du ggf. über JavaScript machen. Dadurch ist bei deaktiviertem JS wenigstens noch die horizontale Zentrierung wirksam.
Dazu müsstest du den zentralen Container relativ positionieren:
Code: 
       <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
       <html>
       <head>
       <title>Test: Positionierung/Zentrierung</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
       
       <style type="text/css">
       <!--
       html, body {
       	width: 100%;
       	height: 100%;
       	margin: 0;
       	border: 0;
       	padding: 0;
       }
       body {
       	font-family: sans-serif;
       	font-size: 101%;
       	color: #000;
       	background-color: #fff;
       }
       div#div1 {
       	position: relative;
       	top: 0;
       	left: 0;
       	width: 1004px;
       	height: 642px;
       	margin: 0 auto;		/* horizontale Zentrierung! */
       	border: 0;
       	padding: 0;
       	color: white;
       	background-color: #369;
       }
       div.idiv {
       	padding: 10px;
       }
       -->
       </style>
       
       <script type="text/javascript">
       function Fensterhoehe()
       {
         if (window.innerHeight) {
       	return window.innerHeight;
         }
         else if (document.body && document.body.clientHeight) {
       	return document.body.clientHeight;
         }
         else {
       	return 0;
         }
       }
       
       function centerObj(id)
       {
       var objRef = document.getElementById(id);
         
       // Objektgröße:
         var objH = objRef.offsetHeight;
       
   // zentrierte Zielposition:
         objTop = Math.floor((Fensterhoehe()-objH)/2);
         if (objTop < 0) objTop = 0;
       
   // Positionierung:  
         objRef.style.top = objTop + "px";
       }
       </script>
       
       </head>
       <body OnLoad="centerObj('div1')" OnResize="centerObj('div1')">
       
       <div id="div1"><div class="idiv">
         <p>
       	Lorem ipsum usw.
         </p>
       </div></div>
       
       </body>
       </html>
Das Zucken durch die JS-Zentrierung wird man wohl nicht ganz wegkriegen, bei o.g. Vorschlag zuckt es jedenfalls nur noch in einer Richtung.
Vielleicht hilft dir das weiter.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück