We can scale background image by using meta tag view port. I have background image and I can zoom in/out that image very well BUT I have some more stuffs on background image(text and Button), when I zoomed background image then button and text are also getting zoom BUT I don't want to zoom them with view port scale.
Is this possible to avoid zoom for some specific elements by using view port scaling?
Here is my HTML code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=yes, initial-scale=0.5, maximum scale=1.5,
minimum-scale=1, width=device-width, height=device height,
target-densitydpi=device-dpi" />
<style>
#maincontent {
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 50;
}
#score {
margin: 0 0 0 0;
right: 0px;
top: 0px;
z-index: 50;
position: fixed;
}
#scoreCount {
font-size: 100%;
}
#countdown{
font-size: 100%;
}
#reset{
margin: 0 0 0 0;
left: 0px;
top: 0px;
z-index: 50;
position: fixed;
}
</style>
</head>
<body>
<img alt="Loading" id="background" />
<div id="maincontent">
<div id="score">
<p id="scoreCount">
<b></b>
</p>
<p id="countdown">Time Limit</p>
</div>
<div id="reset">
<button onclick="reset()">Reset</button>
</div>
</div>
</body>
</html>
I have tried by giving position:fixed and background-attachment:fixed BUT not working.Please anybody help to get solve this. I am stuck with this last two days. Thanks in advance
change your viewport tag to this one:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
your code has differences between initial scale to maximum scale, and the zoom is available because of that. notice that in my suggestion all the values are the same.
hope that helps.
According to #Gal V and I have also searched more on this topic. "Is this possible to avoid zoom for some specific elements by using view port scaling?". According to my research we can't(I am not sure 100%) avoid some specific elements to zoom by using meta tag view port scaling. Don't know correct answer. If any body know answer it.
Related
I want to assign height to parent div based on the child content (here SVG is my child which have varied size data). I cannot assign fixed height since the data comes dynamically. I tried giving height: auto but no use. I want whole data which in my case is square boxes should take either black or red background. Since I gave attribute to SVG as ("overflow", "visible"), the content is visible but unfortunately the background do not increase.
Note: My issue is I am not able to give background color to the whole data since the height is not defined. If I do not give overflow property to SVG(child) then the data(square boxes) is also cropped to half like background.
Here is my code snippet.
React.useEffect(() => {
// calling legend function and passing div id to function
colorLegend("#legend");
}, [dep]);
function colorLegend(legend: string) {
// logic
select(legend)
.append("svg")
.attr("overflow","visible")
.attr("width", 150 + "px");
}
return (
<div style={{position: "absolute",right: 16,top: 10,backgroundColor: "red",borderRadius:"5px",padding:
"10px"}}>
<label style={{ color: "#6F6F6F" }}>{name}</label>
<div id="legend" style={{backgroundColor: "black"}}></div>
</div>
);
Fiddle link : https://jsfiddle.net/shru90/wvph9tx5/15/
#initial{
display: block;
min-width: 100px;
min-height: 200px;
}
#initial{
position: absolute;
right: 16;
top: 10;
background-color: red;
border-radius: 5px;
padding: 10px;
}
#label{
color:#6F6F6F;
}
#legend{
display: flex;
min-height: 200px;
min-width: 100px;
background-color: black;
color: aliceblue;
margin:0 auto;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="github.css">
<style>
</style>
</head>
<body>
<div id="initial">
<label id="label">Label name</label>
<div id="legend">123242242424wewdsdsdsdssdsdsdsd</div>
</div>
</body>
</html>
You can limit the height and width using the min attribute. In the code I inserted above you can insert anything and its height and width will change accordingly but the data will never exceed outside of it.
I have a simple tag with a banner and a border at the bottom. How can I stop sliding these two elements on zooming? I was looking for a way to get the two elements intact on zoom in and out. Even after a few hours of search, i couldn't get the desired output. I tried this and one more post which says to change from px to em.
My html tag:
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<div id="header">
<img class="logo" src="./style/logo.jpg" width= 895 height= 160">
</div>
<div id="container-border">
</div>
</body>
css:
#header
{ padding:0 20px;
display:block;
margin:0 auto;
background: #D6D6D6 url(background.jpg) repeat-x;
height: 205px;
width: 1500px;
position: center;
}
#container-border {
width: 1538px;
height:900px;
margin-left:260px;
border-color: black;
border-width: 1px;
border-style: solid;
}
You first need to wrap the content in a containing DIV
HTML
<div class="site-content">
<div id="header">
<img class="logo" src="./style/logo.jpg" width= 895 height="160">
</div>
<div id="container-border">
</div>
</div>
Note the new DIV .site-content. This is where you would center the website content and control the website contents width.
Here's my codepen: https://codepen.io/arlcode/pen/aRpWZo
I would also recommend not using static width/height for mobile dynamic purpose. You're also going to want to use classes more then ID's because ID's are specific but classes allow you to manipulate multiple DIVs at once.
After reading through Center a Font Awesome icon over the image on hover and it's corresponding answers, I'm still having trouble replicating this answer with an Ionic Icon.
Code I'm using is as follows:
<div class="video-thumbnail">
<img src="image here" />
<i class="icon ion-play"></i>
</div>
CSS I'm using is:
.video-thumbnail {
position: relative;
margin: 0 auto;
display: inline-block;
}
.video-thumbnail img {
position: absolute;
}
.video-thumbnail i {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
I've got it to go on top of each other but can't seem to find the middle point. Looking to center horizontally and vertically. I'm not looking for any hover states just a blatant icon over image.
Thanks!
For horizontal and vertical centering,
You need to remove position: absolute for the image since it takes
it out of the flow.
Calculate the top and left values using calc(), you will need to subtract the dimension values of the icon from 50%.
angular.module('app', ['ionic']);
.video-thumbnail {
position: relative;
display: inline-block;
}
.video-thumbnail img {
width: 100px;
height: 100px;
}
.video-thumbnail i {
position: absolute;
top: calc(50% - 10px);
left: calc(50% - 5px);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link href="http://code.ionicframework.com/1.0.0/css/ionic.min.css" rel="stylesheet">
<script src="http://code.ionicframework.com/1.0.0/js/ionic.bundle.js"></script>
</head>
<body ng-app="app">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Awesome App</h1>
</ion-header-bar>
<ion-content class="padding">
<div class="video-thumbnail">
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT2KjQI_sGhxCm5CTyQPuCACLuLEyvup4eDNVowMzdHiiPLShdL3ggiA7QC" />
<i class="icon ion-play"></i>
</div>
</ion-content>
</ion-pane>
</body>
I'm trying to get the Google Map div fixed so it becomes always visible, but somehow the style property "position:fixed" is not working. The code is the following:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta name="layout" content="main" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
Some script
</script>
</head>
<body onload="initialize()">
<div class="nav">
First div
</div>
<div id="artistList">
Second div
</div>
<div id="map_canvas" style="position: fixed; right: 0px; top: 0px; width: 100%; height: 100%">
Map div
</div>
</body>
</html>
Any help? Thanks very much
This will solve it:
<div id="fixed" style="position:fixed; top:0">
<div id="map_canvas" style="width:100%; height:100%">
[map content goes here]
</div>
</div>
You should clean up your code a little to make things more visible. At first you should move the css style settings from your map_canvas into your css section in the html head. What remains is a clean <div id="map_canvas"></div>. Now let's head to your CSS section in the html head. Try it like this:
<style type="text/css">
html {}
body {margin: 0px; padding: 10px }
#map_canvas {
position: fixed;
right: 0;
top: 0;
width: 90%;
height: 90%;
border:1px solid #f00;
margin:10px;
}
</style>
I removed the height:100%; from html and body. I reduced to sizes of the canvas from 100% to 90% and gave it a red border and a margin of 10px to make things more clear. The div is set in the upper right corner now and is fixed. I tested it on FF, Chrome, Safari and IE.
But now one little question... Does it make sense to make the canvas 100% wide and high?! The map_canvas would hide everything else in your html...?
Najeeb's solution did not work for me.
Changing the map elements css (from position:absolute to position:fixed) after the "tilesloaded" map event seemed to work.
I wanted the footer on a mobile site I was working on to stick to the bottom of the page. I found the CSS Sticky Footer example by Ryan Fait and implemented it. On every browser I could conceivably test, I found the footer to stick nicely to the bottom.
And, then it happened. The clients complained about the footer throwing itself all over the place. On painfully requesting details, I found out that the problem occurred on only one model of BlackBerry mobile devices: the 8250 model. I pulled out a Windows VM, downloaded and installed the BlackBerry 8250 simulator, and sure enough, I saw the problem.
For a page the height of two BlackBerry screens, the footer sticks to the middle of the first screen, on top of everything else. The footer does not move as you scroll, and if you scroll down to the lower half of the page, the footer is not visible. It stays fixed to the middle of the top screen.
I will post the HTML and CSS to the end of this question. If I could get any pointers or clues as to why this is happening on the 8250 BlackBerry model, and not least, how it could be fixed, I would be very very grateful.
Thank you!
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=yes;"/>
<style type="text/css">
* { margin: 0; padding: 0; }
html { height: 100%; }
body { height: 100%; }
.page {
width: 100%;
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -4em;
}
.push {
height: 4em;
}
#footer {
clear: both;
position: relative;
z-index: 10;
height: 4em;
margin-top: -4em;
text-align: center;
}
</style>
</head>
<body>
<div class="page">
<!-- lots of other DIVs here for actual content -->
<div class="push"></div>
</div>
<div id="footer">
<!-- footer content over here -->
</div>
</body>
</html>
I found this jQuery Sticky Footer hack. I am not too sure of whether this is going to be something people would suggest I should go with. I've not tested it yet, though.
Update: This is a small update to say that I toyed with the jQuery Sticky Footer hack linked right above. It didn't work for the BlackBerry device mentioned, either.
After trying a couple of different things, I stumbled into the CSSStickyFooter solution. I implemented it and found it to work well on the Black Berry device in question, along with the rest of everything I have tested it on. I am going to paste the HTML and CSS code below:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=yes;"/>
<title>Another CSS Sticky Footer that works on Black Berry</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
height: 100%;
}
.page {
width: 100%;
min-height: 100%;
}
.push {
padding-bottom: 4em;
overflow: auto;
}
#footer {
position: relative;
margin-top: -4em;
height: 4em;
clear: both;
background-color: red;
}
</style>
</head>
<body>
<div class="page">
<div id="content">
<p>Some body content will come here</p>
<p>And over here as well.</p>
</div>
<div class="push"></div>
</div>
<div id="footer">
<p>This is the footer block.</p>
</div>
</body>
</html>