Databases
StackOverflow2013
Postsdbo
POMove image with touchmove event on iPad
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMove image with touchmove event on iPad
    primarykey
    data
    text
    <p>I have a website that has a fixed background image which I am trying to adapt for the iPhone and iPad as the image does not stay static. I have tried various wrappers with no luck; either I can't scroll one way, or the site doesn't scroll properly (because of the use of dynamic ajax). So I started looking if there was a way to move the image background with the scrolling of the page and I used the following:</p> <pre><code>$(document).bind('touchmove',function(e){ $('.background_image').css({top: $(document).scrollTop()}); $('.background_image img').css({top: $(document).scrollTop()}); console.log($('.background_image img').css('top')); }); $(document).bind('scroll', function() { $('.background_image').css({top: $(document).scrollTop()}); $('.background_image img').css({top: $(document).scrollTop()}); }); </code></pre> <p>This seems to work for the first 'touch', but the background does not then continually move. When I stop moving the 'scroll' bind kicks in and moves the image in to the correct place. Is this a possible feat or am I trying to achieve the impossible here? Logging the output shows that the css is indeed being changed, but the screen is not being updated with it.</p> <p>UPDATE</p> <p>I don't know if it helps, but here is the HTML/CSS I'm using currently:</p> <pre><code>&lt;div class="background_image"&gt; &lt;img src="image.jpg" /&gt; &lt;/div&gt; .background_image { position: fixed; left: 0px; top: 0px; overflow: hidden; z-index: -1; } .background_image img { position: fixed; overflow: hidden; top: 0px; left: 0px; background: white; } </code></pre> <p>Have also changed my code to something slightly easier.</p> <p>Cheers,</p> <p>Dan</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USDan
    1. USDan
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POMove image with touchmove event on iPad
      1. This table or related slice is empty.
      1. VTUndeletion
    2. VO
      singulars
      1. POMove image with touchmove event on iPad
      1. USDan
      1. VTBountyStart
    3. VO
      singulars
      1. POMove image with touchmove event on iPad
      1. This table or related slice is empty.
      1. VTUpMod
    1. COhave you tried making the image an actual background image and just updating the src of that image? (i.e. using `background-image:url('image.jpg'); background-position:top center; background-repeat:no-repeat;` )? Remember, `position:fixed` does not work on iOS devices (because they scroll the viewport, not the document).
      singulars
      1. POMove image with touchmove event on iPad
      1. USampersand
    2. CO@ampersand - I have tried using just the background-image tag, but the image just stays in the same location when scrolling, and not in keeping within the viewport which is ideally what I need. Also I am cross-fading the backgrounds with each page change, so its not the ideal solution (although if it worked I'd be happy to leave it at that)
      singulars
      1. POMove image with touchmove event on iPad
      1. USDan
    3. COcan you post a link to a sample that that demonstrates some of your issues?
      singulars
      1. POMove image with touchmove event on iPad
      1. USampersand
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload