probleempjes met custom scrollbar

[Dr_Frickin_Evil]

Zoals ik in een ander topic al zei, ben ik bezig met een custom scrollbar. Werkt opzich prima, de slider is te verschuiven, en er zijn ook knopjes om mee te scrollen. In die laatste zit echter het probleem. Ik zal eerst even mn code plaatsen:

code:

var setScroll = false;
var drag = false;
var scrolling = false;
var scrollSpeed = 5;

function init() {
    document.onmousemove = slide;   
    document.onmouseup = function() { drag = false; stopScroll(); };
    slider.onmousedown = function() { drag = true; };

    scrollLeft.onmousedown = function() { scroll('left'); };
    scrollRight.onmousedown = function() { scroll('right'); };
}

function scroll(direction) {
    if (scrolling) { stopScroll(); }
    if (direction == 'left')
        scrolling = setInterval('doscroll(' + -scrollSpeed + ')', 20);
    else if (direction == 'right')
        scrolling = setInterval('doscroll(' + scrollSpeed + ')', 20);
    }

function doscroll(by) {
    //Scroll slider
    var current = parseInt(slider.style.left, 10);
    if (isNaN(current))
        current = 0;
    current += by;
    
    if (current >= 0 && current < rail.offsetWidth - slider.offsetWidth)
        slider.style.left = current + 'px';
    
    //Scroll pictures
    var move = -1 * slider.offsetLeft * (1 / scrollLength);
    pictures.style.left = parseInt(move) + 'px';
    }       

function slide(e) {
    if (drag == true && setScroll == true) {
        getMouse(e);
        dX = X - prevX;
        if (isNaN(dX))
            dX = 0;
        doscroll(dX);
        prevX = X;
        return false;
        }
    }
onload = init();

Ik heb de niet relevante code weggelaten, ook wat variabele-declaraties, dus begin daar maar niet over te zeuren .

Zoals ik al zei, dit werkt opzich prima. Het probleem is alleen dat als ik met de knopjes aan het scrollen ga, dat dan de slider niet helemaal tot het einde komt. Dat komt door deze if-statement:

code:

current += by;

if (current >= 0 && current < rail.offsetWidth - slider.offsetWidth)
    slider.style.left = current + 'px';

Omdat in het geval dat ik de knoppen gebruik 'by' 5 is, moet het maar net het toeval zijn dat de lengte 'rail.offsetWidth - slider.offsetWidth' een veelvoud van 5 is. Ik kan natuurlijk scrollspeed wel op 1 zetten oid, maar dan schiet het scrollen weer voor geen meter op. Hoe los ik dit nou elegant op?

[Verwijderd]

JavaScript:

current += by;

if ( current >= rail.offsetWidth - slider.offsetWidth ) {
   current = rail.offsetWidth - slider.offsetWidth - 1;
}

if (current >= 0 && current < rail.offsetWidth - slider.offsetWidth)
    slider.style.left = current + 'px';

Basic programmeer oplossing...

[Dr_Frickin_Evil]

Het ging me niet om de implementatie van de code, maar meer om hoe ik dat op een nette manier kon oplossen. Heb het nu met een while-loopje gedaan.

Waarschijnlijk een basic-vraagje, maar ik vraag me af hoe ik die scrollbar op de netste manier kan 'initializen'. Ik hou er niet van om <script>-tags tussen mn html-code te zetten, dus heb ik het nu als volgt gedaan:

code:

function initScrollbar() {
if (document.getElementById('container') {
//rest van de functie
}
}

en dan een onload="initScrollbar()" in de body-tag. Ik vind dat er nog niet echt netjes uit zien. Bestaat er niet iets van een onload voor divjes ofzo ?

[Verwijderd]

je kan de onload ook extern of in de script tag zelf aanropen

code:

<script type="text/javascript">
foo() {
bar....
}

window.onload=foo;
</script>

[ Voor 10% gewijzigd door Verwijderd op 08-07-2004 20:17 ]

[Dr_Frickin_Evil]

Oja, dat was ik er vergeten bij te zeggen

Die scrollbar gebruik ik maar een enkele keer op mn site. (alleen voor het bladeren door een stel foto's). Dat is het probleem ook net, als ik zomaar via onload="initScrollbar()" de functie zou aanroepen dan zou ie de foutmelding geven dat ie dat id niet kan vinden.

Ik zoek dus een manier om de functie slechts aan te roepen als de id 'container' bestaat.

[Verwijderd]

Je vindt iets er niet netjes uitzien...
Je houdt niet van <script> tags in de body...
Ga je nog meer achterlijke eisen stellen, of wil je gewoon dat het werkt?

[pistole]

Dr_Frickin_Evil schreef op 08 juli 2004 @ 20:24:
Oja, dat was ik er vergeten bij te zeggen

Die scrollbar gebruik ik maar een enkele keer op mn site. (alleen voor het bladeren door een stel foto's). Dat is het probleem ook net, als ik zomaar via onload="initScrollbar()" de functie zou aanroepen dan zou ie de foutmelding geven dat ie dat id niet kan vinden.

Ik zoek dus een manier om de functie slechts aan te roepen als de id 'container' bestaat.

Als je het toch maar 1x in je site gebruikt, waarom is het dan erg als je die ene keer een script tag tussen je code hangt?

Wat betreft je tweede vraag: je kan 'gewoon' testen of dat object bestaat...

[Dr_Frickin_Evil]

Verwijderd schreef op 08 juli 2004 @ 20:26:
Je vindt iets er niet netjes uitzien...
Je houdt niet van <script> tags in de body...
Ga je nog meer achterlijke eisen stellen, of wil je gewoon dat het werkt?

Rustig maar joh, is je vriendin (if any) ongesteld ofzo?

Ik vraag dit omdat er in javascript 1000en wegen zijn die naar Rome leiden, en ik heb daarin graag de mooiste en netste. Noem me raar, maar ik zoek gewoon graag uit of ik het op een nette manier doe. <script> tags in de body is in dit geval in principe niet nodig, en ik heb het dus ook al op een andere manier opgelost, maar wellicht zijn er andere manieren die beter zijn.

We hebben niet allemaal zoveel JS-ervaring als een ander

[crisp]

getElementById geeft null terug als het object niet bestaat, dus daar is makkelijk op te testen

[Dr_Frickin_Evil]

Ik ben bij zinnen gekomen, en gebruik toch maar de <script></script> tags. Ik roep nu de functie als volgt aan:

code:

<script type="text/javascript">initScrollbar('container', 'partypics', 'scroll_left', 'scroll_right', 'slider', 'rail');</script>

dit is (een deel van) de functie die ik aanroep:

code:

function initScrollbar(containerLayer, contentLayer, buttonLeft, buttonRight, sliderLayer, railLayer) {
    slider = document.getElementById(sliderLayer);
    rail = document.getElementById(railLayer);
    content = document.getElementById(contentLayer);
    container = document.getElementById(containerLayer);
    scrollLeft = document.getElementById(buttonLeft);
    scrollRight = document.getElementById(buttonRight);
    
    contentWidth = content.offsetWidth;
    containerWidth = container.offsetWidth;
    railWidth = rail.offsetWidth;

    if (contentWidth > containerWidth) {

Probleem is nu dat contentWidth altijd gelijk aan 600 (de breedte van de container-div) heeft, en dat de functie er al bij de eerste if-statement uitspringt. Het kan dit? Als ik de functie aanroep via de body tap <body onload="initScrollbar.."> dan werkt het wel (maar dan krijg ik natuurlijk wel andere foutmeldingen)...

[Dr_Frickin_Evil]

Wat het nog wat vreemder maakt (althans voor mij), ik heb 2 voorbeeldjes online staan, 1 in het ontwerp van de site, de ander op zichzelf staand.
http://131.155.241.57/test/test2.html
http://131.155.241.57/ltt...hp?section=view&article=7
Zoals je ziet werkt het in het 1e geval wel, maar in het 2e geval niet. Ik zie echt niet waar dat aan kan liggen.

[Dr_Frickin_Evil]

Weet niemand dit?

[Verwijderd]

Ik snap niet helemaal waar je probleem nu nog in zit hoor... 't lijkt allemaal prima te werken, zowel in je site als in de test...

[Zerora]

Ik zie dat als de scrolbar op het eind is de foto's nog niet op het einde zijn. zowel bij test als op site. Is dit je probleem?

offtopic:
zie ik daar GoT-smiley's op je site!?

[Dr_Frickin_Evil]

Verwijderd schreef op 10 juli 2004 @ 13:47:
Ik snap niet helemaal waar je probleem nu nog in zit hoor... 't lijkt allemaal prima te werken, zowel in je site als in de test...

Hmm raar in IE werkt het inderdaad wel, had ik verder niet naar gekeken nog. Vaag

Zerora schreef op 10 juli 2004 @ 13:55:
Ik zie dat als de scrolbar op het eind is de foto's nog niet op het einde zijn. zowel bij test als op site. Is dit je probleem?

offtopic:
zie ik daar GoT-smiley's op je site!?

Hmm dat zie ik dan weer niet, scroll je dan met de knopjes of met het balkje? Bij mij werkt het in beide gevallen goed. Heb je de foto's misschien nog niet helemaal laten laden? En wat betreft de smilies, das toch niet zo erg zeker?

[ Voor 6% gewijzigd door Dr_Frickin_Evil op 10-07-2004 15:18 ]

[Bonno]

offtopic:
Die smileys zijn in zovere erg. Er is geen credit te vinden op je site. Zie: Smiley-credits en gebruiksregels

[Dr_Frickin_Evil]

offtopic:
Zal het binnenkort aanpassen, maar wil eerst dit gemaakt hebben

Heeft iemand nog een idee hoe ik dit kan verhelpen? Nogmaals, het probleem doet zich alleen voort in Firefox, in IE werkt het prima.

[Dr_Frickin_Evil]

Niemand? Ben er nog steeds niet uit.