how to prevent an image to move while scrolling in mobile app

Question

I am developing a mobile app. I use JavaScript for the code and some jQuery mobile (1.4.5). My problem is that when I scroll, my images follow the scroll. I don't have this problem in the web version, but on my phone the images are not fixed. I would like my images to be fixed in the specific positions I want while I am scrolling on any device. Let me explain briefly my code:

When I open my app, some images appear in their places. For this, I simply use:

<img src="js/image.jpg" style="position: absolute; top:105px; left:10px;" width="110" height="85">

which works fine, this image stays in place even in the mobile app.

then later, others pictures have to appear. For this, I use this function:

function im2(a,b,c,d){var x = document.createElement("IMG");
 x.setAttribute("src", a);
x.setAttribute("style",b);
 x.setAttribute("width", c);x.setAttribute("height",d );
document.body.appendChild(x);
}

Then to call the image:

<im2("js/image2.jpg","position: fixed; top:210px ; left:165px","280","35")>

Then when I scroll, this image is not fixed anymore on mobile (works fine in web ) ... :-(

So, I tried this CSS to stick the image, in order to disable it from moving

<style>
img.sticky {
  position: -webkit-sticky;
  position: sticky;
}
</style>

In the Javascript, I use the same function im2 : im2(w, etc){ x.setAttribute("class", w); etc}

Then, I call the function like this:

im2("sticky","js/image2.jpg","position: fixed; top:210px ; left:165px","280","35") and .... nothing stick.

I presume this is because of the jqm layer that gives this unexpected result. So, what should I do /write?

sorry for my ignorance but dont know how to do it... all what I have written to say, I want my images fixed while I scroll in my mobile — ubi, Nov 25 '20 at 00:07
Maybe you can edit a jsfiddle like this one and see how far you get. http://jsfiddle.net/rossipedia/VtPcm/ Here's a somewhat related problem and you'll notice how many people pitched in to help when a jsfiddle was posted of his attempt to answer his own question. https://stackoverflow.com/questions/8653025/stop-fixed-position-at-footer/38260165 Furthermore, you can update your fiddle as time goes on. Don't worry about your first attempt looking crazy. — react_or_angluar, Nov 25 '20 at 00:25
actually now my main problem is to fix the images while swiping as I describe below — ubi, Nov 25 '20 at 12:21
Well I have analyzed the problem more in depth and it is may be not the swipe itself but that the images are loaded in my 3 pages instead of the one page I want (the middle page). what to do pleeeaaase? may be my function im2 is not adapted? or I have to add something in the function or swipe code? — ubi, Nov 25 '20 at 13:24

score 0 · Answer 1 · edited Nov 25 '20 at 22:16

For some unknown reasons it works ... images stay fixed .. now??

The problem remains the same while I swipe from page to page. In another post, I found this solution that sounds promising. I cannot directly talk with the user or put a comment as I am 2 hours away. Here is the jQuery code that should work, but it doesn't with me. Where should I put this line ?

$('img').on('dragstart', function(event) { event.preventDefault(); });

Here is the script for swiping I use:

<script>
$(document).on('swipeleft', '.ui-page', function(event){    
    if(event.handled !== true) // This will prevent event triggering more then once
    {    
        var nextpage = $.mobile.activePage.next('[data-role="page"]');
        // swipe using id of next page if exists
        if (nextpage.length > 0) { 
            $.mobile.changePage(nextpage, {transition: "slide", reverse: false}, true, true);
        }
        event.handled = true;
    }
    return false;         
});

$(document).on('swiperight', '.ui-page', function(event){     
    if(event.handled !== true) // This will prevent event triggering more then once
    {      
        var prevpage = $(this).prev('[data-role="page"]');
        if (prevpage.length > 0) {
            $.mobile.changePage(prevpage, {transition: "slide", reverse: true}, true, true);
        }
        event.handled = true;
    }
    return false;            
});

Well I have analyzed the problem more in depth and it is may be not the swipe itself but that the images are loaded in my 3 pages instead of the one page I want (the middle page). what to do pleeeaaase? may be my function im2 is not adapted? or I have to add something in the function or swipe code? — ubi, Nov 25 '20 at 13:24

how to prevent an image to move while scrolling in mobile app

1 Answers1