Full screen textbox on focus - javascript

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});
})
});

Related

how to hide html video controls in micorostf edge (fullscreen mode)

I'm writing an angular directive for a video player.
I'd like to have custom controls that should override the native one.
In normal mode all works fine while in fullscreen mode no.
Actually the problems occurs in IE11 and Microsoft Edge.
In IE11: both the native bar (ok) and the custom one (ko) are
hidden. I can't show my bar.
In Edge: I can't hide the native controls bar and I can't show my
bar
To hide the bar I tried with
video::-webkit-media-controls {
display:none !important;
}
video::-webkit-media-controls-enclosure {
display:none !important;
}
but seems that in microsoft browser doesn't work.
I already read and follow this post about almost the same problem change html5 video controls layout when fullscreen
The problem has nothing to do with angular, but I can't figure out where put my hands to get things works: in the css or do I have to use javascript (how?) to handle the show/hide behaviour of the native control bar?
This is a plunk http://plnkr.co/edit/zGlMN0Qys2yHdWgGXefk?p=preview where you can find my javascript pure code.
I really appreciate any help to get things work!
Luca
The solution resides in the way the requestFullscreen is called.
Before I called that method on the video element
$scope.videoElement.requestFullscreen();
Instead the requestFullscreen method have to be called on container element in order to ensure that the element's children, e.g. the custom controls, go fullscreen also
$scope.videoContainer.requestFullscreen();

How can I use JavaScript/JQuery to resize the HTML of my page responsively?

Click here to view my example.
I am attempting to use this code in my simple website to responsively resize the HTML of the page, even as you resize your window.
Is this not possible or am I just making a simple error? The website was designed for 1360x768 (my resolution), however this code makes it look extremely wonky, and no scroll-bar is shown (unsure why).
The code to resize/scale:
function scalePage(){
document.getElementsByTagName("*").each(function(){
var width = ($(this).width() ) / 1360;
var height = ($(this).height()) / 768;
$(this).css("transform", "scale("+width+","+height+")");
$(this).css("-moz-transform", "scale("+width+","+height+")");
$(this).css("-webkit-transform", "scale("+width+","+height+")");
$(this).css("-o-transform", "scale("+width+","+height+")");
});
}
$(document).ready(function() {
scalePage();
});
$(window).resize(function() {
scalePage();
});
Resizing your page using JS is a bad idea from the get go.
Here's why:
What if your user has JS disabled?
What if your user has an older browser that can't render the JS quick enough?
Each time you resize your browser the content must be re-rendered.
Javascript should be used to add features to the site, not create them.
Secondly,
This approach is not 'responsive'. To achieve a responsive layout on your site you should use CSS to control it, As it is much faster than Javascipt/ jQuery.
A good starting point for creating responsive web pages would be this article: 2014 Guide to Responsive Web Design. Any seasoned front-end web developer will tell you that the key to a good responsive website is to develop mobile first. This will ensure that your site will 'scale' nicely.
Thirdly,
I am going to re-iterate my point about javascript being used to add functionality, More and more do i see sites failing when i have javascript disabled or i browse on an older laptop with IE8 installed. (Although there are arguments against supporting IE8 nowadays.)

Foundation 5 and contenteditable (mobile) not working

I am working on a website that has the functionality html5 "contenteditable" instead of input fields.
Using a mobile device you can not change the fields "contenteditable", to be precise it does not appear the virtual keyboard. I tried to understand what was the cause of this problem until I commented out the line of code that calls foundation-min.js and the fields have started to work.
What is the problem?
It seems from this: https://github.com/zurb/foundation/issues/3607
You need to disable the FastClick library and that should fix the issue.

How do I rehost the KendoUI phone simulator (Sample included)

So far I have a semi-working demo here and want to make the skins change when people click on them.
The original is here
KendoUI has a nice demo page that demonstrates their controls in a simulated phone. They also include the ability to "swap" between phone layouts.
I would like to demo a corporate product for people who don't have phones and think this would be a great way for them to get used to the product without navigating to the site.
How do I properly extract and rehost this simulator?
They're doing a $.get request which is why I think your demo isn't working in JSBin.
I haven't really tested this much, but you can change the skin by modifying the code in examples.js. In the code that defines the jQuery plugin $.fn.mobileOsChooser, you can replace the click handler with something like this:
deviceList.find(".osName,.osThumb").click(function () {
window.kendoMobileOS = $(this).text();
applyCurrentMobileOS(options.container);
});
See a (somewhat) working demo here. Note that you may need to change other things to make it fully functional (and you may not want to use the kendo domain for your own demo).

How to get jQuery scrollTo plugin to behave within Facebook

I can't seem to get the scrollTo jQuery plugin to work within my Facebook app. I'm using it to move the window, as I have a form that needs to grow vertically as it is filled out. My code works fine normally, but not in the Facebook environment.
Can anyone explain to me why this doesn't work and if there are generally any special considerations that need to be taken when attempting to move the browser "window" within an iframe?
If there is an alternate solution to the problem that bypasses the use of scrollTo, I'm open to that as well. Thanks!
try this
http://developers.facebook.com/docs/reference/javascript/FB.Canvas.scrollTo/
I think that you will have to integrate your plugin with FB.Canvas.setSize

Categories

Resources