Detecting iPad because Safari is rendering Meerkat wrong

programming web dev
1

I use a jQuery plugin called meerkat by Jarod Taylor to deliver a bottom browser hugging div that remains fixed while scrolling.

On the iPad the div is not bottom hugging and it’s 940 px width is slightly off screen on the right putting the user interface off the screen.

I found a refer to detecting iPad

if(navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod') 
{ 
     $("#meerkat-wrapper").css("position", "static"); 
};

This should fix the failure to hug the bottom, but I wonder if 940 px is just too wide for iPad, and I don’t have an Ipad to test on :frowning:

Full code

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
 <script src="http://meerkat.jarodtaylor.com/download/jquery.meerkat.1.3.min.js" type="text/javascript" charset="utf-8"></script>
           <style type="text/css" media="screen">
       #meerkat-wrapper {
        width: 940px;
        margin: 0 auto;
       }
       .close-meerkat {
                                  position: absolute;
                                  display: block;
                                  height: 18px;
                                  width: 18px;
                                  background: url("http://meerkat.jarodtaylor.com/demo/images/close-x.png") no-repeat 0 0;
                                  cursor: pointer;
                                  text-indent: -9000px;
                                  z-index: 10000;
                        }
       a.close-meerkat:link {color: #000; background-color: #cccccc; font-weight: bold;}
       .dont-show {
        position: absolute;
        display: block;
        width: 80px;
        padding: 0 1px 2px 2px;
        background-color: #cccccc;
        font-family: arial narrow, sans-serif;
        font-size: 0.705em;
        text-decoration: none;
        cursor: pointer;
        z-index: 10;
        line-height: 10.8px;
       }
 
       a.dont-show:hover {color:#cc0000;}
       .meerkat {
        position: relative;
        display: none;
        z-index: 5;
       }
       a.click-through 
      {
      display: block;
      position: absolute;
      top: 5px;
      right: 5px;
      height: 70px; 
      width: 930px;
      background: url("http://cincinnati.com/dashboard/spacer.gif") no-repeat 0 0; 
      z-index: 100; 
      }
       .pos-bot .close-meerkat {right: 2px; top: 2px;}
       .pos-bot .dont-show {right: 0px; top: 78px;}
</style>
    
 
           <script type="text/javascript" charset="utf-8">
                      $(function(){
       $('.meerkat').meerkat({
                      background: 'url(\'http://somedomain.com/image_940x90.jpg\') repeat-x left top',
                      height: '90px',
                      width: '940px',
                      position: 'bottom',
                      close: '.close-meerkat',
                      dontShowAgain: '.dont-show',
       animationIn: 'slide',
                      animationSpeed: 1000,
                      removeCookie: '.reset'
       }).addClass('pos-bot');
               $('#bottom').click(function(){
                     $('.meerkat').destroyMeerkat();
                     $('.meerkat').meerkat({
                     height: '90px',
                     width: '940px',
                     position: 'bottom',
                     close: '.close-meerkat',
                     dontShowAgain: '.dont-show',
                      animationIn: 'slide',        
       animationSpeed: 1000,
                     removeCookie: '.reset'
                     }).removeClass('pos-bot');
                     $('.code').hide();
                     $('.bottom_').show();
                     return false;
                                 });
                             });
        if(navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod') 
{ 
     $("#meerkat-wrapper").css("position", "static"); 
}; 
        </script>

      

            <div id="meerkat-wrapper">
 
<div class="meerkat">
<a href="_ADCLICK_" class="click-through" target="_blank"></a>
       <a href="#" class="close-meerkat"></a>
             <a class="dont-show">&nbsp;Don't Show Again</a>   
          </div>
     </div>