How do I make this div move to the top of the mobile screen? (code provided)

JavaScript
1

I don’t know why this script does not move the < li> element to the top of the mobile screen:

    <script>
    function scrollup(){
      var div=document.getElementById('card1');
      div.style.left = '20'+'px';
      div.style.top = '70'+'px';
    }
    </script>

HTML:

<li id="card1" onclick="scrollup();">
                      <div class="collapsible-header"><b>Chart: gearbox, diffs, arms</b></div>
                      <div class="collapsible-body" style="padding: 0 10px;">
                          <p>Best combination for each kit.</p>
                  <table class="striped">
                    <thead>
                      <tr>
                          <th>foo</th>
                          <th>bar</th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr>
                        <td>baz</td>
                        <td>boz</td>
                      </tr>
                    </tbody>
                  </table>
</li>

I am using materializecss’ Collapsible feature, which is an accordion. When you tap on the .collapsible-header then the accordion opens and automatically shuts the accordion drawer above it. The problem I’m trying solve: if you tap on the section header, it expands with content that fills several mobile screens. When you tap the following header, the header scrolls up to meet the first header, which is several screens up off the screen, and you have to manually scroll back up to the beginning.

So I want the user to tap on any header and it gets positioned at the top of the screen, ready to read. Note that I put the code on the < li> tag. I had also put it on the .collapsible-header div and it had no effect there either. I also tried the following, which also did not work:

          div.style.left = '20px';
          div.style.top = '70px';

I also added the following, but it did not move the element to the top, but relative to the previous < li>:

div.style.position = 'relative';

Changing relative to absolute screws up the layout, overlaying the < li> on top of the table.

In some way I think I need to grab the left bottom of the upper div and slide the tapped < li> element so the entire < ul> element slides to where the chosen < li> butts up against it.

I wonder if window.scrollTo(0,0) is something to try, but I can’t figure out how to make it work in my case.

If this code is supposed to work as is, then perhaps the materializecss environment is working against it.

Collapsible Accordion reference: http://materializecss.com/collapsible.html

Collapsible JS on Github to examine: https://github.com/Dogfalo/materialize/blob/master/js/collapsible.js

2

I coded the < li> element:

<li id="card1" onclick="scrollup();">

Then:

        function scrollup(alignToTop){
          var div=document.getElementById('card1');
          div.scrollIntoView(alignToTop);
        }

This did not work either. The accordion drawer underneath continues to slide up so its beginning is off screen.

3

The next thing I did (and has no effect):

Made link to JqueryUI:

< script   src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"   integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="   crossorigin="anonymous"></script>

Added JS script:

        $(function() {
          $("#accordion").accordion({
            autoHeight: false,
            collapsible: true,
            heightStyle: "content",
            active: 0,
            animate: 300
          });
          $('#accordion li').bind('click',function() {
            var self = this;
            setTimeout(function() {
              theOffset = $(self).offset();
              $('body,html').animate({scrollTop: theOffset.top-60});
            }, 300);
          });
        }

Added the accordion id to the ul so it matches the script:

 <ul id="accordion" class="collapsible" data-collapsible="accordion">
 <li>

The above code has no effect. It came from a fiddle at jsfiddle.net/NGye9/1/ It’s 2 years old, so that may be the problem!

4

Hi,

Do you mean something like this?

It uses the default files from material and the only extra is the js you mentioned in the fiddle.


 $('.collapsible-header').bind('click',function(){
            var self = this;
            setTimeout(function() {
                theOffset = $(self).offset();
                $('body,html').animate({ scrollTop: theOffset.top - 10 });
            }, 310);
        });

I just changed the offset and targetted the correct element (.collapsible-header).

5

I’ve been experimenting with a very similar code as yours. I just did not have the right elements in the js. Wow, I’m so relieved to finally get this right. You are a life saver! I just changed the offset to clear the header and … FANTASTIC!

6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.