ipad glitch with .load? or something else?

[turpentyne]

I have a strange little glitch only on Ipad and I'm not sure what causes it.

I have some simple code on the page to load a new php file when they select a menu item. The first choice loads to the page, when they user arrives. If they click the other options, the section doesn't load. Yet, if they change orientation, or brush the page with their finger, the .loaded page will appear where it's supposed to as if nothing was wrong??

Here's what I've got:

$(document).ready(function(){

    $('#mapss').load('/inc/floorplans/mapgroup1.php');

$('#levels_23,#levels_45678,#penthouse_collection').click(function(){

        $('.floorplate_subnav').removeClass('floorplate_selected'); // side nav
        var selected_li =  $(this).attr('id');


        if ( selected_li == "levels_23"){
            $("#li_1").addClass('floorplate_selected');
            $('#mapss').load('/inc/floorplans/mapgroup1.php')
            $(".unit_details").css('opacity',0);
        } 
        else if ( selected_li == "levels_45678"){
            $("#li_2").addClass('floorplate_selected');         
            $('#mapss').load('/inc/floorplans/mapgroup2.php')
            $(".unit_details").css('opacity',0);

        } 

        else if ( selected_li == "penthouse_collection"){
            $("#li_3").addClass('floorplate_selected');
            $('#mapss').load('/inc/floorplans/mapgroup3.php')
            $(".unit_details").css('opacity',0);
            $("#li_3").addClass('floorplate_selected');

        } 

        else {
            /* do nothing */ 
        }


        $(setgraph).attr('class','graph_selected');

    });
});
</script>


<div class="floorplates">
    <div class="article">
        <h2 class="h2_whiteBg" style="position:relative;top:10px;left:10px;">FLOORPLATES</h2>     
        <div style="float:left;">
        <!-- this div contains the nav and green box at left -->
            <div style="width:200px;position:relative;left:10px;top:0px;line-height:1em;">

            <ul style="line-height:2em;z-index:2;width:199px;">
                    <li id="li_1" class="floorplate_subnav floorplate_selected" style="width:80px;"><a style="color:#000;" id='levels_23' href='#'>LEVELS 2/3</a></li>
                    <li id="li_2"  class="floorplate_subnav" style="width:115px;"><a style="color:#000;" id='levels_45678' href='#'>LEVELS 4/5/6/7/8</a></li>
                    <li id="li_3"  class="floorplate_subnav" style="line-height:1.12em !important;position:relative;top:5px;width:199px;padding-bottom:8px;letter-spacing:-.02em;"><a style="color:#000;" id='penthouse_collection' href='#'>THE PENTHOUSE COLLECTION<BR />LEVELS 9/10</a></li>

                </ul>


            </div>
        <div id="details_here">
            <?php include 'floorplate_details.php' ?>

            </div>


        </div>

        <div style="float:right;border-left: 1px solid black;height:334px;width:555px;position:relative;top:-43px;padding:10px;">
        <!-- this div contains the floorplans at right -->
        <div id="unit_rollovers" style="height:0px;overflow:visible;z-index:100;">


            <span id="mapss"> </span> <!-- here's where it should appear -->
            <div style="height:0px;width:300px;overflow:visible;z-index:99999 !important;position:absolute;left:20px;top:313px;" class="notes">CLICK ON SUITE NUMBER TO SEE DESCRIPTION</DIV> 


        </div>


        </div>
</div>

[pixelsoul]

I know this has probably nothing to do with the issue you are seeing, but instead of .click I would use .on and then add click and touch as the events, something like this

$('#levels_23,#levels_45678,#penthouse_collection').on("click touch", function(){ ... });

[turpentyne]

cool. Justed added that change. Still no luck. But I suspect it's an IOS glitch that I need to find a workaround for. Everything works on ios 6.1, but not on 5.1

[pixelsoul]

Yeah, I did some searching for a possible bug related to it but I was not able to find any specific to what you are describing.