How to write a css media query to get the sidebar snap to lie between header and page content?I want this change to happen when the page width drops below 500 pixels.
I am doing this for chrome browser.
Please have a look at the body of my HTML File.
The Contents of the body is filled using Javascript later. Buttons are created and appened to the "buttonAttachPoint". The contents is got in a form of HTML-Elements String and appeneded to the pageAttachPoint.
I have currently used the following css code to set the number of columns.
-webkit-column-count:3;
-webkit-column-gap:20px;
-webkit-column-rule:3px;
The following media query does not seem to have any effect:
#media screen and (min-width: 500px) {
body
{ background-color: #0f0;
-webkit-column-count:1; }
}
Any help would be appreciated.
I think you mixed up max and min.
#media screen and (max-width: 500px){
body {
background-color: #0f0;
-webkit-column-count:1; }
}
}
Example: http://jsfiddle.net/HnPSF/1/
Related
I pulled a snippet of JS from a response to:
How can I make content appear beneath a fixed DIV element?
The JS works great but only when the page first loads, if the screen size changes for whatever reason, the rendered page is then in error until refreshed.
I currently have this:
$(document).ready(function() {
var contentPlacement = $('#topMenu').position().top + $('#topMenu').height();
$('body').css('margin-top',contentPlacement);
$('#navWindow, #searchWindow').css('margin-top',-contentPlacement);
});
Is there a way to have the outputted CSS dynamically change at the moment the screen size updates? This will also be helpful while developing the site.
This will be for displaying the content on my page underneath a fixed menu.
UPDATE
The sample of the site is located here: http://wp19.knowgreaterpartnership.com/
Additionally to the ready Callback function you can also use jquery.resize. You just have to execute the same code on the resize callback. Resize will be called every time the window size changes.
For the sake of less code redundancy I introduced a new method adjustContent:
$(document).ready(adjustContent);
$(window).resize(adjustContent);
function adjustContent() {
var contentPlacement = $('#topMenu').position().top + $('#topMenu').height();
$('body').css('margin-top',contentPlacement);
$('#navWindow, #searchWindow').css('margin-top',-contentPlacement);
}
I know you're asking about using jQuery to change CSS, but what you really should be doing is using Media Queries for your css so that it's declarative instead of script/event initiated.
Ex: (https://www.w3schools.com/Css/css3_mediaqueries_ex.asp )
/* Set the background color of body to tan */
body {
background-color: tan;
}
/* On screens that are 992px or less, set the background color to blue */
#media screen and (max-width: 992px) {
body {
background-color: blue;
}
}
/* On screens that are 600px or less, set the background color to olive */
#media screen and (max-width: 600px) {
body {
background-color: olive;
}
}
I have an HTML Website. I want to display it in an mobile app using HTML code. But I wan't to block / not load the original website background because it's very large and you can't see it mobile.
Is there a way to do it with HTML / CSS / JavaScript?
Use media queries to load the background image if the screen is larger than XX.
Add the media query to your CSS.
Change div to the element you're loading the background image on.
<style>
#media (max-width:500px) {
div {
background-image: none;
}
}
</style>
** EDIT **
With mobile-first being the correct approach, it would be preferred only to add the background image when the viewport reaches the required size.
<style>
#media (min-width: 644px) {
div {
background-image: url(/image/here.jpg);
}
}
</style>
CSS Media Queries is the best way to apply different styles for an HTML document in different resolutions.
so, if you want to apply a different style (here remove background image in mobile resolutions) you may use Media queries
Eg.
<style>
#media screen and (max-width:640px){
element{
background:none;
}
}
</style>
I have created horizontal scrolling parallax web site for that web site I want to add a background images based on the browsing device
for example
from normal pc <img src="bg.png">
from tablet <img src="bg-500px.png">
from smaller mobiles <img src="bg-small.png">
How can i get a solution for this I tried <body onload="fun()">
in
fun(){
var bg=d.getEBI("img id");
if(window.innerwidth=referenceWidth)
{
bg.src=respective-img.png
}
}
One approach could be doing it through CSS using media query CSS Media Queries. Instead of the <img> use a <div> with background image
<div class="background"></div>
/*For mobile*/
#media (max-width: 480px) {
.background {
background-image: bg-small.png;
}
}
/*For Tablet*/
#media (max-width: 1024px) {
.background {
background-image: bg-500.png;
}
}
/*For Desktop*/
#media (min-width: 1024px) {
.background {
background-image: bg.png;
}
}
If you want to do it through JavaScript as you have mentioned in the question then it is a bit tricky. You need to do it in the following steps
Step 1. Use some external library to detect device type (e.g. Device detection in JS)
Step 2. Use a custom HTML tag say <myimg> (HTML custom element) instead of <Img> tag
Step 3. Register an event listener for this custom HTML tag and within this event listener change the image src type based on the device type detected in Step 1.
For my first responsive design I use css #media with display: none; or display:table-cell to show or hide sidebars. This works fine, I need the display:table-cell for a three divs layout.
CSS example:
#div_right { display: table-cell; }
#media screen and (max-width: 700px) { #div_right {display: none; } }
JS is standard ToogleDisplay function (with e.style.display = "table-cell"; in place of e.style.display = "block"; )
On small windows/screen the sidebars are hidden, but a new div with 2 options to display these 2 same navigation sidebars appears: clicking on a link with embedded javascript, allows to toogle display of a sidebar div. It also works fine.
The problem comes when I show then hide the sidebars by clicking on the JS links (on small windows), and then resize the window to a larger width: the sidebars are not displayed this time!
Is there a #media condition to specify "on larger width than xxx" do force display:table-cell; ?
I don't want to use jQuery, and a solution with CSS would be nice.
Just use min-width instead of max-width:
#div_right { display: table-cell; }
#media screen and (min-width: xxx) { #div_right {display: none; } }
Very simple, tells the browser that these rules are to be used if the browser is larger then xxx.
If you want to know everything about #media queries, check out the Mozilla Docs On It.
Could be very helpful to you.
To see it in action, see this JSFiddle
[EDIT]
As noted in the other answer, if you are using jquery, it will override the #media rule.
The correct way to do this, not using !important is to use jquery:
In your js:
$(".menu").show().css("display","block");
This JS shows it as display:block;
Are you using jquery to $.('el').css("display","none") or .hide() the elements? If so jquery will add the style as an inline-style - hence overwriting your media query.
You can try to add !important to your CSS code (the media query) and it might work.
See: http://www.iandevlin.com/blog/2013/05/css/using-important-in-your-media-queries
Also please note the follow rule of thumb:
CSS style is applied in the following hierachy/priority:
!important is always highest priority
The closer styles to your elements will override styles defined before:
inline styles are higher priority
CSS styles are lowest priority
Please check: developer.tizen.org/dev-guide/2.2.1/org.tizen.web.appprogramming/html/guide/w3c_guide/dom_guide/html_priorities_css.htm
Also you might want to use not only min-width, but rather a range like:
#media screen (min-width: xxx) and (max-width: yyy){ }
Check out some standard templates from: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
I want my page to scale awesome to fit all possible screens on all devices, so I've used an idea to change em size of the root element. All child elements have sizes in em;
Resizing of the page and zooming should also be supported well.
I'm currently having 200 lines of such a funny css code:
.........
#media (max-width: 400px) {
#vb { font-size: .8px}
}
#media (max-width: 350px) {
#vb { font-size: .7px}
}
#media (max-width: 320px) {
#vb { font-size: .64px}
}
.........
I would like to ask for a pretty library that would generate this code automatically.
I am sure that this huge css code should be generated on frontend, because those 200 - 1000 lines consume kilobytes.
PS: What about correctness of my approach?
The solutions could be:
what if I calculete the page size by JavaScript and put just two lines of code like:
var fontSize = calculateFS();
$('#vb').style({sizeSize: fontSize});
This code works good if we are not going to resize the window or zoom in-out. But if I'm going to catch events onzoom or onresize, there are serious lags in interface.
any other ideas form the community?
Thank you for attention
Why not consider responsive typography using rems?
This article explains this in much more detail. A short excerpt:
#media (max-width: 640px) { body {font-size:1.2rem;} }
#media (min-width: 640px) { body {font-size:1rem;} }
#media (min-width: 960px) { body {font-size:1.2rem;} }
#media (min-width: 1100px){ body {font-size:1.5rem;} }
This would seem like a far better option than using ems or pixels, because rems are relative to the body element, not the parent element.
I might have misinterpreted this, but it doesn't really seem like you need to use so many media queries, or even any JS at all.
If you just want to keep media queries maintainable, perhaps consider using Compass and Sass? http://css-tricks.com/media-queries-sass-3-2-and-codekit/