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 */
}
}
Related
When I resize browser and refresh page if div width greater than browser width the div is displayed none. How to make it without refreshing page. For example when I resize browser and if div width grater than browser width it will automatically without refreshing page displayed none.
var body = document.querySelector('body');
var div = document.querySelector('div');
if (div.scrollWidth > body.clientWidth) {
div.style.display = 'none';
}
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
div {
width: 350px;
height: 60px;
background-color: lightgray;
}
<body>
<div> </div>
<script src="main.js"></script>
</body>
Thanks.
This is not the right way to do it but you can listen to resize event to recheck your conditions.
let body = document.querySelector('body');
var div = document.querySelector('div');
if (div.scrollWidth > body.clientWidth) {
div.style.display = 'none';
}
window.addEventListener("resize", function() {
if (div.scrollWidth > body.clientWidth) {
div.style.display = 'none';
}else div.style.display = '';
});
body {
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
div {
width: 350px;
height: 60px;
background-color: lightgray;
}
<body>
<div> </div>
<script src="main.js"></script>
</body>
For this kind a responsive conditions best way to go is with css media queries. You can find more information here: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
Why don't you use CSS media rules ?
Media rules can apply different style on different sizes of screen.
For example:
#media screen and (max-width: 600px) {
div.example {
display: none;
}
}
docs for more informations about #media rules: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp
You can use media query for such requirement. Include below code in css.
#media only screen and (max-width: 600px) {
body {
display: none;
}
}
I'm informing about browser fingerprinting.
With javascript I can change and set screen resolution.
for example:
window.screen.__defineGetter__('width',function () {return 480;});
window.screen.__defineGetter__('height',function () {return 320;});
But if I use #media CSS3, I get the correct screen resolution (1600x900) of my pc:
#media screen and (min-device-height: 900px) {
body {
background-color: lightgreen;
}
}
change color with 900 and less and not with 480 or less
I tried this code and not works:
<!DOCTYPE html>
<html>
<head>
<script>
window.screen.__defineGetter__('width',function () {return 480;});</script>
<style>
body {
background-color: lightblue;
}
#media screen and (min-device-height: 901px) {
body {
background-color: lightgreen;
}
}
</style>
</head>
<body>
</body>
</html>
My question is: What I have to change to get that CSS read 480 instead 900?
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 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