Zum Inhalt springen

Scrollable Element

mOSSpOWER

Von mOSSpOWER
in Webdesign

 Teilen

Empfohlene Beiträge

mOSSpOWER

mOSSpOWER

Geschrieben
Geschrieben

Hallo "Freunde",

folgender Quellcode:

<html>

<body>

<div style="height: 200px; width: 200px; border: 

1px solid #000000; overflow: auto">

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

</div>

</body>

</html>

Mein Problem: Ist es möglich (hoffentlich, sonst bin ich tod :) ), mit Javascript den Scrollbalken zu manipulieren? (d.h. den Scrollbalken zu bewegen?)

Danke für eure Antworten.

Gruß

Link zu diesem Kommentar
Auf anderen Seiten teilen
mOSSpOWER

mOSSpOWER

Geschrieben
  • Autor
Geschrieben
spontan fällt mir dazu ein dass du ja anker definieren und die per javascript ansprechen könntest.

ein paar angaben wären nicht schlecht wozu du das verwenden möchtest.

Danke, jedoch mit den Ankern reicht mir nicht, das will ich Dir erklären.

Ich bin gerade dabei eine Paginationseiteliste mit optional einer scrollable zu ersetzen (sortiert wird über DOM) ... Problem ist, wenn 2 oder mehrere Listen im Contentfenster sind, dass mir nicht ein Anker ausreicht, ich möchte nämlich immer wenn benutzer Zeile anscrollt und Aktion auswählt, dass er nach dem Seitenaufbau auch wieder in diesem Bereich die Sicht hat und nicht dann wieder ganz nach oben scrollen muss .... auch bei Navigation zurück sollte die ausgewählte Zeile sofort sichtbar sein. Muss doch irgendwie gehen mit Javascritp ... habe leider bisher noch nix gefunden ... ich hoffe, die Erklärung reicht.

cu ... Gruß Holger

Link zu diesem Kommentar
Auf anderen Seiten teilen
jasso

jasso

Geschrieben
Geschrieben

um ganz ehrlich zu sein versteh ich nicht wirklich was du vorhast ... aber ich versuchs mal:

du willst eine seite in welcher an verschiedenen punkten (positionen des scrollbalkens) links (<-- aktionen) auf andere seiten sind.

wenn er wieder auf die ursprüngliche seite zurückgeht soll die ausgangsposition wieder angesprungen werden.

richtig soweit?

und was zum ... ist eine "Paginationseiteliste" :confused:

lg

jasso

Link zu diesem Kommentar
Auf anderen Seiten teilen
mOSSpOWER

mOSSpOWER

Geschrieben
  • Autor
Geschrieben
um ganz ehrlich zu sein versteh ich nicht wirklich was du vorhast ... aber ich versuchs mal:

du willst eine seite in welcher an verschiedenen punkten (positionen des scrollbalkens) links (<-- aktionen) auf andere seiten sind.

wenn er wieder auf die ursprüngliche seite zurückgeht soll die ausgangsposition wieder angesprungen werden.

richtig soweit?

und was zum ... ist eine "Paginationseiteliste" :confused:

lg

jasso

Hi,

ja, Du hast es verstanden (u.A.) ... wen der Benutzer zurückkehrt, soll er den Eintrag in der Liste sehen ohne zu scrollen ... so, da es jetzt aber verschiedene Ausgangslagen gibt (hier speziell 3 Listen), reicht mir nicht EIN Anker, deshalb brauche ich die Möglichkeit mit Javascript.

Eine Pagination ist einfach eine Liste mit vorgeschriebener Länge (z.B. 10) und dann kann man mit 1 -> 2 -> 3 ect. auf die nächsten mit einem Link zugreifen ... haste doch schon 10000 mal gesehen :D

...

Gruß

Holger

Link zu diesem Kommentar
Auf anderen Seiten teilen
jasso

jasso

Geschrieben
Geschrieben
ja, Du hast es verstanden (u.A.) ... wen der Benutzer zurückkehrt, soll er den Eintrag in der Liste sehen ohne zu scrollen ... so, da es jetzt aber verschiedene Ausgangslagen gibt (hier speziell 3 Listen), reicht mir nicht EIN Anker, deshalb brauche ich die Möglichkeit mit Javascript
hört sich jetzt evtl. blöd an aber ... mach doch MEHRERE anker?!

Eine Pagination ist einfach eine Liste mit vorgeschriebener Länge (z.B. 10) und dann kann man mit 1 -> 2 -> 3 ect. auf die nächsten mit einem Link zugreifen ... haste doch schon 10000 mal gesehen :D
da hast du wohl recht. aber den begriff kannte ich noch nicht -> man lernt nie aus:floet:
Link zu diesem Kommentar
Auf anderen Seiten teilen
mOSSpOWER

mOSSpOWER

Geschrieben
  • Autor
Geschrieben
hört sich jetzt evtl. blöd an aber ... mach doch MEHRERE anker?!

Hmm ... ich würde ja auch gerne was dazulernen, aber wie bitte definiert man mehrere Anker? ... ich habe mal schnell den Quellcode angepasse:



<html>

<body>

<div style="height: 200px; width: 200px; border: 1px solid #000000; overflow: auto">

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

<a name="anker1"/>

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

</div>


<br /><br />

<div style="height: 200px; width: 200px; border: 1px solid #000000; overflow: auto">

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

<a name="anker2"/>

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

</div>


<br /><br />

<div style="height: 200px; width: 200px; border: 1px solid #000000; overflow: auto">

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

<a name="anker3"/>

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

</div>

</body>

</html>

So, ein Ankeraufruf funzzzt ... aber das -> C:\Documents and Settings\holger.moosbauer.MOSSPOWER\Desktop\tester.htm#anker1#anker2#anker3 nicht ... kann mir zwar nicht vorstellen, dass man mehrere Anker ansteuern kann, aber vielleicht kannst mich aufklären ... schon mal danke.

Cu ... Gruß Holger

Link zu diesem Kommentar
Auf anderen Seiten teilen
geloescht_JesterDay

geloescht_JesterDay

Geschrieben
Geschrieben

So, ein Ankeraufruf funzzzt ... aber das -> C:\Documents and Settings\holger.moosbauer.MOSSPOWER\Desktop\tester.htm#anker1#anker2#anker3 nicht ... kann mir zwar nicht vorstellen, dass man mehrere Anker ansteuern kann, aber vielleicht kannst mich aufklären ... schon mal danke.

Du kannst auch sinnvollerweise nur eine Stelle (einen Anker) anspringen. Was sollen denn alle 3 Anker? Zuerst zu anker 1 springen, dann sofort zu Anker2 und dann auf der Stelle zu Anker3? In dem Fall springst du ja gleich zu Anker3, und das geht ja auch.

Der anker soll ja nur die Stelle markieren, wo der Besucher zuletzt war (so wie ich das verstanden hab), und er kann ja nur an einer Stelle gewesen sein in dem Moment.:confused:

Link zu diesem Kommentar
Auf anderen Seiten teilen
jasso

jasso

Geschrieben
Geschrieben

^^ JETZT hab ich endlich verstanden was du vorhast (hab grad deinen code mal schnell selber in ne html gebastelt und angeguckt -> und siehe da es macht auf einmal sinn;) )

in so einem fall würd ich dir, auch wenn sie bei vielen leuten nicht gern gesehen sind, iframes empfehlen (da kannst du bei jedem deine anker setzten und einzelln aufrufen).

lg

jasso

Link zu diesem Kommentar
Auf anderen Seiten teilen
mOSSpOWER

mOSSpOWER

Geschrieben
  • Autor
Geschrieben
Du kannst auch sinnvollerweise nur eine Stelle (einen Anker) anspringen. Was sollen denn alle 3 Anker? Zuerst zu anker 1 springen, dann sofort zu Anker2 und dann auf der Stelle zu Anker3? In dem Fall springst du ja gleich zu Anker3, und das geht ja auch.

Der anker soll ja nur die Stelle markieren, wo der Besucher zuletzt war (so wie ich das verstanden hab), und er kann ja nur an einer Stelle gewesen sein in dem Moment.:confused:

Hi,

OK, :) ... dann erkläre ich mal weiter ... Benutzer kommt auf eine Seite mit EINER Liste .... wählt bestimmten Eintrag aus und bleibt (u.u.) auf der gleichen Seite, nur das jetzt ZWEI Listen angezeigt werden ... So ... User wählt jetzt auf der zweiten Liste ein Element aus und kommt auf eine andere Seite (oder auf die gleiche ..... egal) ... so, wie kann ich jetzt die erste Liste und die zweite Liste zumindest soweit scrollen, dass die vorher ausgewählten Einträge sichtbar sind? :confused:

Gruß

Holger

Link zu diesem Kommentar
Auf anderen Seiten teilen
mOSSpOWER

mOSSpOWER

Geschrieben
  • Autor
Geschrieben
hmmm... andere frage wenn wir schon beim auswählen sind. wie willst du die auswahl über divs machen? wären auswahlfelder nicht besser (<-- lassen sich auch besser ansetuern^^)

lg

jasso

Naja, es wird dann am Ende in etwa so aussehen -> 


<html>

<head>


<style type="text/css">


table.list-info {

  width: 800px; 

  border-collapse: collapse;

  background: #3C4E64

}


.list-info thead, tfoot {

  font-weight: bold;

  height: 20px;

  font-size: 12px;

}


.list-info td {

  color: #fff;

  border-bottom: 1px solid #fff; 

}


div.list-data-display {

  height: 102px; 

  overflow: auto;

}


table.list-data {

  width: 779px; 

  border-collapse: collapse;

  font-size: 12px;

}


.list-data td {

  background: #ddd; 

  color: #000;

  border: 1px solid #fff; 

}


.list-data tr.bright td {

  background: #eee; 

  color: #000;

}


.list-data-link {

  text-align: right;

}



.th1 {width:170px;}

.th2 {width:250px;}

.th3 {width:100px;}

.th4 {width:100px;}

.th5 {width:100px;}

.th6 {width:80px;}


.td1 {width:170px;}

.td2 {width:250px;}

.td3 {width:100px;}

.td4 {width:100px;}

.td5 {width:100px;}

.td6 {width:59px;}



body {

  font-family: Verdana;

}



</style>

</head>


<body>

<br>


    <table class="list-info">

      <thead>

        <tr>

          <td class="th1"> Name <img src="arrow-down.gif" /></td> 

          <td class="th2">Description <img src="arrow-up.gif" /></td> 

          <td class="th3">Product</td> 

          <td class="th4">Valid From</td> 

          <td class="th5">Valid To</td> 

          <td class="th6">Actions</td> 

        </tr>

       </thead>

       <tbody>

       <tr>

         <td colspan="6">


           <div class="list-data-display">

	     <table class="list-data">


      <tr>


        <td class="td1" scope="row">T3 4264</th>

        <td class="td2">Isle</td>

        <td class="td3">11:40</td>

        <td class="td4">11:42</td>

        <td class="td5">11:43</td>

        <td class="td6"> </td>


      </tr>


<tr class="bright">


        <td class="td1" scope="row">T3 4264</th>

        <td class="td2">Isle</td>

        <td class="td3">11:40</td>

        <td class="td4">11:42</td>

        <td class="td5">11:43</td>

        <td class="td6"> </td>


      </tr>


 <tr>


        <td class="td1" scope="row">T3 4264</th>

        <td class="td2">Isle</td>

        <td class="td3">11:40</td>

        <td class="td4">11:42</td>

        <td class="td5">11:43</td>

        <td class="td6"> </td>


      </tr>


<tr class="bright">


        <td class="td1" scope="row">T3 4264</th>

        <td class="td2">Isle</td>

        <td class="td3">11:40</td>

        <td class="td4">11:42</td>

        <td class="td5">11:43</td>

        <td class="td6"> </td>


      </tr>


 <tr>


        <td class="td1" scope="row">T3 4264</th>

        <td class="td2">Isle</td>

        <td class="td3">11:40</td>

        <td class="td4">11:42</td>

        <td class="td5">11:43</td>

        <td class="td6"> </td>


      </tr>


<tr class="bright">


        <td class="td1" scope="row">T3 4264</th>

        <td class="td2">Isle</td>

        <td class="td3">11:40</td>

        <td class="td4">11:42</td>

        <td class="td5">11:43</td>

        <td class="td6"> </td>


      </tr>


<tr>


        <td class="td1" scope="row">T3 4264</th>

        <td class="td2">Isle</td>

        <td class="td3">11:40</td>

        <td class="td4">11:42</td>

        <td class="td5">11:43</td>

        <td class="td6"> </td>


      </tr>


</table>

</div> 


</td></tr>

</tbody>

 <tfoot>

        <tr>

          <td colspan="6" align="right">31 Matches </td>

        </tr>

      </tfoot>

</table>



</body>

</html>

diese Listen koennen "verdammt" lang werden und ich will (diesmal) keine Pagination einsetzen, da dies mit dem DIV und dem Scrollen ab 1.5 auch beim Firefox funzzt und ich die Daten sowieso in der Session habe, möchte ich solche Listen benutzen. (kommen dann noch Mini-Icons hin) ... nach Aktion geht eine oder meherere Liste auf gleicher Seite auf ... usw usf .... Danke mit dem Iframe-Tip ... mich graust es davor und eigentlich will ich die Listen in Propertyfiles konfigurierbar machen, so dass die dann Tag wegschreibt und Sortierung über DOM möglich ist ... wäre nicht gut mit iframes umsetzbar ... aber danke nochmal ...

Cu ... Gruß Holger

Link zu diesem Kommentar
Auf anderen Seiten teilen
mOSSpOWER

mOSSpOWER

Geschrieben
  • Autor
Geschrieben

Moin,

selbst ist der Mann :) ... ich habe es jetzt doch hinbekommen ... es ist total einfach .... wie alles, wenn man es weis :cool: .... der Code schaut dann so aus:

<html>

<head>

<script>

function changeScrollbar() {

  var element = document.getElementById("123");

  element.scrollTop = 120;

}

</script>

</head>

<body>

<div style="height: 200px; width: 200px; border: 

1px solid #000000; overflow: auto" id="123">

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

  hallo<br />

</div>


<br />

<input type="button" value="Es funzzzzzt :-)" onClick="changeScrollbar()" />

</body>

</html>

Puh, nochmal Glück gehabt ... danke nochmal für Eure Anregungen.

Gruß

Holger

Link zu diesem Kommentar
Auf anderen Seiten teilen

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

×
 Teilen
Zur Themenübersicht

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Links

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...