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
Related
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 */
}
}
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'm wrote a code for hide and text under screen resolution 860px.. But it doesn't work where am i did the mistake ?
Example at CodePen
Thanks for any help guys !
var width = $(window).width(), height = $(window).height();
if ((width >= 1024)) {
$('#px').show()
} else {
$('#px').hide()
}
p {display: inline;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container"><p id="px">www.</p>mywebsite.com</div>
CSS
You just do this with pure CSS negating the need for any JavaScript or page loading. This way is much better and supported than using JavaScript
#media (max-width: 860px) {
#px {
display: none;
}
}
<div id="px">Text to be hidden under 860px</div>
JavaScript / jQuery
If you do need it to be done within JavaScript/jQuery, your code is out by a small amount.
$(document).ready(function() {
var width = $(window).outerWidth();
if (width <= '860') {
$('#px').hide();
} else {
$('#px').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="px">Text to be hidden under 860px</div>
You don't need javaScript, only use css:
#media screen and (max-width: 1024px){
#px{display: none}
}
#media screen and (min-width: 1024px){
#px{display: block}
}
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 trying to set my logo to display a bigger logo for desktops and a smaller image for smaller devices like smartphones...
This is what i've tried until now, but it doesn't works.
Can somebody help me? What's wrong with my code?
<html>
<head>
<script type="text/javascript">
function load(){
document.getElementById('logo').src = displaylogo();
}
function displaylogo(){
if ($(window).width() < 1024) {// code for small viewports
return "http://i.imgur.com/ozYV740.png"; // small logo
}
else {// code for large viewports
return "http://i.imgur.com/RMV6Af0.png"; //big logo
}
}
</script>
</head>
<body onload="load()">
<img src="http://i.imgur.com/RMV6Af0.png" id="logo" name="logo" title="The original logo is the big logo"/>
</body>
</html>
You should be using CSS media queries to handle how your web page displays on different devices. These queries allow you to apply different styles depending on the width of the user's screen.
For example, to resize your logo for phones, try:
/* Desktops (>480px) */
#logo {
width: 200px;
height: 200px;
}
/* iPhone landscape (480px) */
#media screen and (max-width: 480px) {
#logo {
width: 100px;
height: 100px;
}
}
Tutorial: http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
Try using media queries
<head>
<style>
.logo {
width: //logo-width
height : //logo-height
background-image : url('http://i.imgur.com/RMV6Af0.png');
}
#media only screen
and (max-device-width : 1024px) {
.logo {
width: //logo-width
height : //logo-height
background-image : url('http://i.imgur.com/ozYV740.png');
}
}
</style>
</head>
<body>
<div class="logo">
</div>
</body>
Because of you do not use jquery Try this in your case :
To work in JS:
if (window.innerWidth < 1024) {// code for small viewports
//^^^^^^^^^^^
If you want to use jquery:
function displaylogo() {
if ($(window).width() < 1024) {
$("#logo").attr("src","http://i.imgur.com/ozYV740.png"); // small logo
}
else {
$("#logo").attr("src","http://i.imgur.com/RMV6Af0.png"); //big logo
}
}
$(window).resize(function () {
displaylogo();
});
$(document).ready(function () {
displaylogo();
});
I suggest to use CSS instead:
<span id="logo"></span>
CSS:
#logo {
display: inline-block;
width: 50px;
height: 50px;
background: url(http://i.imgur.com/ozYV740.png) no-repeat; /* small */
}
#media screen and (min-width: 1024px) {
#logo {
width: 100px;
height: 100px;
background: url(http://i.imgur.com/RMV6Af0.png) no-repeat; /* big */
}
}