SorgenKind Mech: vertikaler balken mit dynamischem scroll-bereich

SELF-Forum

vertikaler balken mit dynamischem scroll-bereich

SorgenKind Mech
– Informationen zu den Bewertungsregeln

Hallo liebes forum,

ich suche gerade nach einer lösung, was auch sonst ^^

golgendes soll gegeben sein:
man stelle sich eine sehr lange tabelle vor, in der man sehr oft sach suchen muss, welche häufiger vorkommen

dafür gibt es nun eine suchfunktion, welche bei eingabe eines wertes alle nicht relevanten tabellenzeilen ausblendet um die übersichtlichkeit zu erhöhen

natürlich soll diese suchfunktion von überall aus verfügbar sein, also gibt es ein DIV position:fixed welcher mit ALT+F ein- bzw. aufgeblendet werden kann
dieser stellt nun einen seitlichen balken dar, mit einer höhe von 100%

im oberen teil befindet sich das suchfeld und einige suchoptionen, sprich n paar checkboxen und n paar radio-buttons
dieser bereich ist relativ fix, er wird sich in der höhe wahrscheinlich nicht sonderlich ändern

der ganze verbleibende platz nach unten hinweg soll für eine dynamische auflisung genutzt werden, welche nicht oft länger ist, als der bildschirm hergibt, sprich scrollen ist unvermeidbar (seiten zum durchblättern sind unpraktikabel)

nun ist es aktuell so, dass der DIV overflow-y:scroll als eigenschaft hat, und somit hat der ganze DIV einen Scrollbalken, wodurch ich natürlich auch das Suchfeld und die suchoptionen "wegscrolle"
ich möchte gern den kompletten restlichen platz nutzen, und darin scrollen können, die frage ist nur wie?

meine erste idee: ich erstelle in dem DIV eine tabelle, height:100% mit 2 zeilen, der ersten zeile gebe ich einen fixen wert in der höhe von z. B. 150px, die zweite zeile nimmt somit den rest des platzes ein, darin könnt ich jetz wieder ein DIV rein setzen mit einer höhe von 100% und bei overflow scrollen lassen (wahrscheinlich geht das schon mit der zelle direkt, müsst ich testen)

ABER ich hab so die vermutung, dass es auch "eleganter" geht, nur wie?

hat da jemand eine idee?

vielen dank für eure hilfe ;)

LG

euer Sorgenkind Mech

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. vertikaler balken mit dynamischem scroll-bereich

    ichen
    – Informationen zu den Bewertungsregeln

    Hi SorgenKind Mech!

    ich hoffe ich hab's richtig verstanden. Nimm doch einfach zwei Divs. Der eine ist einfach mit dem Formular gefüllt und hat eine relative Höhenangabe und der zweite direkt darunter. Wenn du dem zweiten die entsprechenden Eigenschaften verpasst, sollte es gehen.

    <div id="suchbar">
     <div>Ich bin 10% hoch. Hier steht das Formular.</div>
     <div>Ich bin 90% hoch und scrolle in y-Richtung.</div>
    </div>

    tschau
    ichen

    --
    Halte deine Umwelt sauber!
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. vertikaler balken mit dynamischem scroll-bereich

      SorgenKind Mech
      – Informationen zu den Bewertungsregeln

      Hi SorgenKind Mech!

      ich hoffe ich hab's richtig verstanden. Nimm doch einfach zwei Divs. Der eine ist einfach mit dem Formular gefüllt und hat eine relative Höhenangabe und der zweite direkt darunter. Wenn du dem zweiten die entsprechenden Eigenschaften verpasst, sollte es gehen.

      <div id="suchbar">
      <div>Ich bin 10% hoch. Hier steht das Formular.</div>
      <div>Ich bin 90% hoch und scrolle in y-Richtung.</div>
      </div>

      tschau
      ichen

      hallo ichen, du hast "fast" verstanden ;)
      der obere darf leider keine prozentuale höhe haben, da beispielsweise 10% je nach fenstergröße entweder zu klein oder zu groß (zu viel unnötiger leerraum)

      der obere müsste eine höhe von ca. 150px haben, und der rest der höhe soll dann scrollbar sein

      hast du da auh eine idee für?

      dennoch bis hierhin danke für deine überlegung

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

  2. vertikaler balken mit dynamischem scroll-bereich

    SorgenKind Mech
    – Informationen zu den Bewertungsregeln

    Hallo liebes Forum,

    ich hab jetz mal meine tabellen-variante versucht, aber leider weder in IE noch in FF erfolge:

    <span id='wp_suchen_span' style="position:fixed; top:0px; height:100%; display:none; background-color:#CCC; border: 2px solid black;">  
	<table border="0" cellpadding="" cellspacing="0" style="height:100%; padding:5px;">  
	<tr><td style="height:150px;">  
		Suche: <span title="Hier kann innerhalb des Wochenplanes gesucht werden.&#13Nach der Eingabe von mind. 3 Zeichen beginnt die Suche automatisch.&#13Durch leeren des Feldes wird die Suche zurückgesetzt.">  
			<input type="text" id="wp_filtern_input" onKeyUp="wp_filtern_fkt()" style="width:200px; background-color:transparent; border:none; border-bottom:1px solid black;">  
		</span><br />  
		Filter anwenden auf:<br />  
		<table border="0" cellpadding="2" cellspacing="0">  
			<tr>  
				<td><input id='wp_filtern_input_0' name='wp_filtern_input_x' type='radio' value='0' onKeyUp="wp_filtern_fkt()" onClick="wp_filtern_fkt()" CHECKED> <span onClick="document.getElementById('wp_filtern_input_0').click();" style="cursor:pointer;">Alle </span></td>  
				<td><input id='wp_filtern_input_1' name='wp_filtern_input_x' type='radio' value='1' onKeyUp="wp_filtern_fkt()" onClick="wp_filtern_fkt()"> <span onClick="document.getElementById('wp_filtern_input_1').click();" style="cursor:pointer;">Mo </span></td>  
				<td><input id='wp_filtern_input_2' name='wp_filtern_input_x' type='radio' value='2' onKeyUp="wp_filtern_fkt()" onClick="wp_filtern_fkt()"> <span onClick="document.getElementById('wp_filtern_input_2').click();" style="cursor:pointer;">Di </span></td>  
				<td><input id='wp_filtern_input_3' name='wp_filtern_input_x' type='radio' value='3' onKeyUp="wp_filtern_fkt()" onClick="wp_filtern_fkt()"> <span onClick="document.getElementById('wp_filtern_input_3').click();" style="cursor:pointer;">Mi </span></td>  
			</tr>  
			<tr>  
				<td><input id='wp_filtern_input_4' name='wp_filtern_input_x' type='radio' value='4' onKeyUp="wp_filtern_fkt()" onClick="wp_filtern_fkt()"> <span onClick="document.getElementById('wp_filtern_input_4').click();" style="cursor:pointer;">Do </span></td>  
				<td><input id='wp_filtern_input_5' name='wp_filtern_input_x' type='radio' value='5' onKeyUp="wp_filtern_fkt()" onClick="wp_filtern_fkt()"> <span onClick="document.getElementById('wp_filtern_input_5').click();" style="cursor:pointer;">Fr </span></td>  
				<td><input id='wp_filtern_input_6' name='wp_filtern_input_x' type='radio' value='6' onKeyUp="wp_filtern_fkt()" onClick="wp_filtern_fkt()"> <span onClick="document.getElementById('wp_filtern_input_6').click();" style="cursor:pointer;">Sa </span></td>  
				<td><input id='wp_filtern_input_7' name='wp_filtern_input_x' type='radio' value='7' onKeyUp="wp_filtern_fkt()" onClick="wp_filtern_fkt()"> <span onClick="document.getElementById('wp_filtern_input_7').click();" style="cursor:pointer;">So </span></td>  
			</tr>  
		</table><br />  
		<input type='checkbox' id='wp_filtern_voll_weg' onKeyUp="wp_filtern_fkt()" onClick="wp_filtern_fkt()">  
			als "voll" markierte Tage ignorieren<br />  
		<input type='checkbox' id='wp_filtern_leere_zeigen' onKeyUp="wp_filtern_fkt()" onClick="wp_filtern_fkt()">  
			"leere" Tage mit anzeigen<br />  
		<hr>  
		<h3>Techniker:</h3>  
	</td></tr><tr><td><div id='wp_suchen_tk_liste' style="background-color:#EEE; height:100%; overflow-y: scroll;"></div></td></tr>  
	</table>  
</span>

    der Scrollbalken wird zwar nun an der richtigen stelle angezeigt, jedoch ist er witzlos, da der div sich einfach so lang zieht wie der inhalt ihn benötigt (das ende des scroll-balkens ist auch nichts sichtbar)

    inhalt des div sind einfach nur:
    <br /><a href='#123'>bla</a>
    <br /><a href='#123'>bla</a>
    <br /><a href='#123'>bla</a>
    <br /><a href='#123'>bla</a>
    usw.

    kann mir jemand sagen wo mein fehler liegt? danke sehr!

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln