Well i do have the below query which is working fine without any problem. it is changing the background-image when i open it in explorer. and when i change the resolution it does not change the background-image automatically i need to refresh the page to change the background image.
i want to change it immediately when i change the screen resolution.
Please help....
<script type="text/javascript">
document.onload=pickIt()
function pickIt()
{
var w=screen.width
var h=screen.height
if(w==1440&&h==900)
{
//alert("1440x900");
document.getElementsByTagName('body')[0].style.backgroundImage="url('images/patterns/background-1440x900.png')";
}
else if(w==1280&&h==800)
{
//alert("1280x800")
document.getElementsByTagName('body')[0].style.backgroundImage="url('images/patterns/background-1280x800.png')";
} else if(w==1280&&h==768)
{
//alert("1280x768")
document.getElementsByTagName('body')[0].style.backgroundImage="url('images/patterns/background-1280x800.png')";
} else if(w==1280&&h==720)
{
//alert("1280x720")
document.getElementsByTagName('body')[0].style.backgroundImage="url('images/patterns/background-1280x800.png')";
}
}
</script>
You can use media queries for this. compatibility is still not the best, but it is growing: http://caniuse.com/#feat=css-mediaqueries
#media (max-width: 1200px) and (max-height:600px) {
html {
background: url(http://lorempixel.com/1200/600);
}
}
#media (max-width: 900px) and (max-height:500px) {
html {
background: url(http://lorempixel.com/900/500);
}
}
#media (max-width: 700px) and (max-height:500px) {
html {
background: url(http://lorempixel.com/700/500);
}
}
#media (max-width: 500px) and (max-height:300px) {
html {
background: url(http://lorempixel.com/500/300);
}
}
Demo: http://jsfiddle.net/32X57/
Why not simply document.getElementsByTagName('body')[0].onresize=pickIt ?
Related
I'm making small web pages for fun and hosting them on my server just to learn stuff and sometimes i send them to some people i know to show them what i've learn but i'd like it so that my web pages aren't accesible to people on small screen.
i tried doing
#media (max-width: 800px){
body{
height: 0px !important;
width: 0px !important;
}
}
but it didn't work
Try this:
#media (max-width: 800px) {
html {
visibility: hidden;
}
}
#media (max-width: 800px){
body{
display:none;
}
}
A better way to do this is using window.innerWidth.
You can make an onload function that checks the viewport width.
window.onload = () => {
if (window.innerWidth <= 800) {
document.body.innerHTML = 'Page not accessible on small screens.'
} else {
loadDOM(); /* maybe put [display: none] on body as default and remove it here */
}
}
This method is better for the user. Atleast they'll know that they have to access the site from a larger device
I am trying to descrease my website page to 80% for smaller pc screen I have tried a zoom approach using clientWidth but couldn't get any success.
For example :-
if (document.body.clientWidth < 1500) document.body.style.zoom = 0.8
But when i used this approach my website UI gets disturbed.
You can see in this image I am getting a white strip line which disturbs my whole website..
Any help with example would be appreciated!!!
Without any further Details I would assume, that there is some form of static height for the body in your stylesheet, this is why there is a white stripe at the end of the page.
May be you could take a look at this Question, which answers how to make a html body fullscreen.
But your approach seems legit, however you can achieve that also with plain CSS, i.e.:
<style>
#media screen and (max-width: 900px) {
body { zoom: 0.9; }
}
#media screen and (max-width: 800px) {
body { zoom: 0.8; }
}
#media screen and (max-width: 800px) {
body { zoom: 0.8; }
}
#media screen and (max-width: 700px) {
body { zoom: 0.7; }
}
</style>
So, I checked out Do something if screen width is less than 960 px to see how to execute something if the screen size was less than 960 px. However, it did not work for me. Their answer was this:
if ($(window).width() < 960) {
alert('Less than 960');
}
else {
alert('More than 960');
}
I tried it and it did work. I also already had an alert that told me the screen size;
var size = $(window).width();
alert(size);
and this worked, but this did not:
if (size < 1200) {
$("#mobileVersionDetected").css("display", "block");
}
else {
$("#mobileVersionDetected").css("display", "none");
}
Any ideas?
If I add $(window).width() into the actual if function rather than using a variable it works.
Try this:
if (size < 1200) {
$('#mobileVersionDetected').attr("style", "display: block");
}
else {
$('#mobileVersionDetected').attr("style", "display: none");
}
To echo #charlietfl, this is exactly what CSS Media Queries are for. They eliminate the need for script and are more efficient.
/* Baseline styles applied initially: */
body { background-color: #b200ff; /* purple */ }
p {
border:1px solid black;
background: white;
padding:5px;
text-align:center;
font:bold 1.2em Arial;
}
/*
When writing multiple media queries that don't explicitly
specify a range, the order of the queries matter!!!
For example:
With a viewport of 400px wide, both of the the following
two queries would apply:
#media screen and (max-width:400px) {...}
#media screen and (max-width:600px) {...}
So, the last one would be used.
*/
/*
Note that this query uses "min-width",
not "max-width" so that it handles
all viewports bigger than 1200
*/
#media screen and (min-width: 1201px) {
body { background-color: orange; }
p:after { content: "over 1200px"; }
}
/*
Here, we're using "max-width" to handle
viewports up to the specified sizes:
*/
#media screen and (max-width: 1200px) {
body { background-color: yellow; }
p:after { content: "961px to 1200px"; }
}
#media screen and (max-width: 960px) {
body { background-color: blue; }
p:after { content: "769px to 960px"; }
}
#media screen and (max-width: 768px) {
body { background-color: grey; }
p:after { content: "551px to 768px"; }
}
#media screen and (max-width: 550px) {
body { background-color: green; }
p:after { content: "321px to 550px"; }
}
#media screen and (max-width:320px) {
body { background-color: red; }
p:after { content: "up to 320px wide"; }
}
<p></p>
I have this HTML:
<li><i class="fa fa-iconname" style="vertical-align: middle;"></i>Link Name</li>
I am then using this media query in my CSS:
#media (max-width: 1000px) {
...
}
how can i change my tag to:
<i class="fa fa-iconname lg-2x" style="vertical-align: middle;"></i>
when the media query takes effect?
You can use pure css to achieve this by just replicating the list-item and toggle with media query like this:
HTML:
<li class="bigScreen"><i class="fa fa-iconname"></i>Link Name</li>
<li class="smallScreen"><i class="fa fa-iconname lg-2x"></i>Link Name</li>
CSS:
#media (max-width: 1000px) {
.bigScreen {
display:none;
}
.smallScreen {
display:block;
}
}
#media (min-width: 1001px) {
.bigScreen {
display:block;
}
.smallScreen {
display:none;
}
}
CSS is just a styling language, it cannot actually edit the HTML.
If you want to actually make changes to the HTML, use javascript:
jQuery:
var $homeIcon = $('.fa-iconname');
$(window).resize(function() {
if (window.innerWidth <= 1000) $homeIcon.addClass('lg-2x');
else $homeIcon.removeClass('lg-2x');
});
JSFiddle Demo
Vanilla JS:
var homeIcon = document.querySelector('.fa-home');
window.onResize = function() {
if (window.innerWidth <= 1000) homeIcon.classList.add('lg-2x');
else homeIcon.classList.remove('lg-2x');
};
JSFiddle Demo
You can not do that with css, but you can with JavaScript or jQuery.
fa-2x is essentialy: font-size: 2em; . So, you can do this:
#media (max-width: 1000px) {
.fa-iconname {
font-size: 2em;
}
}
Toggle class lg-2x on element li when the window size is less than 1000px .
$( window ).resize(function() {
if($(window).width() <=1000) {
$('i').toggleClass(function() {
if ( $( this ).is( ".lg-2x" ) ) {
console.log("class already there good to go");
} else {
$( this ).addClass("lg-2x");
}
}
}else{
$('i').removeClass("lg-2x");
}
});
You can create an equivalent class for bigger screen and leave it empty:
#media (min-width: 1000px) {
.lg-2x {
/* empty class */
}
}
and assign it to the html element from the beginning.
Use a class identified as a class whose name indicates it is affected by media queries: media-lg-2x{}
.media-lg-2x{}
#media (max-width: 1000px) {
.media-lg-2x {
font-size: 1em;
}
}
#media (min-width: 1000px) {
.media-lg-2x {
font-size: 2em;
}
}
I prefer to keep content confined to a single instance, and deal with display issues in code.
I have this code:
<h1 id="logo">
<a class="brand" href="/cgi-bin/koha/opac-main.pl">
CSU Library
</a>
</h1>
When my browser width is 701px and above, I don't want this to be seen (edit clarification: the element should be deleted from my html code); otherwise, the tag can be seen normally when my browser width is below 701px.
Is there any way I can do that? I don't know where to go from this code.
#media only screen and (min-width: 701px){
....??
}
This can be easily achieved in CSS if this is a responsive website you are building.
#media (min-width: 700px) {
#logo {
display: none;
}
}
For Modern browsers and IE9 and above you can use media queries like
#logo {
display: none;
}
#media (max-width: 701px) {
#logo {
display: block;
}
}
Try this as css
#logo { display : none; }
#media only screen and (min-width: 701px){
#logo { display : block; }
}
One method is to use media queries and another way is with jquery as :
$(document).ready(function(){
if($(window).width() > 701)
{
$("#logo").hide()
}
else
{
$("#logo").show()
}
});
OR
$( window ).resize(function() {
if($(window).width() > 701)
$("#logo").hide()
else
$("#logo").show()
});
According to the asker's comment... "but it leaves a blank space, and that's not what I want. I wanted it to be totally deleted from my html."
Yes, it is possible, but you'll need to use javascript. It is very simple with jQuery:
$("#logo").remove();