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.
Related
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);
I need to try and move a section of text over by about 3 percent. Unfortunately, this change will not actually show up on mobile devices no matter what I do. Is the problem with my code, or is there a problem with androids in relative positioning?
<html>
<head>
<style>
posit{
position:relative;
left:25%;
max-width:500 px;
}
</style>
<title></title>
</head>
<body>
<div id="rightcol">
<p><strong>????????</strong></p>
<p>??????????</p>
<p><strong>???????????</strong></p>
<p>???????????? </p>
<p>????????????? ?????????.</p>
<p> </p>
</div>
<div id="centercol">
<h1>??????????</h1>
<p><strong>????????</strong></p>
<p>????????</p>
<p><strong>????????????</strong></p>
<p>?????????</p>
<p><strong>??????</strong></p>
<posit>
<p>??????????????</p>
</posit>
</div>
</body>
</html>
I would separate the positioning and the max-width of the posit object, maybe something like:
posit{
position : relative;
left: 25%;
}
.some-class{
max-width: 500px;
}
I have a Samsung galaxy Note 2, I use chrome browser to display a web page with a top <div> having a width of 1280px.
As the galaxy note 2's screen is 1280px wide, I was expecting to have the whole page to be displayed at full width at once.
But it is not the case, instead, something about 980px is being displayed : I have to unzoom to see the whole page width. And it is getting very boring because, on every page, I have to unzoom again and again.
I tried something like that into the header:
<meta name="viewport" content="width=device-width, initial-scale=1" />
It modified something, but it is worse : looks like to display only about 640px out of my 1280px
EDIT, here are 2 html pages to test that :
--> When I display test.html, I can see only the green color, not the red. (I have to unzoom to see both color)
test.html :
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div style="background-color:red; width: 1280px">
<div style="background-color:green; width: 980px">
hello world
Go next page
</div>
</div>
</body>
</html>
test2.html :
<html>
<head>
</head>
<body>
<div style="background-color:blue; width: 1280px">
<div style="background-color:yellow; width: 980px">
houston we have a problem
Go prev page
</div>
</div>
</body>
</html>
I made 2 pages because when switching from one to the other, the scale is not persistent : even if I unzoom to fit the screen on test.html, I have to unzoom again for test2.html
How can I proceed to get my 1280px at once and for all my web pages ?
Try setting width to 100%
<meta name="viewport" content="width=100%, initial-scale=1" />
EDIT:
You could also try this:
test.html
<html>
<head>
<meta />
</head>
<body>
<div style="background-color:red; width: 100%">
<div style="background-color:green; width:80%">
hello world
Go next page
</div>
</div>
</body>
</html>
test2.html
<html>
<head>
</head>
<body>
<div style="background-color:blue; width: 100%">
<div style="background-color:yellow; width: 80%">
houston we have a problem
Go prev page
</div>
</div>
</body>
</html>
Percentage should take your device width automatically.
Thought i ran into the same problem, because i had a top that was 100% width, and then i saw it on my mobile, it had cut into the centering wrapper and the content that was in that.
Solution to that for me was to set min-width on the outer part, so if you dont have any outer div, set min-width on body.
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.
My problem with this very basic piece of code is that the top-header doesnt take the full width on an android chrome browser.
If I remove the width on the page-width, the top-header takes full width... But i need to set the width!
How do i make it so the top-header takes full width?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<!-- TOP HEADER -->
<div id="top-header">
<div id="nav" class="page-width">
test
</div>
</div>
<!-- CONTAINER -->
<div id="container" class="page-width">
test
</div>
</body>
</html>
/********** TOP-HEADER **********/
#top-header {background:#719bb5 url(../images/layout/bg_header.png) repeat-x left bottom; border-bottom: 1px #5E7D99 solid; height:59px;}
#container {background-color:red;}
/* classes */
.page-width {width:1000px; margin:0 auto; padding:0 10px;}
EDITED:
added image of what it looks like on my android chrome browser