JavaScript zur Umpositionierung von Skalen und deren dazugehörigen Grafiken

Question

Ich möchte gerne in meinem Experiment Skalen an verschiedenen Platzierungen auf dem Bildschirm darbieten (jeweils einmal in der Mitte und in jeder Ecke). Leider kenne ich mich mit JavaScript nicht gut aus und schaffe es nicht die Verschiebung in einem flexiblen Html-Element durchzuführen.

Nachfolgend ist mein erster Versuch, vielleicht hilft dieser bei der Verdeutlichung des Problems:

Die Idee wäre hier, dass die Skala 50 Pixel vom linken und 50 Pixel vom unteren Bildschirmrand platziert wird. Den z-index habe ich nur für alle Fälle eingefügt.

Zusätzlich wolllte ich noch alle anderen Elemente ausblenden (vor Allem die grauen Begrenzungslinien), habe das jedoch bisher nur mit dem Fortschrittsbalken geschafft. Dies mit folgendem php-Code:

option("progress", "no");

Gibt es so etwas ähnliches auch für die grauen Begrenzungsbalken?

Comments

Sprechen wir hier von klassischen Skalen oder von Schiebereglern, entsprechend der Frage https://support.soscisurvey.de/?qa=1551/lage-des-koordinatensystems#c1636 ?

---

Die Rede ist hier von Schiebereglern. Genau der Frage entsprechend, die war nämlich auch von mir.

Answer 1

Meine Antwort (auch auf den Kommentar in der anderen Frage) verzögerte sich ein wenig, da zunächst noch eine kleine Änderung an SoSci Survey erforderlich war. Diese erleichtert den Zugriff auf den Schieberegler.

In der ersten Variante platzieren Sie unterhalb der Schieberegler-Frage (z.B. AB01) folgenden HTML-/JavaScript-Code:

<script type="text/javascript">
<!--

var item = document.getElementById("AB01_01_scale");
item.style.position = "absolute";
// Skala an das untere Ende des Fragebogens verschieben
item.style.bottom = "0";  // Alternativ z.B. "30px", um über dem Impressum zu bleiben
// Horizontal zentrieren
item.style.margin = "0 auto";
item.style.left = "0";
item.style.right = "0";

// -->
</script>

Alternativ können Sie über das JavaScript-Objekt gehen, welches den Schieberegler repräsentiert. Darüber haben Sie (s. Anleitung) auch Zugriff auf den Wert des Schiebereglers, können die Formatierung anpassen u.s.w. Allerdings wird diese Anpassung erst eine halbe Sekunde später vorgenommen, wenn die Seite fertig geladen ist.

<script type="text/javascript">
<!--

SoSciTools.attachEvent(window, "load", function() {
  var slider = SoSciSliderInstance.getSlider("AB01_01");
  var scale = slider.getScale();

  scale.style.position = "absolute";
  // Skala an das untere Ende des Fragebogens verschieben
  scale.style.bottom = "0";  // Alternativ: "30px", um über dem Impressum zu bleiben
  // Horizontal zentrieren
  scale.style.margin = "0 auto";
  scale.style.left = "0";
  scale.style.right = "0";
});

// -->
</script>

Comments

Danke vielmals, klappt perfekt! Wäre es nun noch möglich, die grauen Begrenzungslinien und das Impressum auszublenden? Dann wäre alles genau so wie ich es bräuchte.

---

Sehen Sie sich einmal das presenter-Layout an:
https://www.soscisurvey.de/help/doku.php/de:create:functions:option#layout

Was das Impressum angeht, können Sie im presenter-Layout ggf. folgenden HTML-Code in der HTML-Vorlage verwenden: <!-- %imprint% -->