[JS] Table in een div scrollen ipv pagina

[maikel]

Ik heb op een website een menu gemaakt met uitklap-submenu's. Nu staan in sommige van deze menu's erg veel opties en daarom heb ik er een maximale lengte aan gegeven.
Deze submenu's bestaan uit een div (met position:absolute) met daarin nog een div en daarin weer een table voor alle opties.

Het probleem is nu dat wanneer ik in zo'n submenu ga scrollen dit af en toe gewoon werkt (de table scrollt netjes), maar vaak scrollt ie de table niet, maar gaat ie ineens de pagina scrollen (waardoor de muis uit het menu gaat en het menu dus weer inklapt).

Om de een of andere reden wordt het scroll-event dus ineens niet meer door de div afgehandeld, maar door de pagina zelf.

Ik heb al wat zitten proberen met "onscroll = event.returnValue=false; event.cancelBubble = true;" in de verschillende div's en table's, maar dat maakte allemaal niets uit.

Weet iemand hoe ik dit op kan lossen?

Mijn code:

HTML:

<script language="javascript">
    function showMenu(menu)
    {
        hideMenu(Hoofdoptie1);
        hideMenu(Hoofdoptie2);
        if (menu == "[object]")
        {
            if (menu.style.display != "block")
            {
                menu.style.display = "block";
            }
        }
    }

    function hideMenu(menu)
    {
        if (menu == "[object]")
        {
            if (menu.style.display != "none")
            {
                menu.style.display = "none";
            }
        }
    }
</script>
<table height="100%" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td>
            <div style="position: relative;" onmouseover="showMenu(Hoofdoptie1);" style="cursor: hand;">
                Hoofdoptie1
                <div onmouseout="hideMenu(Hoofdoptie1);" style="height:160px;overflow-y:scroll;">
                    <table cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                            <td>Suboptie 1</td>
                        </tr>
                        <tr height="1px" bgcolor="#FFD090">
                            <td></td>
                        </tr>
                        <tr>
                            <td>Suboptie 2</td>
                        </tr>
                    </table>
                </div>
            </div>
        </td>
        <td width="25">
        </td>
        <td>
            <div style="position: relative" onmouseover="showMenu(Hoofdoptie2);" style="cursor: hand;">
                Hoofdoptie2
                <div onmouseout="hideMenu(Hoofdoptie2);"style="height:160px;overflow-y:scroll;">
                    <table cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                            <td>Suboptie 1</td>
                        </tr>
                        <tr height="1px" bgcolor="#FFD090">
                            <td></td>
                        </tr>
                        <tr>
                            <td>Suboptie 2</td>
                        </tr>
                    </table>
                </div>
            </div>
        </td>
    </tr>
</table>

[ Voor 21% gewijzigd door maikel op 09-12-2003 11:54 ]

[py.mosjuh]

niet omdat je muiscursor naast die tabel staat (en dus de pagina heeft geselecteerd?) noem maar iets doms hoor.. je code ziet er verder wel netjes uit. maar waarom heb je die table zo gebruikt? je wil neem ik aan dus het menu altijd tonen? zelf vind ik het makkelijker om dan met <a href> te werken omdat je dan al meteen een mooie hand cursor krijgt. en ook daarmee kan je een onmouseover doen etc...

[maikel]

py.mosjuh schreef op 09 december 2003 @ 11:56:
niet omdat je muiscursor naast die tabel staat (en dus de pagina heeft geselecteerd?) noem maar iets doms hoor.. je code ziet er verder wel netjes uit. maar waarom heb je die table zo gebruikt? je wil neem ik aan dus het menu altijd tonen? zelf vind ik het makkelijker om dan met <a href> te werken omdat je dan al meteen een mooie hand cursor krijgt. en ook daarmee kan je een onmouseover doen etc...

Ik houd m'n muiscursor op 1 plek tijdens het scrollen. En er is als het goed is ook geen ruimte 'naast de tabel' aangezien die op "width=100%" staat.

Als je een <a href> gebruikt, is alleen de tekst clickable. Nu is m'n hele TD clickable (en die kleurt ook mee als je er overheen gaat). Ziet er wat netter uit.

Overigens worden alle TR's in de tables dmv een repeater gevuld in ASP.Net, maar dat heeft niets met het probleem te maken.

[Justice]

Je moet gewoon even klikken binnen die div, daarna scroll je daarbinnen Heb je een voorbeeld pagina? Kan je niet gewoon de overflow css property binnen de div gebruiken? En welke browser gebruik je? Opera bijvoorbeeld ondersteunt het muiswieltje niet binnen scrollgelegenheden binnen een pagina.

[ Voor 27% gewijzigd door Justice op 09-12-2003 12:03 ]

[py.mosjuh]

maikel schreef op 09 december 2003 @ 11:58:
[...]
Ik houd m'n muiscursor op 1 plek tijdens het scrollen. En er is als het goed is ook geen ruimte 'naast de tabel' aangezien die op "width=100%" staat.

err.. je table height staat op 100%.. niet je width... wel de subopties maar ik denk niet dat je die op 100% hoeft te zetten?

maikel schreef op 09 december 2003 @ 11:58:Als je een <a href> gebruikt, is alleen de tekst clickable. Nu is m'n hele TD clickable (en die kleurt ook mee als je er overheen gaat). Ziet er wat netter uit.

Overigens worden alle TR's in de tables dmv een repeater gevuld in ASP.Net, maar dat heeft niets met het probleem te maken.

je kan eventueel ook van een TD gewoon onmouseover aanroepen hoor

[ Voor 8% gewijzigd door py.mosjuh op 09-12-2003 12:05 ]

[maikel]

Justice schreef op 09 december 2003 @ 12:02:
Je moet gewoon even klikken binnen die div, daarna scroll je daarbinnen Heb je een voorbeeld pagina? Kan je niet gewoon de overflow css property binnen de div gebruiken? En welke browser gebruik je? Opera bijvoorbeeld ondersteunt het muiswieltje niet binnen scrollgelegenheden binnen een pagina.

Als ik binnen die div klik, ga ik meteen door naar die menu-optie. En daarbij, in eerste instantie werkt het scrollen wel eventjes.
Ik heb helaas geen voorbeeldpagina.

Wat bedoel je met de overflow-property? In principe werkt het nu wel goed, alleen wordt die event vaak ineens door de pagina afgehandeld. Als dit niet het geval is werkt het perfect.

Ik gebruik IE 6.0.

py.mosjuh schreef op 09 december 2003 @ 12:04:
[...]

err.. je table height staat op 100%.. niet je width... wel de subopties maar ik denk niet dat je die op 100% hoeft te zetten?


[...]

je kan eventueel ook van een TD gewoon onmouseover aanroepen hoor

Van de binnenste table staat de width wel op 100%, die bedoelde ik. En die moeten wel op 100% omdat ie anders niet de hele div vult (in de breedte).

Wat bedoel je met die laatste opmerking precies?
Ik gebruik ook de onmouseover van de TD, maar is voor het oplichten en dat staat hier los van.

Ik ben er nu trouwens achter dat het vermoedelijk te maken heeft met iets als focus. Zo gauw je scrollt, herkent ie niet meer dat je muis binnen die div zit en daarom scrollt ie de pagina. Zo gauw ik de muis weer een klein beetje beweeg (binnen de div) licht ook de TD weer op en scrollt ie wel weer goed (1 klik maar, daarna weer fout).

[ Voor 11% gewijzigd door maikel op 09-12-2003 12:17 ]

[py.mosjuh]

maikel schreef op 09 december 2003 @ 12:12:
Wat bedoel je met die laatste opmerking precies?
Ik gebruik ook de onmouseover van de TD, maar is voor het oplichten en dat staat hier los van.

Ik ben er nu trouwens achter dat het vermoedelijk te maken heeft met iets als focus. Zo gauw je scrollt, herkent ie niet meer dat je muis binnen die div zit en daarom scrollt ie de pagina. Zo gauw ik de muis weer een klein beetje beweeg (binnen de div) licht ook de TD weer op en scrollt ie wel weer goed (1 klik maar, daarna weer fout).

Je kan natuurlijk gewoon in de javascript mouseover aanroep van je TD die showAll() aanroep uitvoeren bedoelde ik daar.

[maikel]

Aha.
Ik heb nu een timeOut bij het verbergen van de menu's erin gebouwd en nu werkt het wel goed.
Ik denk dat het iets te maken had met het feit dat ie alle menu's verborg en vervolgense het juiste menu weer opende. En dat dus steeds herhaalde en dan tussendoor (als het menu weg was) scrollde.
Of zoiets. In ieder geval doet ie het nu.

Thnx.

[py.mosjuh]

laat anders eens zien waar je het gebruikt? altijd leuk voor mensen die in de toekomst nog zoiets zoeken (mogelijk zelfde soort probleem oid).