How do I change the width of popup.html? I've attempted changing the width of the div in it but that seems to have no effect.
Here is what I've tried...
<div id='poppingup' style = "min-width: 300px; display:none">
Popup width is determined by the visible content, so either make your div visible or apply min-width to body:
body {
min-width:300px;
}
(there is also a limit on max width, I think it is 800px)
I tried to change the width of body too, but it didn't work. You can set the width of html tag:
<html xmlns="http://www.w3.org/1999/xhtml" style="min-width:600px;">
It worked in my project.
Changing the css didn't work for me.
You can do it with javascript:
<script>
window.resizeTo(1920, 768);
</script>
Or if you want to accomodate all screen sizes:
<script>
var newheight = window.height * (5/10);
var newwidth = window.width * (7/10);
window.resizeTo(newheight, newwidth);
</script>
Related
I can't for the life of me find out why min-width isn't working on mobile on my website. There is probably a really basic solution to this but I can't find anything.
Basically, I have an element with this CSS:
fullscreen {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
min-width: 100%;
min-height: 100%;
}
This works perfectly on desktop browsers, at all resolutions and aspect ratios, but it completely breaks down on mobile, although when I change min-width to width, it fills the screen perfectly on desktop and mobile.
And when I use height instead of min-height, it works as expected and I can position elements with bottom on mobile, but when using min-height, it uses some arbitrary position about midway up the screen. max-width and max-height seem to work correctly as well
What's even weirder to me is that using the mobile device "emulator" on Chrome, the results seem to be totally random, sometimes working, sometimes having that midway line at the same place as my actual phone, sometimes having it in a completely different place.
My phone consistently has the midway line at the same place.
I've seen a lot of people recommend the use of the meta viewport tag, and I'm pretty positive I have it implemented correctly:
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
The ideal solution for me would be to simply replicate the same behaviour as I have on desktop on mobile, since my desktop site already works for all resolutions.
Thanks alot for your help, I've spent at least 3 hours trying to figure this one out!
EDIT: I've tried implementing the behaviour I want in JavaScript, and for some reason, it still doesn't want to work on mobile. Here is a test I made:
<!DOCTYPE html>
<html>
<head>
<title>Mobile fit test</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0">
<style>
body {
margin: 0;
padding: 0;
overflow-x: hidden;
overflow-y: hidden;
}
</style>
</head>
<body>
<img id = "fit" src = 'http://placehold.it/1000'>
<script>
var image = document.getElementById("fit");
var image_width, image_height;
window.onresize = function() {
console.log(image_width, image_height);
var width = 1.0 / window.innerWidth * window.innerHeight / image_height * image_width;
var height = 1.0;
if (width < 1.0) {
width = 1.0;
height = 1.0 / window.innerHeight * window.innerWidth / image_width * image_height;
}
width *= window.innerWidth;
height *= window.innerHeight;
image.style.width = width + "px";
image.style.height = height + "px";
image.style.position = "absolute";
image.style.left = window.innerWidth / 2 - width / 2 + "px";
image.style.top = window.innerHeight / 2 - height / 2 + "px";
}
document.body.onload = function() {
image_width = image.width;
image_height = image.height;
window.onresize();
}
</script>
</body>
</html>
With this, I can still zoom, window.innerWidth and window.innerHeight do not appear to be what they're supposed to be, and it still works perfectly with any resolution and the plugin that Mileta Dulovic suggested. This is driving me nuts!
Your meta tag is looking as it should be. If you don't want the user to zoom page you can use this
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
Okay so. Media query works like this
#media screen and (min-width: 768px) {
...
}
CSS will be applied only and only on screens that have width >= 768px. On the screens below, it won't be applied.
#media screen and (max-width: 768px) {
...
}
CSS will be applied only and only on screens that have width <= 768px. On the screens above it won't be applied.
If I understand your question good you have a problem when you use min-width with the media query. That is because you never tell it what to do on smaller screens.
Also, don't put too much faith in Chrome's mobile view. It is not good in most cases.. Rather install plugin for Chrome that helps you with that.
I am using fabric js and canvas to add image from url I want to make canvas and containing image responsive as per resolution.How can we do it?
my code is:-
<canvas id="panel" width="700" height="350"></canvas>
<script>
(function() {
var canvas = new fabric.Canvas('panel');
var rect;
fabric.Image.fromURL('abc.jpg', function (img) {
canvas.add(img.set({
width: canvas.width,
height:canvas.height,
originX :'left',
originY :'top',
selectable: false,
}));
});
})();
</script>
As per my knowledge there are no inbuilt functions to achieve this.
But canvas can be made responsive by using native javascript and playing with the screen width and screen height, setting them as canvas width and height.
And same maths you have to apply for all the items drawn in the canvas. (take the ratio of your canvas width or height to screen width or height and use this ratio to resize all the elements on change of view-ports).
Hope it will help you.
after reading a lot about browser viewport width issues, I concluded to make a trial to see that if I understood the concept.
I used javascript below: This script prints "Your viewport width is WidthxHeight"
Element 1: At a 1920 x 1080 resolution, HP x2301 screen without any scroll bar:
JS printed: Your viewport width is 1920x955
Element 2: At a 1920 x 1080 resolution, HP x2301 screen with scroll bar (I increased the height of page with lots of lorem Ipsum string paragraphs):
JS printed: Your viewport width is 1920x955
Element3: At Chrome, I inspected element1 view and element2 view. For element 2, with scroll bar, Chrome wrote width as 1903 pixel, not 1920.
My questions are:
Why element1 and element2 gave the same width? For element2, I was expecting new width = (1920 - scroll bar width). For example Chrome wrote 1903 pixel in its inspection tool.
I declared <meta name="viewport" content="initial-scale=1, width=device-width"> in my header as a meta tag. And in my CSS3, I declared #media screen and (max-width: 1000px) { change something for responsiveness } Since my aim is to be responsive in browser's viewport, does these 2 combination OK? At this point I should say that my viewport definition and aim is pure display width without vertical scroll bar. Because of my understanding, max-width:1000px means to me: be responsive in layout just after pure display width is <=1000px
javascript source link is: http://andylangton.co.uk/blog/development/get-viewport-size-width-and-height-javascript
<script type="text/javascript">
<!--
var viewportwidth;
var viewportheight;
// the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight
if (typeof window.innerWidth != 'undefined')
{
viewportwidth = window.innerWidth,
viewportheight = window.innerHeight
}
// IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)
else if (typeof document.documentElement != 'undefined'
&& typeof document.documentElement.clientWidth !=
'undefined' && document.documentElement.clientWidth != 0)
{
viewportwidth = document.documentElement.clientWidth,
viewportheight = document.documentElement.clientHeight
}
// older versions of IE
else
{
viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
viewportheight = document.getElementsByTagName('body')[0].clientHeight
}
document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>');
//-->
</script>
thank you in advance, regards
I got the point.
I changed the JS and got the true viewport width.
JS owner is Vilmantas Baranauskas from SO family.
related SO link: Get the height and width of the browser viewport without scrollbars using jquery?
related script:
<script type="text/javascript">
var viewportHeight;
var viewportWidth;
if (document.compatMode === 'BackCompat') {
viewportHeight = document.body.clientHeight;
viewportWidth = document.body.clientWidth;
} else {
viewportHeight = document.documentElement.clientHeight;
viewportWidth = document.documentElement.clientWidth;
}
document.write('<p>Your viewport width without scrollbars is '+viewportHeight+'x'+viewportWidth+'</p>');
</script>
1903 pixel width is true since scroll-bar std width is 17px as I know.
I also recommend to any one to use overflow-y:scroll; code in CSS Body or HTML tag in order to make browser display the scrollbar always even if for a blank draft web page.
image link - webpage image
I want to remove all the spaces but can't do so.
i also want the sidebar to be of the same height as Content
Thankyou!
I don't know what's wrong with it
should i make a single sidebar instead of 3?
CODE
HTML5 and CSS3 code
http://www.mediafire.com/download/70p421je5uv2a4m/Theme.rar
THank you!!! :D
You can set background for element that contain your sidebar and content:
<div style="background:#fff">
<div id="content"></div>
<div id="sidebar"></div>
</div>
http://codepen.io/Chovanec/pen/hcAmH
In case you want the height of the content responsive, and the sidebar change responsive along with it, you can try a jQuery solution
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$( document ).ready(function() {
var y = $("#content").outerHeight();
$("#sidebar").css({"height": y});
$( window ).resize(function() {
var y = $("#content").outerHeight();
$("#sidebar").css({"height": y});
});
});
</script>
I have a dynamic link displayed inside an input tag. How can I make the input tag resize to take the width of the link?
Thanks
You can use a body onload to determine the size....
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example</title>
<script type="text/javascript">
window.onload = function() {
thelink = document.getElementById('MyLink');
linksize = thelink.value.length;
if (linksize < 10) thelink.size = 10;
if (linksize > 50) thelink.size = 50;
}
</script>
</head>
<body>
<input id="MyLink" type="text" value="http://www.domain.com/this/is/a/very/long/link/example" />
</body>
</html>
jus tset your minimum and maximum size for maintaining page style....
Perhaps you can create a hidden <span> identically styled, then read its width (because it adjusts to its contents) and assign the width to the <input>.