twitter bootstrap 2.3.2 'affix' not working on mobile

Question

I am working on a big project that uses jQueryUI 1.10.3, bootstrap 2.3.2, and jQuery 2.0.3. please take a look at http://devel.gdfiles.net/test/welcome2 - when the user scrolls down, the heading should stick to the top below the menu bar.

Like so:

 <div data-spy="affix" data-offset-top="48" class="ui-widget-header">
    <button id="cancel" class="ui-corner-left icon icon-arrow-left white"  onClick="pLoad('_LAST|/')"></button>
    <h1>What do you like?</h1>
    <button id="next" class="ui-corner-right icon icon-arrow-right white"  style="float:right;" onClick="pLoad('/test/welcome3')"></button>
</div>

Like I said, this works on desktop, and on chrome mobile. Does not seem to work on iOS mobile or webkit mobile. So I am just trying to figure out what I'm doing wrong or if there is something I need to look for?

CSS:

.affix {
    position: fixed;
    width: 100%;
    top: 48px;
    margin: 0;
    padding: 0;
    left: 0;
}

.bx {
    display:inline-block;
    *display:inline;
    border: solid 1em white;
    font-size: 2.1vw;
    text-align: center;
    box-shadow: 2pt 2pt 12pt #333;
    background: #ddd;
    width:90%;
    margin:5%;
    padding: 29% 0;
    color: rgb(49, 49, 49);
}
.hbx {
    display:inline-block;
    *display:inline;
    border: solid 1em white;
    font-size: 2.1vw;
    text-align: center;
    box-shadow: 2pt 2pt 12pt #BE2424;
    background: #FFFFB8;
    width:90%;
    margin:5%;
    padding: 29% 0;
    color: rgb(49, 49, 49);
}
.hbx:hover {
    box-shadow: 2pt 2pt 8pt #ac2424;
    background: #FFFFc8;
    cursor:pointer; 
}
.bx:hover {
    cursor:pointer;
    box-shadow : 2pt 2pt 8pt #9DB8FF;
    background-color :#ccc;
}

h1 {
    font-size:1.1em;
    padding-top:.2em;
    display:inline-block; 
    text-align:center; 
    width:54%; 
    }   
@media (min-width:340px) 
{

    h1 {
            font-size:1.1em;    
            width:58%; 
        }
}
@media (min-width:400px) 
{
    box { font-size:2.0vw }
    h1 {
            font-size:1.5em;
            padding-top:.2em;
            display:inline-block; 
            text-align:center; 
            width:64%; 
        }   
}
@media (min-width:460px) 
{
    h1 {
            font-size:2.5em;
            padding-top:.2em;
            display:inline-block; 
            text-align:center; 
            width:69%; 
        }   
    box { font-size:1.9vw } 
}
@media (min-width:650px) 
{
    h1 {
            font-size:2.5em;
            padding-top:.2em;
            display:inline-block; 
            text-align:center; 
            width:75%; 
        }   
    box { font-size:1.8vw } 
}

@media (min-width:840px) 
{
h1 {
    font-size:2.5em;
    padding-top:.2em;
    display:inline-block; 
    text-align:center; 
    width:84%; 
    }   

}

JS

$(document).ready(function(){ 
    $('.bx').click(function (){
        //not selected
        var $box = ($(this));
        console.log("clicked: " + $box);

        if ($box.attr('class')=="bx")
        {
            $box.attr('class','hbx');
            return;
        }
        if ($box.attr('class')=="hbx")
        {
            $box.attr('class','bx');
            return;
        }


    });
});

HTML

<div data-spy="affix" data-offset-top="48" class="ui-widget-header">
            <button id="cancel" class="ui-corner-left icon icon-arrow-left white"  onClick="pLoad('_LAST|/')"></button>
            <h1>What do you like?</h1>
            <button id="next" class="ui-corner-right icon icon-arrow-right white"  style="float:right;" onClick="pLoad('/test/welcome3')"></button>
</div>


<row>
    <div class="col-third">
    <div id="unselected" class="bx">FASHION</div>
    </div>
    <div class="col-third">
    <div id="unselected" class="bx">SPORTS</div>
    </div>
    <div class="col-third">
    <div id="unselected" class="bx">MUSIC</div>
    </div>
</row>

<row>
    <div class="col-third">
    <div id="unselected" class="bx">ENTERTAINMENT</div>
    </div>
    <div class="col-third">
    <div id="unselected" class="bx">FUNNY</div>
    </div>
    <div class="col-third">
    <div id="unselected" class="bx">NEWS</div>
    </div>
</row>
<row>
    <div class="col-third">
    <div id="unselected" class="bx">BUSINESS</div>
    </div>
    <div class="col-third">
    <div id="unselected" class="bx">HEALTH</div>
    </div>
    <div class="col-third">
    <div id="unselected" class="bx">DANCE</div>
    </div>
</row>
<row>
    <div class="col-third">
    <div id="unselected" class="bx">GOVERNMENT</div>
    </div>
    <div class="col-third">
    <div id="unselected" class="bx">ART</div>
    </div>
    <div class="col-third">
    <div id="unselected" class="bx">DESIGN</div>
    </div>
</row>
<row>
    <div class="col-third">
    <div id="unselected" class="bx">HEALTH</div>
    </div>
    <div class="col-third">
    <div id="unselected" class="bx">SCIENCE</div>
    </div>
    <div class="col-third">
    <div id="unselected" class="bx">FOOD</div>
    </div>
</row>
<row>
    <div class="col-third">
    <div id="unselected" class="bx">DRINK</div>
    </div>
    <div class="col-third">
    <div id="unselected" class="bx">TECH</div>
    </div>
    <div class="col-third">
    <div id="unselected" class="bx">FAMILY</div>
    </div>
</row>
<row>
    <div class="col-third">
    <div id="unselected" class="bx">FAITH</div>
    </div>
    <div class="col-third">
    <div id="unselected" class="bx">RELIGION</div>
    </div>
    <div class="col-third">
    <div id="unselected" class="bx">CAT</div>
    </div>
</row>
<row>
    <div class="col-third">
    <div id="unselected" class="bx">CAT</div>
    </div>
    <div class="col-third">
    <div id="unselected" class="bx">CAT</div>
    </div>
    <div class="col-third">
    <div id="unselected" class="bx">CAT</div>
    </div>
</row>

docodemore · Answer 1 · 2013-08-23T16:18:41.433

Apparently the issue isn't data-spy, it is that when I pjax load the page it does not work. I'm trying to figure out why. First thought was bootstrap js wasnt loading, but it is in fact loaded.

Needed to ad this to pjax success event:

$('[data-spy="affix"]').each(function () {
  var $spy = $(this)
    , data = $spy.data()
  console.dir($spy);
  console.log(data);
  data.offset = data.offset || {}

  data.offsetBottom && (data.offset.bottom = data.offsetBottom)
  data.offsetTop && (data.offset.top = data.offsetTop)

  $spy.affix(data)
});

twitter bootstrap 2.3.2 'affix' not working on mobile

1 Answers1