0

I'm new to media queries and to jQuery. What I'd like to do is swap header images on a mobile site when the user switches orientation. What I've got so far works, oddly, if the user refreshes the page, but gets it wrong on initial load. Here's the script:

$( document ).ready(function() {
    if($.mobile.media("only screen and (min-device-width: 320px) and (max-device-width: 480px) and (orientation: landscape)")) {
        $("#FlexgridHeader img").attr("src", "http://example.com/path/to/image/header-480x75+.png");
            } else {
                $("#FlexgridHeader img").attr("src", "http://example.com/path/to/image/headers/header-320x75+.png");
            }
    });
jamesnotjim
  • 575
  • 7
  • 17
  • 1
    try `$(document).on('pagebeforeshow', function() { your code });` – Omar Mar 12 '13 at 17:09
  • Omar is correct, try that. – Gajotres Mar 12 '13 at 17:28
  • Thanks for the help. I tried this, but it didn't resolve the issue. I fear I'm missing something more fundamental. – jamesnotjim Mar 12 '13 at 18:38
  • I found a way to do it that uses the same media queries but doesn't require jQuery. Since the only thing in div#FlexgridHeader was the img tag whose source I was attempting to manipulate, I deleted the image tag (i.e. made #FlexgridHeader an empty div) and used media queries to set a different background-image: url() for portrait and landscape. – jamesnotjim Mar 12 '13 at 19:28

0 Answers0