Keskustelu: Nettisivujen teko: jQuery: Valitun elementin vieritys keskelle ruutua

xxmss [03.06.2017 23:57:38]

Minulla on HTML- ja jQuery-koodia jonkin verran. Ideana olisi jQueryllä käydä radiobuttonit läpi ja jos joku niistä on valittu, skrollata isäntädivin sisässä olevaa div-elementtiä niin, että valittu radiobutton on näytön keskellä leveyssuunnassa.

Ongelmana on nyt se, että tuo keskitys ei toimi.

Tässä jQuery-koodini:

$(document).ready(function(){
  $('#kaaviotaulukko input[type=radio]').change(function() {
    var container = $('#kaaviotaulukko'),
      scrollTo = $(this);

    if(scrollTo.is(':checked')) {
      var leftOffset = scrollTo.offset().left - container.offset().left + container.scrollLeft();

      container.animate({
        // scrollLeft: scrollTo.offset().left - container.offset().left + container.scrollLeft()
        scrollLeft: leftOffset
      }, 1000);
    }
  });
});

Ja tässä HTML-koodia, jota ei ole vielä siistitty, mutta ajatus selvinnee:

<DIV id="kaaviopohja" style="width: 100%;">

<div id="kaaviotaulukko" style="white-space: nowrap; position: relative; text-align: center;">
<div style="display: inline-block">
<!--
--><DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="nappi" type="radio" id="someID-102" /><div style="float:left;width:0">
</div><div class="krs" style="display: inline-block;width:70px">extra
</div></DIV><!--
--><DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="nappi" type="radio" id="someID-101" /><div style="float:left;width:0">
</div><div class="krs" style="display: inline-block;width:350px">LQ
</div></DIV><!--
--><DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="nappi" type="radio" id="someID-7" /><div style="float:left;width:0">
</div><div class="krs" style="display: inline-block;width:350px">L4
</div></DIV><!--
--><DIV STYLE="DISPLAY:INLINE-BLOCK"><input name="nappi" type="radio" id="someID-6" checked="checked" /><div style="float:left;width:0">
</div><div class="krs" style="display: inline-block;width:350px">L3
</div></DIV><!--
--><input name="nappi" type="radio" id="someID-100" /><div style="float:right;width:0">
</div><!--

--><div style="z-index:99;width:70px;position:fixed;left:0;top:100px;margin:auto;background-color:red"><br />
</div>

<div style="z-index:99;width:70px;position:fixed;right:0;top:100px;margin:auto;background-color:red"><br />
</div>
</div>
</div>

</DIV>

xxmss [04.06.2017 15:49:17]

Näyttää siltä, että container.offset().left on aina 8.

Mistä tämä johtuu?

groovyb [05.06.2017 01:41:12]

En nyt oikein ymmärrä mitä tässä haetaan.

Pitäisikö napin vaihtaa siis paikkaa keskimmäiseksi ja olla näin keskimmäinen, keskitetty nappula?
Vai onko tarkoitus keskittää horisontaalinen scrollaus, mikäli nappuloita on enemmän mitä containeriin mahtuu? Tässä pitäisi tietysti containeria leventää suhteessa valittuun radiobuttoniin, jotta saadaan ylipäätään keskitettyä. Ekaa ja viimeistä varsinkin on vaikea keskittää ellei muljata leveyksillä.

Esimerkki, en kyllä tiedä haetaanko tässä tätä (scrollataan keskelle valittuun mikäli scroll on näkyvissa, ja asetetaan aina valittu keskimmäiseksi):

html, body {
  margin: 0;
  padding: 0;
}
.container {
  min-width:800px; /* jotta voi testata scrollia, eikä ole aina responsiivinen näytönleveyteen */
  width:100%;
  overflow-x: auto;
}
.rb {
  width:20%; /* Koska viisi nappulaa */
  float:left;
}

<div class="container">
  <div class="rb" id="1" style="background-color:blue;">
      1.<input type="radio" name="rb" value="1" />
  </div>
  <div class="rb" id="2" style="background-color:yellow;">
      2.<input type="radio" name="rb" value="2" />
  </div>
  <div class="rb" id="3" style="background-color:green;">
      3.<input type="radio" name="rb" value="3" />
  </div>
    <div class="rb" id="4" style="background-color:magenta;">
      4.<input type="radio" name="rb" value="4" />
  </div>
  <div class="rb" id="5" style="background-color:orange;">
      5.<input type="radio" name="rb" value="5" />
  </div>
</div>

$('body').on('change','.rb input', function() {
  	//Otetaan valitun radion arvo
   	var checkedValue = $('input[name=rb]:checked').val();
    //Tyhjä array parenteille
    var rb_array = [];
    var selected = null;
    //Loopataan kaikki radiot
    Array.from($('input[name=rb]')).forEach(function(el) {
      //Kopioidaan parent
      var parent = $(el).parent().clone();
      if($(parent).attr('id') !== checkedValue) {
        //Lyödään parent taulukkoon, jos ei ole valittu
      	rb_array.push(parent);
      } else {
        //Asetetaan valittu
      	selected = parent;
      }
      //Poistetaan vanha parent
	  $(el).parent().remove();
    });
    //Sortataan parentit alkuperäiseen järjestykseen (ilman valittua)
    var result = rb_array.sort(function(a,b){
        return parseInt($(a).attr('id')) > parseInt($(b).attr('id'));
    });
    //Lyödään valittu keskelle taulukkoa
    //esimerkissä fiksatusti kolmanneksi, mutta yhtähyvin keskimmäisen indeksin voisi laskea radioiden määrästä
    //Tässä tapauksessa tietysti pitäisi rb -luokan leveyden olla myös laskennallinen, eikä fiksattu 20%
    result.splice(2, 0, selected);
    //Tulostetaan parentit taulukosta uudestaan
    result.forEach(function(_parent) {
    	$(".container").append(_parent);
    });
    //scrollataan keskelle valittuun, mikäli scrollbar on käytössä
    $('html body').animate({scrollLeft: $(selected).position().left - document.body.clientWidth /2  + $(selected).width() /2}, 1000);
});

xxmss [05.06.2017 03:41:14]

Kiitos, groovyb!

Vastaus

Aihe on jo aika vanha, joten et voi enää vastata siihen.

Kirjautuminen