Fixed Div

How to create and test css stylesheets for mobile devices

Created: May 28, 2011
Last Edited: June 6, 2011
((( spellific )))
Practice spelling while playing a fun word game!
Click here to play
Speech Recognition Anywhere
  • Type emails with your voice
  • Write documents with your voice
  • Control the Internet with your voice
  • Chrome Extension
Reconocimiento de voz en cualquier lugar
  • Escribe correos electrónicos con tu voz
  • Escribe documentos con tu voz
  • Controla la Internet con tu voz
  • Extensión de Chrome
Spracherkennung Allerorts
  • Geben Sie E-Mails mit Ihrer Stimme ein
  • Schreiben Sie Dokumente mit Ihrer Stimme
  • Steuern Sie das Internet mit Ihrer Stimme
  • Chrome-Erweiterung
Reconnaissance de la parole
  • Tapez des e-mails avec votre voix
  • Écrivez des documents avec votre voix
  • Contrôlez l'Inernet avec votre voix
  • Extension Chrome
Riconoscimento vocale ovunque
  • Digita e-mail con la tua voce
  • Scrivi documenti con la tua voce
  • Controlla Internet con la tua voce
  • Estensione Chrome
どこでも
音声認識
  • あなたの声で文書を書く
  • あなたの声でメールを入力してください
  • 音声でインターネットをコントロール
  • Chrome拡張機能
语音识别
无处不在
  • 用你的声音写文件
  • 用您的声音输入电子邮件
  • 用你的声音控制互联网
  • Chrome 扩展程序
語音識別
無處不在
  • 用你的聲音寫文件
  • 用您的聲音輸入電子郵件
  • 用你的聲音控制互聯網
  • Chrome 擴展程序
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); }
((( spellific )))
Practice spelling while playing a fun word game!
Click here to play
Speech Recognition Anywhere
  • Type emails with your voice
  • Write documents with your voice
  • Control the Internet with your voice
  • Chrome Extension
Reconocimiento de voz en cualquier lugar
  • Escribe correos electrónicos con tu voz
  • Escribe documentos con tu voz
  • Controla la Internet con tu voz
  • Extensión de Chrome
Spracherkennung Allerorts
  • Geben Sie E-Mails mit Ihrer Stimme ein
  • Schreiben Sie Dokumente mit Ihrer Stimme
  • Steuern Sie das Internet mit Ihrer Stimme
  • Chrome-Erweiterung
Reconnaissance de la parole
  • Tapez des e-mails avec votre voix
  • Écrivez des documents avec votre voix
  • Contrôlez l'Inernet avec votre voix
  • Extension Chrome
Riconoscimento vocale ovunque
  • Digita e-mail con la tua voce
  • Scrivi documenti con la tua voce
  • Controlla Internet con la tua voce
  • Estensione Chrome
どこでも
音声認識
  • あなたの声で文書を書く
  • あなたの声でメールを入力してください
  • 音声でインターネットをコントロール
  • Chrome拡張機能
语音识别
无处不在
  • 用你的声音写文件
  • 用您的声音输入电子邮件
  • 用你的声音控制互联网
  • Chrome 扩展程序
語音識別
無處不在
  • 用你的聲音寫文件
  • 用您的聲音輸入電子郵件
  • 用你的聲音控制互聯網
  • Chrome 擴展程序
Back to www.seabreezecomputers.com
Subscribe to Internet Tips and Tools Feed        

User Comments

There are 0 comments.

Displaying first 50 comments.