I have a navbar on a website and after reaching a certain point of the height(y axis). I'd like to manipulate the css Code of my navbar for example the background color.
So far so good now I check with an if statement the height and if it overcomes a certain value I manipulate the css of the navbar class....but how can i make sure this gets checked constantly i have used the setInterval method but im not sure if this is a good solution...anyone who can help me out?
Thanks in advance!
function update() {
if (currentHeight>600) {
$(".class").css({"background-color":"blue"});
} else {
$(".class").css({"background-color":"transparent"});
}
}
setInterval(update, 10);
You can do it with jQuery like this:
$(window).resize(function () {
if ($(window).height()>600) {
$(".class").css({"background-color":"blue"});
} else {
$(".class").css({"background-color":"transparent"});
}
});
You can also do it without jquery with using CSS #media tags:
.class {
background-color:blue;
}
#media screen and (max-height: 600px) {
.class {
background-color:transparent;
}
}
If you want to change CSS when your screen is too small, you might not need jQuery:
#media screen and (max-height: 600px) {
.class {background-color:transparent}
}
Related
I'm trying to hide a specific div using a media query which is working fine. However, I need it to show when that div is within another specific div. Is this possible. This is the CSS:
#media (min-width: 665px) {
.mrbcircle-ipad:not(.link-inside.mrbcircle-ipad) {
position:absolute;
display:none;
}
}
so .mrbcircle-ipad should be hidden over 665px unless it's within .link-inside.
Currently this is showing .mrbcircle everywhere so I know it's wrong. How can I fix this?
Thanks
Anthony
#media (min-width: 665px) {
.mrbcircle-ipad {
position:absolute;
display:none;
}
.link-inside .mrbcircle-ipad{
position relative;
display: block;
}
}
Use two rules inside the media query: The first to hide it when the viewport is wider than 665px, the second to make it visible if it's inside a certain parent:
#media (min-width: 666px) {
.mrbcircle-ipad {
position:absolute;
display:none;
}
.link-inside .mrbcircle-ipad{
display: block;
}
}
I am attempting to add some print functionality to my page, but I am having an issue where when I print, it is printing as if it is mobile. How can I make it so that when someone hits print it prints the desktop version?
$('.print-btn').click(function(e) {
window.print();
});
.visible-desktop {
display:none;
}
#media only screen and (min-width:768px) {
.visible-desktop {
display:block;
}
.visible-mobile {
display:none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="visible-desktop">Viewing from desktop</div>
<div class="visible-mobile">Viewing from mobile</div>
</div>
<a class="print-btn" href="#">Pring</a>
You can add an #media print rule at the bottom of your stylesheet:
#media print {
.visible-desktop {
display:block;
}
.visible-mobile {
display:none;
}
}
only screen
This excludes print. If you want to include print, don't write that.
You should pick one state (probably desktop) and make it the "default", by moving that state outside media queries.
The other states should override the default state's properties in media queries.
I currently have a CSS with rules which are duplicates in both .small and the media query for #a, because I want the same behaviour when browser width is smaller than 600px and when a button is clicked.
In my real case, the rules are very long, and I would like to avoid to duplicate them. How to deduplicate such a CSS?
$('#b').click(function(){ $('#a').addClass('small'); });
#a { background-color: green; }
.small { background-color: yellow !important; /* many other rules */ }
#media (max-width: 600px) {
#a { background-color: yellow !important; /* many other rules */ }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="a">Hello</div>
<input id="b" type="button" value="Change" />
I don't think there's a way to do this in pure CSS, this is one of the things you can solve with precompilers like SASS where you can inject CSS rules anywhere you want with variables or mixins for example
I can think of Javascript solution to your problem.
window.onresize = function(event){
if(window.innerWidth < 600px){
// add the class to the element
}else{
// remove the class
}
}
I don't think you can achive what you want in any other way without using precompiler.
You'd have to use a CSS pre-processor to do this.
Otherwise you'd have to use jQuery to toggle some other class based on viewport width or assign the .small styles to #a as well, then make a media query to undo it all when you don't want it to look like that.
Is there some type of value that can be assigned any arbitrary string using CSS? For example, "large" or "small".
My purpose is to watch a generic div with display: none and change this as-of-yet-unknown type of value "large" or "small" via a media query. Javascript will watch for this change and use the assigned value.
Example HTML:
<div class="state"/>
Example corresponding SASS:
.state {
#media #{$isSmall} {
unknown-type-of-value: "small";
}
#media #{$isLarge} {
unknown-type-of-value: "large";
}
}
You can't change the value of a <div> with CSS, but you can use :after to have css "append" text to it.
Something like
#media screen{
div.test:after{
content: "small";
}
}
#media print{
div.test:after{
content: "large";
}
}
DEMO: http://jsbin.com/edirad/1 (try to print it, and look at the preview)
I'm trying to use CSS3 media queries to make a class that only appears when the width is greater than 400px and less than 900px. I know this is probably extremely simple and I am missing something obvious, but I can't figure it out. What I have come up with is the below code, appreciate any help.
#media (max-width:400px) and (min-width:900px) {
.class {
display: none;
}
}
You need to switch your values:
/* No less than 400px, no greater than 900px */
#media (min-width:400px) and (max-width:900px) {
.foo {
display:none;
}
}
Demo: http://jsfiddle.net/xf6gA/ (using background color, so it's easier to confirm)
#Jonathan Sampson i think your solution is wrong if you use multiple #media.
You should use (min-width first):
#media screen and (min-width:400px) and (max-width:900px){
...
}
just wanted to leave my .scss example here, I think its kinda best practice, especially I think if you do customization its nice to set the width only once! It is not clever to apply it everywhere, you will increase the human factor exponentially.
Im looking forward for your feedback!
// Set your parameters
$widthSmall: 768px;
$widthMedium: 992px;
// Prepare your "function"
#mixin in-between {
#media (min-width:$widthSmall) and (max-width:$widthMedium) {
#content;
}
}
// Apply your "function"
main {
#include in-between {
//Do something between two media queries
padding-bottom: 20px;
}
}
.class {
display: none;
}
#media (min-width:400px) and (max-width:900px) {
.class {
display: block; /* just an example display property */
}
}