iPad javascript scrolling - javascript

I'd like to get the same behaviour of the native javascript scrollTo function in iPad, just attaching a function to the swipe event and scrolling the content a specific number of pixels. That doesn't work in iPad using scrollTo or several different jquery plugins, like scrollTo or iScroll.
I think I'm having problems because I'm working with an iframe, as I have another html document in it, with its body divided in columns, but I'm just showing the first one. The point of all this is that, after swiping, it should show the next/prev column, and I tried scrolling the iframe window or the inner's html body, which actually works in chrome, but it doesn't in iPad.

I solved the problem, but following another approach. Instead of scrolling the iframe window or the body within the iframe wit javascript, I dynamically change the css3 transform property (-webkit-transform in this case):
$(my_html).css('-webkit-transform','translateX('+leftpos+'px)');
where leftpos is the pixel (negative) where I want to locate the document.

Related

Android 4.0 browser overflow: scroll and touch/click events

I've run into a really annoying problem with the stock Android 4.0 browser. I have a div with overflow: scroll, and elements within which scroll horizontally if they exceed the length of the div. The scrolling works fine, but for some reason (only in the Android browser), click/touch events attached to the elements within the div do not get triggered at all, unless you hold your finger on the element and let go EXACTLY at the point in which the highlighting disappears. Just wondering if anybody has encountered this problem and/or has any idea of how to fix it. Thanks.
So the bug seems to only occur when the element bound to a click/tap event within the scrolling container is an anchor (even without href attribute). If it's any other type of element, it works fine.

Javascript elements buggy overtop of iFrame

I'm using the jQuery UI framework to create a draggable panel. It works fine, but when I drag it over top of an embedded iframe on the page it becomes buggy and stops moving. I thought it could just be the plugin, but it happens with all of my dynamically created elements that move overtop of the iframe.
Does anyone know what is going wrong or how to fix this?
You've to kind of hide the iframe when you drag/resize the panel. This can be done by placing a hidden transparent div right over the iframe (of the same size), and showing it up only when the drag/resize event is triggered. So keep on toggling as soon as the drag/resize start and stop events are triggered.

Force dom reload/resize in Javascript

I have a sidebar in my app that can be hidden/shown via a toggle button. It simply toggles a class on "body" that adds some margin left to the content area and hides/shows the sidebar. Trouble is that the content area isn't resizing its child content when this is toggled. Once I adjust the size of the browser, the content area adjusts to fit the content, but I need it to do this after the toggle without the need to resize the window. Is there a way to trigger an element size refresh or dom refresh to solve this issue? Using Chrome 19.x.
$('#sidebar-toggle').click(function(event) {
event.preventDefault();
$('body').toggleClass('with-sidebar-left');
});
Edit: Seems like it might be a Webkit issue. Works fine in Firefox.
Edit 2: Set up a simplified build at the following location:
https://dl.dropbox.com/u/189605/misc/build-test/grid.html
You can see the boxes are float: left and when you minimize the sidebar using the little arrow button, it should adjust the right so more boxes will fit. In Webkit, you have to resize the browser for it to realize it's got more space. Works in Firefox.
you could just trigger a resize in your click handler, eg:
$(window).trigger('resize')
The workaround from my answer here works for your situation.
Here's a quick demo: http://jsbin.com/amakex
It works in both Chrome and Safari (unsurprisingly, your original demo also didn't work in Safari).
you said-"but I need it to do this after the toggle without the need to resize the window".you can use jquery callback to do that

Hiding and showing div during page scroll on iphone

Need to display an element (div) ontop of webpage. During scroll the element should disappear and reappear after scroll ends.
To add to the complexity:
our code is a guest code (thus we cannot manipulate DOM structure etc).
our code is intended to work on iPhone/iPad (mobile Safari browser)
We've tried to listen to touchstart event on document / body and hide the element (div) in our dedicated handler. However, in some sites, (when DOM structure becomes reasonably complex) the scroll response time increases significantly, even if handler implementation is entirely empty.
We are looking for the proper way to manage the element (re)appearance with a minimal affect of the user experience while scrolling.
I would think Javascript is your best solution. You can dynamically insert your DIV to any content using document.createElement, then also add some javascript to listen for onScroll...
You could even populate the DIV using custom HTML built from the native code if you want.
Any help?
I don't know if you are a jQuery user, but this .scroll() function may help you do exactly what you want to do. Check out the demo to see how it works.
http://api.jquery.com/scroll/
In recent iOS version (5.x) fixed positioning (position:fixed in CSS) is fluently supported, so that your element will be positioned on screen coordinates. That might be a good starting point for solving your troubles.

JQuery drag and drop not working in FF3.6 after I implement CSS3 flexible box layout, any ideas?

I'm experimenting with the latest CSS3 box model to enable my layout to dynamically resize as the page resizes. The problem is that in Firefox 3.6 (works perfectly in Chrome) my drag and drop gets a bug. I'm not sure if it's a firefox, Jquery or my own error? But what it looks like is the position of the cloned object i'm dragging is receiving 30px extra for pos.left.
That means that when I drop my button into the tabbed area it isn't locked properly inside the draggable area which is #page1. Rather, it seems like there is 30px of extra margin which the button is mysteriously residing in. When I drag my button to the bottom of the page, because of this 'margin' it appears to float outside of page1 and the tab content.
Moreover, if I use firebug to outline the containers, they all look properly sized (no funny overflow or anything like that). However, if I take out the box model code inside outer-container, tab-content, page1, footer and manually set the tab-content height to say, 800px then the bug goes away.
It seems to be happening here:
var pos= $(ui.helper).offset();
objName = "#clonediv"+counter;
$(objName).css({"left":pos.left,"top":pos.top});
my code is here:
http://jsfiddle.net/yLCZb/5/
any ideas?? I'd love to use this box model technique if i could get it to work in FF..
I'm not a jquery guy, but it looks like your mixing & matching of doctypes is confusing FireFox. Try the vanilla HTML5 doctype declaration:
<!DOCTYPE html>
You should also lose the XHTML constructs and the "language" attribute from your <script> tag.
HTH!

Categories