How do you switch the down state of image based navigation based on media size?

  • I am converting a site into WordPress. The site has image based navigation with rollover buttons and a down state when you are on the current page. The site is here https://thecellarsisters.ca/sisterswp/ – click on “About” and the cork down state stays on. I have this working perfectly, as you can see. CSS is used to change the hover state and CSS in the page template puts the nav button into the down state.

    Now my problem is with responsiveness. When you resize the browser window I have replaced the nav images with smaller images once you are below 680px. But how do I then switch the down state button from the larger one to the smaller one? I’m thinking that this requires two javascripts. Your Craig Buckler of OptimalWorks.net script for screen width detection will give you the browser width once you move it, but when you first load the page it says “unknown” because it hasn’t been moved yet. I would almost need to combine his script with an instant detection. Then I need to create an if statement in javascript that will implement the correct CSS – if that’s even possible.

    I was trying to do something like this but it doesn’t work because I need to convert the $sizer code to a string.

    <?php
$sizer = '<div id="menu">unknown</div>'.toString();

$test =  'less than 680 pixels';
if ($sizer == $test){
  <style>
    li#menu-item-28 a {
     background-image:url('https://thecellarsisters.ca//sisterswp/wp-content/themes/sisters/images/nav_about_on15.jpg');
</style>
}  else {
   li#menu-item-28 a {
   background-image:url('https://thecellarsisters.ca//sisterswp/wp-content/themes/sisters/images/nav_about_on.jpg');
  }
 }
}
?>

    Even if that worked it doesn’t cover the current browser width when the page is loaded.

    This seems incredibly complex for what must be something that has been commonly implemented. I can find plugins for nav images but nothing that will then replace each page’s image with the smaller down state image for mobiles.

    Any ideas about how to do this?

    Thanks
    Charles

Viewing 3 replies - 1 through 3 (of 3 total)
  • Moderator bcworkz

    (@bcworkz)

    PHP cannot know what image size to load unless the browser has sent some data regarding the screen size. There will always be an initial load where PHP will have no idea of the screen size.

    For good graphics performance, place all such small images on an image sprite. Then instead of changing the background image entirely, you only change its offsets so a different portion of the sprite shows through the element’s “aperture”. Since everything is on the same image, it doesn’t matter much if PHP doesn’t know the screen size, javascript can change offsets in an instant.

    I should think you can get the screen size on load from the screen object independent of any event, then set the sprite offset quickly enough there is no apparent flash of the wrong size image. You can also get the window size on the window’s resize event, but I don’t see this being that important in being responsive to mobiles. They are not going to be changing window sizes while on your site. Their screen size is what it is and the graphics based on that should be fine for any subsequent actions they may take.

    Thread Starter charles_i

    (@charles_i)

    Thanks. That makes sense and is a good solution. Except that with iPads I think they do change screen size without reloading when you rotate them. Is there an example anywhere of code for this that I can use? It would be a lot easier to modify code, especially since it requires javascript, PHP and CSS.

    Moderator bcworkz

    (@bcworkz)

    Ah, good point about rotational change! Didn’t think that one through :/

    I should think there are examples of capturing window size change events with all the focus on responsive sites, but I’m unable to point you to any. There should be plenty on image sprites as well. If no one comes along here with a better answer, good luck in your search. Sorry I can’t be of better help.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How do you switch the down state of image based navigation based on media size?’ is closed to new replies.