I'm using JavaScript to dynamically adapt sizes of CSS elements to specific mobile screen. Something like:
var MY_DESIGN_WID = 420;
var MY_ELEMENET_WID = 200;
var actualWid = window.innerWidth;
var id = document.getElementById('myElement');
id.style.width = Math.round(MY_ELEMENET_WID * actualWid / MY_DESIGN_WID) + 'px';
I'm doing this for every relevant size of my CSS elements... Isn't there a "nicer" way to achieve the same functionality?
You can use Javascript to achieve this but it would be alot easier and more supported through devices if you just do it in CSS using #media queries.
Javascript can be turned off in most devices and CSS is also hardware-accelerated so you will also see a marginal improvement in performance.
#exampleDiv {
width: 300px; // Set width 300px
}
#media screen and (max-width: 768px){ //Apply conditions if screen width > 768px
#exampleDiv {width: 500px;} // Change width to 500px
}
I use media queries, for screen management and some times for certain effects that are hard to achieve with CSS I use JavaScript. Both JavaScript and CSS have the same access to hardware graphic acceleration.
But this is certainly easy to fix with CSS adding a class that shows content depending on screen size.
You can find libraries like velocity js to do some animations in javascript, for example
http://julian.com/research/velocity/
I really like playing with velocity is nice simple and we'll documented.
Also sometimes accesing to certain properties of the geometry of an element can make again a layout so performance when animating things from JavaScript is a key value for smooth animations, you may search for layout trashing and repaint if you go this way.
Related
I'm trying to wrap my brain around viewports / scales. I have a site I have to program, and the design I've been given is responsive, but it really doesn't work if the device's width is below 420px.
At anything below 420px, I'd love it if the browser would render the site as if it were 420px wide, just zoom everything out, but I can't figure out how to do this.
I've seen how you can dynamically change the meta viewport tag, but when I do this, it doesn't seem to have any affect, and I'm not sure that's the best way to approach what I'm trying to achieve.
At any rate, this is what I tried:
var minBP = 420;
//ww = window width
if (self.ww < minBP && lastScreenWidth > minBP){ //site is smaller than minimum allowed width, modify viewport
var viewportString = "width=" + minBP + ", initial-scale=1.0";
$('#blackrock-viewport').attr('content',viewportString);
}
Anyone know how to render a scaled-out 420 viewport width when the browser drops below these dimensions?
well you can do that in css by using Media Queries it allows you to manipulate evrything in diffrent screens
for exemple if you want to change the width of div in 420px screen you can do this :
#media (min-width:420px) {
div{
width:50px;
}
}
You can just use media queries to target specific elements on specific screen sizes.
For your situation, you just have to limit your wrappers width to your preferred size.
Supposing that you have a div that wraps all your page, let's say .wrapper.
#media screen and (max-width:420px) {
.wrapper{
width:420px;
}
}
Of course, you can do this also without media queries by just setting the min-width property of your wrapper.
.wrapper{
min-width:420px;
}
But I suppose that with media queries you are more flexible.
I'm turning a clients website into a responsive site and they have lots of vbscript in the content of their home page. At mobile widths they've stripped out a lot of content which means there's lots of code that's being executed but not displayed thanks to display:none
Is there a way to run vbscript code when you hit a minimum width of 768px?
I thought about using javascript to get the screen width and store it as a cookie and use vbscript to get the cookie to obtain the screen width:
<SCRIPT LANGUAGE="javascript">
var width = screen.width;
document.cookie = 'YourDomain=ScreenWidthB='+width;
</SCRIPT>
<%Dim ScreenWidth%>
<%ScreenWidth=request.cookies("YourDomain")("ScreenWidthB")%>
but I feel there may be a better solution out there. Also the code above gives me the width of my monitor I believe, not the width of the browser
This isn't something you would do with any server side language.
You can either use Bootstrap Grid System for this, which has a built-in grid system to handle responsive sizing.
or you can simply use CSS to define your styles for elements with-in a certain viewport size, using the CSS #media tag:
Your CSS would look like this example:
div {width:100px;}
#media (min-width:768px) {
div { width: 50px; }
}
What this does is makes all div's at 100px width, but when the browser is 768px or larger it changes the div sizing to 50px, as defined with-in the #media tag.
Therefore, you can use VBScript to generate the CSS script in the page, without having to write any javascript code. But Bootstrap may be your best bet to help build a responsive design easily/seamlessly. You may want to check it out.
EDIT: Since OP has clarified not to even load the content
You can make a cookie in javascript, and read it in your VBScript to check the viewport.
You can use jQuery for this:
$(window).resize(function(e){
var w = $(this).width();
if(w>768) document.cookie = "viewport=768;";
else document.cookie = "viewport=;";
});
This will bind an event listener on any time the user resizes the window, to check it's size, and if above 768px, it will write the cookie or empty if not.
Then check for the viewport cookie using Request.Cookies("viewport")
Or better yet since you're concerned about performance, you can use Ajax to build your page when a certain viewport size is hit.
Again, you can use jQuery for this and bind to the window resize event.
contentloaded = false;
$(window).resize(function(e){
var w = $(this).width();
if(w>768 && !contentloaded) {
$.get(url,function(data){
$("div").html(data);
contentloaded = true;
});
}
});
I would use ajax to do this, since I'd want to show the content without the user having to refresh the screen as you would have to by using the cookie solution.
I just don't see anyone talking about this exact issue out there. Looking to have site fit any screen exactly with no scroll. Certain elements being fixed ratio (logo, video players, etc) means other areas have to expand/contract amorphically to accomodate their fixed behavior that can't ever go past 100% width or height. Difficult to explain, but the behavior in sassmeister gist below shows it working. To do this, I need to be able to define widths in terms of heights, and vice-versa (width = 56.25% of height, etc)
I can make it work using vh, vw, vmin, a bunch of calc functions etc... but browser support is patchy, and I'm unaware of a polyfill to smooth all that out. My vh, vw, calc solution below:
http://sassmeister.com/gist/3dee56a4092a86cf070a
Only other pure css I'm aware of that even begins to address this is the percent padding trick tying padded height to parent width, but this alone isn't enough. I need to be able to use min, max statements, and tie width and height going both ways.
So... unless I'm mistaken, #media queries only ever return true/false, so they can't provide an actual viewport measurement to use, right? That's what I really need... a pixel accurate measurement of the available viewport height and width.
What's the solution here? Should I use javascript to get those exact dimensions, then do all the arranging in javascript? Use JS to get the variables, then pass them on to the css?
Something like this: https://gist.github.com/scottjehl/2051999 and a method to import those returned values into css should work, no? Is that slowing the site down too much to have the js call first before anything else happens?
Also, need to find the right way to do all these calculations. Should I just be using javascript to do all the calcs and leaving stuff like the following out of css completely?
$gutter: calc(((100vh + 100vw) / 2) * 0.04)
Then using that variable inside another function:
$column-width: calc(100vw - (1.7778 * (100vh - 2 * $gutter)) - 3 * $gutter)
You get the idea. I think I'm nearing the end of what I can do with the css. JS solution? Hybrid? Something else?
thx.
It sounds like media queries are what you're looking for.
You can use the following to target screens with a max width of 1200 px and a min width of 800:
#media all and (max-width: 1200px) and (min-width: 800px) {
//some css here
}
Check out the way bootstrap-sass implements containers here.
Also check out the other SO answer about media queries.
You can even specify landscape and portrait layouts.
#media (orientation:portrait) { ... }
Or aspect ratio:
#media screen and (device-aspect-ratio: 16/9) { ... }
I hope this helps. You can use some of those fancy gutter calculations inside of/with media queries and that should simplify things a bit.
This javascript will return the screen height:
var x = "Total Height: " + screen.height;
document.getElementById("demo").innerHTML=x;
Width:
var x = "Total Width: " + screen.width;
document.getElementById("demo").innerHTML=x;
Some JQuery:
$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document
$(window).width(); // returns width of browser viewport
$(document).width(); // returns width of HTML document
I have a span that needs its font-size value changed when the window is resized. I do that with the jquery code:
$(window).on('resize', function () {
y = $(window).height();
x = $(window).width();
if (y > 500) {
$('#testing').css("fontSize", "50px");
} else if (y < 500) {
$('#testing').css("fontSize", "10px");
}
});
and may also do an equivalent with the css code:
#media screen and (max-height: 500px)
{
#testing{
font-size: 10px;
}
}
which is actually more efficent? Is one solution more acceptable/common? Is there a better way to do this? And also which way is more acceptable on a mobile device? Is there a better way to do this on a mobile device?
Which is actually more efficent? Is one solution more acceptable/common?
Performance wise, CSS is way better. Using media queries will be faster than processing a function on every resize (which are called numerous times). Of course, you could insert a throttle and call it once when the window didnt resize in a said lapse of time, but even there, media queries will be faster.
Furthermore, Javascript window width may not alway be the same than the CSS media queries. Scrollbar can change value and other things may also affect the width. You have to use a function to check the real width, which consume even more juice. It look like that :
function viewport() {
//Get the current view port
var e = window, a = 'inner';
if (!('innerWidth' in window )) {
a = 'client';
e = document.documentElement || document.body;
}
return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };
}
The down side of mediaqueries is the support, it is not supported in old IE. But there is of course some libraries that solve this issue.
Is there a better way to do this?
Not really, media queries are fast and efficient.
And also which way is more acceptable on a mobile device? Is there a better way to do this on a mobile device?
Most mobile browser support media queries. You should always use media queries on mobile, it is the prime reason why they exist.
Self shaming promotion and why Javascript media queries could be usefull
There is a case where javascript could be used as media queries. It would be usefull if you want to change the font-size dynamically depend and a screen size with a ratio. Doing that with media queries would be long and painfull since you'd have to do 20~30 media queries depending on the smoothness.
I've created a plugin changing font size depending on the screen for that reason.
https://github.com/kagagnon/Responsive-Font
If you're not worry about cross browser compatibility problem since media queries is CSS3 which is not supported for old browsers such as IE7, IE8... then I'd suggest you to use CSS over javascript.
In the other hand, beside better in handling cross browser compatibility issues, if a task cannot be achieved through CSS then you should probably go with javascript instead.
In short, I'm always prefer CSS than Javascript :)
Depends, using a responsive design will allow you to do much more than just change the font size.
vw units is a good option if you can. See this article
As my opinion ,You have to prefer JQuery,because the reason is : It is a library that fully support most of devices and auto configure them self as per the environment need ! You have to not think about what the browser need only put a line of code jquery do it in its own way. And place apply your style with respect to device or browser !
I am working on some mobile web application (it my firs time) and I faced such problem: despite the use of special mobile frameworks some sizes of modal windows are not correct on small screens. For example i have an ipod and ipad:
On iPod the size of buttons is already changed for a bit. So, may be there is any way to identify screen size like category (small, normal, large or may be just get list of sizes to the array) using js may be and then based on it i would do some basic changes in the source.
use jquery to find current width of window
$(function() {
showWidth($(this).width());
$(window).resize(function() {
showWidth($(this).width());
});
});
function showWidth(wid) {
var width = parseInt(wid);
if (width < 1440) {
//use wider stylesheet
} else if ((width >= 901) && (width < 1440)) {
//use wide stylesheet
} else {
//use small stylesheet
}
}
You can get screen height width using jquery like
alert("Width :"+$(window).width()+" Height :"+$(window).height());
You does not get size specification like small,big etc.
You have write responsive code yourself using screen width and height.
I would strongly suggest to use css media-queries instead of identifying the width in js and serving stylesheets based on that.
CSS Media Queries are standradrized: http://www.w3.org/TR/css3-mediaqueries/
Also see examples and usage here: http://css-tricks.com/css-media-queries/