1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Scrolling div so that checked radiobutton is horizontally centered to the screen

Discussion in 'jQuery' started by xms, Jun 3, 2017.

  1. #1
    I have some HTML and jQuery code. The idea is that if a radiobutton is checked, the div #kaaviotaulukko should be scrolled to left position of the checked radiobutton. And the checked radiobutton should be horizontally centered to browser window.
    SEMrush
    The problem is that my current jQuery code does not center the checked radiobutton horizontally.

    Here is the jQuery code:

    $(document).ready(function(){
      $('#kaaviotaulukko input').each(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);
        }
      });
    });
    Code (JavaScript):
    And here is my HTML code which is not the cleaned up yet, but hopefully you will get the idea.

    <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>
    HTML:
     
    xms, Jun 3, 2017 IP
    SEMrush
  2. xms

    xms Active Member

    Messages:
    169
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    53
    #2
    I modified my code, but still, the checked radiobutton will not be horizontally centered. Any help?

    Now I'm using this jQuery code:

    $(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: leftOffset
          }, 1000);
        }
      });
    });
    Code (JavaScript):
     
    xms, Jun 4, 2017 IP
  3. xms

    xms Active Member

    Messages:
    169
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    53
    #3
    It seems to me that...

    container.offset().left
    Code (JavaScript):
    ...is always 8. Why is that so?
     
    Last edited: Jun 4, 2017
    xms, Jun 4, 2017 IP
  4. deathshadow

    deathshadow Acclaimed Member

    Messages:
    8,927
    Likes Received:
    1,625
    Best Answers:
    232
    Trophy Points:
    515
    #4
    Well, a few suggestions?

    STOP pissing on it with jQuery, STOP using JavaScript to do CSS' job, STOP typing in tags and attributes in upper case like it's still 1995, STOP using the goddamned style="" attribute that has relatively few corner cases in which it has ANY damned business in the HTML, STOP using a DIV to do what seems to be a label's job, STOP using a DIV if you want a inline level element, STOP endlessly slopping DIV in where there seems to be ZERO legitimate reason to even have DIV...

    You have a set of related fields, so semantically that goes in a FIELDSET hence the freaking name... you have text labelling those input, so those should be LABELS with FOR attributes. There's ZERO reason to be slapping classes all over the place and if I had DIV it would be for positioning and line-wrap... Aka, LEARN HOW TO WRITE A HTML FORM BEFORE YOU START THROWING SCRIPTTARDERY AT IT!

    <fieldset id="kaaviopohja">
    	<div>
    		<input name="nappi" type="radio" id="someID-102">
    		<label for="someID-102">extra</label>
    	</div><div>
    		<input name="nappi" type="radio" id="someID-101">
    		<label for="someID-101">LQ</label>
    	</div><div>
    		<input name="nappi" type="radio" id="someID-7">
    		<label for="someID-7">L4</label>
    	</div><div>
    		<input name="nappi" type="radio" id="someID-6">
    		<label for="someID-6">L3</label>
    	</div><div>
    		<input name="nappi" type="radio" id="someID-100">
    		<label for="someID-100">WHAT IS THIS?!?</label>
    	</div>
    </fieldset>
    
    Code (markup):
    I'm guessing slightly since I STILL cannot figure out what in blazes you're actually trying to do with this, but it's a decent guess, VERY unlikely you need more code than that.... and NO, you don't need the mental midgetry that is jQuery to effect the behavior of a radio button being selected, at least not in any browser newer than IE9. We now have the :target attribute for that.

    Which is why if you have some other DIV rubbish or want to change the positioning of the INPUT, you'd be using :checked and MAYBE implementing generated content. No pissing on the markup with style="" asshattery, endless pointless DIV and classes for nothing, or throwing the fat bloated train wreck of developer ineptitude that is jQuery at it.

    Most likely for what you're asking for -- though this depends on the placement of the label:

    
    #kaaviopohja input {
      display:block;
      margin:0;
      transition:margin 0.3s;
    }
    #kaaviopohja input:checked {
      margin:0 auto;
    }
    
    Code (markup):
    If I could see it live I could probably write a working example in a fraction the code you're throwing at this mess.
     
    deathshadow, Jun 4, 2017 IP