Having difficulty implementing Jquery UI effects within an HTML Dialog in Google Apps Script

Looking for a scrolling effect in an HTML Dialog with Google Apps Script.

I've already tried this link and placed the code in the editor. However, when highlight buttons are clicked, they work but do not cause scrolling within the HTML dialog.

<!DOCTYPE html>
<html>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>   
   <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
   <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
   <link rel="stylesheet" href="//ssl.gstatic.com/docs/script/css/add-ons1.css">
   <style>
      .sidebar{padding:0}
      .branding-below {
      bottom: 80px;
      top: 0;
      }
   </style>
   <body>
      <div class="sidebar branding-below" data-select2-id="58">
        ...
        ... (omitted for brevity)
        ...
         $(document).ready(function () {
          $('select').select2();
           listen("select")
          
         });
         
         function listen(selector)
         {
         $(selector).on('change', function() {
         alert("Cannot use this field as you have already used!");
         highlightSelect2("#sel7")
         $(this).val("");
         });
         }         
      </script>
   </body>
</html>

https://i.sstatic.net/s1c42.png

Answer №1

To achieve the desired effect, consider adding the animation to the .sidebar element.

function highlightSelect2(selector) {
  $(selector)
    .next(".select2-container")
    .find(".select2-selection")
    .effect("highlight", {
      color: "#f88"
    }, 10000);
  $('.sidebar').animate({
    scrollTop: $(selector).offset().top
  }, 1000);
}
$(document).ready(function() {
  $('select').select2();
  listen("select")

});

function listen(selector) {
  $(selector).on('change', function() {
    alert("Cannot use this field as you have already used!");
    highlightSelect2("#sel7")
    $(this).val("");
  });
}
.sidebar {
  padding: 0
}

.branding-below {
  bottom: 80px;
  top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="//ssl.gstatic.com/docs/script/css/add-ons1.css">
<div class="sidebar branding-below" data-select2-id="58">
  <div class="block">
    <div id="main">
      <button onclick="highlightSelect2('#sel3')">Highlight sel3</button>
      <button onclick="highlightSelect2('#sel5')">Highlight sel5</button>
      <button onclick="highlightSelect2('#sel7')">Highlight sel7</button>
      <br />
      <br />
      <table border="0" id="fields" style="padding:5px;width:100%;table-layout:fixed;">
        <tr>
          <tr>
            <td class="gray" colspan="2">
              <select class="field" style="width:50%" id="sel1">
                <option>Example0 test</option>
                <option>Beta test</option>
              </select>
              <br />
              <br />
              <br />
              <br />
              <br />
          </tr>
          <tr>
            <td class="gray" colspan="2">
              <select class="field" style="width:50%" id="sel2">
                <option>Example1 test</option>
                <option>Beta test</option>
              </select>
              <br />
              <br />
              <br />
              <br />
              <br />
          </tr>
          <tr>
            <td class="gray" colspan="2">
              <select class="field" style="width:50%" id="sel3">
                <option>Example3 test</option>
                <option>Beta test</option>
              </select>
              <br />
              <br />
              <br />
              <br />
              <br />
          </tr>
          <tr>
            <td class="gray" colspan="2">
              <select class="field" style="width:50%" id="sel4">
                <option>Alpha test</option>
                <option>Beta test</option>
              </select>
              <br />
              <br />
              <br />
              <br />
              <br />
          </tr>
          <tr>
            <td class="gray" colspan="2">
              <select class="field" style="width:50%;" id="sel5">
                <option>Alpha test</option>
                <option>Beta test</option>
              </select>
              <br />
              <br />
              <br />
              <br />
              <br />
          </tr>
          <tr>
            <td class="gray" colspan="2">
              <select class="field" style="width:50%" id="sel6">
                <option>Alpha test</option>
                <option>Beta test</option>
              </select>
              <br />
              <br />
              <br />
              <br />
              <br />
          </tr>
          <tr>
            <td class="gray" colspan="2">
              <select class="field" style="width:50%" id="sel7">
                <option>Alpha test</option>
                <option>Beta test</option>
              </select>
          </tr>
      </table>
      <br />
      <br />
      <br />
      <br />
      <br />
      <button onclick="highlightSelect2('#sel3')">Highlight sel3</button>
      <button onclick="highlightSelect2('#sel5')">Highlight sel5</button>
      <button onclick="highlightSelect2('#sel7')">Highlight sel7</button>
    </div>
  </div>
</div>
<div class="sidebar bottom">
  <table width="100%" style="table-layout:fixed;">
    <tbody>
      <tr>
        <td colspan="2" style="border-bottom:0px;" align="left">
          <small align="center" id="status"></small>&emsp;
        </td>
      </tr>
      <tr>
        <td colspan="2" align="right">
          <button id="reset">Reset</button>&nbsp;&nbsp;
        </td>
      </tr>
    </tbody>
  </table>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for developing a module for node configuration that exclusively exports JSON data

I have a query about creating a node module that specifically exposes JSON files for configuration purposes. While I know I can easily export a JSON object from index.js, I'm exploring better alternatives to expose JSON files from the node module and ...

What is the best way to update only a portion of a nested schema in mongoose?

UPDATE: Through numerous trials, I finally discovered a successful method that converts any object into a format that mongoose can interpret. Take a look at the solution provided here: const updateNestedObjectParser = (nestedUpdateObject) => { cons ...

Ways to alter formData using jQuery

For my form submission using AJAX, I utilize FormData to gather data. Here is how I collect the form's data: var data = new FormData($(this)[0]); One of the inputs on the form consists of a color value in HSV format that I need to convert to hex. Wh ...

jQuery's slideDown function adds to the height of the page before smoothly scrolling it down

Every time I click on #download, the #musicDownload div smoothly slides down and expands the page height. However, I'm struggling to make the page scroll all the way down to the beginning of that div after it's expanded. This is the current code ...

Sharing data between child and parent components, and then passing it on to another child component in React Js

I have a scenario where I am passing props from a child component B to parent component A, and then from parent component A to child component C. Everything works fine when I pass the data from component B to A, but I encounter an issue when I try to set a ...

Weird State / Unusual Effectiveness with NextJS Links

I'm encountering some unusual behavior in a personal project I'm working on. The project is a recipe website with buttons at the top that lead to different pages querying Firebase for recipe data. In the Index.js file, Firestore queries pass pro ...

Using various colors to highlight specific sections of a letter or number

I am striving to recreate the unique image shown below, particularly interested in achieving the multi-colored effect on the numbers. This aspect of having different colors for parts of the number is intriguing and I would love to learn how it's done. ...

Integrate SVG directly into the three.js module to eliminate the need for an additional HTTP request

Currently, I am developing a small website that features a simple 3D animation. The model is extruded from an SVG file loaded using SVGLoader. My goal is to enhance the loading speed by including the SVG as text in my threejs code, eliminating the need for ...

Step-by-step guide to inserting an image into a Table Cell

I want to include my PDF image at the conclusion of the text in my table cell When it comes to my Table, I'm hoping that the image can be combined with the text seamlessly after it finishes <TableCell component="th" scope="row" className = {class ...

retrieve file through an ajax call

When I click on a button, I want to send an AJAX download request. I attempted it like this: Here is my JavaScript code: var xhr = new XMLHttpRequest(); xhr.open("GET", "download.php"); xhr.send(); In the download.php file: <? header("Cache-Control: ...

Top method for creating integration tests in React using Redux and Enzyme

Currently, I am working on setting up integration tests within my application. There are a few API calls that occur both when the component mounts and upon a button click. The response from these API calls is stored in the app's store, which then upd ...

Displaying HTML content using Typescript

As a newcomer to typescript, I have a question regarding displaying HTML using typescript. Below is the HTML code snippet: <div itemprop="copy-paste-block"> <ul> <li><span style="font-size:11pt;"><span style="font-family ...

Restrict the Angular ng-repeat directive to specific rows only

Suppose we have a JSON dataset listing all languages of books: $scope.data = [{ "title": "Alice in wonderland", "author": "Lewis Carroll", "lang": ["en"] }, { "title": "Journey to the West", "author": "Wu Cheng'en", "lang": [" ...

Optimizing JavaScript for efficient handling of large arrays

I'm currently developing an image editing program using JavaScript to expand my knowledge of the language. The images I am working with are typically around 3000 x 4000 pixels in size, resulting in a total of 48,000,000 values to manage when convertin ...

Having issues executing a conditional check using ng-if in AngularJS

I am attempting to verify a condition and here is how it appears: <ons-list-item ng-repeat="EventList in EventLists" ng-if="EventList.start.dateTime | DateMonth == TodayDetail"> I am encountering difficulties with this ng-if="EventList.start.dateTi ...

Click on the button to reveal the hidden content within the div, and then smoothly scroll down to view

I have a footer div that is present at the bottom of every page on our site. I've added a button to expand this div, but I'm looking for a way to automatically scroll the page down so that the user can view the expanded content without manually s ...

What is required to create a basic application that can function offline while featuring an HTML/CSS user interface?

Newbie inquiry: I am interested in creating a small application that can run offline on a desktop computer. The amount of data to be saved is minimal, so I have the option to use a file or some type of database. However, my main question is: What languag ...

Using Asp.net to make a jquery ajax request

I've been practicing jQuery AJAX calls and I've encountered an issue. Whenever I run my project, I receive an INTERNAL SERVER ERROR 500. Can someone explain what this error means and how I can resolve it? To give some context, I created a sample ...

How to create a stunning color flash effect using Jquery?

Currently, I am working on a JQuery script that toggles the visibility of an element when a user checks a box. To enhance user experience, I would like to incorporate a color flash effect on the element whenever it transitions from hidden to visible. My i ...

Transform the appearance of the datepicker with jquery-ui

Is it possible to customize the appearance of the calendar using css files from jquery-ui? <input type="text" id="dob"/> Check out this script: $(document).ready(function(){ $("#dob").datepicker(); }); See an example here. How can I style it ...