I'm trying to use something like the boostrap framework to selectively choose which css class to apply to a given element, based on the window size.
For example, in bootstrap, is there a way to choose which class to apply based on which of the xs, sm, md and lg divisions the browser falls under?
Is there any easy way to do this? Do I need to use javascript? Should I look towards something other than bootstrap?
It sounds like you need a media query.
They will allow you to selectively apply styling depending on the window size.
For example:
#media all and (max-width: 1000px) {
.element {
color: blue;
}
}
The above would apply a color of blue to the text of any html tag which has a class of element ONLY when the screen size width is below 1000px.
you can use css media queries or use javascript like
$(document).ready(function() {
var hei = $(window).height();
var wid = $(window).width();
if (hei <= 640 || wid <= 360) {
$('element').css('property','value');
}
});
Related
I'd like to check if an image width has more than 400px I'd like this image to get full div width. if image is less than 400px just print it in its normal size.
any ideas how to do this?
<div id="volta">
<img src="/img/volta.jpg">
</div>
#volta{
width:500px;
}
As far as I know, this does not exist in CSS. What you should do instead is use classes.
Define some CSS class that applies the styles you want:
.long_width {
background: blue;
}
Then you would use Javascript to check the width of the image. You don't need jQuery to do this you can do it in vanilla Javascript (unless you already have jQuery imported and need it for other things). Maybe something like this:
let elm = document.querySelector('[src="/img/volta.jpg]"');
let width = window.getComputedStyle(elm).getPropertyValue('width');
And then you would use Javascript to add and remove styles accordingly:
if (width > 400) {
elm.classList.add("long_width");
}
else {
elm.classList.remove("long_width");
}
The specific answer to your question depends on what your intentions are. But to keep your code simple, you should use Javascript to handle the logic and not depend on CSS selectors for things this complicated. Instead, create a CSS class that contains the styles you need, and then use Javascript to apply it based on the size of the user uploaded image.
Additionally, if the user uploads the image, you should load it into memory and check its attributes in memory rather than by depending on a DOM element. Something like:
let img = new Image();
img.src = "{data URL of img}"
You will need javascript / jQuery to work. Something like this:
$('img').each(function(){
if($(this).width() > 400){
$(this).css('width', '100%');
}
});
Here is also working jquery example.
Apply an id to the image, and with jquery check its width
If it is greather than 400px modify his width or add a class that does the same.
Example
$(document).ready(function(){
if($("#image").width() > 400){
$("#image").css("width", "100%");
}
else{
$("#image").css("width", "10px");
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img id = "image" src = "https://pm1.narvii.com/6919/98f453834b5d87a6c92118da9c24fe98e1784f6ar1-637-358v2_hq.jpg"/>
You can do it like FlokiTheFisherman (with %), or you can use "wv" instead of "%".
I recommend using vw.
img[width='400'] {
width: 100%;
}
For various reasons, I am creating a site (not online yet) that has separate pages for mobile. I want to add something to the "monitor" site which says "if the browser width is less than X pixels, view *mobilepagename.html instead of this page. What code can I add to the main site CSS to do this?
You can't switch pages with only CSS. You can do media queries to change styling based on screen size though.
#media screen and ( min-width: 'px' ) and ( max-width: 'px') {
/* Mobile Styles */
}
Or you can use
#media screen and ( max-width: 'px' ) {
/* Mobile Styles */
}
max-width and min-width don't need to be in pixels either. You can use a variety of units like vw, em, etc.
If you want to switch pages based on screen size you'll need to use Javascript.
if ( window.outerWidth < x ) {
window.location = 'newpage.html';
}
Edit
Combine the above Javascript with a resize event.
window.addEventListener('resize', function(e) {
if ( window.outerWidth < 1024 ) {
window.location = 'yourmobilepage.html';
}
});
I am using Twitter Bootstrap. I have a btn-group. I want the btn-group and btn-group-justified classes added for screens at or above 768px, and the btn-group-vertical class applied for screens at or below 767px. How can I do this?
This is a jQuery implementation. If you can't change the IDs to classes on your buttons, this is probably the best way I can think of to do it.
$(document).ready(function(){
var changeWidth = function(){
if ( $(window).width() < 768 ){
$('.btn-group-justified').removeClass('btn-group-justified').addClass('btn-group-vertical');
} else {
$('.btn-group-vertical').removeClass('btn-group-vertical').addClass('btn-group-justified');
}
};
$(window).resize(changeWidth);
});
You can use bootstrap's utility class. (.visible-xs)
http://getbootstrap.com/css/#responsive-utilities
You basically create contents that will only be visible if current screen is below 768px. And then add the class you want.
I would like to present a demo of a tablet application on a website (targeting desktop browsers).
I chose an iPad 2 for the demo whose resolution is 1024x768. Adding an iPad transparent graphic cover, the demo final size is 1210x1315px.
With such a resolution, most of the screens will be too small to display the demo properly.
I don't want to resize manually all the design, or to use CSS transform without knowing the relevant scale. Therefore, I'm looking for a way to resize automatically the design according to the available display resolution.
I tried to use the #-viewportproperty with no success...
Here is my non working code:
#media (min-height: 1400px) { /* if the screen's height is smaller than 1400px... */
#-viewport{
height:1400px; /* ... then, let's pretend it's 1400px high*/
}
}
I also tried this :
<meta name="viewport" content="height=1400, initial-scale=1" />
EDIT : jQuery workaround:
function resize(){
var documentHeight = $(document).innerHeight();
var targetedHeight = 1500;
if (documentHeight < targetedHeight){
var ratio = documentHeight / targetedHeight;
$('#container').css('transform','scale('+ratio+')');
$('#container').css('-webkit-transform','scale('+ratio+')');
$('#container').css('-moz-transform','scale('+ratio+')');
$('#container').css('-ms-transform','scale('+ratio+')');
$('#container').css('-o-transform','scale('+ratio+')');
}
}
This is what I finally did to achieve the expected result. I would have prefered a pure CSS solution...
I think you should be using media queries: Logic in Media Queries
I've put the following meta tag in my mobile HTML
<meta name = "viewport" content = "initial-scale = 1.0">
After I coded the css file for mobile version, I realized it doesn't look good on lanscape mode since it has a different width size. I get an empty 160 pixel area on the right side.
Other than writing a separate css file for landscape mode, is there any way getting out of this?
You also need to bind the orientation change event. You can do it with this sample script:
<script>
$(function(){
function orient() {
if (window.orientation == 0 || window.orientation == 180) {
$('.featured').css('display','none');
orientation = 'portrait';
return false;
}
else if (window.orientation == 90 || window.orientation == -90) {
$('.featured').css('display','block');
orientation = 'landscape';
return false;
}
}
$(window).bind( 'orientationchange', function(e){
orient();
});
})();
</script>
If your css layout is based on screen percents instead of absolute values it should allow you to adjust to any screen layout without multiple css files just fine.
Look at the percent option: http://www.w3schools.com/cssref/pr_dim_width.asp
Or if you had a layout you wanted constant, you could center it.
center align the outise wrapper.
body{
max-width:786;/*target size of page*/
margin:0 auto auto auto;
}
is the easiest way.
You can use media queries to detect orientation changes and run different styles for each all in the same stylesheet.
Also for mobile it's a good idea to you use % rather than px for widths - what units do you use for css for mobile web apps?
/* Portrait */
#media screen and (orientation:portrait) {
/* Portrait styles */
}
/* Landscape */
#media screen and (orientation:landscape) {
/* Landscape styles */
}