the problem of user-select with page scroll in IOS

See also questions close to this topic

• iOS PWA - Open Maps returns to blank screen

  I have created a PWA that I have saved to the home screen of my iPhone. The PWA has a Google Maps link that opens correctly in both fullscreen and browser modes, however when opening from full screen mode on iOS, the link opens, then switches to the Google Maps App (if installed).

  When I close the maps app and return to the PWA it shows a blank screen and does not return to the previous view that contained the link.

  function openMap(lat, lng) {
      var win = window.open("https://maps.google.com/?q=" + lat + "," + lng + "", '_blank');
      win.focus();
  }
  

  Is there a way to prevent the PWA from opening the map link in the popover Safari viewer and just launching the link in the full Safari app or any other way to fix/prevent this issue?

  Thank you
• Adding data to Chart.js line graph from array

  I use the code below to display data stored in dataGraph, measureAttr stores the attributes. How can I add the data in a loop for different array sizes?

  currentChart = new Chart(document.getElementById("chart"), {
              type: 'bar',
              data: {
                  labels: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
                  datasets: [{
                      data: dataGraph[0],
                      label: measureAttr[0],
                      backgroundColor: "#3e95cd",
                      fill: false
                  }, {
                      data: dataGraph[1],
                      label: measureAttr[1],
                      backgroundColor: "#8e5ea2",
                      fill: false
                  }, {
                      data: dataGraph[2],
                      label: measureAttr[2],
                      backgroundColor: "#3cba9f",
                      fill: false
                  }]
              },
              options: {
                  title: {
                      display: true,
                  }
              }
  
• React. The best way to implement multi-step progress bar

  I want to implement a multi-step progress bar using React. This is my html:

                         <div className="order-progress-bar w-100 mt-md-auto">
                              <ul className="nav">
                                  <li className="done-step"><Link to="/order/stepOne"><span className="round-item">1</span></Link></li>
                                  <li className="done-step"><Link to="/order/stepTwo"><span className="round-item">2</span></Link></li>
                                  <li className="active-step"><Link to="/order/stepThree"><span className="round-item">3</span></Link></li>
                                  <li ><Link to="/order/stepFour"><span className="round-item">4</span></Link></li>
                                  <li><span className="round-item">5</span></li>
                              </ul>
                          </div>
  

  I need to manage a few parametrs: -class for active step -class for done-step -router link path

  So what is the best way to impletent this idea using React?
• Vue + Nuxt js: How to apply dynamic active class to parent menu using bootstrap navbar

  I am new to vue + nuxt.js

  I am using bootstrap navbar. See this link

  I have following code.

  <b-nav-item-dropdown type="dark">
            <template slot="button-content">
              <i class="fas fa-user"></i> Users
            </template>
            <b-dropdown-item ref="users" to="/users" nuxt-link-active="/users"
              >Listing
            </b-dropdown-item>
            <b-dropdown-item to="/users/add" nuxt-link-active="/users/add"
              >Add new user
            </b-dropdown-item>
          </b-nav-item-dropdown>
          <b-nav-item-dropdown bg-transparent>
            <template slot="button-content">
              <i class="fas fa-users"></i> Teams
            </template>
            <b-dropdown-item to="/teams" nuxt-link-active="/teams"
              >Listing
            </b-dropdown-item>
            <b-dropdown-item to="/teams/add" nuxt-link-active="/teams/add"
              >Add new team
            </b-dropdown-item>
          </b-nav-item-dropdown>
  

  Now i want a parent menu to be open when child is clicked. In current scenario when i click on Team Listing, it closes the parent div so cannot identify which menu is open. Also when i click on user listing it should close team menu.

  I tried many way by googling. But cannot find proper solution.
• How to automatically serve images without webpack modules

  i'm using the templated generated by the framework7 CLI for the "f7+vue cordova app". The generated code includes a webpack setup, and i'm not very familiar with it. If i try to insert images inside my html code (<img src="./images/test.png">), the server responds with a 404 error.

  Looking at the generated webpack.config.js, there's a rule for "local" image files (images whose url starts with a dot), inside the module.exports.module.rules sectio:

  {
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: 'images/[name].[ext]',
    },
  },
  

  From what i understood, this rules allows for the images' inline "minification" via data-uri generation (iif the file is smaller than 10k bytes). The image is then available to use via the following code:

  import img from '../images/test.jpg;
  document.querySelector('img').src = img;
  

  I don't want to have to import every single image. I don't even care about inlining my images via data-uris. I just want to be able to use images by setting the src attribute.

  I tried to disable this behaviour by deleting the rule inside the webpack.config, and by changing the loader to 'ignore-loader' (after having installed the plugin), without any luck.

  FYI the content of the webpack.config.js is the following: https://pastebin.com/fa4UADVR

  FYI The error reported in the console is the following:

  vue.esm.js:1896 Error: Cannot find module './images/logo.png'
      at webpackMissingModule (signin.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options:43)
      at Proxy.render (signin.vue?./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/vue-loader/lib??vue-loader-options:43)
      at VueComponent.Vue._render (vue.esm.js:3545)
      at VueComponent.updateComponent (vue.esm.js:4063)
      at Watcher.get (vue.esm.js:4476)
      at new Watcher (vue.esm.js:4465)
      at mountComponent (vue.esm.js:4070)
      at VueComponent.Vue.$mount (vue.esm.js:9047)
      at VueComponent.Vue.$mount (vue.esm.js:11941)
      at init (vue.esm.js:3124)
  
• exit from a hybrid app using vue.js and cordova

  My problem is that when I switch from current page to the previous one I keep the history in my android app but when I go the home page and try to exit the app , the android exit button doesnt fuction , i used event bus(vue.js and cordova)
• in React Js ,i am not able to pause the "setInterval" and "setTimeout" while the android mobile home button is pressed

  i have a "setTimeout" and "setInterval" is running in a react page for changing the presentation data automatically, i have written separate code to save the state on back pressed and resuming using the localstorage to save the state Json in string.

  but i am unable to handle this pause activity when the android home button is pressed, this was actially running in behind and the slides have kept passed since it is a setTimeeout and SetInterval.

  how to write code in React Js web to call a function when android home button is hitted
• Click on button element in HTML page in Android WebView using jquery

  I want to click a specific button in an html page using an Android WebView.

  I have this html:

  <div class="card">
      <div class="card-header" id="block2">
          <button type="button" class="btn bld-no-btn" aria-expanded="true" aria-controls="item2" data-toggle="collapse" data-target="#item2">
              <div class="d-flex align-items-center">
                  <i class="icon small blue icon-arrow pr-3" aria-hidden="true">delta_omhoog</i>
                  <h3>Title of button</h3>
                      <div class="ml-auto pr-0 pr-md-3">
                          <i class="icon red px-1" title="waarschuwing">waarschuwing</i>
                  </div>
              </div>
      </button>
  </div>
  

  I've hosted it here: http://www.jimclermonts.nl/test/

  I've written this code to click the button

  class MainActivity : AppCompatActivity() {
  
      lateinit var webView: WebView
      var firstTime: Boolean = true
  
      companion object {
          const val JAVA_SCRIPT =
              "javascript:window.HTMLOUT.processHTML('<html>'+document.getElementsByTagName('html')[0].innerHTML+'</html>');"
      }
  
      override fun onCreate(savedInstanceState: Bundle?) {
          super.onCreate(savedInstanceState)
          setContentView(R.layout.activity_main)
  
          webView = findViewById(R.id.webView)
  
          initializeWebView("http://www.jimclermonts.nl/test/")
      }
  
      @SuppressLint("JavascriptInterface", "SetJavaScriptEnabled")
      private fun initializeWebView(url: String?) {
  
          class JavaScriptTokenSubstractInterface {
              @JavascriptInterface
              @SuppressWarnings("unused")
              fun processHTML(html: String) {
  
                  // check if html is correct
                  webView.loadUrl(
                      "javascript:(function() {" +
                              "document.getElementById(\"item2\").querySelectorAll(\"button\")[0].click();" +
                              "})()"
                  )
              }
          }
  
          webView.webChromeClient = object : WebChromeClient() {
              override fun onConsoleMessage(message: String, lineNumber: Int, sourceID: String) {
                  Log.d("MyApplication", "$message -- From line $lineNumber of $sourceID")
              }
          }
          webView.settings.javaScriptEnabled = true
          webView.settings.useWideViewPort = true
          webView.requestFocus(View.FOCUS_DOWN)
          webView.clearCache(true)
          webView.clearHistory()
  
          webView.webViewClient = object : WebViewClient() {
  
              override fun onPageFinished(webView: WebView?, url: String) {
                  super.onPageFinished(webView, url)
                  if (firstTime) {
                      firstTime = false
                      webView?.loadUrl(JAVA_SCRIPT)
                  }
              }
          }
  
          webView.loadUrl(url)
      }
  }
  

  Androidmanifest:

  <uses-permission android:name="android.permission.INTERNET" />
  

  So far i've been stuck and I can't find a solution. I've used the processHTML method to validate that the HTML is coming through and I've used a boolean to that is doesn't keep triggering the same page.
• How and where to use evaluateJavascript in WebView currentUrl?

  In my WebViewContainer project I load the page using 1.party WebView plugin. In after I navigate in my site I need to run evaluateJavascript in currentUrl.

  How and where to use evaluateJavascript in WebView currentUrl?

  I am using WebViewController _myController.

   //final Completer<WebViewController> _controller = Completer<WebViewController>();
   WebViewController _myController;
  

  Where Should I use currentUrl and evaluateJavascript? Below code shows initialUrl and first evaluateJavascript after loading a page.

  new WebView(
                initialUrl: 'https://stackoverflow.com',
               javascriptMode: JavascriptMode.unrestricted,
                onWebViewCreated: (controller){
                  _myController = controller;
                },
                javascriptChannels: <JavascriptChannel>[
                  _toasterJavascriptChannel(context),
                ].toSet(),
  
                onPageFinished: (url){
                  print('Page finished loading: $url');
  
                  String js = "document.getElementById(\"header\").style.display=\'none\';";
                  _myController.evaluateJavascript(js);
  
                },
              ),