Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript Problem running JavaScript code on Apple devices

The goal is to execute a function when a button with the class .more is clicked. However, after modifying the code to troubleshoot the issue, none of the event handlers are working on Apple.
The following code runs without any problems on Android (Chrome & Firefox) and on Windows (Chrome & Edge) but not on an Apple Phone or Tablet (Safari & Firefox)

HTML Snippet
HTML:
<div class="col-lg-6 col-11 overflow-hidden">
    <div class="glas">
        <h3 class="text-center"><u>Zusammenführung:</u></h3>
        <picture>
        </picture>
          <blockquote class="px-3">
            <p>
                Text.....
            </p>
        </blockquote>
           <div id="liveAlertPlaceholder4"></div>
        <div class="row px-3">
            <div class="col-4">
                <button id="btn4" type="button" class="more btn btn-outline-light d-lg-block d-none">Mehr... </button>
                <button id="btnM4" type="button" class="more btn btn-outline-dark d-block d-lg-none">Mehr... </button>
            </div>
            <div class="col">
                <button type="button" class="btn btn-outline-light d-none d-lg-block cat-enrolment-btn-form2 ms-auto"
                  data-sel="Zusammenführung:">Anfrage senden</button>
                <button type="button" class="btn btn-outline-dark d-block d-lg-none cat-enrolment-btn-form2 ms-auto"
                  data-sel="Zusammenführung:">Anfrage senden</button>
            </div>
        </div>
     </div>
</div>

Here is the entire Javascript code.
JavaScript:
document.addEventListener("DOMContentLoaded", function (event) {
  "use strict";
  const mytap = (window.ontouchstart === null) ? 'touchstart' : 'click';
 
  const btn1 = document.getElementById('btn1');
  const btn2 = document.getElementById('btn2');
  const btn3 = document.getElementById('btn3');
  const btn4 = document.getElementById('btn4');
  const btnM1 = document.getElementById('btnM1');
  const btnM2 = document.getElementById('btnM2');
  const btnM3 = document.getElementById('btnM3');
  const btnM4 = document.getElementById('btnM4');

  const alertPlaceholder1 = document.getElementById('liveAlertPlaceholder1');
  const alertPlaceholder2 = document.getElementById('liveAlertPlaceholder2');
  const alertPlaceholder3 = document.getElementById('liveAlertPlaceholder3');
  const alertPlaceholder4 = document.getElementById('liveAlertPlaceholder4');

  const alert = (message, type, placeholder) => {
    const wrapper = document.createElement('div')
    wrapper.innerHTML = [
      `<div class="alert alert-${type} alert-dismissible" role="alert">`,
      `   <div>${message}</div>`,
      '   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
      '</div>'
    ].join('');

    placeholder.append(wrapper);
  }

  btn1.addEventListener('touchend', (e) => {
    alert('event: ' + e.type, 'success',alertPlaceholder1);
    console.log(e.type);
  });
  btn2.addEventListener('click', (e) => {
    alert('event: ' + e.type, 'success', alertPlaceholder2);
    console.log(e.type);
  });
  btn3.addEventListener(mytap, (e) => {
    alert('event: ' + e.type, 'success', alertPlaceholder3);
    console.log(e.type);
  });
  btn4.addEventListener('touchstart', (e) => {
    alert('event: ' + e.type, 'success', alertPlaceholder4);
    console.log(e.type);
  });


  btnM1.addEventListener('touchend', (e) => {
    alert('event: ' + e.type, 'success',alertPlaceholder1);
    console.log(e.type);
  });
  btnM2.addEventListener('click', (e) => {
    alert('event: ' + e.type, 'success', alertPlaceholder2);
    console.log(e.type);
  });
  btnM3.addEventListener(mytap, (e) => {
    alert('event: ' + e.type, 'success', alertPlaceholder3);
    console.log(e.type);
  });
  btnM4.addEventListener('touchstart', (e) => {
    alert('event: ' + e.type, 'success', alertPlaceholder4);
    console.log(e.type);
  });

});

The buttons are available twice. One for mobile and one for desktop.

I hope that someone can help me here, because I am desperate.
 
The goal is to execute a function when a button with the class .more is clicked. However, after modifying the code to troubleshoot the issue, none of the event handlers are working on Apple.
The following code runs without any problems on Android (Chrome & Firefox) and on Windows (Chrome & Edge) but not on an Apple Phone or Tablet (Safari & Firefox)

HTML Snippet
HTML:
<div class="col-lg-6 col-11 overflow-hidden">
    <div class="glas">
        <h3 class="text-center"><u>Zusammenführung:</u></h3>
        <picture>
        </picture>
          <blockquote class="px-3">
            <p>
                Text.....
            </p>
        </blockquote>
           <div id="liveAlertPlaceholder4"></div>
        <div class="row px-3">
            <div class="col-4">
                <button id="btn4" type="button" class="more btn btn-outline-light d-lg-block d-none">Mehr... </button>
                <button id="btnM4" type="button" class="more btn btn-outline-dark d-block d-lg-none">Mehr... </button>
            </div>
            <div class="col">
                <button type="button" class="btn btn-outline-light d-none d-lg-block cat-enrolment-btn-form2 ms-auto"
                  data-sel="Zusammenführung:">Anfrage senden</button>
                <button type="button" class="btn btn-outline-dark d-block d-lg-none cat-enrolment-btn-form2 ms-auto"
                  data-sel="Zusammenführung:">Anfrage senden</button>
            </div>
        </div>
     </div>
</div>

Here is the entire Javascript code.
JavaScript:
document.addEventListener("DOMContentLoaded", function (event) {
  "use strict";
  const mytap = (window.ontouchstart === null) ? 'touchstart' : 'click';
 
  const btn1 = document.getElementById('btn1');
  const btn2 = document.getElementById('btn2');
  const btn3 = document.getElementById('btn3');
  const btn4 = document.getElementById('btn4');
  const btnM1 = document.getElementById('btnM1');
  const btnM2 = document.getElementById('btnM2');
  const btnM3 = document.getElementById('btnM3');
  const btnM4 = document.getElementById('btnM4');

  const alertPlaceholder1 = document.getElementById('liveAlertPlaceholder1');
  const alertPlaceholder2 = document.getElementById('liveAlertPlaceholder2');
  const alertPlaceholder3 = document.getElementById('liveAlertPlaceholder3');
  const alertPlaceholder4 = document.getElementById('liveAlertPlaceholder4');

  const alert = (message, type, placeholder) => {
    const wrapper = document.createElement('div')
    wrapper.innerHTML = [
      `<div class="alert alert-${type} alert-dismissible" role="alert">`,
      `   <div>${message}</div>`,
      '   <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>',
      '</div>'
    ].join('');

    placeholder.append(wrapper);
  }

  btn1.addEventListener('touchend', (e) => {
    alert('event: ' + e.type, 'success',alertPlaceholder1);
    console.log(e.type);
  });
  btn2.addEventListener('click', (e) => {
    alert('event: ' + e.type, 'success', alertPlaceholder2);
    console.log(e.type);
  });
  btn3.addEventListener(mytap, (e) => {
    alert('event: ' + e.type, 'success', alertPlaceholder3);
    console.log(e.type);
  });
  btn4.addEventListener('touchstart', (e) => {
    alert('event: ' + e.type, 'success', alertPlaceholder4);
    console.log(e.type);
  });


  btnM1.addEventListener('touchend', (e) => {
    alert('event: ' + e.type, 'success',alertPlaceholder1);
    console.log(e.type);
  });
  btnM2.addEventListener('click', (e) => {
    alert('event: ' + e.type, 'success', alertPlaceholder2);
    console.log(e.type);
  });
  btnM3.addEventListener(mytap, (e) => {
    alert('event: ' + e.type, 'success', alertPlaceholder3);
    console.log(e.type);
  });
  btnM4.addEventListener('touchstart', (e) => {
    alert('event: ' + e.type, 'success', alertPlaceholder4);
    console.log(e.type);
  });

});

The buttons are available twice. One for mobile and one for desktop.

I hope that someone can help me here, because I am desperate.
Hi there,
If you're looking at this via a macbook, for example, are you getting any errors in console?
 
However, after modifying the code to troubleshoot the issue, none of the event handlers are working on Apple.
This confuses me. What exactly was "the issue" you wanted to troubleshoot ? And what did you modify in the code ? What do you mean that the event handlers are "not working" ? Do you mean they are not being called, or are they being called but don 't do what you expect them to ? IMO it is very important that you precisely describe the problem and the steps you took.
 
This confuses me. What exactly was "the issue" you wanted to troubleshoot ? And what did you modify in the code ? What do you mean that the event handlers are "not working" ? Do you mean they are not being called, or are they being called but don 't do what you expect them to ? IMO it is very important that you precisely describe the problem and the steps you took.
None of the event handlers are triggered. Normally, when you click the button (More...) a function is triggered that changes the height of the DIV. Here is the link to the current website (Bootstrap4.6 and jquery) that is online. Current Website

I have now rewritten the entire website in bootstrap5.3 and vanilla javascript to rule out problems with Bootstrap 4.6 and Jquery.
the javascript code posted above is just to test why the buttons (More... and Send Request) don't work on Apple devices.

Unfortunately without success:thinking:
 
Last edited:
Hi there,
If you're looking at this via a macbook, for example, are you getting any errors in console?
I just checked on a Macbook. No errors are reported in the console and all files are loaded correctly. Even a normal Console.log command is executed normally. Here is the link to the current website (Bootstrap4.6 and jquery) that is online. Current Website

I have now rewritten the entire website in bootstrap5.3 and vanilla javascript to rule out problems with Bootstrap 4.6 and Jquery.
the javascript code posted above is just to test why the buttons (More... and Send Request) don't work on Apple devices.

Unfortunately without success :thinking:
 
Last edited:
None of the event handlers are triggered. Normally, when you click the button (More...) a function is triggered that changes the height of the DIV. Here is the link to the current website (Bootstrap4.6 and jquery) that is online. Current Website
I checked on my iPad using Safari and indeed these buttons don't appear to be doing anything. Unfortunately I don't know if and how I can run a debugger on iOs, so I cannot verify whether the event handlers are being called or not. How are you sure they are not being triggered at all ? I don't see a console.log or alert statement in them.

But it occurred to me that the two big buttons Gruppenkurse and Einzelstunden do work. Inspection reveals that these are not buttons but <a> elements. The buttons Mehr... and Anfrage Sended are <button> elements. I'm not sure why the latter two wouldn't work, but is it an idea to use <a> elements here too ?
 
I checked on my iPad using Safari and indeed these buttons don't appear to be doing anything. Unfortunately I don't know if and how I can run a debugger on iOs, so I cannot verify whether the event handlers are being called or not. How are you sure they are not being triggered at all ? I don't see a console.log or alert statement in them.

But it occurred to me that the two big buttons Gruppenkurse and Einzelstunden do work. Inspection reveals that these are not buttons but <a> elements. The buttons Mehr... and Anfrage Sended are <button> elements. I'm not sure why the latter two wouldn't work, but is it an idea to use <a> elements here too ?
I was able to solve the problem. However, it wasn't because they were Button tags.
 
I was finally able to solve the problem🥳. OMG I really never had such a bug👾. The overflow-hidden command in the DIV <div class="col-lg-6 col-11 overflow-hidden"> was in the wrong position. The text in the blockquote element is longer and is made invisible at the bottom with mask-image. The overflow-hidden command prevented the text from going beyond the DIV. Apple doesn't understand that "behind the buttons" is a text!

Now I have the overflow-hidden command right in the blockquote element, so the text after the blockquote element is truncated and is no longer behind the buttons. Now everything works as it should.

Excited Minions GIF
 
I was finally able to solve the problem🥳. OMG I really never had such a bug👾. The overflow-hidden command in the DIV <div class="col-lg-6 col-11 overflow-hidden"> was in the wrong position. The text in the blockquote element is longer and is made invisible at the bottom with mask-image. The overflow-hidden command prevented the text from going beyond the DIV. Apple doesn't understand that "behind the buttons" is a text!

Now I have the overflow-hidden command right in the blockquote element, so the text after the blockquote element is truncated and is no longer behind the buttons. Now everything works as it should.
Wow, good detective work.
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom