how do you prevent page scroll in textarea on mobile safari - javascript

I am trying to make a little note pad app for mobile safari for funzies but so far it doesn't seem to be working out. I want to prevent page scrolling so it doesn't have the rubberband and feel like a webapp but to do this I am using:
document.ontouchmove = function(e){
alert("calling prevent default");
e.preventDefault();
}
This works great except for in textarea where it looks like ontouchmove never gets fired so page scrolling still happens. Has anyone figured out how to change apple's default functionality in the text area or figured out an alternative to text area that doesn't have apple's default functionality?

There does not appear to be a good solution at this time. I found a project that is struggling with this problem as well and folks have gotten creative with hidden spans over text fields but that is still pretty buggy for me.
http://code.google.com/p/iscroll-js/issues/detail?id=24
I guess this is just a limitation to mobile safari as there doesn't appear to be a good solution that I can find at this time.

I read somewhere that putting your content in a <div> with "overflow:hidden" and setting the height of the div should prevent scrolling. Please tell us if it works.

Related

Fix specific links in website not working on iphone only

I'm creating a website from this template and I've downloaded the template and uploaded it without modifications here.
I have this problem (confirmed by a ticket on templatemonster): on Iphone only (seems like both on safari and chrome), i cannot click on some links (e.g. "view charateristics" on the 4 boats images under "YACHTS FOR SALE".
I tried editing it:
adding a big z-index on the tags
creating a custom section with bootstrap and custom link
using <span> tags with onclick="window.location.href='test.php'"
using a <form> and a <button>
It really seems that the browser does not "catch" the click on the element.
But still, none of them work.
Unluckily, i cannot test on a real phone, but this simulator https://appetize.io/ seems to work pretty well. I did confirm that the problem is also on real devices, thanks to a customer.
I would like to know if anybody knows to fix this issue, without making the template look much different, thanks
EDIT
Here's the page where i'm trying to fix the bug. As you can see the <ontouchstart> is also not working.
I don't know if it would help, but you can also see that the carousel is not working on iphone (not a problem itself, i'm going to hide it).
It's a known Safari Mobile bug, you should add the ontouchstart event handler
More infos here

Why the click does not work in touch mode

I have made a simple carousal using an online script called "simplyScroll".
here is the link to the script:
http://logicbox.net/jquery/simplyscroll/#config
My Problem:
here is the link the page:
http://namdarshirazian.com/exhibition.php
Generally in desktop mode, when I click on each image, it runs a javascript and shows a popup. This javascript is written by myself. Simply a simple action of hide and show.
But when viewed with smartphone (android/firefox), it does not triggers click event. VERY STRANGE. Can anyone please help my why this does not work?
The click action is as simple as :
$("body").on("click", "element", function(){
});
You can experiment with touchup and touchdown events instead. It's actually a right mess caused by people worrying about touches being long. The fastclick library might smooth things out a bit.
i had the same problem when i did my website responsive for any device resolution, the solution is simple, you write your jQuery as standard but u have to include a script that will allow the jQuery to work on touch devices.
add this script into your website and check the magic result:
http://touchpunch.furf.com/

Hide everything outside window HTML jQuery

So i made a website, basically first time messing around with jquery.
I have a div main-container which contains all the content. This main-slider slides in the window. i'd set it up by doing this in the document.ready function:
<script>
$("#main-slider").hide().animate({left:'+=2000', opacity:'0.0'},0);
$("#main-slider").fadeIn(100).animate({left:'-60', opacity:'1.0'},1000);
$("#inhoud").delay(100).animate({left:'-30', opacity:'1.0'},300);
$("#inhoud").delay(20).animate({left:'-5', opacity:'1.0'},300);
$("#main-slider").animate({left:'-40', opacity:'1.0'},150);
</script>
On normal browsers (tested with safari, chrome and firefox) it looks like how i want to but on mobile devices it starts zoomed out since the main-slider starts animating from +=2000;
Is there a way to hide the div when it's not inside the viewport ?
I made a jsFiddle with a basic concept of what i have, unfortunately it doesn't seem to work tho ;p sorry.
JSFiddle
A concept version of the website : http://paparashie.nl/woonkans
I'm not sure I am understanding correctly, but have you tried with css?
html {
overflow: hidden;
}
Apply this to html or body...
JSfiddle is not working, can you attach screenshot to help us see the problem

When "zoom in" at Facebook, the chat sidebar got hidden, but how?

I am not sure does anyone notice that Facebook can detect users zoom-in level when it hits a level, it will dynamically add .hidden_elem classname onto .fbChatSidebar to hide it. (Check the attachments below)
I have searched a lot about this feature and found the repo in github called detect-zoom, but it seems that there are still some problems especially in latest version of FF & Chrome.
So I am really curious about how does Facebook detect this with JavaScript and I have tried it with latest FF & Chrome and it seems that Facebook can detect it correctly and hide the sidebar at the right zoom-in level.
Does anyone know anything about how they implement this feature ? or even possible solutions are welcome.
Thanks.
I'm not sure about the exact solution Facebook is using but I discovered they hide the sidebar on both window resize and zoom.
My research shows that all browsers, including IE8 and up fires the window.resize event when zooming as well. So by setting some breakpoint when you wish to hide something you should be able to implement some similar functionality.
Quick and dirty example: http://jsbin.com/ofufer/1/

Why does CodeMirror not work on Ipad?

Greetings,
http://marijn.haverbeke.nl/codemirror/jstest.html works on Safari on PC, but not on an Ipad. Which is a shame, since I wanted to use it for an app. My question is not only why does it not work, but how should I go about analyzing things that break on Ipad Safari ?
T.
CodeMirror2 works mostly fine on an iPad;
You can add text, remove text and move the cursor around.
You can however not hilite words and cut / copy / paste (as of today 2012-06-27).
The editor in CodeMirror is actually an iframe, and not a native text input form element. The problem here I suspect is that the browser on the iPad does not know if the keyboard should be activated because some DOM element has key events bound to it.
To do that, Safari would have to analyze the source code to deduce key bindings and when should the keyboard be activated - which sound hugely problematic to me.
perhaps it used an iframe in the past, but I have codemirror on my website now and I see no iframes at all contained inside it.
this is almost one year later though, so perhaps now the situation has changed.

Categories