[js] custom schuifbalkje - Softwareontwikkeling

donderdag 12 mei 2005 19:00

Acties:

amateur megalomaan

Topicstarter

Beetje lastig om een titel te verzinnen, maar hopelijk heb ik de aandacht te pakken

Ik probeer via javascript en wat divjes een scrollbalk te maken, die ik kan gebruiken in een applicatie. Het idee is een schuifje dat door een gebruiker op verschillende manieren kan worden verplaatst. De positie (waarde) van het schuifje wordt bijgehouden in een hidden input, zodat ik deze na een post kan verwerken op de server.

Afbeeldingslocatie: http://www.hurkmans.demon.nl/got/slider/slider.png

Afbeeldingslocatie: http://www.hurkmans.demon.nl/got/slider/slider.png

Ik heb een voorbeeldje online gegooid, dat maakt het idee duidelijk.
de bijbehorende javascript- en css-file vind je hier en hier

In IE ben ik al een aardig eind gevorderd, alleen heb ik nog het probleem dat wanneer je een button ingedrukt houdt, je muis verplaatst buiten de button en daar je muisknop pas loslaat, dat dan het blokje blijft schuiven. Ik dacht dat op te kunnen lossen door het onmouseup-event van het document tijdelijk aan te passen. Maar ik krijg het niet voor elkaar. Ik doe dus iets gigantisch fout, of ik probeer iets wat niet mogelijk is.

Toen ik voor FF aan de slag ging, moest ik toch even slikken

In de event-afhandeling kom ik 2 gigantische fouten tegen:

als je klikt in het scrollgebied, dan blijkt de mousepositie niet goed uitgelezen te worden;
als ik dezelfde stappen van het IE probleem uitvoer, dan krijg ik een een error dat this.restoreEvents geen function is. En dat begrijp ik niet

Ik zit nu al een paar dagen te staren, testen, debuggen en artikelen door te lezen, maar ik kom geen steek verder. Is er iemand die ziet wat ik fout doe in IE en in FF?

Today's subliminal thought is:

donderdag 12 mei 2005 19:05

Acties:

Verwijderd

Probleem 1 kun je volgens mij oplossen door onmouseout ook _slider0.stopSlide() aan te roepen.

donderdag 12 mei 2005 19:10

Acties:

Annie

amateur megalomaan

Topicstarter

OMG

Dat krijg je als je er te diep in zit. Dan zie je de simpelste dingen over het hoofd.
Thanks.

* Annie gaat zich in een hoekje diep schamen.

Today's subliminal thought is:

donderdag 12 mei 2005 20:30

Acties:

André

Analytics dude

Kun je het niet beter zo doen:

code:

<html>
  <head>
    <title>Test</title>
    <style>
      * {
       font-size: 13px;
       font-family: Arial;
      }

      #layer {
        width: 300px;
        height: 20px;
        overflow: scroll;
        overflow-y: hidden;
        border: 1px solid #000000;
      }

      #balk {
        width: 6298px;
        border: 1px solid #000000;
      }

    </style>
    <script type="text/javascript">
      function getal()
      {
        document.getElementById("waarde").innerHTML = parseInt(document.getElementById("layer").scrollLeft / 60);  
      }
    </script>
  </head>
  <body>

    <div id="layer" onscroll="getal()"><div id="balk"></div></div>
    <div id="waarde">0</div>
    
  </body>
</html>

[ Voor 3% gewijzigd door André op 12-05-2005 20:42 ]

donderdag 12 mei 2005 21:15

Acties:

Annie

amateur megalomaan

Topicstarter

André schreef op donderdag 12 mei 2005 @ 20:30:
Kun je het niet beter zo doen:

[knip]

Op zich een leuk idee, maar ik wil ook wat vrijheden in de styling hebben. Bijvoorbeeld een mooi backgroundje met een gradient, of verschillende kleurvlakken (in de 4 step variant), enz.
Ik heb ook al gedacht aan een slider in flash, maar daarmee zit ik weer vast aan de plugin. En hoewel ik daar niet zoveel problemen mee heb, willen sommige klanten wel eens vervelend doen.

Andere eisen die ik voor mezelf aan de component heb gesteld:

werkt in IE en FF;
kan op een willekeurige plek in de pagina worden geplaatst (dus niet position: absolute);
er kunnen meerdere sliders op een pagina worden geplaatst.

Ik ben nu met name aan het zoeken waarom het positionerings gedoe (uitlezen mousepositie) in FF niet werkt.

Today's subliminal thought is:

donderdag 12 mei 2005 22:23

Acties:

crisp

Devver

Pixelated

wat oude code:

HTML:

<html>
    <head>
        <title>Slider</title>
<style type="text/css">

div.slider {
    margin: 5px;
    height: 20px;
    width: 200px;
    border: 1px solid black;
    background-color: blue;
    position: relative;
}
div.slider div {
    position: absolute;
    top: 0px;
    left: 0px;
    height: 18px;
    width: 13px;
    border: 1px solid red;
    background-color: yellow;
    cursor: pointer;
}
</style>
<script type="text/javascript">

var selectedSlider = null;
function getSlider(slider, e)
{
    selectedSlider = slider;
    if (!selectedSlider.x) selectedSlider.x = 0;
    selectedSlider.moveX = e.clientX;
    document.onmousemove = moveSlider;
    document.onmouseup = dropSlider;
}

function moveSlider(e)
{
    if (!e) e = event;

    if (selectedSlider)
    {
        selectedSlider.x += e.clientX - selectedSlider.moveX;
        if (selectedSlider.x > 185) selectedSlider.x = 185;
        else if (selectedSlider.x < 0) selectedSlider.x = 0;
        else selectedSlider.moveX = e.clientX;

        selectedSlider.style.left = selectedSlider.x + 'px';
    }
}

function dropSlider()
{
    selectedSlider = null;
}

</script>
    </head>
    <body>
        <div class="slider"><div onmousedown="getSlider(this, event)"></div></div>
        <div class="slider"><div onmousedown="getSlider(this, event)"></div></div>
        <div class="slider"><div onmousedown="getSlider(this, event)"></div></div>
        <div class="slider"><div onmousedown="getSlider(this, event)"></div></div>
    </body>
</html>

Verder denk ik dat de DHTML scrollbars in mijn gottracker wel aardig in de buurt komen. Dat is ook wel (erg) oude code (dus veel globals enzo), maar de eventhandling en positionering is daar wel ok.

Intentionally left blank

donderdag 12 mei 2005 22:57

Acties:

Annie

amateur megalomaan

Topicstarter

crisp schreef op donderdag 12 mei 2005 @ 22:23:
wat oude code:

Dank, ik zal er eens naar kijken. En proberen mijn andere gewenste functionaliteiten in je voorbeeld toe te voegen.

Verder denk ik dat de DHTML scrollbars in mijn gottracker wel aardig in de buurt komen. Dat is ook wel (erg) oude code (dus veel globals enzo), maar de eventhandling en positionering is daar wel ok.

gottracker? Oude code is natuurlijk geen bezwaar, alle voorbeelden zijn handig om te begrijpen waarom het daarin wel werkt en in mijn implementatie niet.

[ Voor 1% gewijzigd door Annie op 12-05-2005 22:59 . Reden: stupid me, de gottracker staat in je sig :)) ]

Today's subliminal thought is: