0

I have two webpages that consist of a scrollable div as the main wrapper and an image background styled like

body
{
background: url("../Images/background.jpg") center bottom no-repeat;
z-index:-5; 
background-size:cover;
}

When I zoom in or out, the scrollable div changes sizes and the background does not. That is exactly what I want to happen.

However, if I zoom in on one page then click the browser's back button, the background is zoomed out on the previous page. If I refresh the page the background is fixed and everything is displayed correctly again. If I zoom then click a link to the previous page instead of clicking back in the browser window, the page is displayed correctly. I have tried using the hidden field 

<input type="hidden" id="refresh" value="no"/>

with the following script 

<script type="text/javascript">
$(window).load(function (e) {
    var $input = $('#refresh');

    $input.val() == 'yes' ? location.reload(true) : $input.val('yes');
});
</script>

to reload the page one time after its initial load hoping that the background would resize, but it does not. only clicking the browser refresh button will fix it. Any suggestions as to how to handle this would be extremely helpful.

Lance Hall
  • 202
  • 1
  • 9
  • I think the problem is with the ternary statement so plz check the console of ur browser for script error... And share the complete code if there is no error in script – Ankur Pathak Sep 20 '16 at 19:18
  • I can't find a problem with it. The first time the page loads, value is no. The ternary statement sets it to yes. Then, if I take navigate to another page and click back button, should it load the page from my browser cache and the value would still be yes, causing the page to reload, right? Or am I mistaken? – Lance Hall Sep 20 '16 at 19:24
  • See I might be from you cache try running it in private mode – Ankur Pathak Sep 20 '16 at 19:28
  • how are you zooming? with the browser's built-in zoom buttons? – Robert Parham Sep 20 '16 at 19:29
  • Behaves the same in private mode. – Lance Hall Sep 20 '16 at 19:29
  • I am zooming with the mousewheel, but behaves the same with browser's built-in-zoom buttons. – Lance Hall Sep 20 '16 at 19:30
  • right.. i just tried what you described and refreshing after hitting the back button did not unzoom (in Firefox) and afaik, it shouldn't. i don't think you should rely on a refresh to un-zoom your page. – Robert Parham Sep 20 '16 at 19:31
  • And 1 more thing use single equal here `$input.val() == 'yes' ? location.reload(true) : $input.val('yes');` – Ankur Pathak Sep 20 '16 at 19:32
  • Yeah, you can't rely on that at all. You can't control your browser's zoom level from Javascript. You can build a JS zoom button that does something like `body{ font-size: 110%; }` though, which should effectively do the same thing. – Robert Parham Sep 20 '16 at 19:34
  • http://stackoverflow.com/questions/1055336/changing-the-browser-zoom-level – Robert Parham Sep 20 '16 at 19:34

1 Answers1

0

Use $(window).resize() rater than $(window).load()` it might be helpful if the problem is with zooming or resizing

Ankur Pathak
  • 49
  • 6