CODEWITHSUNDEEP
jqueryhtmlcssmobilecss-position
Brian Garson
Brian Garson

Reputation: 1160

fixed positioning for a floating menu to support mobile browsers

I'm a C# .NET developer however terrible at CSS although I do put in a good effort before asking questions. I'm using some basic jQuery, CSS and HTML Tables (yes I know tables) to build out my only photo portfolio that was previously in flash. The issue I'm having is when viewing the website on a mobile device like an iPhone or Android, in my case screen shots with a Galaxy S3, if the user zooms in on the photos the menu that I've fixed positioned moves over top of the photos.

EDIT: I'm using the fixed position so that the menu "floats" in the same place over the photos, and follows the scroll bar as the user scrolls, making it accessible as the user scrolls to the end of the photos. I've updated the CSS to the 1st response, however the menu no longer remains on screen as you scroll. I should have originally included this note in the post.

Link to the website: http://briangarson.com

Screen shots:

user zoomed in by pinching - the menu floats overtop of the images:

screen shot 1 - zoomed in

Not zoomed in:

screen shot 1 - zoomed in
(source: briangarson.com)

The code I'm using (probably easier to simply view source on my website) but here goes

<style type="text/css">
body
{
    background-color: #FFFFFF;
}

.gallery
{
    height: 600px;
}

#content{
    margin-top: 50px;
}

#menu{
    margin-left: 15px;
    position: fixed;
}
table{
padding-top: 90px;
}
td{
    padding-left: 15px;
}
a{
color:#1A1A1A;
}
a.on{
    text-decoration: none;
}
</style>

and the HTML 

<div id="content">
    <div id="menu">
        <img  src="http://briangarson.com/logo.gif"> <a id="navSkate" class="on" href="#">Skate</a> | <a id="navMusic" href="#">Music</a> | <a id="navFashion" href="#">Fashion</a> | <A target=_blank href="mailto:[email protected]">Info</a>
    </div>
    <table>
    <tr id="fashion">
      <td><img class="gallery" src="photos/352cassandra_aylmer.jpg"></td>
      <td><img class="gallery" src="photos/811for_web_low_res_texture_0141-editweb.jpg"></td>
      <td><img class="gallery" src="photos/78420061105031421_carolina_01_floor_srgb.jpg"></td>
      <td><img class="gallery" src="photos/91720061127164637_kat_salute_srgb_01.jpg"></td>
      <td><img class="gallery" src="photos/997val__1262555511_4af982f854_o.jpg"></td>
      <td><img class="gallery" src="photos/43620060531234234_geoff.jpg"></td>
      <td><img class="gallery" src="photos/918christine_dsc_8737.jpg"></td>
      <td><img class="gallery" src="photos/471debbie.jpg"></td>
      <td><img class="gallery" src="photos/158alison_dsc_0602-edit.jpg"></td>
      <td><img class="gallery" src="photos/95madelaine_bw.jpg"></td>
      <td><img class="gallery" src="photos/971gabrielle_v3_bordered.jpg"></td>
      <td><img class="gallery" src="photos/917ioanna_dsc_1937-edit.jpg"></td>
      <td><img class="gallery" src="photos/96520061106010418_carolina_couch_01_srgb.jpg"></td>
      <td><div style="display: block; width:100px;">&nbsp;</div></td>
    </tr>
    </table>
</div>

Upvotes: 0

Views: 4961

Answers (3)

РАВИ
РАВИ

Reputation: 12155

With the new ios safari and Chrome phone browser {position:fixed} works fine. But You still need have to add ployfill for old browsers.

Upvotes: 0

Jordan Shute
Jordan Shute

Reputation: 179

position: fixed; doesn't work properly on mobile devices due to the possibility of breaking older desktop sites. The only mobile browser that supports position fixed that I'm aware of is mobile safari on iOS 5+.

However it can easially be fixed with a few lines of javascript. An example of how it could be done:

window.onscroll = function() {
    document.getElementById('fixedDiv').style.top =
        (window.pageYOffset + window.innerHeight - 25) + 'px';
};

Take a look at this question:

Fixed positioning in Mobile Safari

Upvotes: 3

Ohgodwhy
Ohgodwhy

Reputation: 50787

I've never had any issues with fixed positioning, mostly because I don't use it, that being said: I don't think mobile browsers support position:fixed. I believe that you need to it like the following ->

#menu{
    margin-left: 15px
    position: absolute;
        top:50px;   
}

The purpose of the above is to maintain the same distance from the top that it would have been, had it been bound to the dimensions of <div id="content>. Now we can replicate this by binding to the scroll event.

$(document).scroll(function(){
  $('#menu').css('top', '50px');
});

I believe this is the effect you're going for.

Upvotes: 3

Related Questions