Ergebnis 1 bis 12 von 12

Thema: DIV-Scrolling

  1. #1
    Avatar von PHP-B-GINNA
    PHP-B-GINNA ist offline Routinier
    registriert
    26-03-2001
    Ort
    Germany
    Beiträge
    307

    DIV-Scrolling

    ich bastle gerade an einer website - was auch sonst =) -
    und habe folgendes problem:

    die gesamte seite hat eine vordefinierte größe (chromeless-window)
    am oberen rand befindet sich das menü als tabelle - darunter mit etwas abstand ein <div overflow:auto> (mit vordefinierter Breite & Höhe) in welchem der Inhalt dargestellt wird.
    Nun ist es so, dass ich in dem Inhalt des <div> "anker-links" habe, also nach dem schema:
    <a href="#anker_01">gehe zu 01</a>

    wenn ich auf diesem Link klicke, wird nicht das <div> gescrollt, sondern die gesamte seite - und somit verschwindet das menü in einem nicht sichbaren bereich - scrollbalken sind jedoch nur für das <div> vorhanden, nicht jedoch für die seite - das menü wird erst wieder sichtbar, wenn ich auf einen link klicke, der zum "anfang" der seite führt
    <a href="#top">nach oben</a>

    wie könnte ich es anstellen, dass das <div> gescrollt wird???



  2. #2
    Avatar von womstar
    womstar ist offline Lounge-Member
    registriert
    22-07-2002
    Ort
    latente matrix
    Beiträge
    5.913
    hei!!

    ich bin mehr ein praktiker, und würde gerne etwas code haben damit ich fummeln kann......ich mein am code (wegen urmel)...

  3. #3
    Avatar von PHP-B-GINNA
    PHP-B-GINNA ist offline Routinier
    registriert
    26-03-2001
    Ort
    Germany
    Beiträge
    307

    Du wolltest es ja nicht anders

    die Javascript-Files sind eigentlich nicht notwendig - die haben nur was mit anzeige der navigation zu tun - und nicht wirklich was mit der Darstellung....

    ich habe jetzt einfach man den quelltext der Seite hier gepostet

    PHP-Code:
    <html>
      <
    head>
        <
    title>IT-L&ouml;sungen</title>
        <
    link rel=stylesheet type=text/css href="scripts/selog.css"></link>
        <
    script language="JavaScript" src="scripts/menu.js" type=text/javascript></script>
        <script language="javascript" type="text/javascript" src="scripts/chromeless_35.js"></script>

      </head>
      <body OnLoad="resize_div();" topmargin=0 leftmargin=0 style="background-image:url('images/background_light.jpg'); background-position: center middle; background-attachment:fixed; background-repeat:no-repeat">
      <map name="homeclick">
        <area shape="rect" coords="279,12,472,85" href="javascript:link('home',0);" alt="Home">
        <area shape="rect" coords="700,0,750,100" href="javascript:alert('hier gehts rein');" alt="Home">
      </map>
    <a name="top"></a>
        <table border=0 cellspacing=0 cellpadding=0 width=100%>
          <tr>
            <td background="images/title_bg.jpg" align=center><img src="images/title_bar.jpg" width=750 height=100 border=0 usemap="#homeclick"></td>
          </tr>
        </table>
        <table border=0 cellspacing=0 cellpadding=0 width=100%>
          <tr>
            <td background="images/title_shadow.jpg">
    <!-- MENÜ -->

            <script language="javascript">
             create_men();
            </script>

    <!-- /MENÜ -->
            </td>
          </tr>
        </table>
    <!-- INHALT -->
    <!-- Bild für den Bereich -->
        <table border=0 cellspacing=0 cellpadding=0 width=100%>
          <tr>
            <td align=center><img src="images/head_it.jpg" width=500 height=35 border=0></td>
          </tr>
        </table>
    <!-- derzeitige Position -->
        <table border=0 cellspacing=0 cellpadding=0 width=100%>
          <tr>
            <td><font class=s10><script language=javascript>show_history('IT',102)</script></font></td>
          </tr>
        </table>
        <br><br>
    <!-- /derzeitige Position -->


    <table id="frametable" width=100% height=100% border=0 cellspacing=0 cellpadding=0 onresize="resize_div();">
    <tr>
    <td valign=top>
    <div id="ShownCenter" style="width: 100%; height: 100%; overflow: auto;">
        <table border=0 cellspacing=0 cellpadding=0 width=100% align=center>
          <tr>
    <!-- linke Seite -->
            <td width=150 valign=top>
              <script language=javascript>show_short_nav('IT',102);</script>
            </td>
    <!-- /linke Seite -->
    <!-- Mitte -->
                    <td width=520 align= center valign=top>
    <!-- Überschrift -->
              <table border=0 cellspacing=1 cellpadding=2 width=500 class=b align=center>
                <tr>
                  <td background="images/grad_500.jpg"><font class=w12><b>opti.</b>abfallwirtschaft.logistik</font></td>
                </tr>

    <!--          </table> -->
    <!-- Inhalt -->
    <!--           <table border=0 cellspacing=1 cellpadding=2 width=500 class=b> -->
                <tr>
                  <td class=w><font class=s12>
                   <font class=sf12>Leistungsspektrum</font><br>
                   <ul type=circle>
                    <li><a href="#stammdaten" class=b12>Stammdatenverwaltung</a></li>
                    <li><a href="#auftrag" class=b12>Logistische Arbeitsauftr&auml;ge</a></li>
                    <li><a href="#vertrag" class=b12>Vertragsverwaltung</a></li>
                    <li>Effektive Tourzusammenstellung</li>
                    <li><a href="#fakturierung" class=b12>Fakturierung</a></li>
                    <li><a href="#nachweis" class=b12>Betriebliche Nachweisf&uuml;hrung und Statistiken</a></li><br>
                   </ul>
                  </font></td>
                </tr>
              </table>
    <br>
    <a name="stammdaten"></a>
              <table border=0 cellspacing=1 cellpadding=2 width=500 class=b align=center>
                <tr>
                  <td background="images/grad_500.jpg"><font class=wf12>Stammdatenverwaltung</font></td>
                </tr>
                <tr>
                  <td class=w><font class=s12>
                    <ul type=circle>
                     <li>Firmen- und Debitorenadressen</li>
                     <li>Anfallstellen, Entsorgungsrhythmen</li>
                     <li>Standardtouren</li>
                     <li>Fahrzeuge, Anh&auml;nger, Zuordnungen</li>
                     <li>Beh&auml;lterklassen, Beh&auml;ltertypen mit/ohne Ident-Nummern</li>
                     <li>Individuell gestaltbarer Artikel-/Leistungsstamm</li>
                     <li>Abfallartenkatalog und Artikel-EAK-Zuordnung</li>
                     <li>Vielf&auml;ltige Preisbildungen (Listenpreise, Anfallstellenpreise)</li><br>
                    </ul>
                  </font></td>
                </tr>
                <tr>
                  <td background="images/grad_500.jpg" align=right><a href="#top" class=b12>top</a></font></td>
                </tr>
              </table>
    <br>
    <a name="auftrag"></a>
              <table border=0 cellspacing=1 cellpadding=2 width=500 class=b align=center>
                <tr>
                  <td background="images/grad_500.jpg"><font class=wf12>Logistische Arbeitsauftr&auml;ge</font></td>
                </tr>
                <tr>
                  <td class=w><font class=s12>
                    <ul type=circle>
                     <li>Operative Auftragsannahme &uuml;ber Schnellerfassung</li>
                     <li>Effektives Beh&auml;ltermanagement (Stellen, Holen, Leeren, Wechseln, Transportieren)</li>
                     <li>Pr&uuml;fen auf Beh&auml;lterverf&uuml;gbarkeit</li>
                     <li>Lieferscheine, &Uuml;bernahmescheine, Begleitscheine</li>
                     <li>Verwaltung und Zuordnung von Entsorgungsnachweisen</li>
                     <li>Flexible Tourenplanung und Auftragszuordnung</li>
                     <li>Sammeltouren (Werkstoffe, Sonderabf&auml;lle)</li><br>
                    </ul>
                  </font></td>
                </tr>
                <tr>
                  <td background="images/grad_500.jpg" align=right><font class=s12><a href="javascript: screen_open('de_it_entsorg_logistik_img1.html',600,455,null,null,'screen001');" class=b12>screenshot</a>&nbsp;|&nbsp;<a href="#top" class=b12>top</a></font></td>
                </tr>
              </table>
    <br>
    <a name="vertrag"></a>
              <table border=0 cellspacing=1 cellpadding=2 width=500 class=b align=center>
                <tr>
                  <td background="images/grad_500.jpg"><font class=wf12>Vertragsverwaltung</font></td>
                </tr>
                <tr>
                  <td class=w><font class=s12>
                    <ul type=circle>
                     <li>&Uuml;bernahme von Auftr&auml;gen aus Vertr&auml;gen</li>
                     <li>Beh&auml;ltermonatsmieten</li><br>
                    </ul>
                  </font></td>
                </tr>
                <tr>
                  <td background="images/grad_500.jpg" align=right><font class=s12><a href="javascript:screen_open('de_it_entsorg_logistik_img2.html',600,455,null,null,'screen002');" class=b12>screenshot</a>&nbsp;|&nbsp;<a href="#top" class=b12>top</a></font></td>
                </tr>
              </table>
    <br>
    <a name="fakturierung"></a>
              <table border=0 cellspacing=1 cellpadding=2 width=500 class=b align=center>
                <tr>
                  <td background="images/grad_500.jpg"><font class=wf12>Fakturierung</font></td>
                </tr>
                <tr>
                  <td class=w><font class=s12>
                     <ul type=circle>
                      <li>Rechnungspr&uuml;fung und Vorfakturierung in der Nachdisposition</li>
                      <li>Rechnungslegung durch Einzel-, Sammelrechnungen und Gutschriften</li>
                      <li>&Uuml;bergabe an Finanzbuchhaltung</li>
                      <li>Eingangsrechnunskontrolle</li><br>
                     </ul>
                  </font></td>
                </tr>
                <tr>
                  <td background="images/grad_500.jpg" align=right><font class=s12><a href="javascript:screen_open('de_it_entsorg_logistik_img3.html',600,455,null,null,'screen003');" class=b12>screenshot</a>&nbsp;|&nbsp;<a href="#top" class=b12>top</a></font></td>
                </tr>
              </table>
    <br>
    <a name="nachweis"></a>
              <table border=0 cellspacing=1 cellpadding=2 width=500 class=b align=center>
                <tr>
                  <td background="images/grad_500.jpg"><font class=wf12>Betriebliche Nachweisf&uuml;hrung und Statistiken</font></td>
                </tr>
                <tr>
                  <td class=w><font class=s12>
                     <ul type=circle>
                      <li>Automatische Anzeige wichtiger Informationen zu den Kunden (offene Rechnungen, offene Mahnungen) und Containern (aktueller Standort, Status)</li>
                      <li>Umsatz-, Roherl&ouml;s- und Mengenstatistiken</li><br>
                     </ul>
                  </font></td>
                </tr>
                <tr>
                  <td background="images/grad_500.jpg" align=right><font class=s12><a href="javascript:screen_open('de_it_entsorg_logistik_img4.html',600,455,null,null,'screen004');" class=b12>screenshot</a>&nbsp;|&nbsp;<a href="#top" class=b12>top</a></font></td>
                </tr>
              </table>
    <br>
              <table border=0 cellspacing=1 cellpadding=2 width=500 class=b align=center>
                <tr>
                  <td background="images/grad_500.jpg"><font class=wf12>Zusatz-Infos</font></td>
                </tr>
                <tr>
                  <td class=w><font class=s12>
                     Wenn Sie sich noch ausf&uuml;hrlicher &uuml;ber <b>opti.</b>abfallwirtschaft informieren m&ouml;chten,
                     k&ouml;nnen Sie hier unsere Informationsmappe herunterladen.<br><br>

                     <b>Download</b><br><br>
                     &nbsp;&nbsp;<a href="download/abfallwirtschaft.pdf" class=b12>Informationsmappe <b>opti.</b>abfallwirtschaft</a> (2,5 MB)<br><br>
                   </font></td>
                </tr>
                <tr>
                  <td background="images/grad_500.jpg" align=right><a href="#top" class=b12>top</a></font></td>
                </tr>
              </table>
                    </td>
    <!-- /Mitte -->
    <!-- rechte Seite -->
            <td width=150 valign=top>&nbsp;
            </td>
    <!-- /rechte Seite -->
          </tr>
        </table>
        <script language=javascript>copyright();</script>
    </div>
    </td>
    </tr>
    </table>
    <!-- /INHALT -->
    <div ONMOUSEOVER="nav_switch(1);" ONMOUSEOUT="nav_switch(0);" id="NavBar" style='filter: Alpha(opacity=50, finishopacity=50, style=2); position:absolute; left:0; bottom:0; z-index:100, width=60; '></div>
    <script>show_sm_nav();</script>
      </body>
    </html> 



  4. #4
    Avatar von womstar
    womstar ist offline Lounge-Member
    registriert
    22-07-2002
    Ort
    latente matrix
    Beiträge
    5.913
    naja nach soviel code würde ich dir lieber eine erfolgst meldung sagen aber ich würde meinen das anker das so ansich haben das sie den beankerten text an die obere kannte des browsers setzten......ich würd mein dann must du den sicht bereich so verkleiner das du nicht zwei scrollbalken hast weil der anker am document gebunden ist also das heist das das document keine scrollleisten haben darf sonder nur das div......dann kalppt das gut.......also wäre mein tipp modifizierung der seite.....

  5. #5
    Avatar von PHP-B-GINNA
    PHP-B-GINNA ist offline Routinier
    registriert
    26-03-2001
    Ort
    Germany
    Beiträge
    307

    Keine Chance

    also - das mit dem Resizen geht nicht - da hab ich keine Chance

    ich suche eine Lösung auch ohne Anke -
    zur not reicht mir ja sowas in der Art:

    scrollTo (Pixel) - aber da wird ja auch die Seite gescrollt - leider - aber sowas muss doch auch mit einem <div> funzen oder?



  6. #6
    Avatar von womstar
    womstar ist offline Lounge-Member
    registriert
    22-07-2002
    Ort
    latente matrix
    Beiträge
    5.913
    hier aber das sieht nicht sehr schön aus hattes es schon probiert......

    <SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
    function scroll_me(){
    scroll(0)
    setTimeout('scroll_me()',1);
    }
    scroll_me();
    </SCRIPT>

    [script by urmel]

    damit schnappt er immer oben ein.......

    aber man kann den div mit getElementId ansprechen und dann einn script so um modelieren das es div scrollt.....guck mal!!

  7. #7
    Avatar von PHP-B-GINNA
    PHP-B-GINNA ist offline Routinier
    registriert
    26-03-2001
    Ort
    Germany
    Beiträge
    307

    hmmm

    Also ich habe 2 Varianten ausprobiert:
    ich lasse scrollen, wenn auf den entsprechenden Link geklickt wird
    gestartet wird dann zB so:
    <a href="javascript:scroll_down(0,350);">Link</a>

    PHP-Code:
    function scroll_down(actpos,endpos)
    {
     if(
    actpos <= endpos)
     {
      
    document.getElementById("ShownCenter").scroll(actpos);
      
    actpos++;
      
    setTimeout("scroll_down("+actpos+","+endpos+")",1);
     }

    und
    PHP-Code:
    function scroll_down(actpos,endpos)
    {
     if(
    actpos <= endpos)
     {
      
    document.getElementById("ShownCenter").scrollTo(actpos);
      
    actpos++;
      
    setTimeout("scroll_down("+actpos+","+endpos+")",1);
     }


    beide male kommt:
    "Das Objekt unterstützt die Eigenschaft oder Funktion nicht"
    tja und nu?



  8. #8
    Avatar von womstar
    womstar ist offline Lounge-Member
    registriert
    22-07-2002
    Ort
    latente matrix
    Beiträge
    5.913
    taj und nu wissen wa das dat nicht geht weil div mit overflow das nicht kann, hab genaus so rum probiert.....so wäre es logisch gewesen aber für das script nicht,

    iframe?? iiiiii iframe...ja ja aber was sonst??

  9. #9
    Bjoern ist offline Haudegen
    registriert
    05-04-2002
    Ort
    Berlin
    Beiträge
    507
    Man könnte beim nach unten Scrollen immer Inhalt entfernen und beim nach oben Scrollen wieder hinzufügen.
    Das wäre aber wahrscheinlich so kompliziert, dass...
    mach' einen Iframe

  10. #10
    Avatar von PHP-B-GINNA
    PHP-B-GINNA ist offline Routinier
    registriert
    26-03-2001
    Ort
    Germany
    Beiträge
    307
    ICH WILL KEINEN IFRAME =(

    so ein mist, aber es muss doch funzen - schlißtlich kann man <div>s doch auch über buttons selber scrollen oder liege ich da falsch

    KENNT JEMAND EINE SITE, DIE SOWAS HAT? - würde glaube ich schon helfen ...



  11. #11
    Avatar von hjf
    hjf
    hjf ist offline Foren-Gott
    registriert
    06-04-2002
    Beiträge
    3.079
    Hi PHP-B-GINNA!
    Meinste sowas? (Ganz unten, der letzte Beitrag von Kerim):
    http://forum.mywebaid.de/showthread....5&pagenumber=2
    oder diesda?:
    http://forum.mywebaid.de/showthread....5&pagenumber=1
    lg joachim

  12. #12
    Avatar von PHP-B-GINNA
    PHP-B-GINNA ist offline Routinier
    registriert
    26-03-2001
    Ort
    Germany
    Beiträge
    307
    ich habe es jetzt anders gelöst...

    aber die idee mit dem Clip ist wirklich nicht schlecht
    -ist mir aber zu umständlich =)



Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •