I am trying to change number of grids on orientation is landscape from 2 to 3 grids how can I achieve this?
First thing first, we cant use window.orientation to definitely recognize portrait or landscape orientation, because every device will give different results. Read more about it here: http://www.matthewgifford.com/2011/12/22/a-misconception-about-window-orientation/
So, to achieve this we need to use classic orientation detection function. If window height is bigger then window width the we have a portrait or in any other case we have a landscape orientation.
I made you a working example of your question. Unfortunately I cant create you a jsFiddle example because it wont detect orientationchange event. To test code below, just copy it into an empty html file.
HTML :
<!DOCTYPE html>
<html>
<head>
<title>jQM Complex Demo</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=no; target-densityDpi=device-dpi"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<style>
.ui-block-a {
background: red;
}
.ui-block-b {
background: green;
}
.ui-block-c {
background: blue;
}
</style>
<script type="text/javascript" src="http://www.dragan-gaic.info/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script>
$(document).on('pagebeforeshow', '#index', function(){
detectOrientationMode();
});
$(window).bind('orientationchange', function() {
detectOrientationMode();
});
function detectOrientationMode() {
if($(window).height() > $(window).width()) {
$('#custom-grid .ui-block-c').css('display','none');
$('#custom-grid').removeClass('ui-grid-b').addClass('ui-grid-a');
} else {
$('#custom-grid .ui-block-c').css('display','block');
$('#custom-grid').removeClass('ui-grid-a').addClass('ui-grid-b');
}
}
</script>
</head>
<body>
<div data-role="page" id="index">
<div data-theme="a" data-role="header">
<h3>
First Page
</h3>
</div>
<div data-role="content">
<div class="ui-grid-a" id="custom-grid">
<div class="ui-block-a">Block A</div>
<div class="ui-block-b">Block B</div>
<div class="ui-block-c">Block C</div>
</div><!-- /grid-b -->
</div>
<div data-theme="a" data-role="footer" data-position="fixed">
</div>
</div>
</body>
</html>
You can have the three grids present and addClass('hidden') or removeClass('hidden') as appropriate, and assign display: none to the class hidden in your CSS.
I had the same question and Without better advice I simply found a workaround:
I just use the jquery mobile orientation change detection to switch between 2 different div (data-role page) duplicating my content with different layouts.
Related
I am using the carousel example from here: https://www.w3schools.com/bootstrap/bootstrap_carousel.asp
I have some example images from my app which I took from my mobile 5.7 inch with print screen and removed the notification bar up (which shows the signal etc). I am trying to make these example images (carousel) the same height and width of my screen without to have the user, to scroll down or right to see the image full. So the user will see an action bar (the one that apps have beause it will open in a webview) and the carousel only. I tried changing the width and height of the images without success.
UPDATE: Based on Metatron5 answer , I changed the code and it works in firefox for android but it doesn't recognize the vh and vw in the android webview
<!DOCTYPE html>
<html lang="en">
<head>
<title>Carousel</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<style>
</style>
</head>
<body>
<div id="myCarousel" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1"></li>
<li data-target="#myCarousel" data-slide-to="2"></li>
<li data-target="#myCarousel" data-slide-to="3"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img src="begin.png" alt="" style="height: 100vh; width: 100vw;">
</div>
<div class="item">
<img src="first.png" alt="" style="height: 100vh; width: 100vw;">
</div>
<div class="item">
<img src="second.png" alt="" style="height: 100vh; width: 100vw;">
</div>
<div class="item">
<img src="third.png" alt="" style="height: 100vh; width: 100vw;">
</div>
</div>
<!-- Left and right controls -->
<a class="left carousel-control" href="#myCarousel" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#myCarousel" data-slide="next">
<span class="glyphicon glyphicon-chevron-right"></span>
<span class="sr-only">Next</span>
</a>
</div>
</div>
</body>
</html>
Like in the Comments the Problem seemed to be that there was some Cashe on the phone, which where the reason the style didn't work. So it finally worked, but I want to make a note, that the Units vh and vw are not working in Androit Webview.
I have also run into the same problem a few month back. VH & VW wern't working on Google TV. So, I solved this problem with JavaScript. Try to add the following code in your script file:
const sliderImages= document.querySelectorAll('carousel-inner .item');
window.onload = function (e) {
sliderImages.forEach(sliderImage=> {
sliderImage.style.height = `${this.innerHeight}px`;
sliderImage.style.width = `${this.innerWidth}px`;
});
}
window.onresize= function (e) {
sliderImages.forEach(sliderImage=> {
sliderImage.style.height = `${this.innerHeight}px`;
sliderImage.style.width = `${this.innerWidth}px`;
});
}
I am very new to Phonegap. I am developing an app for display some text contents(some times images) from web. I want to add a zooming option to the app(only for content). When I am enabling pinch zoom, it zooms the entire webview(including the action/title bar). I want to zoom only the content part. I used IScroll, but couldn't work. Please help me.
I am giving my code below. If any problem, please let me know.
<!DOCTYPE html>
<html ng-app="nakApp">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Daivadasakam</title>
<meta name="description" content="">
<link rel="stylesheet" href="assets/app.css"/>
<script src="cordova.js"></script>
<script src="cordova_plugins.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1 user-scalable=yes">
</head>
<body>
<div ui-view></div>
<!-- injector:js -->
<script src="vendor/jquery.js"></script>
<script src="vendor/angular.js"></script>
<script src="vendor/angular-ui-router.js"></script>
<script src="app/app.js"></script>
<script src="app/controllers/home.js"></script>
<script src="app/services/servive.js"></script>
<script src="app/router.js"></script>
<script src="app/filters/interpolate.js"></script>
<script src="app/directives/directives.js"></script>
<script src="app/controllers/language-selector.js"></script>
<script src="app/config-generated.js"></script>
<script src="app/controllers/data-content.js"></script>
<!-- endinjector -->
</body>
</html>
There is another file on www/app/templates. data-content.html(Assuming that it is the template for data display). I am giving the code below
<div class="continter">
<div ng-include="" src="'app/templates/header.html'"></div>
<div class="list-data-language">
<div class="title">{{vModel.title}}</div>
<div class="content" ng-bind-html="vModel.content"></div>
<div ng-show="vModel.isAudio" class="list-item" ng-click="vEvents.playAudio(vModel.audio_url)" >
<label>Play Audio</label>
</div>
<div ng-show="vModel.isVideo" class="list-item" ng-click="vEvents.playAudio(vModel.video_url)" >
<label>Play Video</label>
</div>
</div>
</div>
<div class="loader" ng-show='vModel.isLoaderOn'></div>
If I understood you correctly, what you want is to have a div that's size doesn't change when the zoom is applied on it, right?
Main idea
You simply make fixed-size div (#container) that contains another div (#content) which again contains the actual content. The container is always the same size, only the content div changes size based on it's content. The container can handle the overflow anyway it wants such as auto (show scroll bar when too wide or long content) or hidden.
<div id="container">
<div id="content">
<!-- Content here -->
</div>
</div>
Then apply CSS3 transform on the content when zoomed. For example's sake the transforms are applied on when hovering the content but for your case see my comments below the code. What is basically done when hovering is the zooming part (scale transformation) with factor of 2 in this example and then it is moved (translate transformation) to start from top-left corner.
#container {
width: 600px;
height: 600px;
top: 100px;
left: 100px;
position: absolute;
overflow: auto; // Or hide or scroll or what you prefer
}
#content {
width: 100%;
height: 100%;
padding: 0;
margin: 0;
background-color: gray;
}
#content:hover {
transform: scale(2) translate(25%, 25%);
}
Example
I made JSFiddle for you to play with it. Please note that the hover effect is used only for the example to be more compact. Also I am not much of a CSS guru so there probably is still some minor problems. Also for actually using that code, consider adding the -webkit-transform, -moz-transform, -o-transform and -ms-transform to make it work on all possible browsers.
How to zoom
What comes to the how to zoom (pinch or Google Maps style zoom buttons), it mostly just depends what you want to do with this. For example if you prefer the pinch hand gesture, look into this. On my example it was most easily showed with hover. I think you need to anyway use JavaScript to make the zooming since you cannot set the multiple values for zoom level on CSS.
Apply on your actual code
In case that the code added by you to your original question is your template, and if the div with list-data-language class is for example the one that you want to be zoomable, your code should look something like this
<div class="continter">
<div ng-include="" src="'app/templates/header.html'"></div>
<div id="container">
<div id="content" class="list-data-language">
<div class="title">{{vModel.title}}</div>
<div class="content" ng-bind-html="vModel.content"></div>
<div ng-show="vModel.isAudio" class="list-item" ng-click="vEvents.playAudio(vModel.audio_url)" >
<label>Play Audio</label>
</div>
<div ng-show="vModel.isVideo" class="list-item" ng-click="vEvents.playAudio(vModel.video_url)" >
<label>Play Video</label>
</div>
</div>
</div>
</div>
<div class="loader" ng-show='vModel.isLoaderOn'></div>
As you can see I added one div with id container and added id content to for div with class list-data-language.
I created a form using bootstrap, css, and html.
However when I click on the text area on an android phone(that is, when it comes into focus), the bottom half of the textarea changes color.
I don't understand why its turning white.
By the way: It works fine on a PC.
My css Code:
.container-fluid{
background-color: #EF4247;
border-color: #EF4247;
}
form {
height: 100%;
width: 100%;
padding: 50;
background-color: #EF4247;
border-color: #EF4247;
text-align: center;
margin: 0;
}
h1{
text-align:center;
}
textarea{ width:200px;
}
.form-horizontal .control-group {
margin-bottom: 20px;
}
My HTML code:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style1.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
<h1>SEND ME SOME MAIL</h1>
<form class="form-horizontal" action="mail.php" method="post" >
<div class="control-group">
<label class="control-label" for="inputEmail">Email</label>
<div class="controls">
<input type="text" id="inputEmail" placeholder="Email" name="subject">
</div>
</div>
<div class="control-group">
<label class="control-label" for="textarea">Text Area</label>
<div class="controls">
<textarea id="textarea" rows="10" name="message" placeholder="Enter your message here:"></textarea>
</div>
</div>
<button type="submit" class="btn">Submit</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="fitter-happier-text.js"></script>
<script type="text/javascript"></script>
</div>
</body>
</html>
I believe the underlying issue in this particular example is that the behaviour of the bootstrap container-fluid CSS style appears to be incompatible with your desired effect on mobile devices.
My answer to this is merely encapsulate your form with a new block element and set your background on that. Then set min-height:100% on this new block container, as well as the <html> and <body> elements.
Something like this:
html, body {
min-height:100%;height:100%;
}
.red-background-not-on-body-or-html {
background-color: #EF4247;
min-height:100%;
}
And html like this:
<body>
<div class="red-background-not-on-body-or-html">
<div class="container-fluid">
<!-- FORM HERE -->
</div>
</div>
</body>
As far as your example goes, you could also just put the background-color attribute on the <body> or <html> tags themselves.
Otherwise, if you still require that the background respect the .container-fluid CSS logic, then you could try a hack with media queries for handheld devices but it could get messy.
You could also try re-ordering so that the form is outside the fluid logic then add min-height:100% to the form.
JSBin to illustrate
I know this is very old post, but anyway here what you can do.
body {
position: absolute;
}
I delay the focus:
// If the form has the focus the keyboard moves the layout
setTimeout(() => this.focus(0), 1000);
After updating to Firefox 25 on Android (Galaxy S4) just days ago, i found an issue with fixed header in jqm 1.3.2, it seems to be positioning above the screen pulling footer and slidepanel up.
If i tap the screen the header comes in okay and positiones footer okay, then disappearing again when tapping once more.
Anyone else noticed any such problem in new FF25 on android ?
Here is a source where this scenario occurrs, ive removed all load and custom css and js as it doesnt affect the problem.
is it FF25 or is it me ??...
<!doctype html>
<html>
<head>
<meta charset="ISO-8859-15">
<meta name="google" content="notranslate">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<title>TEST</title>
<link rel="stylesheet" href="jquery/jquery.mobile-1.3.2.min.css" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:300,400,700">
<script src="jquery/jquery-1.10.2.min.js"></script>
<script src="jquery/jquery.mobile-1.3.2.min.js"></script>
<script src="plugins/autocomplete/jqm.autoComplete-1.5.2-min.js"></script>
<script src="plugins/touchswipe/jquery.touchSwipe.min.js"></script>
</head>
<body>
<div class="jqm-mypage" data-role="page" id="index" data-theme="c">
<div data-role="header" data-position="fixed" class="jqm-header">
<h1 class="jqm-logo">heading</h1>
Menu
</div>
<div data-role="content" class="jqm-content">
<p>Content</p>
</div>
<div data-role="footer" data-theme="b" data-position="fixed">
<h1>....</h1>
</div>
<div data-role="panel" class="jqm-nav-panel jqm-navmenu-panel" data-position="left" data-display="reveal" data-theme="c">
<ul data-role="listview" data-theme="d" data-divider-theme="d" data-icon="false" data-global-nav="demos" class="jqm-list">
<li data-role="list-divider">TEST</li>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div><!-- /panel -->
</div>
</body>
</html>
SOLVED
Obviously a bug in FF25 mobile.
If i set div content a min height that is higher than the screen height, the fixed header shows fine and everything is positioned normally.
On pages where the content is less than the screen height, the fixed header disappears on pageload, pulling footer and panels up.
I've develop a Phonegap App and I've a problem to resize the image as per Android Device(set width and Height). As device Height and Width change I want to change my image size. I 've use below link for that but it does not work supporting multiple resolution and density of images in phonegap
My code is as below
<!DOCTYPE html>
<html>
<head>
<title>Worklist</title>
<meta charset="utf-8" content="">
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=no">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"/>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
if(window.devicePixelRatio == 0.75) {
$("#dIcon_notification").attr('src', '/images/mpdi/my_notification_new.png');
}
else if(window.devicePixelRatio == 1) {
$("#dIcon_notification").attr('src', '/images/mdpi/my_notification_new.png');
}
else if(window.devicePixelRatio == 1.5) {
$("#dIcon_notification").attr('src', '/images/hpdi/my_notification_new.png');
}
else if(window.devicePixelRatio == 2) {
$("#dIcon_notification").attr('src', '/images/hpdi/my_notification_new.png');
}
}
</script>
</head>
<body>
<div data-role="page" data-theme="f">
<div class="ui-header ui-bar-a" role="banner" data-role="header" data-position="fixed">
<h1 style="white-space:pre-wrap" aria-level="1" role="heading" tabindex="0" class="ui-title" >Smart Self Service</h1>
</div><!--/header-->
<div data-role="content" data-theme="f">
<div id="center_content" >
<div id="dashboard">
<a href="Notification.html" data-ajax="false" ><img id="dIcon_notification" display="inline" src="images/hdpi/my_notification_new.png" class="dashaboard_icon" alt="" ></a>
<a href="#" ><img id="dIcon_request" src="images/hdpi/new_request_new.png" class="dashaboard_icon" alt="" ></a>
<a href="#" ><img id="dIcon_setting" src="images/hdpi/setting.png" class="dashaboard_icon" alt="" ></a>
<a href="#" ><img id="dIcon_exit" src="images/hdpi/exit.png" class="dashaboard_icon" alt="" ></a>
</div>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
I am new to Jquery and CSS so every help will be appreciable. I want to solve it. please Help
The solution you used will work for different resolutions. like normal and retina display. If you want to change image sizes according to device sizes(but same resolutions) you can use CSS 3 media queries and apply different css on different size devices.
your css will go under something like this-
#media screen and (min-device-width : 480px) and (max-device-width : 854px){
//css for devices whose width is more than 480px but less than 854px
}
you can use combination of width and resolution media queries as well.
Please search for adaptive web design and media queries you will get a lot of stuff.