Ondersteuning » Algemeen WordPress » Custom scrollbar in tabel

  • Opgelost jantine

    (@jantine)


    Help!

    Ik wil graag een custom scrollbar in een cel van een tabel hebben. Dus niet die standaard balk, maar een subtiel scrollbalkje.
    Nu heb ik al van alles geprobeerd, maar de scrollbar werkt wel op een blanco pagina
    (http://www.jantinelanting.nl/tryn3d/wp-content/themes/tryn3D/scroll.php)
    Maar niet als ik hem op mijn website zet!
    (http://www.jantinelanting.nl/tryn3d)

    Op dit moment heb ik de scrollbar in een aparte sidebar.php gezet, die geladen wordt in een tabel. Maar ook als ik de code in de tabel zelf zet, of op een andere plaats op de pagina werkt de scrollbar niet meer!! 🙁

    Weet iemand hier een oplossing voor? Of gewoon een totaal andere oplossing om de scrollbar te customizen in een tabel??

    Alvast bedankt!

    Groet, Jantine

15 reacties aan het bekijken - 1 tot 15 (van in totaal 18)
  • Mmm ten eerste zou ik zeggen, probeer het met de jQuery plugin jScrollPane:
    http://www.kelvinluck.com/assets/jquery/jScrollPane/basic.html

    Voorbeelden:
    http://www.kelvinluck.com/assets/jquery/jScrollPane/basic.html

    Thread starter jantine

    (@jantine)

    Werkt ook niet! Het heeft op de één of andere manier een conflict met iets van WordPress…

    Zo werkt het prima (http://www.jantinelanting.nl/tryn3d/wp-content/themes/tryn3D/sidebar-left.php)

    Maar zo niet meer (http://www.jantinelanting.nl/tryn3d/)

    En als ik mijn homepage helemaal leegmaak en alleen de code er in plak van het vlak met de scrollbar, dan werkt het ook niet.
    Heb al op conflicten gegoogeld en er staan wel wat dingen dat de dollartekens eventueel conflicten op kunnen roepen, maar ik ben nog niet zo heel erg goed met wordpress, dus het lukt me niet om het op te lossen!

    mmm ten eerste wordt er twee keer een html, body, head etc gedefinieerd. Kijk maar eens in je broncode. Dit kan niet kloppen.

    Vervolgens include je wel de css en js bestanden, maar die worden verkeerd gelinkt. Ze geven allemaal een 404. Je moet hier nog je template url en map voorzetten waar de bestanden staan door bijvoorbeeld dit te doen:
    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.jscrollpane.min.js"></script>

    Maar kijk ook eens naar de dubbele html, body, head etc. Het lijkt erop dat je er gewoon een voorbeeld hebt ingekopieerd?

    Thread starter jantine

    (@jantine)

    Yes het werkt! 😀

    Dankje voor je snelle reactie, het duurde vervolgens nog even voordat het kwartje viel, maar na een aantal andere broncodes bestudeert te hebben, werkt het.

    Mijn broncode was inderdaad een chaos. Ik vind het ingewikkeld, maar snap nu weer ietsje meer van de WordPress logica.

    Bedankt!

    Top!
    Ik wou het ook niet helemaal voorkauwen, anders leer je er niks van 😉
    Goed gedaan!

    Thread starter jantine

    (@jantine)

    Klopt, dit is inderdaad een stuk effectiever!

    Thread starter jantine

    (@jantine)

    Toch nog even een vraagje.
    Mijn scrollbar doet het, maar ik kan niet helemaal tot onder scrollen. De tekst is sneller beneden, dan het scroll knopje. (http://www.jantinelanting.nl/tryn3d/?page_id=10)

    Waar kan ik de hoogte hiervan aangeven?
    Dit is mijn CSS code
    #pane1 {
    width: 450px;
    height: 240px;
    }

    .scroll-pane
    {
    width: 450px;
    height: 100%;
    overflow: auto;
    }

    .jspContainer
    {
    overflow: hidden;
    position: relative;
    }

    .jspPane
    {
    position: absolute;
    }

    .jspVerticalBar
    {
    position: absolute;
    top: 0;
    right: 0;
    width: 16px;
    height: 240px;
    }

    .jspVerticalBar *,
    .jspHorizontalBar *
    {
    margin: 0;
    padding: 0;
    }

    .jspCap
    {
    display: none;
    }

    .jspTrack
    {
    position: relative;
    height: 240px;

    }

    .jspDrag
    {
    background: url(images/arrows_dn.gif);
    background-repeat: no-repeat;
    position: relative;
    top: 0;
    left: 0;
    cursor: pointer;
    }

    .jspHorizontalBar .jspTrack,
    .jspHorizontalBar .jspDrag
    {
    float: left;
    height: 100%;
    }

    .jspArrow
    {
    text-indent: -20000px;
    display: block;
    cursor: pointer;
    }

    .jspArrow.jspDisabled
    {
    cursor: default;
    background: #80808d;
    }

    .jspVerticalBar .jspArrow
    {
    height: 16px;
    }

    .jspVerticalBar .jspArrow:focus
    {
    outline: none;
    }

    .jspCorner
    {
    background: #eeeef4;
    float: left;
    height: 100%;
    }

    /* Yuk! CSS Hack for IE6 3 pixel bug :( */
    * html .jspCorner
    {
    margin: 0 -3px 0 0;
    }`

    aaiii, maar ik zie ook alweer een dubbele body,html,head etc. Ik denk dat je dat eerst moet oplossen. Dan weet je in ieder geval dat je een stabiele basis hebt.

    Thread starter jantine

    (@jantine)

    Oja dom! Dat had ik daar nog niet aangepast.

    Ik heb het aangepast, maar dit was niet het probleem, het werkt nog steeds niet.
    De hoogte van de drag moet aangepast worden, maar ik weet niet waar…
    (http://www.jantinelanting.nl/tryn3d/?page_id=10)
    Ik had net die rode driehoekjes op no-repeat staan, waardoor het balkje korter leek. Maar het gedeelte van de scrollbar die helemaal beneden was zag je dus gewoon niet.

    Maar op dit moment scrollt hij toch helemaal tot aan de onderkant? Los van dat je 25x het pijltje idd ziet 🙂

    Of moet het boxje met tekst in het algemeen hoger?

    Thread starter jantine

    (@jantine)

    HIj scrollt inderdaad tot de onderkant, maar als ik dat pijltje er 1x inzet, dan zie je dus een heel groot gedeelte van die balk niet. En dan lijkt het alsof je maar tot halverwege kunt scrollen. En dat lijkt me een beetje verwarrend voor bezoekers, alsof de tekst nog niet helemaal gelezen is.

    Dus die scrollbalk moet de afmeting van de pijltjes krijgen.

    Dit is de code van de sleepbalk:

    <div class="jspDrag" style="height: 125.217px; top: 40px;"><div class="jspDragTop"></div>
    <div class="jspDragBottom"></div>
    </div>

    Op dit moment heeft jspDrag een achtergrond image, dat gaat dus niet werken. Als je nou jspDrag alleen het onderste pijltje als background geeft en die aan de bottom uitlijnt. Dan geef je vervolgens de div jspDragTop het pijltje voor de bovenkant en als het goed is moet het dan er goed uitzien!

    Thread starter jantine

    (@jantine)

    En toen was ik alweer twee uur verder en helaas is het niet goed 🙁
    Van alles geprobeerd, maar hij laat bij jspDragBottom of Top niet zien.

    Ik snap er niets van. Die code staat toch in het jquery.jscrollpane.js bestandje?

    Haha je bent er biiijjjjnaaa!

    Hij laat de Top niet zien omdat die div geen inhoud heeft. Dat hoeft ook niet maar dan moet je hem wel een vaste hoogte en breedte geven.
    Dus die div in css een hoogte en breedte geven en voila daar is je pijltje!

    Heb het getest met Firebug en het werkt prima 🙂

    Thread starter jantine

    (@jantine)

    Ja hij is er! 😀
    Had je me die twee uren niet meteen kunnen besparen 😉
    (Kun je vanaf daar mijn css lezen?, of was het gewoon een voorspelbare fout ;))

    Maar die scrollbalk heeft nu nog wel dezelfde hoogte. En eigenlijk wil ik dat die pijltjes dichter bij elkaar staan, maar als ik dat nu doe, scrollt ie dus weer niet naar het eind.

15 reacties aan het bekijken - 1 tot 15 (van in totaal 18)
  • Het onderwerp ‘Custom scrollbar in tabel’ is gesloten voor nieuwe reacties.