Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #20681

    hi there

    my site is here:

    http://kinggeorgestation.com/

    pwd protected: kgs1234

    my client wants a full width logo for desktop, so i have one that is 140 h x 880 w (i have adjusted some css to make this work), but of course when scaling down to phone sized it is too small

    is there a way that i can load a different logo at that size using the media queries, or is there a way for me to load the long logo in 2 pieces, and then float them left to stack when seen on small devices? please advise

    thanks, jodi

    #108648

    Open up js/avia.js and replace following line:

    avia_ajax_call();

    with:

    avia_ajax_call();
    if(isMobile()) jQuery("#top h1.logo a img").attr('src', 'http://my-mobile-logo.jpg');

    and instead of http://my-mobile-logo.jpg use your logo url.

    #108649

    hmmmm, i edited the avia.js file and made sure that the image path was correct:

    http://www.kinggeorgestation.com/images/kgsLogo.png

    but it is not replacing the logo when i test it on my ios simluator, or look on my android phone; please advise

    thanks, again! jodi

    #108650

    Try if the replacement code works at all. Instead of:

    if(isMobile()) jQuery("#top h1.logo a img").attr('src', 'http://my-mobile-logo.jpg');

    use:

    jQuery("#top h1.logo img").attr('src', 'http://my-mobile-logo.jpg');

    and check if it works. That said I can imagine that the code won’t work with emulators because these emulators often re-size the website after it’s loaded. In this case you might need to wrap the logo replacement function into a setinterval function: http://www.w3schools.com/jsref/met_win_setinterval.asp to check the screen size on a regular basis.

    #108651

    sorry for the delay; it did in fact work when i removed the if(isMobile()) element, but when i put it back it still shows the lager logo, even when i test on an ipod touch (no simulator)

    is there something that i can add to my custom.css file instead? thanks again, jodi

    #108652

    In this case open up wp-content/themes/choices/js/avia.js and at the very bottom of the file insert the code from: http://detectmobilebrowsers.com/download/jquery

    Then replace following line:

    jQuery("#top h1.logo img").attr('src', 'http://my-mobile-logo.jpg');

    with:

    var isMobile = jQuery.browser.mobile;
    if(isMobile) jQuery("#top h1.logo img").attr('src', 'http://my-mobile-logo.jpg');

    #108653

    sorry for the delay – that worked! thanks so much :)

    #108654

    Hey!

    Glad that I could help you :)

    Best regards,

    Peter

Viewing 8 posts - 1 through 8 (of 8 total)

The topic ‘use a different logo for mobile devices’ is closed to new replies.