So I'm using Supersized to scale my background images and that's all good and well. The problem is that if I want the image to look good at multiple resolutions, it should be big, e.g. 2000 px * 2000 px. But why should someone with a resolution of e.g. 800 * 600 need to download such a large image? So what I'd like to do is to have, let's say, 3 sizes of the image (1024 * n, 1680 * n and 2000 * n) and, depending on the resolution, the smallest possible of them would be sent to the user. Any thoughts on how I should implement this?
Using Javascript's window.screen.width will return you the actual pixel width of the screen, so then you can use a simple if statement to select which image you will use.
if(window.screen.width < 1000) {
image = "small.jpg";
} else {
image = "large.jpg";
}
you can use $(window).width(); (http://api.jquery.com/width/) to determine the user window width and then decide which image do you wish to use -
$('#yourImageId').attr('src', 'images/alt/imagename.jpg');
Many ways:
As others said, get the width of the screen, then based on that, manipulate the background image source of the element.
Use Less to create programmatic CSS at client-side
Use the concept of responsive-images
Related
I really hope, you are able to assist me on this one, as I'm tearing my hair out...
I have a little marquee, based on this code: http://jsfiddle.net/TCJT4/525 that feeds some text.
Here's how it looks on an iPad 6... and please disregard from the preliminary design, but this is how it should look:
Here's how it looks on an iPhone 4S:
The ticker is retrieved from the exact same source, but as you can see, the text appears larger on the iPhone (the iPad image is zoomed, so it appears larger, but in reality, they are both displaying a 320x30 pixels placeholder. The text is temporarily hardcoded to 20px in height and I've tried using other units as well... the banner still looks different on the devices.
I did some debugging of the ticker container/placeholder, as well as the detected banner height and disabled all text-adjusting elements. Here's a result of some of the properties:
iPad 6: Tickerplaceholder DIV-height: 24pixels, bannerheight: 30px, pixelaspect-ratio: 2
iPhone: Tickerplaceholder DIV-height: 32pixels, bannerheight: 30px, pixelaspect-ratio: 2
PC (Chrome): Tickerplaceholder DIV-height: 24pixels, bannerheight: 30px, pixelaspect-ratio: 1;
I find it very strange that two retinadisplay devices display the same banner differently - and that the iPad and the PC displays them correctly.
The ticker can also be found here in its latest form: www.videobanner.dk/ph.html
Pixels are different physical sizes on different devices - so 24px is smaller on one device than on another.
For text, if you use points instead then the size will be the same across devices - they will all make 72pt 1 inch (thereabouts).
Of course this means you have to use text and not bitmaps etc.
Mobile devices may also have a zoom level set for readability (by the user) which will also affect the size - eg you specify 24pt or px and the browser makes it 36pt or px - the calculated size in the inspector will be different to the styled size - to get around this you need to set a value somewhere, then see what it actually is when rendered and apply a ratio to get what you want (via javascript). I've used code like this in the past to ensure text fitted in a box of a given pixel size;
var fontScale = 1 ;
var mySpecifiedFontSize = 24 ;
var myTextElement = document.getElementById("MY_TEXT_ELEMENT_ID") ;
function fontScalingCorrection(){
var style = window.getComputedStyle(myTextElement);
var fontSize = parseInt(style["font-size"]);
if(!isNaN(fontSize)){
if(fontSize !== mySpecifiedFontSize){
fontScale = (mySpecifiedFontSize / fontSize) * fontScale ; //allows for multiple calls
myTextElement.style.fontSize = (fontScale * mySpecifiedFontSize) + "px" ; //or units used
}
}
}
//after the element has been drawn once ( or use another element as a size marker )
fontScalingCorrection();
The cause of the problem is related to a quirk or error in iOS Safari, which returned an incorrect and unpredictable height when dealing with unordered lists, containing text of various lengths. This became apparent when I compared different text lenghts on different platforms. No fix has been found, but I was able to circumvent the problem by splitting one string into several shorter strings, such as
<li>This is a text that </li><li>doesn't go well with iOS</li>
In my project, this solution also works... perhaps not that pretty, though.
I have question about using dp in web development. Im currently reading google material design guidelines and they are talking about elevation and shadows based on dp. How can I use this in web development? Is there any way to calculate this how to create shadow based on dp with HTML CSS?
Example from the web page:
Raised button
Resting state: 2dp
Pressed state: 8dp
For desktop only, raised buttons can have an elevation of:
Resting state: 0dp
Pressed state: 2dp
As mentioned in the Google Material design documents:
A dp is equal to one physical pixel on a screen with a density of 160.
To calculate dp:
dp = (width in pixels * 160) / screen density
When writing CSS, use px wherever dp or sp is stated. Dp only needs to
be used in developing for Android.
and screen density is
Screen resolution refers to the total number pixels in a display.
screen density = screen width (or height) in pixels / screen width (or
height) in inches
So it depends on the screen width and height. There are some converters on the web to calculate for each density. But as most screens are still 72dpi (not mentioned the HDPI screens), I think that is a proper starting point.
There are no CSS units that are truly device-independent. See http://www.w3.org/TR/css3-values/#absolute-lengths. In particular, the absolute units might not match their physical measurements.
If physical units were true to their purpose, you could use something like points; points are close enough to dps:
1 in = 72 pt
1 in = 160 dp
=> 1 dp = 72 / 160 pt
If you use SCSS, you can write a function to return in pts:
#function dp($_dp) {
#return (72 / 160) * $_dp + pt;
}
And use it:
.shadow-2 {
height: dp(2);
}
For Material's shadows they only really use the concept of dp to attempt to relay how elements should be layered.
i.e.
2dp < 8dp // 2 is layered under 8
// or
2dp (resting) => 8dp (focused)
What they are referring to is z-depth (or on the z-axis). This cannot be converted straight to CSS. When they talk about elevation levels they are not referring to x & y or width & height dimension.
See design guide page on elevation.
If you are simply looking for the values for CSS shadows check here.
https://github.com/mrmlnc/material-shadows/blob/master/material-shadows.scss
That is as close to converting z-depth dp to CSS values. The CSS values do match Google's Polymer elements though so it's most likely spot on.
Good Luck!
I am working with libgdx. I need to scale and position text. Let's say I want to draw X that is 30 pixels hight and I want it to be in the middle of the screen. I want to draw more of those in diffrent locations and with different scales.
Is there any way how could I achieve that? I can't find the solution anywhere. I dont want to create more BitmapFonts if possible.
If you want to handle all platforms (android, html, ios, desktop) you need to use several BitmapFonts in order to avoid ugly scaling. Otherwise, if you don't need to deploy to HTML, you can use the gdx-freetype extension (see here https://github.com/libgdx/libgdx/wiki/Gdx-freetype).
Assuming you go with BitmapFont, you can simply use code similar to this to center your text:
String text = "Your text here!";
TextBounds bounds = font.getBounds(text);
font.draw(batch, text, (width - bounds.width) / 2.0f, (height - bounds.height) / 2.0f);
For scaling, you can set the scale in font.draw, but you probably want several BitmapFont of various sizes to avoid ugly artifacts.
Let's say i have a div that i've defined to be (32px, 32px) in size:
html:
<div id="theBox"></div>
css:
div {
width: 32px;
height: 32px;
background-color: gray;
}
(Live jsFiddle view)
How can i get the actual size of the box in pixels?
You'll note that the box doesn't have to be 32px. It can be larger:
or smaller:
or exactly 32 pixels:
The reason for the differences, of course, is because Chrome and Internet Explorer allow me to zoom.
i would like to know the actual size of the element. Why? No reason; just cause. i'm curious, and i'd like to broaden the limits of human knowledge and understanding.
Or because i need to set the internal resolution of a Canvas element to match the actual size of the canvas element - otherwise the rendered canvas contents will get stretched without my permission:
Although, my reasons for wanting to know the size of an element do not necessarily apply just to a Canvas. i'm asking about a generic div element; and the answer will be used towards canvas, img, video, and anything else i desire.
You would need to detect the zoom level.
Then write a simple arithmetic proportion to calculate the 'actual' size, or the size as it appears to the user.
var zoomLevel,
, actualSize = 32
, viewSize;
function getZoomLevel(){ ... your code here...return zoomLevel;}
function getViewSize(actualSize){
viewSize = actualSize*getZoomLevel();
return viewSize;
}
Then ... call getViewSize() when ready ...
Hopefully the math is clear enuff.
Solving for y (or viewSize):
actualSize/1 = y/zoomLevel
However, you will need to be careful about sub-pixel precision, especially among the notoriously bad length/width determining browsers like IE9. But, as long as all you need is something close, this should work.
I'm trying to reduce stage height from the top to get an item to spawn under a specific area. Where the HUD is.
I used to have my HUD on the bottom which caused no problem. Because my function has:
headY = Math.ceil((((stage.stageHeight - hudHeight)))/(headWidth))*Math.random())*headWidth;
This reduces stage.stageHeight with 80 so the head can spawn properly. However, this isn't the case when the HUD is at the top. What this line currently does is that it is making the head not able to spawn under stageheight - 80 pixels instead of the top.
My question is; how can I make the code reduce the stageheight from the top.
Thanks in advance,
Jordi
Extra info about my question:
All I'm trying to do actually, is 'selecting' the bottom of the stage, leaving the stage out of the picture. I was just using stageheight as an indicator to control the 800 pixels. So when I manipulate the stageheight, I wouldn't have to change the code. But since this might not be possible. There should be a different way. I hope you understand my question now. If not, what I want to do is select everything from 80 pixels down and under. The stage's height is 800 pixels so I need to select 720 pixels. However, I can't find a way to select the bottom 720 pixels.. only the top 720 pixels.
Although your question is hard to understand, the answer is most likely that you cant. The stageHeight is read-only. You can set it in HTML, and even set it to a percentage. But you can't alter it in Actionscript.
The way your question is worded, makes it extremely hard to understand what you want.
I am guessing that what you want is to spawn a given object and ensure that it is not spawned in the same space as your HUD.
So if your screen is 800 x 800 , and your HUD takes up the full width of the screen and the top 80 pixels of the screen you might try this to get a valid y spawn location :
var headY:Number = Math.random() * (800 - 80) + 80;
That would give you a resulting value from 80 - 800;
Given your variables I would suggest this :
var headY:Number = Math.random() * (stage.stageHeight - hudHeight) + hudHeight;
Now based on your code, it seems like you are also trying to ensure that whatever you are spawning is not partially off the top or bottom of the screen, so you need to factor in the height of the head. So consider this code :
var headY:Number = Math.random() * ((stage.stageHeight - headHeight) - (hudHeight + headHeight)) + (hudHeight + headHeight);
Not completely sure if this is what you are looking for, but it's the best I can do based on your question and trying to suppose what it is that you want.