<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="description" content="visible.event.js example" />
    <title></title>
    <!--[if lt IE 9]>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<![endif]-->
    <!--[if gte IE 9]><!-->
    <script src="http://code.jquery.com/jquery-2.0.3.js"></script>
    <!--<![endif]-->

    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  
    <script src="http://rawgithub.com/meetselva/attrchange/master/attrchange.js"></script>
    <script src="http://rawgithub.com/Soul-Master/visible.event.js/master/src/visible.event.js"></script>

    <link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel="stylesheet" />
</head>
<body>
    <div id="tabs">
        <ul>
            <li><a href="#tabs-1">Gif 1</a></li>
            <li><a href="#tabs-2">Gif 2</a></li>
            <li><a href="#tabs-3">Gif 3</a></li>
          <li><a href="#tabs-4">Gif 4</a></li>
     <li><a href="#tabs-5">Gif 5</a></li>
        </ul>
        <div id="tabs-1">
          <div style="padding-bottom: 54%; position: relative;">
<iframe allowfullscreen="" frameborder="0" height="100%" scrolling="no" src="https://gfycat.com/ifr/FreeEasyAplomadofalcon" style="left: 0; position: absolute; top: 0;" width="100%"></iframe>

        </div>  </div>
        <div id="tabs-2">
           <div style="padding-bottom: 54%; position: relative;">
<iframe allowfullscreen="" frameborder="0" height="100%" scrolling="no" src="https://gfycat.com/ifr/LegitimateMeekConey" style="left: 0; position: absolute; top: 0;" width="100%"></iframe>

        </div>
      </div>    <div id="tabs-3">
    <div style="padding-bottom: 54%; position: relative;">
<iframe src='https://gfycat.com/ifr/RecentPlumpHammerkop' frameborder='0' scrolling='no' width='100%' height='100%' style="left: 0; position: absolute; top: 0;" allowfullscreen></iframe>
     </div>     </div>
   <div id="tabs-4">
   <div style="padding-bottom: 54%; position: relative;">
<iframe allowfullscreen="" frameborder="0" height="100%" scrolling="no" src="https://gfycat.com/ifr/ReflectingCompleteIndianglassfish" style="left: 0; position: absolute; top: 0;" width="100%"></iframe></div>
   </div>
    <div id="tabs-5">
    <div style="padding-bottom: 54%; position: relative;">
<iframe allowfullscreen="" frameborder="0" height="100%" scrolling="no" src="https://gfycat.com/ifr/SpotlessImpracticalGermanspitz" style="left: 0; position: absolute; top: 0;" width="100%"></iframe></div>
    </div>
 </div>
</body>
</html>

$(function ()
  {
    $("#tabs").tabs();
    
    var tab = $('#tabs-2');
    var label = $('#lVisibility');
    
    label.text(tab.is(':visible'));
    tab.onVisibleChanged(function (e, isVisible)
                         {
                           label.text(isVisible);
                         });
  });
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.