I have a css class "fadeout" that I want to disable if viewport width less than 786px
something like this
#media only screen and (max-width: 786px) {
.fadeout {doesItWork?:noItDoesNotWork!;}
}
You see the class does something regarding " $(window).scrollTop(); " in jquery which i don't think would be appropriate in mobile devices here is the code I got and it from https://tympanus.net/Tutorials/FixedFadeOutMenu/
//fadeout script
$(function() {
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();
if(scrollTop != 0)
$('.fadeout').stop().animate({'opacity':'0.2'},400);
else
$('.fadeout').stop().animate({'opacity':'1'},400);
});
$('.fadeout').hover(
function (e) {
var scrollTop = $(window).scrollTop();
if(scrollTop != 0){
$('.fadeout').stop().animate({'opacity':'1'},400);
}
},
function (e) {
var scrollTop = $(window).scrollTop();
if(scrollTop != 0){
$('.fadeout').stop().animate({'opacity':'0.2'},400);
}
}
);
});
I am open to javascript/jquery/plugin but would prefer a css only solution
Any help much appreciated thanks in advance
Why not just define the CSS for the class using the opposite media query?
#media only screen and (min-width: 787px) {
.A {
// style rules here.
}
}
Try to disable the parameters you want by using !important
I.E.
Greater that 768px
.A {
margin: 10px;
width: 120px;
}
Less then 768px
#media only screen and (max-width: 786px) {
.A {
margin:0px !important;
width: 120px !important;
}
}
Not entirely sure what you mean by disable but you can use display:none or visibility:hidden. With visibility:hidden the element still takes up space on the page, you just can't see it while display:none will not render the element at all.
#media screen and (min-width: 787px) {
.A {
display: none !important; /* If you just want it hidden */
pointer-events: none; /* If you don't want the user to be able to click */
}
}
Related
Hi I'm trying to change an image as the window width changes without refreshing the page.
$(document).ready(function(){
if($(window).width() <= 600) {
$('#img').attr('src','images/image.png');
$('#img').css({"width": "50px"});
};
});
This is the Jquery code that I've written but it only works when I refresh the page. how do I change the image when the width of window reaches 600px responsively?
I'm not sure if I should use css, ajax or jquery. thank you
This will work..
function adjustImage(){
if($(window).width() <= 600) {
$('#img').attr('src','images/image.png');
$('#img').css({"width": "50px"});
};
}
$(document).ready(function(){
adjustImage();
});
$( window ).resize(function() {
adjustImage();
});
But we can do with CSS also as follow..
#media screen and (max-width: 600px) {
#img{
width:50px;
}
}
The #media rule can be used for the desired effect.
Although I would add that unless you are using different images, it's better to let CSS resize the image. It does it very well.
Open snippet in full-screen mode and resize your window from very small to big to see the effect
body {
background: #111;
margin: auto
}
#media screen and (max-width: 599px) {
.simages {
display: block
}
.bimages {
display: none
}
}
#media screen and (min-width: 600px) {
.simages {
display: none
}
.bimages {
display: block
}
}
<body>
<img class="simages" src="https://files.graphiq.com/stories/t2/The_16_Dogs_That_Won8217t_Make_You_Sneeze_2060_2848.jpg">
<img class="bimages" src="https://s-media-cache-ak0.pinimg.com/736x/f0/26/05/f0260599e1251c67eefca31c02a19a81.jpg">
</body>
This is always achieve with css media query
you can use css to do this. Give max-width : xxx px; to set maximum width of image and width in percent. so it will automatically resize according to screen size.
img
{
max-width : 550px;
width : 75%;
}
refer : http://www.w3schools.com/css/css_rwd_images.asp
I am trying to make my menu stay at the top of the browser except on mobile devices (i.e #header below 400px), this is my code which isn't throwing up any errors when i check is JSHint, but at the same time isn't working
$(document).ready(function () {
if ($('#header').width() > 400) {
$("#menu").sticky({
topSpacing: 0
});
}
});
$(document).ready(main);
Could really use some help if anyone has an idea?
You should try this :
$(document).ready(function () {
if ($('#header').css('width') > 400) {
$("#menu").sticky({
topSpacing: 0
});
}
});
Thanks for the help everyone, got it working now, the correct code was
$(document).ready(function(){
if($(window).width() > 450){
$("#main").sticky({topSpacing:0});
}
});
Here's the fiddle for an example
http://jsfiddle.net/n8L301jb/6/
Here's a CSS solution. You can use #media (min-width: 400px) to specify certain rules that only apply when the window width is 400 or greater.
CSS:
#media (min-width: 400px) {
#menu {
position: fixed;
top: 0px;
}
}
Here's a fiddle.
I am trying to add text to the images in contentflow but as I scroll through them I need the text to resize so the text does not move.
http://www.jacksasylum.eu/ContentFlow/index.php
I don't know if there's automatic way of doing this, but as of responsive web design you can hardcore the font size through CSS or using jQuery.
jQuery
$(window).on('resize', function(event) {
if($(window).width() < 400) {
$('.CAPTIONCLASS').css("font-size", "20");
}
else {
$('.CAPTIONCLASS').css("font-size", "10");
}
});
CSS
#media screen and (max-width: 400px) {
.CAPTIONCLASS {
font-size: 20px;
}
}
#media screen and (max-width: 100px) {
.CAPTIONCLASS {
font-size: 15px;
}
}
I am developing a site and I want to make a script that will detect when the page is more than 500px and when it is below so I can make changes to the code. My current code has some links at the end of the page, like a footer, and when it is below 500px I want them to come close to each other for example;
<div class="footer-titles">
<ul class="footer-titles-ul">
<li><h class="titles">Link 1</h></li>
<li><h class="titles">Link 2</h></li>
<li><h class="titles">Link 3</h></li>
</ul>
</div>
And my css
.footer-titles{width: auto; min-width: 800px; left: 0px; right: 0px; position: absolute; bottom: 210px;}
.footer-titles-ul {list-style: none; padding-left: 120px;}
.footer-titles-ul li {padding-right: 90px; display: inline;}
So when the page is below 500px I want the padding-right from the .footer-titles-ul li to be 30px but, if the page gets back to over 500px to revert back to normal.
You don't need JavaScript for this and you shouldn't use JavaScript for this. You want CSS3 Media Queries (Unless you need old browser support that's not possible with a polyfill).
You would want something like this to get the change:
#media screen and (max-width: 500px) {
/* UNDER 500px CSS here */
.class{
color: red;
}
}
Using media queries is the way to go. Just add this to the bottom of your CSS file:
#media only screen and (max-width: 500px) {
.footer-titles-ul {padding-right: 30px;}
}
If you want jQuery, I think this would work for you. But then again, I would recommend CSS media queries as the others say.
$(document).ready(function(){
var detectViewPort = function() {
var Wwidth = $(window).width();
if (Wwidth < 500){
$('.footer-titles-ul li').css('padding-right', '30px');
}
if (Wwidth > 500){
$('.footer-titles-ul li').css('padding-right', '90px');
}
};
$(function(){
detectViewPort();
});
$(window).resize(function () {
detectViewPort();
});
});
Trying to write a small script which adds/removes classes based off of window with,
any help would be appreciated.
<script type="text/javascript">
$(document).ready( function() {
if ($(window).width() < 500) {
$('.single-post-rating').removeClass('col-xs-3');
$('.single-post-rating').addClass('col-xs-12');
$('.guide-excerpt').removeClass('col-xs-9');
$('.guide-excerpt').addClass('col-xs-12');
}
else {
$('.single-post-rating').addClass('col-xs-3');
$('.single-post-rating').removeClass('col-xs-12');
$('.guide-excerpt').addClass('col-xs-9');
$('.guide-excerpt').removeClass('col-xs-12');
}
});
</script>
I think you're after the viewport width.
You can access that with
var viewPortWidth = document.documentElement.clientWidth;
As an aside, you can accomplish a lot of good responsive layouts through CSS media queries alone.
If you want to continue on this path, this is one of the best solution to manage the width of the window:
add a control css class, with min-with property and assign that class to your container
css:
.mediaquerycontrol {
min-width: 0px;
}
#media (min-width: 992px) {
.mediaquerycontrol {
min-width: 992px;
}
}
#media (min-width: 768px) and (max-width: 991px) {
.mediaquerycontrol {
min-width: 768px;
}
}
#media (min-width: 1200px) {
.mediaquerycontrol {
min-width: 1200px;
}
}
html:
<body>
<div class="container mediaquerycontrol">
...
javascript:
<script type="text/javascript">
$(document).ready( function() {
var pageWidth = parseInt($(".mediaquerycontrol").css("min-width").replace(/[^-\d\.]/g, ''))
if (pageWidth < 500) {
$('.single-post-rating').removeClass('col-xs-3').addClass('col-xs-12');
$('.guide-excerpt').removeClass('col-xs-9').addClass('col-xs-12');
}
else {
$('.single-post-rating').addClass('col-xs-3').removeClass('col-xs-12');
$('.guide-excerpt').addClass('col-xs-9').removeClass('col-xs-12');
}
});
</script>
but my advice is to use the features of bootstrap, and if you need smaller columns then you can increase the number of columns by default (eg from 12 to 24 if you're using the 2.3.2 version)
http://getbootstrap.com/2.3.2/customize.html