I'm programming a html5 app with JQuery Mobile and Phonegap. I want to run them on many different devices. Because of that, I want to have everything relative to screen size.
<div id="pos" data-role="content"
style="border: 5px solid silver; margin-left: auto; margin-right: auto; width: 250px; height: 250px;">
I use this div Element to display a google map inside with a little border around.
How can I adjust the size for example 80% of the screen size?
I tried it with width: 90%; height: 90%, but the result is really bad. Its not relative to screen, it lokks like relative to the content.
And the size of the border is fixed with 5px, is it possible to insert here a nice argument to have it relative to screen size?
I hope someone can help!
Thanks!
A html element, set to width: 100%, stretches to a 100% of it's parents width. You need to make sure that the containing elements widths are also 100%.
You also need to make the html and body width 100%.
An example:
html, body { width: 100%; }
#pos { width: 80%; }
This example assumes the #pos element is straight on the body.
you might need to define the height and width of the parents if you dont want to use js
here i made an example on jsfiddle
jsfiddle
looks good, so I think the problem is because of JQuery! Here is my complete code of this page:
<!DOCTYPE html>
<html>
<head>
<title> App</title>
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="jquery.mobile-1.1.1.min.css" />
<script src="jquery-1.7.2.min.js"></script>
<script src="jquery.mobile-1.1.1.min.js"></script>
<style>
html, body, geolocation { width: 100%; height: 100%; }
#pos { width: 80%; height: 80%; }
</style>
</head>
<body>
<div data-role="page" id="geolocation" data-theme="a">
<h2 align="center">Geolocation</h2>
<div data-role="header" data-position="fixed" data-theme="a">
<h1>Car Data</h1>
</div>
<div id="pos" data-role="content" style="border: 5px solid silver;">
Deine Position wird ermittelt...</div>
<script type="text/javascript" src="geolocation.js"></script>
<div data-role="footer" data-position="fixed" data-id="persFooter">
<div data-role="navbar">
<ul>
<li>Connect</li>
<li>Vehicles</li>
<li>Info</li>
</ul>
</div>
</div>
<script>
$('#geolocation').on('swipeleft',function(){
$.mobile.changePage("fuelGauge.html", { transition: "slide"});
console.log('slideLeft');
})
$('#geolocation').on('swiperight',function(){
$.mobile.changePage("batteryStatus.html", { transition: "slide", reverse: 'true'});
console.log('slideLeft');
})
</script>
</div>
</body>
</html>
Related
I have an auto expanding text area on card-footer. https://jsfiddle.net/6f9a52we/
Instead of expanding it downwards, Can i make it expand upwards? So as it expands upwards, the card-body should shrink. As we see in Gmail chat.
I tried using position: absolute; and bottom:0px;. In that case, Expanding upwards is working perfectly, But the expanding text-area is covering the texts in card-body due to absolute position. Any Ideas please without using position:absolute ?
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="card">
<div class="card-body">
card body line 1<br>
card body line 2<br>
card body line 3<br>
card body line 4<br>
card body line 5
</div>
<div class="card-footer">
<textarea id="myTextArea" placeholder="type here"></textarea>
</div>
</div>
</body>
</html>
$(function() {
$('#myTextArea').on('input keyup paste', function() {
var $el = $(this),
offset = $el.innerHeight() - $el.height();
if ($el.innerHeight() < this.scrollHeight) {
// Grow the field if scroll height is smaller
$el.height(this.scrollHeight - offset);
} else {
// Shrink the field and then re-set it to the scroll height in case it needs to shrink
$el.height(1);
$el.height(this.scrollHeight - offset);
}
});
});
.card{
text-align: center;
width: 50%;
margin:0 auto;
}
.card-body{
overflow-y: auto;
height: 150px;
}
Add max height to your class card.
.card{
text-align: center;
width: 50%;
max-height: 250px;
margin:0 auto;
}
I have a page with a title, paragraph and a single image, that can be of very different sizes/aspect ratios.
I would like the image to adapt so that it will either fill maximum available height, or be limited by its width, without loosing aspect ratio, neither causing scrolling.
this is my basic config:
angular.module("myApp", ["ngMaterial"]);
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc7/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc7/angular-material.min.js"></script>
<div ng-app="myApp" layout="column" layout-fill>
<div flex style="background: red;">
<h1>Title</h1>
<p>Details. Blablabla.</p>
</div>
<div flex="60" style="background: blue;" object-fit="fill">
<img id="myImg" ng-src="http://placehold.it/200x400"/>
<!-- Should work with such extreme case as well -->
<!-- <img id="myImg" ng-src="http://placehold.it/1000x200" /> -->
</div>
</div>
I have looked at a lot of SO posts, websites, blogs, etc. I can't figure out where to start to get this done. Most articles about fluid images or responsive images only talk about scrollable web pages. So even a good reference on the topic would be helpful. Thank you.
EDIT: Updated the snipped to use flex layout. As you can see, the image goes outside the blue div bounds. I have used object-fit="content"; or object-fit="fill"; but none seems to constraint the image to respect div bounds
It can be done by object-fit(it doesn't support IE) and css calc(it supports most of broswer).
What did you do?
I wrap image by a div(.wrapper), calculate height of it by css calc.
height: calc(100vh - 19px - 38px); //100% of viewport - height of p - height of h1
and then use object-fit to image is fitted the height of .wrapper by keeping the ration of image.
Image by high height
angular.module("myApp", ["ngMaterial"]);
h1,
p {
padding: 0;
margin: 0;
}
.wrapper {
width: 100%;
height: calc(100vh - 19px - 38px);
}
img {
object-fit: fill;
height: 100%;
max-width: 100%;
display: block;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc7/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc7/angular-material.min.js"></script>
<div ng-app="myApp" layout="column" layout-align="center center" style-parent>
<h1>Title</h1>
<p>Details. Blablabla.</p>
<div class="wrapper">
<img id="myImg" ng-src="http://placehold.it/200x400" />
<!-- Should work with such extreme case as well -->
<!-- <img id="myImg" ng-src="http://placehold.it/1000x200" /> -->
</div>
</div>
Image by less height
angular.module("myApp", ["ngMaterial"]);
h1,
p {
padding: 0;
margin: 0;
}
.wrapper {
width: 100%;
height: calc(100vh - 19px - 38px);
}
img {
object-fit: fill;
height: 100%;
max-width: 100%;
display: block;
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc7/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-aria.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-messages.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc7/angular-material.min.js"></script>
<div ng-app="myApp" layout="column" layout-align="center center" style-parent>
<h1>Title</h1>
<p>Details. Blablabla.</p>
<div class="wrapper">
<!-- <img id="myImg" ng-src="http://placehold.it/200x400" /> -->
<!-- Should work with such extreme case as well -->
<img id="myImg" ng-src="http://placehold.it/1000x200" />
</div>
</div>
I would use css properties like "background-size:cover". Here is an example. First 2 containers use the "cover" approach on 2 containers with different aspect ratio without altering the image ratio. The third one uses "pixel dimensions". Remember that if u alter either x or y axis dimensions do only so on one of them and define the other as auto in order to not alter the image ratio(like hover effect does on third container).
fiddle:
https://jsfiddle.net/coolcatDev/0111sfmg/2/
HTML:
<div class="container1">
</div>
<br>
<div class="container2">
</div>
<br>
<div class="container3">
</div>
CSS:
.container1 {
background-image:url('http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg');
background-repeat:no-repeat;
background-size:cover;
height:300px;
width:300px;
border:2px solid green;
}
.container2 {
background-image:url('http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg');
background-repeat:no-repeat;
background-size:cover;
height:600px;
width:200px;
border:2px solid green;
}
.container3 {
background-image:url('http://www.gettyimages.ca/gi-resources/images/Homepage/Hero/UK/CMS_Creative_164657191_Kingfisher.jpg');
background-repeat:no-repeat;
background-size:cover;
background-position:center;
height:200px;
width:300px;
border:2px solid green;
}
.container3:hover {
background-size: 450px auto;
}
You can define this in your stylesheet, inline, inside custom directive, ng-style or whatever suits you best.
Browser support:
http://www.w3schools.com/cssref/css3_pr_background-size.asp
I would like to use the very excellent texteditor CodeMirror in fullscreen mode in a browser window and I would like to add a fixed header for some kind of menu - or at least space for a few buttons with some functionality.
So I've added a div with "position: fixed" to the top and added a padding-top to the div with the codemirror object. The problem comes up, when there's enough text that scrolling happens. After moving the cursor down/scrolling the content up and moving the cursor up again, the cursor goes behind the div but the content doesn't scroll fully down. Cursor is hidden, I cannot see the content. Only scrolling via scrollbar works.
Do I need to change the html/css with the fixed div?
Or do I need to check whether the cursor comes behind/under the div and I have to let CodeMirror scroll manually? I tried this but didn't manage to do it programmatically :-(
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel=stylesheet href="http://codemirror.net/doc/docs.css">
<link rel=stylesheet href="http://codemirror.net/lib/codemirror.css">
<script src=http://codemirror.net/lib/codemirror.js></script>
<script src=http://codemirror.net/mode/htmlmixed/htmlmixed.js></script>
<style type=text/css>
.CodeMirror {float: left; width: 100%; height: 100%; }
</style>
</head>
<body>
<div style="position: fixed; height: 28px; z-index:999; width: 100%; background: lightgray;">
<button>Some action</button>
</div>
<div style="padding-top: 23px">
<textarea id=content name="content"></textarea>
</div>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById('content'), {
mode: 'application/x-httpd-php',
lineNumbers: true
});
</script>
</body>
</html>
check out here as well: http://jsfiddle.net/fxvef3bw/1/
I found a solution on my own.
Instead of two overlapping divs, I use two divs (non-overlapping), with style "position: absolute". They don't overlap, so scrolling is fine.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel=stylesheet href="http://codemirror.net/doc/docs.css">
<link rel=stylesheet href="http://codemirror.net/lib/codemirror.css">
<script src=http://codemirror.net/lib/codemirror.js></script>
<script src=http://codemirror.net/mode/htmlmixed/htmlmixed.js></script>
<style type=text/css>
.CodeMirror {float: left; width: 100%; height: 100%; }
</style>
</head>
<body>
<div style="padding: 1px; position: absolute; margin: 0px; top: 0px; bottom: auto; left: 0px; right: 0px; width: auto; height: 24px; background: lightgrey;">
<button>some action</button>
</div>
<div style="padding: 1px; position: absolute; margin: 0px; left: 0px; right: 0px; top: 28px; bottom: 0px; width: auto; height: auto; ">
<textarea id="content" name="content" style="display: none;"></textarea>
</div>
<script>
var editor = CodeMirror.fromTextArea(document.getElementById('content'), {
mode: 'application/x-httpd-php',
lineNumbers: true
});
</script>
</body>
</html>
Updated jsfiddle is here: http://jsfiddle.net/fxvef3bw/2/
I hope I can get some comments about possible side effects or drawbacks of the position absolute. Otherwise it seems to be fine for me.
can you please tell me how to add hidden div or button behind the button?Actully I need to increase the click area without increase the x image size so that user can click in whole area.?
here is my code
<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div data-role="page" id="wrapper">
<button id="openPopup">openPOP</button>
<div data-role="popup" data-dismissible='false' id="testCaseId" data-theme="b" data-overlay-theme="a">Close
<div data-role="fieldcontain">
<label for="testCaseIDValue">TestCase Name:</label>
<input type="text" name="testCaseIDValue" id="testCaseIDValue" value="" class="inputTextTestCase" />
</div>
Done
</div>
</div>
</body>
</html>
js Code
$(function(){
$('#openPopup').click(function(){
$( "#testCaseId" ).popup( "open" );
})
})
Use the close icon as a centered background image of a larger element.
HTML
CSS
a {
display: block;
background: url("http://icons.iconarchive.com/icons/custom-icon-design/mini/24/Close-icon.png") no-repeat center center #eee;
width: 50px;
height: 50px;
}
Demo: http://jsfiddle.net/eAxb8/
Try setting a <div> that acts as a container for the button graphic and is the same color as your background, but clickable.
For example,
<a href = "whatever.com">
<div id="hidden_button">
<div id="button_graphic">
Button Text
</div>
</div>
</a>
stylesheet.css
a {
text-decoration: none;
}
#hidden_button {
background: #ffffff;
width: 300px;
height: 300px;
}
#button_graphic {
width: 150px;
height: 150px;
border: 4px solid black;
border-radius: 5px;
color: #ffffff;
text-align: center;
background-color: #F38630;
margin: auto;
margin-top: 75px;
}
If I've done my CSS correctly, this should create a square button with rounded edges that is 150px by 150px, with a container around it that is 300px by 300px and appears invisible, but is still clickable. Adjust the sizes to meet your needs.
To me, it seems like you look for an invisible area that acts like a button.
See the following fiddle. To remove the blue color, just delete the code style="background-color:lightblue"
http://jsfiddle.net/p943a/2/
I'm using the load method to load a webpage with in my website.
// main.js
$(document).ready(function ()
{
$("#content").html("<object data='http://tired.com/'>");
});
// index.html
<html>
<head>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="scripts/main.js"></script>
<style type="text/css">
#container{
width: 100%;
height: 100%;
}
#content{
margin-top: 10;
margin-left: 100;
margin-bottom: 10;
margin-right: 10;
width: 500px;
height: 500px;
}
</style>
</head>
<title>
Testing loading a html page into a div
</title>
<body>
<div id="container">
<div id="top">
<p> Top </p>
</div>
<div id="content">
</div>
<div id="bottom">
<p> Bottom </p>
</div>
</div>
</body>
</html>
In spite of giving the content div a height and width of 500px, the webpage still loads in it's original size.
How do I make it larger?
Thanks.
It does work, check this fiddle.
JSFiddle Demo Link
You also might want to add px to your margins.
#content{
margin-top: 10px;
margin-left: 100px;
margin-bottom: 10px;
margin-right: 10px;
background:skyblue;
width: 500px;
height: 500px;
padding:10px;
}
I would recommend trying to set style on the object tag itself:
#content object {
width: 500px;
height: 500px;
}