schuifje voor form

Status
Niet open voor verdere reacties.
ecross

ecross

Gebruiker
Lid geworden
4 mrt 2009
Berichten
638
hallo,
ik zou graag een horizontaal schuifje willen hebben die je op 4 verschillende optie's kunt zetten, misschien snap je wat ik bedoel daarom hier een plaatje (zonder pijltjes)
ik weet niet of dit een echt html atbribut is maar ik heb het wel eens vaker gezien.
iemand een iedee?
attachment.php
 

Bijlagen

  • schuifje.gif
    schuifje.gif
    485 bytes · Weergaven: 138
Laatst bewerkt:
Ik denk dat je dan op JavaScript uit gaat komen (waarin ik geen ster ben).
Ik heb wel 'ns zoiets gemaakt als wat jij bedoelt voor 'n slideshow, met alleen html en css. Maar dat is ongelooflijk veel werk en heel ingewikkeld voor zoiets simpels als wat jij wilt.
Je zou dan met meerdere pijltjes moeten werken, die naar elkaar linken, en waarbij dan de inhoud (het cijfer) steeds mee verandert. Terwijl de pijltjes ogenschijnlijk niet veranderen.
Bovendien werkt dit in Opera niet, want om een of andere reden kun je niet terug naar links met deze methode.
In dit geval denk ik dat JavaScript veel en veel simpeler is.
 
Jawel, dit moet inderdaad met Javascript voor een 'goed' resultaat.

Je maakt een div (oid) aan en je zorgt dat alleen de scrollbar ervan zichtbaar is (probleem 1). Daarna gebruik je wat Javascript om de minimale, maximale en huisige waardes op te halen, en bereken je zo in 'welk van de 4 gebieden' je zit.

Ik herinner me dat er ooit eens een vraag is geweest over dubbele scrollbalken (dus boven, EN onder). Daarin zal vast wel wat handige code staan die hergebruikt kan worden. Ik ga even zoeken, je hoort later wel weer.


:thumb:


probleem 1: verschillende browsers hebben verschillende 'soorten' scrollbalken, en dez zijn allemaal niet even hoog!​
 
Voorzover ik weet kun je tegenwoordig redelijk veilig aannemen dat 'n scrollbar 18 px breed/hoog is.
Omdat 't hier om 'n heel klein iets gaat, kan dit wel 'n probleem zijn: Internet Explorer 6 zet (vaak, altijd?) de scrollbalk binnen de div in plaats van erbuiten, zoals hoort. Dus je moet zeker even testen in IE 6, omdat anders bij zo'n klein plaatje gelijk de helft weg is.
Kun je eventueel oplossen met 'n conditional comment voor deze ongeluksbrowser.
 
Okay, hier de demo:
HTML: 
<html>
<head>

<style>


div#scrollControl
{
   width: 75px;
   overflow-x: scroll;
   height: 18px;   /* zie Goeroeboeroe's post */
}

div#scrollControlWidth
{
   width: 100px;
}

</style>

</head>
<body>

<div id='inhoud'>0</div>
<div id='scrollControl' >
   <div id='scrollControlWidth'>
         &nbsp;
   </div>
</div>



<script language='javascript'>

var scroller = document.getElementById('scrollControl');

scroller.addEventListener('scroll', function()
{
   document.getElementById('inhoud').innerHTML = (this.scrollLeft / 25 * 4).toFixed(0);
}, false);

</script>


</body>
</html>
Het werkt nu nog even niet in IE, maar dat komt alleen omdat de addEventListener niet in IE werkt. Maar daar is een simpele oplossing voor. Is dit wat je bedoelde?
 
Ohoh, een probleempje. Het werkt wel in Firefox, maar niet in Google's Chrome! Chrome's left/max geeft 0.42, maar die van Firefox geeft 0.25... Internet explorer doet het wel 'goed' (0.25). Dit is de code nu, mischien weet iemand een oplossing.


HTML: 
<html>
<head>
 
<style>
 *
{
margin: 0px;
padding: 0px;
}
div#scrollControl
{
   width: 75px;
   overflow-x: scroll;
   height: 18px;   /* zie Goeroeboeroe's post */
}
 
div#scrollControlWidth
{
   width: 100px;
}
 
</style>
 
</head>
<body>
 
<div id='inhoud'>0</div>
<div id='scrollControl' >
   <div id='scrollControlWidth'>
         &nbsp;
   </div>
</div>
 
 
 
<script language='javascript'>

///van eJohn
function addEvent( obj, type, fn ) {
  if ( obj.attachEvent ) {
    obj['e'+type+fn] = fn;
    obj[type+fn] = function(){obj['e'+type+fn]( window.event );}
    obj.attachEvent( 'on'+type, obj[type+fn] );
  } else
    obj.addEventListener( type, fn, false );
}
function removeEvent( obj, type, fn ) {
  if ( obj.detachEvent ) {
    obj.detachEvent( 'on'+type, obj[type+fn] );
    obj[type+fn] = null;
  } else
    obj.removeEventListener( type, fn, false );
}



var maxValue = 4;
var scroller = document.getElementById('scrollControl');
 
addEvent(scroller,'scroll', function()
{
   document.getElementById('inhoud').innerHTML = (this.scrollLeft/this.scrollWidth*maxValue*4).toFixed(0);
});


</script>
 
 
</body>
</html>
 
Laatst bewerkt:
bedankt voor al jullie reactie's!
het werkt bij mij nu in internet explorer en firefox (andere heb ik niet bijdehand) en het werkt alleen nog de volgende dinggen (dingetjes ?)
- ik zou graag willen dat als je de de muisknop los laat het schuifje naar het dichtstbijzijnde gebied gaat
- de style is nog niet helemaal 'goed' (ik weet niet of dit makkelijk aan te passen is)
zo wil ik bijvoorbeeld: het schuifje kleiner en de pijltjes weg

Ik herinner me dat er ooit eens een vraag is geweest over dubbele scrollbalken (dus boven, EN onder). Daarin zal vast wel wat handige code staan die hergebruikt kan worden. Ik ga even zoeken, je hoort later wel weer
Klik om te vergroten...
die had ik begonnen! (http://www.helpmij.nl/forum/showthread.php?t=456249)
 
Laatst bewerkt:
zo wil ik bijvoorbeeld: het schuifje kleiner en de pijltjes weg
Klik om te vergroten...
De 'pijltjes' zijn gewoon standaard scrollbar van je browser. Echter, deze is eigenlijk niet te veranderen. Dat wil zeggen, het kan alleen in Internet Explorer.
- ik zou graag willen dat als je de de muisknop los laat het schuifje naar het dichtstbijzijnde gebied gaat
Klik om te vergroten...
Ehm, dat doet-ie nu toch ook?


:thumb:
 
Ehm, dat doet-ie nu toch ook?
Klik om te vergroten...

volgens mij niet, ik bedoel dat als je het schuifje los laat dat dan het schuifje dan naar de dichtst bij zijnde stand schuift maar bij nader inzien is dit niet echt handig.
is er wel een metode om de de scroll balk's kleur te veranderen (ik wil namelijk de 'achtergrond kleur' van de scroll balk in 4 kleuren verdelen zodat de de 4 stukken ook echt kan zien).
 
(ik wil namelijk de 'achtergrond kleur' van de scroll balk in 4 kleuren verdelen zodat de de 4 stukken ook echt kan zien)
Klik om te vergroten...
Tsja, dat zal niet gaan lukken.

Het enige wat dit kan realiseren is 1. Flash, en 2. een custom scroller maken, maar dat is... lastig.
 
wat is er mis met radio buttons(die rondjes waar je er maar 1 van kan selecteren?)
 
Laatst bewerkt:
ehm, ze zien er anders uit,
maar radio buttons zouden het inderdaad ook goed doen!
 
ik doe het wel zonder die kleurtjes, bedankt allemaal!
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan