Develop Reference

Full screen textbox on focus

How can I get a full screen text box using only js, jquery or css ?
Most phones have this thing when the textbox goes full screen and you can see the textbox only.
I looked this up but found some solutions only at app level. I'm doing this at an webpage so not possible to make app changes.
And the textbox is inside a popover and hence changing its width and height won't work.
So is there anyway to achieve this using normal web components ??

You could try using the HTML5 Fullscreen API, the tutorial I linked works with videos but the same idea can be used for any element I guess. It is experimental but supported on webkit and moz. Heres the link:
MDN Fullscreen HTML5 API
As a footnote, I would have added this as a comment but my reputation isnt high enough yet, so just posted here.

are looking for something like this(jsfiddle)?
<textarea id="fill-screen"></textarea>
jQuery
$(function(){
$('#fill-screen').focus(function(){
$('#fill-screen').css({'height': window.innerHeight,
'width':window.innerWidth});
})
});

Disable autocorrect / autocompletion in content editable div

I m developing a cross-browser application in Script#.
I m using a contenteditable div, where user can add text. But i dont want the auto correct/ auto completion feature to change the user text.
Plz tell me how can i disable this feature.
It should work on all platforms. ( iOS, Android, Windows)
I have tried autocorrect="off";
autocomplete="off"
but nothing is working. plz help....

What you can do is to use the attribute spellcheck=false. This is (in HTML5 CR) the defined way to disable “checking of spelling and grammar of editable text”. The default value of this element is browser-dependent, and the value may depend on element. E.g., in Chrome, the default is spellcheck=true for an element that has been made editable using the contenteditable attribute.
However, this affects (at most) only what happens in the browser. Software external to the browser, such as a system’s keyboard reading routines, are probably immune to anything you say in HTML.

You are using the correct attributes, but I'm not positive if they are expected to work with contenteditable (they are definitely supported for and tags). Current iOS versions(at least v6.1 and up) will currently support those attributes, however there is a bug in Chrome for Android not respecting these HTML 5 attributes. It appears to just recently have been fixed and hopefully should be released in an update soon.
https://code.google.com/p/chromium/issues/detail?id=303883&q=autocorrect&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified
Also feel free to Star the issue to help boost the ranking...

Need help debugging - IE not displaying jquery background slider on website

I've had this problem for over a month and client isn't paying me until it's fixed.
The website is: http://www.cardwells.co.nz
I'm using WordPress as the CMS with a template and some custom work.
The template comes with a slider background inbuilt which works in all browsers except IE.
I'm also using http://www.smoothdivscroll.com/clickableLogoParade.html for the scroller at the bottom.
Basically I have no clue WHY it's not working in IE - everything seems like it should be working. I've run the site through w3 checker and used that IE specific CSS files - but no dice.
Please help.

There was no real solution - really =\ I disabled, removed, reuploaded and reenabled the template. Either a file was a miss or a DB connection error somewhere along the line. So stupid.

nicEdit does not detect the 'space' character

i'm having a problem with the nicEdit script. nicEdit is a javascript libray to set the html textareas of a webpage into Rich Text Format fields.
It works fine except that does not detect when i type the 'space' character. I google'd this and I didn't find any clue. I do exactly what is suposed to do to call the js function:
<script type="text/javascript" src="http://js.nicedit.com/nicEdit-latest.js"></script>
<script type="text/javascript">
bkLib.onDomLoaded(function() { nicEditors.allTextAreas({maxHeight:75}) });
</script>
Is someone having the same or similar problem, or know how to fix this?
edit: I tested it in Google-Chrome and Internet Explorer and the error persists in both.
Thank you very much for your time! :)

I had this same problem, and solved it as follows:
Problem: 'space' wasn't registering in nicEdit fields
Track-down: The actual problem was that a jquery ui feature (accordion in this case) had registered the 'keydown' event for the editors parent. This prevents the 'keypress' event from propagating to the editors registered 'keypress' event handler. I didn't dig deep enough to know why it was only the 'space' key that was failing to propagate.
Solution: I removed the 'keydown' event from the editors parent. in my case that required the following snippet:
$(".accBar,.accContent").unbind('keydown');
I hope this is helpful to someone.

Not solved but guessed the cause of the problem:
I made a simple html document only with a textarea and the javascript invocation of the question and worked fine.
So obviously was not a configuration problem, was some kind of conflict with other javascript libraries i'm using (JQuery and jstree). That is the reason i found nothing on google about it >_<.
My solution was change the nicEdit to jWYSIWYG, a jquery based RTF, and all works fine now.

Are you using a CSS reset? That was my problem - baseline.reset sets some things, particularly revolving around "white-space: normal" that messed up rich text editors. Primarily on windows only, even - so Firefox on mac will work fine, but Firefox on Windows will not be able to make space characters.

The issue was most likely the jsTree hotkey plugin was intercepting spaces and calling "preventDefault". See the issue here:
https://github.com/vakata/jstree/issues/363
Removing the hotkey plugin or commenting out the space hotkey from jsTree should solve the problem.

Android 2.2 Web View windows moves up when Virtual Keyboard appears

I am developing an Application using Phonegap on Android. Everything works fine on OS 2.1 but on OS 2.2 when we click on any input type text field the keyboard appears and whole window moves to UP side and the input type field becomes invisible. Can anybody tell me what exactly be the problem and can it be solved using javascript? How to stop windows resizing functionality on Android 2.2?
I found the same problem on Text Input on android phone is not in view when the keyboard for webview comes up? also, but not the solution.

Adding this
android:windowSoftInputMode="adjustPan"
to your in AndroidManifest.xml will solve the issue

I tried to put following css property and it was working for me on Android 2.2
html, body{overflow: hidden;}
Not sure why it is working, but it is working...
Note: I used "iScroll" plugin for scrolling in my application.

I've never used PhoneGap but I went to their site and I am to understand that it still works via Eclipse and the ADT; if that's the case then this problem can be solved via the AndroidManifest.xml file by adding the following to your <activity> tag for the activity that is invoking the Soft Keyboard:
<activity android:windowSoftInputMode="adjustNothing"
//other flags
/>
Actually this seems to not be the case. The API document I was reading was actually for Honeycomb, this flag isn't in 2.2. Sorry. All of my work recently has been on tablets and I forgot which version of the SDK I had bookmarked for reading since I've been prepping lately.

You might have to enable this script to avoid your app scrolling when your text input field gets focus :)
function preventBehavior(e)
{
e.preventDefault();
};document.addEventListener("touchmove", preventBehavior, false);

this behaviour on android 2.2 append when there is one element in page with a "transform" css attribute (like transform: translate3d(0px, 0px, 0px); )
removing those declarations fixed the problem for me.
(overflow:hidden also but you can't scroll the app anymore)
PS: overridding the declarations does not work unfortunatly