# Detecting iPad because Safari is rendering Meerkat wrong

**URL:** <https://forum.kirupa.com/t/detecting-ipad-because-safari-is-rendering-meerkat-wrong/320616>\
**Category:** web dev\
**Created:** [March 28, 2011, 6:12pm UTC](https://forum.kirupa.com/t/detecting-ipad-because-safari-is-rendering-meerkat-wrong/320616 "2011-03-28T18:12:34Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![somnamblst](https://avatars.discourse-cdn.com/v4/letter/s/a4c791/32.png) [@somnamblst](https://forum.kirupa.com/u/somnamblst)\
**Post date:** [March 28, 2011, 6:12pm UTC](https://forum.kirupa.com/t/detecting-ipad-because-safari-is-rendering-meerkat-wrong/320616/1 "2011-03-28T18:12:34Z")

</div>

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

```auto
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 ☹

Full code

```auto
<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>
             

```