CODEWITHSUNDEEP
javascripthtmlimage
m3tsys
m3tsys

Reputation: 3969

How to change the logo depending on page with javascript?

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>

Upvotes: 3

Views: 4982

Answers (3)

Vahid Hallaji
Vahid Hallaji

Reputation: 7447

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 */
    }
}

Upvotes: 1

enriquecastl
enriquecastl

Reputation: 840

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>

Upvotes: 2

Graham Swan
Graham Swan

Reputation: 4828

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/

Upvotes: 3

Related Questions