We apologize for the interruption. However, seabreezecomputers.com has been offering free tools and downloads for many years. Unfortunately, server expenses are now starting to exceed revenue earned. If you appreciate the free tools and downloads at seabreezcomputers.com please consider making a donation.
|
Fixed DIV on mobile phones
position:fixed div
Above is an example of a CSS position:fixed div: As you scroll the page up and down the above div will stay in place on a normal browser. But on many phone browsers it will scroll as if it had CSS of position: relative;. There was a technique created for Internet Explorer 6 to support fixed div by using a javascript expression in the stylesheet. But this technique does NOT work for the above phone browsers:
position: absolute;
top: expression(((document.documentElement.scrollTop || document.body.scrollTop) + (document.documentElement.clientHeight || document.body.clientHeight) - this.offsetHeight) + "px");
This div uses IE6 javascript expression fixed div technique
Since this technique does not work on most phone browsers I came up with another technique. Here is how it works: Usually when you have a fixed DIV it is positioned near the center of the screen. So the left position is 100px or something like that. But for a mobile device you don't have that much width and you usually don't have any side menus. So we change the left position to 1px of the fixed div in the mobile stylesheet. Click here for more info on how to load a separate stylesheet for mobile devices. In this example let's say that you have a pop-up div that you want to stay in the middle of the screen with class='helpwindow'. In styles.css helpwindow class has a left of 100px; But in mobile.css we change it to: .helpwindow { position: absolute; left: 1px; } Then we can use the following javascript to make the DIV scroll jump back into position when the screen is scrolled: /* It is not possible to get certain styles set in css such as display using the normal javascript. So we have to use this function taken from: http://www.quirksmode.org/dom/getstyles.html */ function getStyle(el,styleProp) { var x = document.getElementById(el); if (x.currentStyle) // IE var y = x.currentStyle[styleProp]; else if (window.getComputedStyle) // FF var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp); return y; } function your_popup_function() { div_id = 'helpwindow'; if (getStyle(div_id, 'left') == '1px') // only scroll if mobile. This is set in mobile.css { move_alert(div_id); window.onscroll = function() { move_alert(div_id); } } } function move_alert(div_id) { // get current top if (document.documentElement.scrollTop) // Needed if you use doctype loose.htm current_top = document.documentElement.scrollTop; else current_top = document.body.scrollTop; // get current bottom if (document.documentElement.clientHeight) // Needed if you use doctype loose.htm current_bottom = current_top + document.documentElement.clientHeight; else current_bottom = current_top + document.body.clientHeight; alert_div = document.getElementById(div_id); alert_div.style.position = 'absolute'; // alert_div.style.top = current_bottom - alert_div.offsetHeight; // Not working on iphone alert_div.style.top = current_top; } // end function move_alert(div_id) In the above javascript there are 3 functions. The first function getStyle is needed because you can't read the css for left that is set in a css file without using these special functions. The second function your_popup_function() would be replaced with your own function for popping up a help window. Place the code in your_popup_function inside of your own function. Or in your own help window function with a div that you don't want to scroll you could call your_popup_function(); You should replace 'helpwindow' with the ID of your fixed div. The function then sets window.onscroll to call move_alert() only if the left of the div has been set in mobile.css to 1px;
div using window.onscroll = function()
{
move_alert(div_id);
}
|
|
User Comments
|