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 ".png"; // small logo
}
else {// code for large viewports
return ".png"; //big logo
}
}
</script>
</head>
<body onload="load()">
<img src=".png" id="logo" name="logo" title="The original logo is the big logo"/>
</body>
</html>
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./ozYV740.png"; // small logo
}
else {// code for large viewports
return "http://i.imgur./RMV6Af0.png"; //big logo
}
}
</script>
</head>
<body onload="load()">
<img src="http://i.imgur./RMV6Af0.png" id="logo" name="logo" title="The original logo is the big logo"/>
</body>
</html>
-
5
Read up on
@media– jdepypere Commented Sep 4, 2013 at 15:44 - Are you using jquery? – Vahid Hallaji Commented Sep 4, 2013 at 15:44
- no, it's just that code, no jquery but i will try it if using jquery will resolve my problem. – m3tsys Commented Sep 4, 2013 at 15:45
-
2
that code won't work without jquery, its the jquery way to check window width. try
window.innerWidth < 1024if you really need a JS solution. – PlantTheIdea Commented Sep 4, 2013 at 15:46 - As @arbitter has suggested, use @ media to change how your one single image is sized rather than try and load two separate images. – Shaun Commented Sep 4, 2013 at 15:47
3 Answers
Reset to default 3You 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./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./RMV6Af0.png');
}
@media only screen
and (max-device-width : 1024px) {
.logo {
width: //logo-width
height : //logo-height
background-image : url('http://i.imgur./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./ozYV740.png"); // small logo
}
else {
$("#logo").attr("src","http://i.imgur./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./ozYV740.png) no-repeat; /* small */
}
@media screen and (min-width: 1024px) {
#logo {
width: 100px;
height: 100px;
background: url(http://i.imgur./RMV6Af0.png) no-repeat; /* big */
}
}