twitter bootstrap 2.3.2 'affix' not working on mobile

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>

Answers


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)
});

Need Your Help

jquery lightbox plugin: Bug on IE7 and IE8!

jquery internet-explorer-8 internet-explorer-7 lightbox

I wonder if anyone has used this lightbox plugin and encountered a bug on IE &lt; 9 ?

How can i add attribute to a textbox using javascript?

javascript textbox custom-attributes

i have a datalist in which i have a text box name txtvoteoption now on i add attributes on item data-bound on this text box but now i want to add the third attribute using java script ?

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.