[HTML] Schuifbalk in te klein venster. - Softwareontwikkeling

dinsdag 23 augustus 2005 16:00

Acties:

Onbekend

...

Topicstarter

Ik heb hier een stukje HTML-code. Voor het gemak heb ik het vereenvoudigd

HTML:

<DIV>
  <TABLE>
    <TR>
      <TD>
        EenHeelLangWoord
      </TD>
    </TR>
  </TABLE>
  <TABLE>
    <TR>
      <TD>
        KleinWoordje
      </TD>
    </TR>
  </TABLE>
</DIV>

Met behulp van JavaScript kan ik de grootte en positie van de div (en dus van de tabel) aanpassen. Dit werkt goed.
Maar nu heb ik het probleem dat ik af en toe lange woorden in de tabel heb. Als ik de div te smal maak, wordt de onderste tabel smaller dan de bovenste. Dat wil ik niet, en wil graag dat er een schuifbalkje in de bovenste tabel komt.

Ik heb al met diverse HTML-tags wat geprobeerd zoals DIV, IFRAME en een tabel in een tabel.
Bij de IFRAME kreeg ik wel het gewenste resultaat, maar ik moest deze naar een nieuw HTML-document laten verwijzen. Ik wil graag dit in hetzelfde document houden.
Ik zoek dus iets waardoor ik de tekst in de tabel met een schuifbalk kan laten weergeven als daar te weinig ruimte voor is.
Heeft iemand een suggestie ?

Speel ook Balls Connect en Repeat

dinsdag 23 augustus 2005 16:02

Acties:

BtM909

Watch out Guys...

Gewoon HTML elementen gebruik waar ze voor bedoeld zijn

Mocht een een element het beste geschikt vinden (zou bij wijze van spreke een td kunnen zijn), dan kan je kijken naar de CSS property overflow

Ace of Base vs Charli XCX - All That She Boom Claps (RMT) | Clean Bandit vs Galantis - I'd Rather Be You (RMT)
You've moved up on my notch-list. You have 1 notch
I have a black belt in Kung Flu.

dinsdag 23 augustus 2005 16:21

Acties:

Onbekend

...

Topicstarter

Deze heb ik ook al geprobeerd. Dit werkt wel als ik de breedte vergroot. Maar de breedte verkleinen lukt niet meer vanwege die schuifbalken.

Speel ook Balls Connect en Repeat

dinsdag 23 augustus 2005 18:34

Acties:

Bosmonster

*zucht*

Ook onbekend schreef op dinsdag 23 augustus 2005 @ 16:21:
Deze heb ik ook al geprobeerd. Dit werkt wel als ik de breedte vergroot. Maar de breedte verkleinen lukt niet meer vanwege die schuifbalken.

divje op:

overflow: auto
width: 500 px;

Wordt ie 500 px breed. Als iets hem forceert om toch groter te worden (plaatje of lang woord), dan krijg je een scrollbalk.

Als je het gewoon weg wilt hebben kun je ook overflow:hidden gebruiken natuurlijk (mooier dan scrollbalken).

woensdag 24 augustus 2005 13:52

Acties:

Onbekend

...

Topicstarter

Helaas lukt mij dat ook niet. Zowel als in <DIV> als in <TABLE>.

Hier is mijn stukje code.
Je kan het rechter rode stukje verplaatsen.
Naar rechts doet hij het goed. Maar naar links doet hij het niet zoals ik wil.

HTML:

<HTML>
    <HEAD>
    </HEAD>
    <BODY OnMouseUp="MouseUp(event)" OnMouseMove="MouseMove(event)" >
        <SCRIPT>
            Xmouse=0
            Ymouse=0
            Name="NULL"
            Action="NULL"
    
            function MouseDown(event,ScreenName)
            {
                Name=ScreenName;
                Xmouse=event.clientX;
                Ymouse=event.clientY;
                Action="EResize";
            }
    
            function MouseMove(event)
            {
                if (Action=="EResize")
                {
                    Var = event.clientX - Xmouse + Number(document.getElementById(Name).style.width.replace("px", ""));
                    document.getElementById(Name).style.width = Var;
                }       
    
                Xmouse=event.clientX;
                Ymouse=event.clientY;           
            }
            
            function MouseUp(event)
            {
                Name="NULL";
                Action="NULL";
            }       
        </SCRIPT>   
        
        <DIV ID="ScreenName" Name="ScreenName" STYLE="float: left; position: absolute; VISIBILITY: visible; margin-top: 10px; margin-left: 10px; width: 400px; height: 20px; ">
            Andere tabellen.
            <TABLE width=100%>
                <TR >
                    <TD BGCOLOR="#F00000" STYLE="width: 5px;">
                        &nbsp
                    </TD>
                    <TD STYLE="overflow: hidden"> 
                        eenhelelangeteksteenhelelangeteksteenhelelangetekst
                    </TD>
                    <TD BGCOLOR="#F00000" OnMouseDown="MouseDown(event,'ScreenName')" STYLE="cursor: e-resize;width: 5px;">
                        &nbsp
                    </TD>
                </TR>
            </TABLE>
            Andere tabellen.
        </DIV>
    </BODY>
</HTML>

Hoe krijg ik het voor elkaar dat als hij te ver naar links gaat, er óf een schuifbalk komt óf dat de tekst onzichtbaar wordt ?

Speel ook Balls Connect en Repeat

woensdag 24 augustus 2005 13:57

Acties:

MBV

overflow:auto is de tip, niet overflow:hidden
En dat uiteraard in combinatie met een geforceerde breedte

woensdag 24 augustus 2005 14:10

Acties:

Onbekend

...

Topicstarter

MBV schreef op woensdag 24 augustus 2005 @ 13:57:
overflow:auto is de tip, niet overflow:hidden
En dat uiteraard in combinatie met een geforceerde breedte

Ik heb nu dit gedaan:

HTML:

.................
<TD STYLE="overflow: auto;width: 200px;"> 
    eenhelelangeteksteenhelelangeteksteenhelelangetekst
</TD>
.................

Maar dit werkt ook niet. Zowel onder FF als onder IE.

Speel ook Balls Connect en Repeat

woensdag 24 augustus 2005 15:28

Acties:

Sappie

De Parasitaire Capaciteit!

opgegeven breedte (en hoogte) voor een table-cell is een aanbevolen breedte. Wanneer content niet in een table-cell past wordt deze in de meeste (zoniet alle) browsers uitgerekt.

je zou

code:

1	display: block;

mee kunnen geven, echter gedraagt een block level element zich weer anders dan een table-cell..

[ Voor 36% gewijzigd door Sappie op 24-08-2005 15:31 ]

Specs | Audioscrobbler

woensdag 24 augustus 2005 16:38

Acties:

Onbekend

...

Topicstarter

Sappie schreef op woensdag 24 augustus 2005 @ 15:28:
opgegeven breedte (en hoogte) voor een table-cell is een aanbevolen breedte. Wanneer content niet in een table-cell past wordt deze in de meeste (zoniet alle) browsers uitgerekt.

je zou
code:
1
display: block;
mee kunnen geven, echter gedraagt een block level element zich weer anders dan een table-cell..

Bedankt. I.c.m. overflow: auto; werkt deze...
Ik heb 2 regels veranderd....

Voor degene die de uiteindelijke code willen hebben:

HTML:

<HTML>
    <HEAD>
    </HEAD>
    <BODY OnMouseUp="MouseUp(event)" OnMouseMove="MouseMove(event)" >
        <SCRIPT>
            Xmouse=0
            Ymouse=0
            Name="NULL"
            Action="NULL"
    
            function MouseDown(event,ScreenName)
            {
                Name=ScreenName;
                Xmouse=event.clientX;
                Ymouse=event.clientY;
                Action="EResize";
            }
    
            function MouseMove(event)
            {
                if (Action=="EResize")
                {
                    Var = event.clientX - Xmouse + Number(document.getElementById(Name).style.width.replace("px", ""));
                    document.getElementById(Name+'T').style.width = Var-6;<!-- -->
                    document.getElementById(Name).style.width = Var;
                }       
    
                Xmouse=event.clientX;
                Ymouse=event.clientY;           
            }
            
            function MouseUp(event)
            {
                Name="NULL";
                Action="NULL";
            }       
        </SCRIPT>   
        
        <DIV ID="ScreenName" Name="ScreenName" STYLE="float: left; position: absolute; VISIBILITY: visible; margin-top: 10px; margin-left: 10px; width: 400px; height: 20px; ">
            Andere tabellen.
            <TABLE width=100%>
                <TR >
                    <TD BGCOLOR="#F00000" STYLE="width: 3px;">
                        &nbsp
                    </TD>
                    <TD STYLE="overflow: auto; display: block;width: 394px;height: 100px;" ID="ScreenNameT" Name="ScreenNameT"> <!-- -->
                        eenhelelangeteksteenhelelangeteksteenhelelangetekst

                    </TD>
                    <TD BGCOLOR="#F00000" OnMouseDown="MouseDown(event,'ScreenName')" STYLE="cursor: e-resize;width: 3px;">
                        &nbsp
                    </TD>
                </TR>
            </TABLE>
            Andere tabellen.
        </DIV>
    </BODY>
</HTML>

Speel ook Balls Connect en Repeat