Databases
StackOverflow2013
Postsdbo
POmoving divs with jQuery moves whole page in iPad
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POmoving divs with jQuery moves whole page in iPad
    text
    copied!<p>I have some nested divs providing a menu bar and a "draggable" dot as follows...</p> <pre><code> &lt;div id="content"&gt; &lt;div id="headermenu" class="headerfixed"&gt;&lt;/div&gt; &lt;div id="articles" class="articlediv"&gt;&lt;/div&gt; &lt;div id="adverts" class="advertfooter"&gt;&lt;/div&gt; &lt;div id="footermenu" class="footerfixed" &gt; &lt;div id="footerpreview" class="slideselect"&gt;SCALED INNER HTML&lt;/div&gt; &lt;div id="footerbutton" class="slidebutton"&gt;&lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>The CSS for the relevant elements is:</p> <pre><code> div.slidebutton {position:absolute; background: url("images/hhgfooterbubble1.png") no-repeat; left:45px; bottom:8px; width:39px; height:39px; z-index:4;} div.footerfixed {position:fixed; background: url("images/hhgfooterbar1.jpg") no-repeat; bottom:0px; left:0px; width:769px;height:49px; visibility: hidden; overflow-x:hidden; z-index:3;} </code></pre> <p>I am using vmousemove to try and move the <code>footerbutton</code> but when I touch and drag - the entire page (on an iPad) drags left and right showing black space and the button only moves a little.</p> <pre><code>$('#footermenu').bind('vmousemove', function (event) { y = event.pageY - window.pageYOffset; x = event.pageX; l = parseInt(footerbuttondiv.style.left); r = l + 39; c = 0; if (y &gt;= 954) { if (x&gt;=l &amp;&amp; x&lt;=r) { // alert (y + "," + x + "," + l + "," + r); c = x - 19; footerpreviewdiv.style.visibility = 'visible'; footerbuttondiv.style.left = c + "px"; } } }); </code></pre> <p>Is there a way of getting the container <code>div</code> <code>footermenu</code> to ignore the drag so only <code>footerbutton</code> is affected. Any and all assistance gratefully received.</p> <p>All works fine in Firefox / Firebug no errors.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

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