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.
$(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’});
};
});
