Javascript doesn’t work on mobile devices / images don’t load

[Ber]

Hey there,

we built a laytheme page using some custom html, css and javascript and unfortunately we ran into two problems that we could not fix.

Problem 1:
We put in some html and jQuery based audio buttons, that work very well on desktop. On any mobile devices, the play buttons seem to work, but the pause button doesn’t show up like needed. Do you have any idea why?

Here is the html of one audio button:

<svg viewBox="0 0 100 100">
    <g>
        <polygon id="play1"
                filter="url(#darkGlow)"
                fill="white" 
                stroke="white" 
                stroke-width="5" 
                stroke-linejoin="round" 
                points="35,30 65,50 35,70"/>
    </g>
    <g >
		<path  
                id="pause1"
                class="pauseclass"
                filter="url(#darkGlow)"
                fill="white" 
                stroke="white"
                stroke-width="3"
                stroke-linejoin="round"
            d="M38 34 L45 34 L45 64 L38 64 L38 34 Z M57 34 L64 34 L64 64 L57 64 L57 34 Z"/>
    </g>
</svg>

<audio id="sound1" src="http://decamp-volume.com/wp-content/uploads/2021/04/11.-Aayati_Sengupta.mp3"></audio>
  

and javascript:

window.laytheme.on("newpageshown", function(layoutObj, type, obj){
	if(type == "project" && obj.id == 1 || type == "page" && obj.id == 266 || slug == "home"){

jQuery(document.getElementsByClassName("pauseclass")).hide();

jQuery(document).on("touchstart click", ".hallo", function findthings (e) {
  const item = e.target;

  for (var num = 0; num < 100; num++) { 

      if (item.id === "play"+num){
        document.getElementById("sound"+num).play();
        jQuery(item).hide();
        jQuery(document.getElementById("pause"+num)).show();
        
        
      };
      if (item.id === "pause"+num){
        document.getElementById("sound"+num).pause();
        jQuery(item).hide();
        jQuery(document.getElementById("play"+num)).show();
        
        
      };
   }
   
});

And this is the page we’re talking about:
http://decamp-volume.com/archive-one/

Problem 2:
We have inserted some images via Gridder, but they are not displayed when the page is loaded for the first time (neither on desktop nor on mobile browsers), only when the window size is changed they are displayed.

See here:
http://decamp-volume.com/about/

We would be really happy if you could help us!

Thanks in advance and best wishes,
Berenice

[arminunruh]

hey im not sure why this doesnt work

you could try and debug your website on your iphone like this:
https://www.browserstack.com/guide/how-to-debug-on-iphone

maybe a javascript error shows up