Select the open onclick direction field - display data up and down

Question

Not too sure if this question is suitable for SO, possibly borderline. If he does not inform me about it, and I will change accordingly.

Ive searched every corner of intweb for a library or tutorial for the next, but just couldn't find it.

Im trying to display a selection window in which onclick moves half the options up and half the options down, as shown in the image below:

I saw a javascript library where instead of the default option, where the data in the selection window is displayed down, it is displayed up.

However, I cannot find anything to achieve the effect from above, where half of the data is essentially displayed in the upward direction and the other half in the downward direction.

If someone can make any contribution, he will be greatly appreciated.

Answer 1

If there is any solution (instead of animation) to jump, you can get rid of pure CSS without javascript at all.

The direction of HTML selection cannot be controlled like in every browser, but you can use the radio buttons and manage the corresponding shortcuts. Then it's just a matter of controlling the display of labels on hover.

html{ font-family:sans-serif; box-sizing:border-box; } input{ display:none; } label{ display:none; padding:1em; width: 300px; } input:checked + label{ background:green; display:block; } #container{ border:1px solid lightblue; position:absolute; top:50%; left:50%; transform:translate(-50%); } #container:hover{ transform:translate(-50%, calc(-50% + 2em)); } #container:hover label{ cursor: pointer; display:block; border-bottom:1px solid lightblue; } 

 <div id="container"> <input type="radio" name="result" id="f2"> <label for="f2"> France 2</label> <input type="radio" name="result" id="f1"> <label for="f1"> France 1</label> <input type="radio" name="result" id="0" checked> <label for="0"> Draw</label> <input type="radio" name="result" id="i1"> <label for="i1"> Ireland 1</label> <input type="radio" name="result" id="i2"> <label for="i2"> Ireland 2</label> </div> 

Edit:

Apparently, in my insanity “you can do it with pure CSS”, I forgot about it in 2018, and the above answer will only work on the desktop and fail on mobile devices, as it relies on: hover. So we need a bit of JS just to switch the “active” class instead of hovering.

 var container = document.getElementById("container"); var labels = document.querySelectorAll("#container label") for (i = 0; i < labels.length; i++) { (function(i) { labels[i].addEventListener('click', function() { container.classList.toggle("active"); }); })(i); } 

 html{ font-family:sans-serif; box-sizing:border-box; } input{ display:none; } label{ display:none; padding:1em; width: 300px; } input:checked + label{ display:block; background-color:green; color:white; } #container{ border:1px solid lightblue; position:absolute; top:50%; left:50%; transform:translate(-50%); } #container.active{ transform:translate(-50%, calc(-50% + 2em)); } #container.active label{ display:block; border-bottom:1px solid lightblue; } #container label{ cursor: pointer; } 

 <div id="container"> <input type="radio" name="result" id="f2"> <label for="f2"> France 2</label> <input type="radio" name="result" id="f1"> <label for="f1"> France 1</label> <input type="radio" name="result" id="0" checked> <label for="0"> Draw</label> <input type="radio" name="result" id="i1"> <label for="i1"> Ireland 1</label> <input type="radio" name="result" id="i2"> <label for="i2"> Ireland 2</label> </div> 

You have some problems trying to apply the click event to the container instead of each individual label so that JS can certainly be improved ... any help would be appreciated.

Alternatively, you can simply use jQuery for this. Talkin 'bout "I forgot about this 2018" ...

 $('#container label').click(function() { $(this).parent().toggleClass('active') }); 

Answer 2

If you cannot find a library that has built-in functionality, you can simply manually change the position of the drop-down list from almost any library.

Here is a simple example using select2 :

 var disableSelection = false, selectionDisabledTimer; $('#example').select2({ //#example is a select element minimumResultsForSearch: -1 //disable search }).on('select2:open', function(){ setTimeout(function(){ var goUpBy = $('.select2-dropdown').height() / 2; //nr of px to move up $('.select2-dropdown') .removeClass('select2-dropdown--below') //remove style which hides upper border .css('marginTop', -goUpBy +'px'); //move dropdown up }, 0); }).on('select2:opening', function(e){ disableSelection = true; clearTimeout(selectionDisabledTimer); //clear old timer (in case of multiple fast clicks) selectionDisabledTimer = setTimeout(function(){ //disable selection for 500ms disableSelection = false; }, 500); }).on('select2:selecting', function(e){ if(disableSelection){ e.preventDefault(); } }); 

Demo: https://jsfiddle.net/981usa95/7/

Note. The code looks messy because I had to get around the problem, because since the drop-down menu opens under the cursor, the parameter under the cursor is instantly selected. Cleaner solutions may exist.