Fixed Div

How to create and test css stylesheets for mobile devices

Created: May 28, 2011
Last Edited: June 6, 2011
Subscribe to Internet Tips and Tools Feed
f Share
-
G+ Share
-
Tweet
-
in Share
-
P in it
-

Fixed DIV on mobile phones

Windows Phone 7 iPhone iPad Blackberry Phone Blackberry Playbook Android 2.x Android 3.x
No No No Yes but jumps after scrolling Yes but jumps after scrolling No Yes
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); }
Back to www.seabreezecomputers.com
Subscribe to Internet Tips and Tools Feed        

User Comments

There are 0 comments.

Displaying first 50 comments.