pattex81: Div dynamisch verschieben funzt nicht

SELF-Forum

Div dynamisch verschieben funzt nicht

pattex81
– Informationen zu den Bewertungsregeln

Ich habe folgendes Problem:

Ich habe einen Div-Container der nur zur Positionierung, Umrandung und Größenfestlegung dient!
In diesem befindet sich ein weiterer Div-Container, der eine Anzahl x von Bildern-Links enthält, aber nur maximal 3 davon im sichtbaren Bereich anzeigen kann und soll!
Der Äußere Container bildet quasi eine Art Fenster, das mir die Sicht auf den zweiten Container ermöglicht! Dieser 'innere' Container (images) soll nun per Klick auf einen link verschoben werden, so dass ich etwas ähnliches wie eine horizontale Scroll-Funktion erhalte (Nur halt ohne Balken :-), mehr sowas wie ein ImageFlow).

Der Link ist da, die Funktion auch (s.u.) sie wird auch ausgeführt, aber...

nix passiert!

HTML-Code
--------------------------------
<div style="overflow: hidden; position:float; left:6px; top:287px; border:1px solid #000000; width: 200px; height:68px; vertical-align:middle">
  <div id="images" style="position:float; left:0px; overflow: visible;
  height:68px; padding-bottom: 1px; padding-top: 1px; padding-right: 1px;
  padding-left: 1px; vertical-align:middle">
    <a href="#"><img id="one" src="...." width="60" height="60" /></a>
    <a href="#"><img id="two" src="...." width="60" height="60" /></a>
    <a href="#"><img id="three" src="...." width="60" height="60" /></a>
    <a href="#"><img id="four" src="...." width="60" height="60" /></a>
  </div>
</div>

Mein Script
--------------------------------
<script type="text/javascript">
  function scrollFW()
  {
    var alterWert = document.getElementById('images').offsetLeft;
    var neu = alterWert+60;
    document.getElementById('images').style.left = neu+"px";
  }
</script>

was mache ich denn falsch, und was noch wichtiger ist, wie ght es denn richtig?

Gruß,
Pattex81

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Div dynamisch verschieben funzt nicht

    Cheatah
    +2 Informationen zu den Bewertungsregeln

    Hi,

    was mache ich denn falsch,

    Du validierst Deine Codes nicht.

    und was noch wichtiger ist, wie ght es denn richtig?

    Verwende den HTML- und den CSS-Validator.

    Cheatah

    --
    X-Self-Code: sh:( fo:} ch:~ rl:° br:> n4:& ie:% mo:) va:) de:] zu:) fl:{ ss:) ls:~ js:|
    X-Self-Code-Url: http://emmanuel.dammerer.at/selfcode.html
    X-Will-Answer-Email: No
    X-Please-Search-Archive-First: Absolutely Yes
    Beitrag melden
    +2
    Informationen zu den Bewertungsregeln

  2. Div dynamisch verschieben funzt nicht

    Christoph Schnauß Homepage des Autors
    – Informationen zu den Bewertungsregeln

    hallo,

    Ich habe folgendes Problem:

    Du hast sicherlich ein Problem mit der Problembeschreibung.

    Ich habe einen Div-Container der nur zur Positionierung, Umrandung und Größenfestlegung dient!

    Gut, das gibts an vielen Stellen, das kann man machen, auch wenn es vermutlich nicht zwingend nötig ist.

    In diesem befindet sich ein weiterer Div-Container, der eine Anzahl x von Bildern-Links enthält, aber nur maximal 3 davon im sichtbaren Bereich anzeigen kann und soll!

    Wie "kann und soll" er das?

    nix passiert!

    Au weia. Nichtmal im IE? Mit welchen Browsern prüfst du denn dein Arbeitsergebnis?

    <div style="overflow: hidden; position:float;

    Du bist ein Revolutionär. Für "position" einfach nur "float" anzugeben, ist _sehr_ tapfer.

    Mein Script

    Könnte unter Umständen sogar funktionieren.

    was mache ich denn falsch, und was noch wichtiger ist, wie ght es denn richtig?

    Was du als beurteilbaren Code angibst, ist zu wenig. Lade mal bitte eine komplette Seite mit deinem problematisierten Code irgendwo temporär hoch, so daß man sich das Gesamtkunstwerk anschauen kann. Sonst wird jeder Versuch eines gutgemeinten Ratschlags ganz einfach nur Flickwerk.

    Grüße aus Berlin

    Christoph S.

    --
    Visitenkarte
    ss:| zu:) ls:& fo:) va:) sh:| rl:|
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Div dynamisch verschieben funzt nicht

      Pattex81
      – Informationen zu den Bewertungsregeln

      Du hast sicherlich ein Problem mit der Problembeschreibung.

      Moment, lass mich kurz überlegen... ähm NEIN

      Ich habe einen Div-Container der nur zur Positionierung, Umrandung und Größenfestlegung dient!
      Gut, das gibts an vielen Stellen, das kann man machen, auch wenn es vermutlich nicht zwingend nötig ist.

      Muss Dir ja nicht gefallen!

      In diesem befindet sich ein weiterer Div-Container, der eine Anzahl x von Bildern-Links enthält, aber nur maximal 3 davon im sichtbaren Bereich anzeigen kann und soll!

      Wie "kann und soll" er das?

      Naja wenn er halt keinen Platz hat um mehr anzuzeigen und overflow auf hidden steht, dann ist das hier nunmal so, aber ich bin sicher das die Frage nicht ernst gemeint war *zwinker*

      nix passiert!

      Au weia. Nichtmal im IE? Mit welchen Browsern prüfst du denn dein Arbeitsergebnis?

      Firefox 2.0, IE 7

      <div style="overflow: hidden; position:float;

      Du bist ein Revolutionär. Für "position" einfach nur "float" anzugeben, ist _sehr_ tapfer.

      Jetzt hab Dich mal nicht so, stand vorher auf absolut, aber ich hab nen bischen was geändert, und nicht drauf geachtet.

      Mein Script

      Könnte unter Umständen sogar funktionieren.

      Das hatte ich vermutet

      was mache ich denn falsch, und was noch wichtiger ist, wie ght es denn richtig?

      Was du als beurteilbaren Code angibst, ist zu wenig. Lade mal bitte eine komplette Seite mit deinem problematisierten Code irgendwo temporär hoch, so daß man sich das Gesamtkunstwerk anschauen kann. Sonst wird jeder Versuch eines gutgemeinten Ratschlags ganz einfach nur Flickwerk.

      Bezweifle das das auch nur das geringste bringt! Der restliche Inhalt ist für das Problem völlig irrelevant! Aber für Dich nochmal auf das wesentliche reduziert:

      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
      <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
      <title>Niceforms</title>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <script language="javascript" type="text/javascript" src="../../js/spryeffects.js"></script>
      <link rel="stylesheet" type="text/css" href="../../css/iframe.css" />
      <script type="text/javascript">
       function scrollFW()
       {
        var alterWert = document.getElementById('images').offsetLeft;
        var neu = alterWert+10;
        document.getElementById('images').style.left = neu+"px";
       }
      </script>
      </head>

      <body>
      <a href="#" class="navigate" style="position:absolute; left:6px; top:360px; text-align:left" onfocus="if(this.blur()){this.blur();}" onclick="scrollFW()">zur&uuml;ck</a>
      <a href="#" class="navigate" style="position:absolute; left:172px; top:360px; text-align:left" onfocus="if(this.blur()){this.blur();}" onclick="scrollFW()">weiter</a>
      <div style="overflow: hidden; position:absolute; left:6px; top:287px; border:1px solid #000000; width: 200px; height:68px; vertical-align:middle">
        <div id="images" style="left:0px; overflow: visible; height:68px; padding-bottom: 1px; padding-top: 1px; padding-right: 1px; padding-left: 1px; vertical-align:middle">
          <a id="pic1" href="#" class="imagemenu" onfocus="if(this.blur()){this.blur();}"><img alt="" id="one" src="../../images/portraits/thumbnails/thn_mini_girl_01.jpg" width="60" height="60" /></a>
          <a id="pic2" href="#" class="imagemenu" onfocus="if(this.blur()){this.blur();}"><img alt="" id="two" src="../../images/portraits/thumbnails/thn_mini_girl_02.jpg" width="60" height="60" /></a>
          <a id="pic3" href="#" class="imagemenu" onfocus="if(this.blur()){this.blur();}"><img alt="" id="three" src="../../images/portraits/thumbnails/thn_mini_girl_03.jpg" width="60" height="60" /></a>
          <a id="pic4" href="#" class="imagemenu" onfocus="if(this.blur()){this.blur();}"><img alt="" id="four" src="../../images/portraits/thumbnails/thn_mini_girl_02.jpg" width="60" height="60" /></a>
        </div>
      </div>
      </body>
      </html>

      @Cheatha:
      Danke für die schnelle und hilfreiche Antwort! Hab validiert, und der Code ist nun nach kleinen Reparaturen fehlerfrei!

      Das Problem besteht aber weiter!!

      Gruß,
      Pattex81

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Div dynamisch verschieben funzt nicht

        ChrisB
        +3 Informationen zu den Bewertungsregeln

        Hi,

        Du hast sicherlich ein Problem mit der Problembeschreibung.

        Moment, lass mich kurz überlegen... ähm NEIN

        Doch - sie bestand im grossen und ganzen aus "funzt nich".

        function scrollFW()
        {
          var alterWert = document.getElementById('images').offsetLeft;
          var neu = alterWert+10;
          document.getElementById('images').style.left = neu+"px";

        Fein, wir setzen also fuer #images einen Wert fuer die CSS-Eigenschaft left.

        <div id="images" style="left:0px; overflow: visible; height:68px; padding-bottom: 1px; padding-top: 1px; padding-right: 1px; padding-left: 1px; vertical-align:middle">

        Und jetzt ueberlegen wir noch mal, welche Auswirkung left haben darf, wenn das Element nicht positioniert wurde.

        MfG ChrisB

        --
        "The Internet: Technological marvel of marvels - but if you don't know *what* you're lookin' for on the Internet, it is nothing but a time-sucking vortex from hell."
        Beitrag melden
        +3
        Informationen zu den Bewertungsregeln

        1. Div dynamisch verschieben funzt nicht

          suit
          – Informationen zu den Bewertungsregeln

          Und jetzt ueberlegen wir noch mal, welche Auswirkung left haben darf, wenn das Element nicht positioniert wurde.

          darf ich, darf ich?
          SCNR

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln