0

In the web app [published using Google Apps Script] div autoscroll is not working. Could you please help make it work? Thank you.

Here is the link to the web app: https://script.google.com/macros/s/AKfycby4jMUrDqW8HLev0HkWt36XCdtpjuSXsv2-yThkXSzA5fusfXw/exec

Here is the code:

    <!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>


    <div class="jumbotron text-center">
        <h2>My First Bootstrap Page</h2>
        <p>Resize this responsive page to see the effect!</p>
    </div>
    <?!= HtmlService.createHtmlOutputFromFile('CSS').getContent(); ?>
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-3 col1">
                    <h3>Column 1</h3>
                    <div class="item1" id="item1">
                        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit... see if it goes beyond the margin</span>
                        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                    </div>
                </div>
                <div class="col-sm-3 col2">
                    <h3>Column 2</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
                    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                </div>
                <div class="col-sm-3 col3">
                    <h3>Column 3</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
                    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                </div>
                <div class="col-sm-3 col4">
                    <h3>Column 3</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
                    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                </div>
            </div>
        </div>

        <script>
            $("#item1").animate({
                scrollTop: $("#item1").height()
            }, 4000);
            setTimeout(function() {
                $("#item1").animate({
                    scrollTop: 0
                }, 4000);
            }, 4000);
            setInterval(function() {
                // 4000 - it will take 4 secound in total from the top of the page to the bottom
                $("#item1").animate({
                    scrollTop: $("#item1").height()
                }, 4000);
                setTimeout(function() {
                    $("#item1").animate({
                        scrollTop: 0
                    }, 4000);
                }, 4000);

            }, 8000);
        </script>

</body>

</html>
Din
  • 505
  • 4
  • 11
  • 21
  • 2
    Stating that something is "not working" without any details is not a good way to ask a question. Are there scroll bars missing? What will the user see if it was working correctly? Have you tried to debug the problem? Are you familiar with the browser console? In chrome and firefox, press the f12 key to open the developer tools. Add some `console.log()` statements to see what the code is doing. – Alan Wells May 04 '17 at 15:51
  • jQuery is not autoscrolling the div it's selecting, it should be repeatedly autoscrolling. The first box [i.e. 'Column 1'] on the page. – Din May 04 '17 at 16:03
  • There is no jQuery in the rendered page you linked. After you save the GAS code, you need to go to Publish > Deploy as Web App and look at the dev code or publish a new version. – Brian May 04 '17 at 19:19
  • The code is deployed as Web App, the html file includes jQuery in the head section: – Din May 04 '17 at 19:27
  • I meant your custom script. The jQuery library is there but your scroll script isn't in the rendered HTML on the page. – Brian May 04 '17 at 19:44
  • That's very strange, but the whole code is deployed as Web App. – Din May 04 '17 at 20:07
  • What could be the reason for the jQuery script is missing in the rendered page? – Din May 04 '17 at 20:07
  • See my previous comment about publishing the current dev copy of the script as a new version. – Brian May 05 '17 at 01:11
  • Hi Brian, I just published the new version of the code (but it's not working): https://script.google.com/macros/s/AKfycby4jMUrDqW8HLev0HkWt36XCdtpjuSXsv2-yThkXSzA5fusfXw/exec – Din May 05 '17 at 06:22
  • I saw in the console the following message before the new version was published (now it does not show in the version): Uncaught Error: Bootstrap's JavaScript requires jQuery – Din May 05 '17 at 06:30
  • Hi Brian, thank you very much for hinting that the jQuery wasn't working i didn't notice. But that was only one part of the problem, the second was I had wrong CSS code, which I revised and now it works :-). I will post a new message here with both CSS codes. – Din May 05 '17 at 07:13

1 Answers1

0

It worked, there was two parts of the problem why it was not auto-scrolling the div repeatedly. First jQuery code was not captured, Bootstrap would not detect jQuery code [it was giving error message: Uncaught Error: Bootstrap's JavaScript requires jQuery], it resolved after a new version was published as per advice from Brian and also looked at the solution here: Bootstrap won't detect jQuery 1.11.0 - Uncaught Error: Bootstrap's JavaScript requires jQuery

The second part of the problem was it had wrong CSS code, the previous CSS code was:

.col1 { height:180px; overflow-y:scroll; background:yellow; }

.col2 { height:180px; overflow-y:scroll; background: #6BC0FF; }

.col3 { height:180px; overflow-y:scroll; background:orange; }

.col4 { height:180px; overflow-y:scroll; background:green; }

The new revised CSS code:

.item1 { height:180px; overflow-y:scroll; background:yellow; }

.col2 { height:180px; overflow-y:scroll; background: #6BC0FF; }

.col3 { height:180px; overflow-y:scroll; background:orange; }

.col4 { height:180px; overflow-y:scroll; background:green; }

Here is the revised code of HTML file:

    <!DOCTYPE html>
<html lang="en">

<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>


    <div class="jumbotron text-center">
        <h2>My First Bootstrap Page</h2>
        <p>Resize this responsive page to see the effect!</p>
    </div>
    <?!= HtmlService.createHtmlOutputFromFile('CSS').getContent(); ?>
        <div class="container-fluid">
            <div class="row">
                <div class="col-sm-3 col1">
                    <h3>Column 1</h3>
                    <div class="item1" id="item1">
                        <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit... see if it goes beyond the margin</span>
                        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                        <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                    </div>
                </div>
                <div class="col-sm-3 col2">
                    <h3>Column 2</h3>
                    <div id="item2">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
                    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                    </div>
                </div>
                <div class="col-sm-3 col3">
                    <h3>Column 3</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
                    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                </div>
                <div class="col-sm-3 col4">
                    <h3>Column 3</h3>
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
                    <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
                </div>
            </div>
        </div>

        <script>
            $("#item1").animate({
                scrollTop: $("#item1").height()
            }, 4000);
            setTimeout(function() {
                $("#item1").animate({
                    scrollTop: 0
                }, 4000);
            }, 4000);
            setInterval(function() {
                // 4000 - it will take 4 secound in total from the top of the page to the bottom
                $("#item1").animate({
                    scrollTop: $("#item1").height()
                }, 4000);
                setTimeout(function() {
                    $("#item1").animate({
                        scrollTop: 0
                    }, 4000);
                }, 4000);

            }, 8000);

            console.log($(".col1").height());
            console.log($(".item1").height());
        </script>

</body>

</html>
Community
  • 1
  • 1
Din
  • 505
  • 4
  • 11
  • 21