<commit_before><!DOCTYPE html>
<html lang="en">
<head>
  <title>jQuery clickable demo</title>

  <link rel="stylesheet" media="screen" href="css/styles.css" />
</head>

<body>
  <h1>jQuery clickable demo</h1>

  <h2>Requirements</h2>
  <ul>
    <li>jQuery v1.9.x</li>
  </ul>

  <h2>Options &amp; defaults</h2>
  <table>
    <thead>
      <tr>
        <th>Option</th>
        <th>Default</th>
        <th>Description</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>clickable_child</td>
        <td>null</td>
        <td>Used to make a child element clickable of which the script was executed</td>
      </tr>
      <tr>
        <td>select_link</td>
        <td>null</td>
        <td>Used to specify which link to use within the clickable box should more than one link be found</td>
      </tr>
      <tr>
        <td>clickable_class</td>
        <td>clickable</td>
        <td>The class that gets added to elements which have been successfully initialized</td>
      </tr>
      <tr>
        <td>hover_class</td>
        <td>clickable-hover</td>
        <td>The class that gets added to the onHover state of clickable elements</td>
      </tr>
      <tr>
        <td>focus_class</td>
        <td>clickable-focus</td>
        <td>The class that gets added to the onFocus state of clickable elements</td>
      </tr>
      <tr>
        <td>url_prefixes</td>
        <td>['http://', 'https://', 'www.']</td>
        <td>An array of different prefixes that can appear before each link</td>
      </tr>
    </tbody>
  </table>

  <h2>Example: Link target</h2>
  <h3>Usage</h3>
  <pre> 
  &lt;script&gt;
    $(document).ready(function(){
      $('#clickable-box').find('.box').jqueryClickable();
    });
  &lt;/script&gt;
  </pre>

  <h3>Result</h3>
  <div id="clickable-box" class="wrap">
    <div class="box">
      <h4>Single link in target</h4>
      <p>A single link within the target. <a href="https://google.com">Google</a>. That will link the whole box!</p>
    </div><!-- /box -->

    <div class="box">
      <h4>Multiple same links in target</h4>
      <p>Multiple links within the target. <a href="https://google.com">Google</a>. But to the same place, so thats ok. <a href="https://google.com">Google</a>.</p>
    </div><!-- /box -->

    <div class="box">
      <h4>Link opens in new window</h4>
      <p>Best to avoid links opening in a new window, but just incase this should work. <a target="_blank" href="https://google.com">Google</a>.</p>
    </div><!-- /box -->

    <div class="box">
      <h4>Multiple different links - PLUGIN WILL IGNORE</h4>
      <p>Multiple links within the target. <a href="https://google.com">Google</a>. But to DIFFERENT places, so the plugin will ignore this. <a href="https://facebook.com">Facebook</a>.</p>
    </div><!-- /box -->
  </div><!-- /wrap -->


  <h2>Example: Link image</h2>
  <h3>Usage</h3>
  <pre> 
  &lt;script&gt;
    $(document).ready(function(){
      $('#clickable-image').find('.box').jqueryClickable({
        clickable_child : 'img'
      });
    });
  &lt;/script&gt;
  </pre>

  <h3>Result</h3>
  <div id="clickable-image" class="wrap">
    <div class="box">
      <h4>Single link in target</h4>
      <img src="image.gif" alt="" />
      <p>A single link within the target. <a href="https://google.com">Google</a>. That will link the whole box!</p>
    </div><!-- /box -->

    <div class="box">
      <h4>Multiple same links in target</h4>
      <img src="image.gif" alt="" />
      <p>Multiple links within the target. <a href="https://google.com">Google</a>. But to the same place, so thats ok. <a href="https://google.com">Google</a>.</p>
    </div><!-- /box -->

    <div class="box">
      <h4>Link opens in new window</h4>
      <img src="image.gif" alt="" />
      <p>Best to avoid links opening in a new window, but just incase this should work. <a target="_blank" href="https://google.com">Google</a>.</p>
    </div><!-- /box -->

    <div class="box">
      <h4>Multiple different links - PLUGIN WILL IGNORE</h4>
      <img src="image.gif" alt="" />
      <p>Multiple links within the target. <a href="https://google.com">Google</a>. But to DIFFERENT places, so the plugin will ignore this. <a href="https://facebook.com">Facebook</a>.</p>
    </div><!-- /box -->
  </div><!-- /wrap -->


  <h2>Example: Link image from heading</h2>
  <h3>Usage</h3>
  <pre> 
  &lt;script&gt;
    $(document).ready(function(){
      $('#clickable-image-from-heading').find('.box').jqueryClickable({
        clickable_child : 'img',
        select_link : 'h4'
      });
    });
  &lt;/script&gt;
  </pre>

  <h3>Result</h3>
  <div id="clickable-image-from-heading" class="wrap">
    <div class="box">
      <h4><a href="https://google.com">Single link in target</a></h4>
      <img src="image.gif" alt="" />
      <p>A single link within the target. <a href="https://facebook.com">Facebook</a>. That will link the whole box!</p>
    </div><!-- /box -->

    <div class="box">
      <h4><a href="https://google.com">Multiple same links in target</a></h4>
      <img src="image.gif" alt="" />
      <p>Multiple links but we only use the one in the header. <a href="https://facebook.com">Facebook</a>. But to the same place, so thats ok. <a href="https://facebook.com">Facebook</a>.</p>
    </div><!-- /box -->

    <div class="box">
      <h4><a target="_blank" href="https://google.com">Link opens in new window</a></h4>
      <img src="image.gif" alt="" />
      <p>Best to avoid links opening in a new window, but just incase this should work. Google.</p>
    </div><!-- /box -->

    <div class="box">
      <h4><a href="https://google.com">Multiple different links</a></h4>
      <img src="image.gif" alt="" />
      <p>Multiple links but we only use the one in the heading. <a href="https://facebook.com">Facebook</a>. <a href="https://hotmail.com">Hotmail</a>.</p>
    </div><!-- /box -->
  </div><!-- /wrap -->

  <script src="js/jquery/1.9.1/jquery.min.js"></script>
  <script src="../jquery.clickable.min.js"></script>
  <script>
    // Demo examples
    $(document).ready(function(){
      $('#clickable-box').find('.box').jqueryClickable();

      $('#clickable-image').find('.box').jqueryClickable({
        clickable_child : 'img'
      });

      $('#clickable-image-from-heading').find('.box').jqueryClickable({
        clickable_child : 'img',
        select_link : 'h4'
      });
    });
  </script>
  </body>
</html><commit_msg>changed demo to use uncompressed version<commit_after><!DOCTYPE html>
<html lang="en">
<head>
  <title>jQuery clickable demo</title>

  <link rel="stylesheet" media="screen" href="css/styles.css" />
</head>

<body>
  <h1>jQuery clickable demo</h1>

  <h2>Requirements</h2>
  <ul>
    <li>jQuery v1.9.x</li>
  </ul>

  <h2>Options &amp; defaults</h2>
  <table>
    <thead>
      <tr>
        <th>Option</th>
        <th>Default</th>
        <th>Description</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>clickable_child</td>
        <td>null</td>
        <td>Used to make a child element clickable of which the script was executed</td>
      </tr>
      <tr>
        <td>select_link</td>
        <td>null</td>
        <td>Used to specify which link to use within the clickable box should more than one link be found</td>
      </tr>
      <tr>
        <td>clickable_class</td>
        <td>clickable</td>
        <td>The class that gets added to elements which have been successfully initialized</td>
      </tr>
      <tr>
        <td>hover_class</td>
        <td>clickable-hover</td>
        <td>The class that gets added to the onHover state of clickable elements</td>
      </tr>
      <tr>
        <td>focus_class</td>
        <td>clickable-focus</td>
        <td>The class that gets added to the onFocus state of clickable elements</td>
      </tr>
      <tr>
        <td>url_prefixes</td>
        <td>['http://', 'https://', 'www.']</td>
        <td>An array of different prefixes that can appear before each link</td>
      </tr>
    </tbody>
  </table>

  <h2>Example: Link target</h2>
  <h3>Usage</h3>
  <pre> 
  &lt;script&gt;
    $(document).ready(function(){
      $('#clickable-box').find('.box').jqueryClickable();
    });
  &lt;/script&gt;
  </pre>

  <h3>Result</h3>
  <div id="clickable-box" class="wrap">
    <div class="box">
      <h4>Single link in target</h4>
      <p>A single link within the target. <a href="https://google.com">Google</a>. That will link the whole box!</p>
    </div><!-- /box -->

    <div class="box">
      <h4>Multiple same links in target</h4>
      <p>Multiple links within the target. <a href="https://google.com">Google</a>. But to the same place, so thats ok. <a href="https://google.com">Google</a>.</p>
    </div><!-- /box -->

    <div class="box">
      <h4>Link opens in new window</h4>
      <p>Best to avoid links opening in a new window, but just incase this should work. <a target="_blank" href="https://google.com">Google</a>.</p>
    </div><!-- /box -->

    <div class="box">
      <h4>Multiple different links - PLUGIN WILL IGNORE</h4>
      <p>Multiple links within the target. <a href="https://google.com">Google</a>. But to DIFFERENT places, so the plugin will ignore this. <a href="https://facebook.com">Facebook</a>.</p>
    </div><!-- /box -->
  </div><!-- /wrap -->


  <h2>Example: Link image</h2>
  <h3>Usage</h3>
  <pre> 
  &lt;script&gt;
    $(document).ready(function(){
      $('#clickable-image').find('.box').jqueryClickable({
        clickable_child : 'img'
      });
    });
  &lt;/script&gt;
  </pre>

  <h3>Result</h3>
  <div id="clickable-image" class="wrap">
    <div class="box">
      <h4>Single link in target</h4>
      <img src="image.gif" alt="" />
      <p>A single link within the target. <a href="https://google.com">Google</a>. That will link the whole box!</p>
    </div><!-- /box -->

    <div class="box">
      <h4>Multiple same links in target</h4>
      <img src="image.gif" alt="" />
      <p>Multiple links within the target. <a href="https://google.com">Google</a>. But to the same place, so thats ok. <a href="https://google.com">Google</a>.</p>
    </div><!-- /box -->

    <div class="box">
      <h4>Link opens in new window</h4>
      <img src="image.gif" alt="" />
      <p>Best to avoid links opening in a new window, but just incase this should work. <a target="_blank" href="https://google.com">Google</a>.</p>
    </div><!-- /box -->

    <div class="box">
      <h4>Multiple different links - PLUGIN WILL IGNORE</h4>
      <img src="image.gif" alt="" />
      <p>Multiple links within the target. <a href="https://google.com">Google</a>. But to DIFFERENT places, so the plugin will ignore this. <a href="https://facebook.com">Facebook</a>.</p>
    </div><!-- /box -->
  </div><!-- /wrap -->


  <h2>Example: Link image from heading</h2>
  <h3>Usage</h3>
  <pre> 
  &lt;script&gt;
    $(document).ready(function(){
      $('#clickable-image-from-heading').find('.box').jqueryClickable({
        clickable_child : 'img',
        select_link : 'h4'
      });
    });
  &lt;/script&gt;
  </pre>

  <h3>Result</h3>
  <div id="clickable-image-from-heading" class="wrap">
    <div class="box">
      <h4><a href="https://google.com">Single link in target</a></h4>
      <img src="image.gif" alt="" />
      <p>A single link within the target. <a href="https://facebook.com">Facebook</a>. That will link the whole box!</p>
    </div><!-- /box -->

    <div class="box">
      <h4><a href="https://google.com">Multiple same links in target</a></h4>
      <img src="image.gif" alt="" />
      <p>Multiple links but we only use the one in the header. <a href="https://facebook.com">Facebook</a>. But to the same place, so thats ok. <a href="https://facebook.com">Facebook</a>.</p>
    </div><!-- /box -->

    <div class="box">
      <h4><a target="_blank" href="https://google.com">Link opens in new window</a></h4>
      <img src="image.gif" alt="" />
      <p>Best to avoid links opening in a new window, but just incase this should work. Google.</p>
    </div><!-- /box -->

    <div class="box">
      <h4><a href="https://google.com">Multiple different links</a></h4>
      <img src="image.gif" alt="" />
      <p>Multiple links but we only use the one in the heading. <a href="https://facebook.com">Facebook</a>. <a href="https://hotmail.com">Hotmail</a>.</p>
    </div><!-- /box -->
  </div><!-- /wrap -->

  <script src="js/jquery/1.9.1/jquery.min.js"></script>
  <script src="../jquery.clickable.js"></script>
  <script>
    // Demo examples
    $(document).ready(function(){
      $('#clickable-box').find('.box').jqueryClickable();

      $('#clickable-image').find('.box').jqueryClickable({
        clickable_child : 'img'
      });

      $('#clickable-image-from-heading').find('.box').jqueryClickable({
        clickable_child : 'img',
        select_link : 'h4'
      });
    });
  </script>
  </body>
</html>
{'fraction_non_alphanumeric': 0.19806836188032897, 'fraction_numerical': 0.008300007545461405, 'mean_word_length': 2.3579934127185203, 'pattern_counts': {'":': 0, '<': 513, '<?xml version=': 0, '>': 513, 'https://': 44, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 12, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '7080686', 'n_tokens_mistral': 4565, 'n_tokens_neox': 4399, 'n_words': 1112}