Safari address bar resized but showing the same height?
I faced a problem during working with sidebar which was made in jQuery hence getting the window height first. I got a problem when height was fixed on safari iPod because of safari address bar hides and shows when we scroll. On alerting the window height Safari address bar resized but showing the same height? How can I fix this.
1. First thing that came into my mind to detect the browser and add 60px in it.
2. If its false resize it to its primary height.
Below is the code to help you working with safari address bar hide and show problem.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
// On document ready set the div height to window $(document).ready(function(){ // Assign a variable for the application being used var nVer = navigator.appVersion; // Assign a variable for the device being used var nAgt = navigator.userAgent; var nameOffset,verOffset,ix; // First check to see if the platform is an iPhone or iPod if(navigator.platform == 'iPhone' || navigator.platform == 'iPod'){ // In Safari, the true version is after "Safari" if ((verOffset=nAgt.indexOf('Safari'))!=-1) { // Set a variable to use later var mobileSafari = 'Safari'; } } // If is mobile Safari set window height +60 if (mobileSafari == 'Safari') { // Height + 60px $('#right-sidebar').css('height',(($(window).height()) + 60)+'px'); } else { // Else use the default window height $('#right-sidebar, .profile').css({'height':(($(window).height()))+'px'}); }; }); // On window resize run through the sizing again $(window).resize(function(){ // If is mobile Safari set window height +60 if (mobileSafari == 'Safari') { // Height + 60px $('#sidebar').css('height',(($(window).height()) + 60)+'px'); } else { // Else use the default window height $('#sidebar, .profile').css({'height':(($(window).height()))+'px'}); }; }); |