Meerkat jQuery Plugin

Hi everyone,

I found a jQuery plugin called Meerkat at the following url:

http://meerkat.jarodtaylor.com

I can’t seem to get it to work and just wondered if anyone has used it successfully? Also, does anyone know of another plugin that achieves the same effect as I just wanted to try some alternative since I can’t seem to get this one working.

Any advice or input is much appreciated.

Thanks

Hi,

When you say “can’t seem to get it to work”, what have you tried?

Can you post a demo of it not working?

Thanks for the reply,

The code snippet below is what I’m using to hold the “Meerkat” text:


        <div class="meerkat">
        <div class="meerkat-contents">
        <h2>An announcement</h2>
        <p> An announcement: <span>Text here</span></p>
        <p class="close-message">Hide message</p>
        <p class="dont-show-message">Dont show messages</p>
        </div>
        </div>


The full code on the page is below. Basically, when I test the, the code above sits where it’s suppose to but the box doesn’t slide in as the meerkat code is suppose to handle. I know that I’m not absolutely positioning the div as they’ve done in the example on the Meerkat page so maybe that’s contributing to the problem. If you need me to post any css or other js files that I reference below, just let me know.

I’m not sure if you can help me troubleshoot in this way but I’d be grateful for any tips you could give me.

Thanks again.


<!DOCTYPE html>
<html lang="en" class="no-js">
<!-- BC_OBNW -->
<head>
<title></title>
<link href="/StyleSheets/ModuleStyleSheets.css" type="text/css" rel="StyleSheet" />
<script type="text/javascript">var jslang='EN';</script>
<link rel="stylesheet" href="/CatalystStyles/Box.css?vs=b2364.r426701" type="text/css" media="screen" />
<link href="/favicon.png" rel="shortcut icon" />
<link href="/home_badge_64.png" rel="apple-touch-icon" />
<link href="http://fonts.googleapis.com/css?family=Ubuntu:400,300,500,700" rel="stylesheet" type="text/css" />
<link href="/_assets/css/normalize.css" rel="stylesheet" />
<link href="/_assets/css/foundation.css" rel="stylesheet" />
<link href="/_assets/css/styles.css" rel="stylesheet" />
<script src="/_assets/js/custom.modernizr.js"></script>
<script src="/_assets/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/_assets/js/jquery.meerkat.1.3.min.js"></script>
<script type="text/javascript">
    // Will retun 1 or 0 based on if user is logged in(1) or not logged in(0)
    var _isLoggedIn = !!parseInt("0");
</script>
<script type="text/javascript">
$(document).ready(function(){
	$('.meerkat').meerkat({
		background: '#cccccc',
		height: '120px',
		width: '100%',
		position: 'bottom',
		close: '.close-message',
		dontShowAgain: '.dont-show-message',
		animationIn: 'slide',
		animationSpeed: 500,
		cookieExpires: 1
	});
});
</script>
<meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0" name="viewport" />
<!--[if IE 8]> <link rel="stylesheet" href="/_assets/css/ie8.css"> <![endif]-->
<link rel="stylesheet" href="/CatalystStyles/Box.css?vs=b2364.r426701" type="text/css" media="screen" />
<script type="text/javascript" src="/CatalystScripts/Java_Box.js?vs=b2364.r426701"></script>

</head>
<body class="antialiased">

<script type="text/javascript" src="/CatalystScripts/Java_Box.js?vs=b2364.r426701"></script>

    <!--<![endif]-->


        <header class="alpha" role="banner">
<div class="row">
<div class="columns large-12">
<div class="utility">
<ul class="left">

<li><span id="catCartSummary" quote="False" vertical="False"><table cellspacing="0"  class="cartSummaryTable"><tr><td class="cartSummaryItem">Shopping cart is empty.</td></tr></table></span></li>
</ul>
<ul class="right">
	
</ul>
</div>
<!-- //.utility -->
</div>
<!-- //.columns.large-12 -->
</div>
<!-- //.row -->
<div class="row collapse">
<div class="columns large-12 contain-to-grid">
<nav class="top-bar" role="navigation">
  <ul class="title-area">
    <li class="name"><a id="logo" href="/"><img src="/_assets/css/images/logo.png" alt="">
</a></li>
    <li class="toggle-topbar menu-icon"> <a href="#"><span></span></a> </li>
  </ul>
  <!-- //.title-area -->
  <section class="top-bar-section">
    <ul class="left">
      <li class="has-dropdown">
	<a href="/about">About</a>
	<ul class="drop down">
<li >
	<a href="/q-and-a">Questions and Answers</a>
	<ul class="dropdown"></ul>
</li>
</ul>
</li>
<li >
	<a href="/media">Media</a>
	<ul class="dropdown"></ul>
</li>
<li >
	<a href="/events">Events</a>
	<ul class="dropdown"></ul>
</li>
<li class="has-dropdown">
	<a href="#">Features</a>
	<ul class="dropdown"><li >
	<a href="/features/news">News</a>
	<ul class="dropdown"></ul>
</li>
<li >
	<a href="/features/photo-gallery">Photo Gallery</a>
	<ul class="dropdown"></ul>
</li>
<li >
	<a href="/features/downloads">Media Downloads</a>
	<ul class="dropdown"></ul>
</li>
<li >
	<a href="/features/publications">Publications</a>
	<ul class="dropdown"></ul>
</li>
</ul>
</li>
<li class="right">
	<a href="/contact">Contact</a>
	<ul class="dropdown"></ul>
</li>
<li class="right">
	<a href="/giving">Giving</a>
	<ul class="dropdown"></ul>
</li>
<li class="right">
	<a href="/prayers">Prayers</a>
	<ul class="dropdown"></ul>
</li>
<li class="right">
	<a href="/join">Join</a>
	<ul class="dropdown"></ul>
</li>

    </ul>
  </section>
  <!-- //.top-bar-section -->
</nav>
<!-- //.top-bar -->
</div>
<!-- //.columns.large-12 -->
</div>
<!-- //.row -->
</header>
        <!-- //header.row -->
        <div class="slideshow-wrapper touch">
<div class="preloader"></div>
<ul data-orbit="data-orbit" data-options="bullets:false;animation:fade;slide_number:false;">
    <li>
<img src="/_assets/images/hero/red-mass-2013.jpg" border="0" alt="" />
<div class="row collapse">
<div class="columns large-12">
<div class="orbit-caption">
<h2>Heading</h2>
<p> text goes here.</p>

<a href="http://site.worldsecuresystems.com/features/photo-gallery" class="button radius secondary">View our Photo Gallery</a>
</div>
<!-- //.orbit-caption -->
</div>
<!-- //.columns.large-12 -->
</div>
<!-- //.row -->
</li>
<li>
<img src="/_assets/images/hero/retreat-2014.jpg" border="0" alt="" />
<div class="row collapse">
<div class="columns large-12">
<div class="orbit-caption">
<h2>Heading</h2>
<p> Text goes here.</p>

<a href="https://site.worldsecuresystems.com/media/retreat" class="button radius secondary">Read more</a>
</div>
<!-- //.orbit-caption -->
</div>
<!-- //.columns.large-12 -->
</div>
<!-- //.row -->
</li>
<li>
<img src="/_assets/images/hero/christmas-2013.jpg" border="0" alt="" />
<div class="row collapse">
<div class="columns large-12">
<div class="orbit-caption">
<h2>Heading</h2>
<p> Text goes here.</p>

<a href="http://site.worldsecuresystems.com/media/picture" class="button radius secondary">Read More</a>
</div>
<!-- //.orbit-caption -->
</div>
<!-- //.columns.large-12 -->
</div>
<!-- //.row -->
</li>

</ul>
<!-- //data-orbit -->
</div>
        <!-- //.slideshow-wrapper -->
        <div role="main" class="omega mu">
        <div class="row">


        <div class="columns large-3">
<div class="section sec-a">
<a href="#"><img src="/_assets/images/featured/pic.jpg" border="0" alt="" /></a>
<div class="sec-info">
<h4><a href="media/review">Book Review</a></h4>
<hr />
<p>Read a book review.</p>

</div>
<!-- //.sec-info -->
</div>
<!-- //.section.sec-a -->
</div>
<!-- //.columns.large-3 -->
<div class="columns large-3">
<div class="section sec-a">
<a href="media/cradio"><img src="/_assets/images/featured/pic.jpg" border="0" alt="" /></a>
<div class="sec-info">
<h4><a href="media/text">Link</a></h4>
<hr />
<p> Text goes here.</p>

</div>
<!-- //.sec-info -->
</div>
<!-- //.section.sec-a -->
</div>
<!-- //.columns.large-3 -->
<div class="columns large-3">
<div class="section sec-a">
<a href="giving"><img src="pic.jpg" border="0" alt="" /></a>
<div class="sec-info">
<h4><a href="giving">Heading</a></h4>
<hr />
<p> Text goes here.</p>

</div>
<!-- //.sec-info -->
</div>
<!-- //.section.sec-a -->
</div>
<!-- //.columns.large-3 -->
<div class="columns large-3">
<div class="section sec-a">
<a href="join"><img src="/_assets/images/featured/pic.jpg" border="0" alt="" /></a>
<div class="sec-info">
<h4><a href="join">Heading</a></h4>
<hr />
<p> Text goes here.</p>

</div>
<!-- //.sec-info -->
</div>
<!-- //.section.sec-a -->
</div>
<!-- //.columns.large-3 -->



 </div>
        <!-- //.row -->
        </div>
        <!-- //.omega -->
        <div class="sigma">
        <div class="row">
        <div class="columns large-12 text-center ornamental">
        <h2 class="alt secondary">Events</h2>
        </div>
        <!-- //.columns.large-12 -->
        </div>
        <!-- //.row -->
        <div class="row"> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="/_assets/js/moment.js"></script>
<script type="text/javascript">
$(function(){
	$('.date-fix').each(function(){
		var $root = $(this),
			$date = $root.text(),
			$moment = moment($date, 'DD-MMM-YYYY'),

$cleanDate = $moment.format('D MMM, YYYY')+" <em class='icon-calendar'>"+"</em>";

		$root.html($cleanDate);
	});
});
</script>
<div class="columns large-6">
<div class="section sec-b">
<a href="#"><a   href="/events-1/dinner"><img src="/_assets/images/events/img-list-9953.jpg" border="0" alt="" /></a><em class="icon-hover icon-link"></em></a>
<div class="sec-facts">
<span class="date-fix">25-Jun-2014</span>
</div>
<div class="sec-info">
<h4><a   href="#">Heading</a></h4>
<hr />
<p>

Text goes here.</p>
<p>
</p>
</div>
<!-- //..sec-info -->
</div>
<!-- //.section.sec-b -->
</div>
<!-- //.columns.large-6 -->
</div>
        <!-- //.row -->
        <div class="row">
        <div class="columns large-12">
        <div class="statement"> <p><strong>Text goes here.</p> </div>
        <!-- //.statement -->
        </div>
        <!-- //.columns.large-12 -->
        </div>
        <!-- //.row -->
        </div>
        <!-- //.sigma -->
        <div class="omega">
        <div class="row">
        <div class="columns large-12 text-center">
        <h2 class="alt">Blog &amp; News</h2>
        </div>
        <!-- //.columns.large-12 -->
        </div>
        <!-- //.row -->
        <div class="row">
        <div class="columns large-6">
        <h3>Latest Blog Post</h3>
        <article class="section sec-a">
<a href="/media/blog"><img alt="" src="/_assets/images/blog/img-473509.jpg" /><em class="icon-hover icon-link"></em></a>
<aside>
<p><span class="enlarge">26</span> Jun 2014</p>
<p><span class="enlarge">0</span> Comments</p>
</aside>
<h1><a href="#" title="">Heading</a></h1>
<p>

 Text goes here</p>
<a href="#" class="right button small secondary">Read More <em class="icon-chevron-right"></em></a>
</article>
 </div>
        <!-- //.columns.large-6 -->
        <div class="columns large-6">
        <h3>Latest News</h3>
        <article class="section sec-a">
<aside>
31-May-2014
</aside>
<h1><a   href="#">Heading</a></h1>
<p>

Text goes here.</p>
<a href="#" class="right button small secondary">Read More <em class="icon-chevron-right"></em></a>
</article>
 </div>
        <!-- //.columns.large-6 -->
        </div>
        <!-- //.row -->
        </div>
        <!-- //.omega -->
        <footer role="contentinfo">
        <div class="sigma">
        <div class="row">
        <div class="columns large-4"> <h4><em class="icon-reorder"></em>Heading</h4>
<p> Text goes here.</p>
<p class="bottom-half"><em class="icon-home"></em> Text goes here
</p>
<p class="bottom-half"><em class="icon-phone-sign"></em> Number goes here</p>
<p class="bottom-half"><em class="icon-envelope"></em> <a href="" style="color:#aba16f;">Email goes here </a>
</p> </div>
        <!-- //.columns.large-4 -->
        <div class="columns large-4"> <h4><em class="icon-reorder"></em>View our Photo Gallery</h4>
<p><a href="#"><img alt="" src="/_assets/images/photo-gallery-thumb.png" style="border: 0px;" /></a></p> </div>
        <!-- //.columns.large-4 -->
        <div class="columns large-4"> <h4><em class="icon-reorder"></em> Social Media </h4>
<p><a href="#"><img alt="" src="/_assets/images/facebook.png" style="border: 0px;" /></a></p> </div>
        <!-- //.columns.large-4 -->
        </div>
        <!-- //.row -->
        </div>
        <!-- //.sigma -->
        <div class="row">
        <div class="columns large-12"> <ul class="footer-links"><li  ><a href="/">Home</a></li><li  ><a href="/website/privacy">Privacy Policy</a></li><li  ><a href="/related-orgs">Related Organisations</a></li>
<li>Copyright © <script>document.write(new Date().getFullYear())</script> All Rights Reserved</li></ul> </div>
        <!-- //.columns.large-12 -->
        </div>
        <!-- //.row -->
        </footer>
        <!-- //footer -->
        <div class="meerkat">
        <div class="meerkat-contents">
        <h2>An announcement</h2>
        <p> An announcement: <span>Text here</span></p>
        <p class="close-message">Hide message</p>
        <p class="dont-show-message">Dont show messages</p>
        </div>
        </div>
        <script src="/_assets/js/foundation.min.js"></script>
<script src="/_assets/js/scripts.js"></script>
        <script type="text/javascript">
if (document.cookie && document.cookie.indexOf("CartID") < 1) {
document.getElementById('catCartSummary').style.display = "none";
}
</script>



</body>
</html>

Hi,

I couldn’t see any errors in how you are using the plugin, so something else has to be at play.

Could you post a link to a demo of this not working, as I have no way of referencing the files in your code above.
You can also send me a PM if you don’t want to post your site’s url.

Hi,

I got your PM. Thanks.

There are two problems here:

  1. You are including jQuery twice. Once in the <head> section and once on line 283.
  2. The plugin needs jQuery version 1.8. You are using 1.10, so you will either have to change this, or try using jQuery migrate.

If you change these two things, then the rest will work as expected.

Thanks so much for looking at this.

I’ll take a look at jQuery migrate to see if this will solve the problem.